在开始之前，可以先看看成品：https://wskh0929.gitee.io/my-hexo-fluid/

nodejs安装和环境配置-Windows

按照上面的流程安装完成后检测是否安装成功

Git 详细安装教程（详解 Git 安装过程的每一个步骤）

按照上面的流程安装完成后检测是否安装成功

在Windows搜索栏搜索cmd，找到命令提示符，右键，选择以管理员身份运行

输入命令安装Hexo：npm install -g hexo

输入命令，查看hexo是否安装成功：hexo -v

Gitee官网

可以在Gitee官网注册账号，注册账号可自行百度

账号注册后，登录账号，新建一个仓库

填写仓库相关信息

创建好仓库后默认会跳转到下面的页面。点击图中红框按钮，复制SSH

在一个空白目录下，右键，选择 Git Bash Here

输入 git clone 刚刚复制的链接

成功克隆后的界面

并且在刚刚空的目录下，生成了一个新目录

进入 my-hexo-fluid 目录下，打开命令提示符

输入命令（myblog是文件夹的名字，你也可以改成你想要的文件夹名）：hexo init myblog

这时候就成功生成了 myblog 目录，里面就是个人博客的一些配置文件

同样的方法，以管理员身份运行命令提示符

将当前目录切换到 myblog 目录下

输入命令：npm install

在网页上输入 http://localhost:4000/ 即可看到 Hexo 的页面

以管理员身份运行命令提示符，切换当前目录到 myblog 目录，然后输入命令：npm install --save hexo-theme-fluid

修改 myblog 目录下的配置文件，修改主题为：theme: fluid

在 myblog 目录下新建一个文件，命名为 _config.fluid.yml , 只要存在于 _config.fluid.yml 的配置都是高优先级，修改原 _config.yml 是无效的。以后我们就对 _config.fluid.yml 进行修改即可。

输入命令：hexo clean 和 hexo g

输入命令：hexo s，重新启动 Hexo

然后进入 http://localhost:4000/ 就可以看到 Fluid 主题已经切换了

注意：接下来修改配置，都是对 _config.fluid.yml 文件进行修改，在第五章，我会给出我改好的 _config.fluid.yml 配置文件，如果想快速上手，可以复制我的配置文件，里面有较详细的注释，大家可以根据自己的需求在上面改

主题配置中，每个页面都有名为 banner_img 的属性，可以使用本地图片的相对路径，也可以为外站链接，比如：

指向本地图片：

指向外站链接：

注意： 如果是本地图片，目录文件夹可自定义，但必须在 source 目录下，博客与主题的 source 目录最终会合并，因此优先选择博客的 source。 图片大小建议压缩到 1MB 以内，否则会严重拖慢页面加载。

页面顶部大图高度设置：

鉴于每个人的喜好不同，开放对页面 banner_img 高度的控制。 主题配置中，每个页面对应的 banner_img_height 属性，有效值为 0 - 100。100 即为全屏，个人建议 70 以上。

页面顶部大图蒙版透明度设置：

主题配置中，每个页面对应的 banner_mask_alpha 属性，有效值为 0 - 1.0， 0 是完全透明（无蒙版），1 是完全不透明

注意： 每篇文章可单独设置 Banner，具体见文章页设置 本主题不支持固定背景（fixed），原因：

页面左上角的博客标题，默认使用站点配置中的 title，这个配置同时控制着网页在浏览器标签中的标题。 如需单独区别设置，可在主题配置中设置：

另外支持二级菜单（下拉菜单），配置写法如下：

懒加载又称延迟加载。开启后，当图片或评论插件滚动到可见范围内才会加载，可以大幅提高打开网页的速度。 该功能默认开启，可以在主题配置中修改参数：

所有页面统一字体的字号和字族可以通过主题配置中的下列配置项设置：

关于字体族（font-family）如果不了解可以看 这篇文章 先了解一下。 需要注意： 最好使用系统自带的字体，否则需要通过 自定义 JS / CSS / HTML 额外引入 @font-face，字体一般较大，不建议引入； 应当至少添加一个通用的字体族名（如 serif，具体见上方链接文章）。

如果想设置单独的页面，可以直接在 markdown 里通过 style 标签实现：

目前支持多种统计网站，开启后按需填入 Key 或 ID 即可。

页脚可以展示 PV 与 UV 统计数据，目前支持两种数据来源：LeanCloud 与 不蒜子。 相关主题配置如下：

注意： 不蒜子不需要申请账号，直接开启即可，但有时候会响应缓慢拖慢整个页面加载。 不蒜子在 localhost 域名下显示的不是真正的数据，因此无需在意。 LeanCloud 使用前需要申请账号（国内需要身份认证），然后在 web_analytics 配置项中将 leancloud API 相关参数填上才能生效。 LeanCloud 在 localhost 域名下不会增加数据。 如果参数填写错误或者接口异常，不会显示数据，请在浏览器控制台排查具体原因。

不同语言会影响一些主题自带的文字。 你可以在主题 languages 目录里查看支持哪些语言，只要上面的配置的值和文件名相同即可。

当你的域名升级到 HTTPS 后，可能之前存在部分图片等资源使用的是 HTTP，这时混用出现网页报错，造成图片无法显示。 控制台里也会出现报错：Mixed Content: The page at 'https://xxx' was loaded over HTTPS。 这种情况可以在主题配置中开启此配置，即可将所有请求强制升级为 HTTPS（如是外部资源，需要本身支持 HTTPS）：

如果你的博客部署在二级路径（如: xxx.com/blog/），需要修改站点配置中：

如果你想引入外部的 JS、CSS（比如 IconFont）或 HTML，可以通过以下主题配置，具体见注释：

另外 custom_js 和 custom_css 都可以指定多个路径：

主题暗色模式，开启后菜单中会出现切换按钮

default 是暗色默认的模式，可选参数：auto / light / dark

OpenGraph 是 Facebook 发布的一套网页元信息标记协议，可以让任何页面成为社交平台中的富媒体标签。

本主题基于 Hexo 内置方法 实现了该功能，并且默认开启，但如果想在 Facebook 等平台更好地使用，需要在主题配置完善如下配置项：

另外你可以在 Front-matter 设置字段来指定单个页面的 OpenGraph 属性：

首页大图中的标题文字，可在主题配置中设定是否开启：

注意： 请求 API 的功能必须同时开启打字机动效才能生效

开关自动摘要（默认开启）：

若要手动指定摘要，使用 MD文档里划分，如：

或者在 Front-matter 里设置 excerpt 字段，如：

注意： 优先级: 手动摘要 > 自动摘要 如果关闭自动摘要，并且没有设置手动摘要，摘要区域空白 无论哪种摘要都最多显示 3 行，当屏幕宽度不足时会隐藏部分摘要。

可选值： _blank：新标签页打开 _self：当前标签页打开

可配置隐藏包括发布时间、分类、标签。

经过测试，如果首页的文章列表中没有略缩图和摘要，标题+文章信息的显示方式会使页面过于拥挤，所以给出此项配置供喜欢首页只显示文章标题的同学使用。

如果想把某些文章隐藏起来，不在首页和其他分类里展示，可以在文章开头 Front-matter 中配置 hide: true 属性。

注意： 隐藏会使文章在分类和标签类里都不显示 隐藏后依然可以通过文章链接访问

如果想手动将某些文章固定在首页靠前的位置，可以在安装 hexo-generator-index >= 2.0.0 版本的情况下，在文章开头 Front-matter 中配置 sticky 属性：

sticky 数值越大，该文章越靠前，达到类似于置顶的效果，其他未设置的文章依然按默认排序。 当文章设置了 sticky 后，主题会默认在首页文章标题前增加一个图标，来标识这是一个置顶文章，你可以通过主题配置去关闭或修改这个功能：

icon 可以通过 自定义图标 修改为其他图标。

对于单篇文章，在文章开头 Front-matter 中配置 index_img 属性。

当 default_index_img 和 index_img 都为空时，该文章在首页将不显示图片。

默认显示主题配置中的 post.banner_img，如需要设置单个文章的 Banner，在 Front-matter 中指定 banner_img 属性。

本地图片存放位置同上。

本地图片存放位置同上。

显示在文章页大标题下的文章信息，除了作者和阅读次数，其他功能都是默认开启的

注意： 日期格式必须遵循 ISO-8601 规范，否则无法正常显示； 其他格式必须包括 {} 符号代替数字，文字可自由设置。

开启评论需要在主题配置中开启并指定评论模块：

然后在下方还要设置对应评论模块的参数，比如 disqus 对应设置：

当前支持的评论插件如下：

推荐教程：【个人博客】Hexo 集成 Valine 评论功能

主题内置了脚注语法支持，可以在文章末尾自动生成带有锚点的脚注，该功能在主题配置中默认开启：

脚注语法如下：

更优雅的使用方式，是将脚注写在文末，比如：

当然你也可以通过修改上方配置项 header 来自动加入节标题，如下所示：

在 markdown 中加入如下的代码来使用便签：

或者使用 HTML 形式：

标签

可选便签：

在 markdown 中加入如下的代码来使用 Label：

或者使用 HTML 形式：

可选 Label：

在 markdown 中加入如下的代码来使用 Checkbox：

示例：

你可以在 markdown 中加入如下的代码来使用 Button：

或者使用 HTML 形式：

如果想把多张图片按一定布局组合显示，你可以在 markdown 中按如下格式：

如下图为 {% gi 5 3-2 %} 示例，代表共 5 张图，第一行 3 张图，第二行 2 张图。

注意： Hexo 5.0 以上，可尝试 Hexo 官方的 hexo-math 插件，支持更多定制化参数，使用方式参照链接内的文档，以下介绍的是主题内置的 LaTeX 功能。

当需要使用 LaTeX 语法的数学公式时，可手动开启本功能，需要完成三步操作：

1. 设置主题配置

2. 更换 Markdown 渲染器

由于 Hexo 默认的 Markdown 渲染器不支持复杂公式，所以需要更换渲染器（mathjax 可选择性更换）。

然后根据上方配置不同的 engine，推荐更换如下渲染器：

mathjax（并且还需安装 Pandoc ）

katex

然后在站点配置中添加：

3. 安装完成后执行 hexo clean

书写公式的格式：

当需要使用 Mermaid 渲染流程图时，可手动开启本功能：

注意： 自定义页面默认不加载，如需使用，需在 Front-matter 中指定 mermaid: true

自定义页面默认不加载，如需使用，需在 Front-matter 中指定 mermaid: true

也可以通过代码块书写：

首次使用主题的「关于页」需要手动创建，以管理员身份运行命令提示符，切换到myblog目录：

创建成功后修改 /source/about/index.md，添加 layout 属性。（layout: about 必须存在，并且不能修改成其他值，否则不会显示头像等样式。）

修改后的文件示例如下：

在关于页介绍自己的基础信息，可以在主题配置中设置：

在主题配置中设置：

开启评论的方式是通过在 Front-matter 设置 comment: bool 来控制评论开关，或者通过 comment: ‘type’ 来开启指定的评论插件。

在配置文件中加入下面代码：

友情链接页用于展示好友的博客入口，默认关闭，开启需要先在 navbar 项中将 links 的注释(#号)删掉：

然后找到 links 的配置项，对页面内容进行配置：

如果想单独生成一个页面，步骤和创建「关于页」类似。

1. 首先用命令行创建页面：

2. 创建成功后编辑博客目录下 /source/example/index.md：

正文默认没有 Markdown 样式，如果希望和文章相同的样式，可以加上：

页面的参数配置可以在主题配置中统一设置：

也可以直接在 Front-matter 里单独设置：

自定义页面也可以开启评论插件，和关于页的方式相同，通过在 Front-matter 设置 comment: bool 来控制评论开关，或者通过 comment: 'type' 来开启指定的评论插件：

_config.yml（不是复制完就可以直接用的，需要根据你的信息修改一些配置）

_config.fluid.yml（不是复制完就可以直接用的，需要根据你的信息修改一些配置）

在 _config.yml 文件中加入下面的配置（注意不是修改 _config.fluid.yml 噢！）

执行以下命令上传

如果 hexo d 的时候出现了下面的错误，这是因为没安装 hexo-deployer-git 插件，在站点目录（myblog）下输入命令安装就好了：npm install hexo-deployer-git --save

在 git 项目的最外层打开 Git Bash Here

下面是正常 hexo d 完的情况

然后，进入 Gitee 中的仓库点击 Gitee Pages，将项目发布到 Gitee Pages

进入Gitee Pages 需要申请，申请时需要上传自己的身份证正反面照片与手持身份证照片，一般申请成功后一到两个工作日就会开通

如果出现下面的情况，只需要将仓库设置为公开即可

勾选“强制使用HTTPS”，然后点击启动

如果出现下面的错误，则只需要将对应文件删除即可（删除完记得在本地重新部署）（虽然删除文件可能导致运行不正常，但是我为了方便，就是这么做的，网上貌似也没有很好的解决方案）

然后点击“更新”，重新部署即可，下面是部署成功的界面（如果有新的代码提交后，需要点击更新重新部署才可）

访问博客