一个坏掉的番茄的主页
嗯哼，你想为网站装上如此酷炫的主页吗?
下面就让我们开始吧！
- Nodejs 6.0 以上
- Git 可用
git clone https://github.com/Tomotoes/HomePage.git
cd HomePage
npm install
npm run dev- 高度封装了页面中的所有的信息
- 使用
scss作为css预处理器 - 使用
pug作为html预处理器 - 使用
gulp作为构建工具, 并以配置好构建脚本 - 令人舒服的动画 , 以及漂亮的
UI - 响应式，无缝支持移动端
- 所引用的
css与js文件总共超不过18.5kb! - 延迟响应切换页面事件
- 根据时间动态设置背景
- 还有很多特性留给你探索...
根据项目特点,一共分为两大类 ：
intro首屏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")配置信息默认开启了 supportAuthor 选项，即支持作者。
所有的支持项如下：
- 会在首页右上角显示
章鱼猫 - 控制台会打印作者的站点信息
你可以设置其值为 false 来关闭这一行为。
项目中的图标，全部来自 阿里巴巴矢量图标库
替换步骤如下:
- 请选择好你的图标，添加到项目后，把颜色全部调成白色。
- 点击 Font Class 方式
- 复制生成的链接中的内容
- 替换 文件
css/common/icon.scss中的内容 ，其中icon选择器中的内容必须保留。 - 配置
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 举例：
-
新建
你的用户名.github.io仓库 -
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
-
然后在
Github设置好仓库的GithubPage选项 -
访问
你的用户名.github.io即可浏览啦！
假如你之前的用户名.github.io仓库已经有内容了,可以新建另一个的仓库，比如blog。
再将所占用项目迁移到blog，并设置好这个仓库的GithubPage 选项。
而这个仓库即成为了一个子目录用户名.github.io/blog。
如此一来，你的用户名.github.io仓库便可留给首页了！
开发一个优秀的项目，离不开大量时间和精力的投入。
如果此项目给你带来了帮助，欢迎赞助,star。
谢谢！
此项目基于 LGPL-3.0 协议。