整体风格是简约风，再加上首页炫酷的流动背景，非常的Nice

效果图

页面生成及其配置

项目仓库：Github仓库

准备工作：

1.环境需求：

Node.js 10 - 12 版本 （官方说6.0以上，但是不要超过12版本）

Git 可用（要是 Windows 的话，直接用 CMD 终端就好，不需要装 Git，Linux 没试过）

注：这个地方有个大坑，就是这里用到了一个插件 node-sass@v4.12.0 这个插件不能升级，必须用这个版本，而且这个插件有点特殊，就是它的每个版本都得用对应的 Node.js 版本，这是对应表：

一定查看一下自己的 Node.js 版本，使用 node -v 即可查看。若版本过高，需要卸载换低版本。

2.克隆仓库：

git clone https://github.com/Tomotoes/HomePage.git

3.安装依赖：npm install

注：这个地方下载很慢，然后我就试了试淘宝镜像的 cnpm ，但是一直报错，可能是 Node.js 版本有点低的事，我也没继续研究，直接挂的代理，用 npm 安装的依赖。

4.本地预览：npm run dev

基本配置

配置文件 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 选项，即支持作者。
所有的支持项如下：
会在首页右上角显示 章鱼猫
控制台会打印作者的站点信息
如需关闭，请设置 intro.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目录部署到你喜欢的服务器托管商。