Skip to content

README.zh_CN.md

Latest commit

 

History

History
186 lines (112 loc) · 4.75 KB

README.zh_CN.md

File metadata and controls

186 lines (112 loc) · 4.75 KB

Tomotoes-HomePage

支付宝赞助按钮

微信赞助按钮

English Version

项目简介

一个坏掉的番茄 的主页

在线浏览

嗯哼，你想为网站装上如此酷炫的主页吗?

下面就让我们开始吧！

必备条件

  • Nodejs 6.0 以上
  • Git 可用

安装步骤

git clone https://github.com/Tomotoes/HomePage.git
cd HomePage
npm install
npm run dev

功能特性

  1. 高度封装了页面中的所有的信息
  2. 使用 WebGL-Fluid-Simulation 作为背景
  3. 使用 scss 作为 css 预处理器
  4. 使用 pug 作为 html 预处理器
  5. 使用 gulp 作为构建工具, 并以配置好构建脚本
  6. 令人舒服的动画 , 以及漂亮的 UI
  7. 响应式，无缝支持移动端
  8. 所引用的 css 与 js 文件总共超不过 18.5 kb!
  9. 延迟响应切换页面事件
  10. 还有很多特性留给你探索...

项目结构

根据项目特点,一共分为两大类 ：

  1. intro 首屏
  2. main 副屏

相应的函数，样式，配置也是根据此标准来的。

基本配置

配置文件 config.json 中的每一项键名 , 都与相应的组件名所对应。

比如：

{
	"head": {
		"title": "一个坏掉的番茄",
		"description": "Author:SimonMa,Category:Personal Blog",
		"favicon": "favicon.ico"
	}
}

上面的配置信息就对应着下面 layout/head.pug 组件中的信息。

head
	title #{head.title}
	meta(charset="utf-8")
	meta(name="Description" content=`${head.description}`)
	link(rel="icon" href=`${head.favicon}` type="image/x-icon")

高级配置

WebGL-Fluid-Simulation

首页使用WebGL-Fluid-Simulation作为背景。

如需关闭，请设置intro.background: false。

supportAuthor

配置信息默认开启了 supportAuthor 选项，即支持作者。

所有的支持项如下：

  1. 会在首页右上角显示 章鱼猫
  2. 控制台会打印作者的站点信息

如需关闭，请设置intro.supportAuthor: false。

图标的替换

项目中的图标，全部来自 阿里巴巴矢量图标库

替换步骤如下:

  1. 请选择好你的图标，添加到项目后，把颜色全部调成白色。
  2. 点击 Font Class 方式
  3. 复制生成的链接中的内容
  4. 替换 文件 css/common/icon.scss 中的内容 ，其中 icon 选择器中的内容必须保留。
  5. 配置 config.json 文件中的相应项 main.ul.*.icon
.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
	font-family: 'iconfont' !important;
	font-size: inherit;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

项目部署

在根目录下执行npm run build 后，会将项目文件生成到 dist 目录。

然后，你可以将dist目录部署到你喜欢的服务器托管商。

下面以GithubPage 举例：

  1. 新建 你的用户名.github.io 仓库

  2. cd dist
git init 
git add -A
git commit -am"init"
git remote add origin https://github.com/你的用户名/你的用户名.github.io.git
git push -f origin master

  3. 然后在Github设置好仓库的GithubPage 选项

  4. 访问 你的用户名.github.io 即可浏览啦！

假如你之前的用户名.github.io仓库已经有内容了,可以新建另一个的仓库，比如blog。

再将所占用项目迁移到blog，并设置好这个仓库的GithubPage 选项。

而这个仓库即成为了一个子目录用户名.github.io/blog。

如此一来，你的用户名.github.io仓库便可留给首页了！

赞助

开发一个优秀的项目，离不开大量时间和精力的投入。

如果此项目给你带来了帮助，欢迎赞助,star。

谢谢！

协议

此项目基于 LGPL-3.0 协议。