博客装修记之Fluid初探

个人博客的一个重要乐趣源于其高度可定制性。这一特点对能力强、爱折腾的技术极客想必颇具吸引力。然而，博主在前端技术栈上的造诣约等于 0， 显然不在此列。 但是，作为一个多多少少讲究生活情趣且多少爱折腾的人，还是希望装点一下自己的小天地。缘此，博主选择直接部署大佬们开发的博客主题。经过挑选，决定使用 Fluid 主题。

1. 部署过程

Fluid 是一款扁平化、卡片式风格的主题，主页标语的打字机动画深得吾心。Fluid 部署过程非常简单，参考用户手册即可。在博客路径下打开 Git Bash 命令行界面，运行以下指令，安装该主题

npm install --save hexo-theme-fluid

然后，在博客目录下创建 _config.fluid.yml 文件, 并将主题配置文件中的内容复制进去。另外 Hexo 自带配置文件 _config.yml，被称为站点配置文件。 主题配置文件优先级更高，会覆盖站点配置文件中的设置。为使用这款主题，只需要简单的指定 _config.yml 中的 theme 关键字即可， 同时还可以指定中文显示

theme: fluid
language: zh-CN

最后，按照手册中的要求，可以手动创建关于页。运行指令

hexo new page about

该命令会在博客目录的 source 文件夹下创建 about 文件夹，并生成 index.md 文件 (可添加个人介绍)，同时，还需要指定 layout 为 about (该 layout 是由主题定义的)。大功告成， 重新生成页面并上传即可看到崭新的博客页面~

2. 个性化页面元素

_config.fluid.yml 中提供了丰富的可定制化选项。结合 _config.yml，可以非常容易的打造个性化的博客页面。博主设置了页面标题、标语、页面大图等页面元素，主要参考用户指南。具体来看，博主仅设置了以下几项：

• 页面标题修改：修改 _config.yml 中的 title 字段。
• 浏览器标签的图标： 修改 _config.fluid.yml 中的 favicon 字段， 提供图片相对于 source 文件夹的路径。
• 博客页面标题：修改 _config.fluid.yml 中的 blog_title 字段（对应于页面导航栏左端的标题）。
• 开启友链页面： 在 _config.fluid.yml 中取消 menu 关键字下 links 的注释； 进一步可在 links 页面中进行配置。
• 自定义页面大图：在 _config.fluid.yml 中 index、post 字段下设置 banner_img 相对于 source 文件夹的路径。
• 开启导航栏毛玻璃特效：即在页面滚动时导航栏呈现毛玻璃效果。可在 _config.fluid.yml 的 navbar 字段中开启 ground_glass。
• 自定义主页标语：在 _config.fluid.yml 中设置 index 页面的 slogan 字段。
• 显示文章最近更新： 在 _config.fluid.yml 中设置 post 页面下的 updated 字段。
• 个性化 about 页面： 在 _config.fluid.yml 中设置头像、简介等内容。
• 开启页面浏览计数：在 _config.fluid.yml 中设置 footer 的 statistics 字段， 数据来源选择 busuanzi （与 leancloud 相比，减少了额外配置和注册的步骤）； 同时修改 post 页面中的 views 关键字，允许浏览量计数。

经过以上初步配置（并重新生成、上传），博客页面渐渐有了个人辨识度，nice！

3. 开启评论功能

虽然博主搭建个人博客的主要目的是记录，但是如果能有互动功能，以及建立 connection 的机会，当然是锦上添花。Fluid 提供了多种评论系统，但是需要折腾的程度各有千秋。博主选择了一种相对容易的方式，即使用 utterances。

utterances 是基于 github 仓库 issues 实现的评论功能，支持简单的表情，功能也挺完善，基本满足需求。具体配置步骤如下：

• 第一步：在 _config.fluid.yml 中开启评论功能 (post 页面中设置 comments 关键字)，并设置 type 为 utterances。
• 第二步：新建 github 仓库用于存放评论，并设置为 public。
• 第三步：为新建的仓库安装 utterances app。
• 第四步：配置 utterances 中的以下项目：
  • 指定 repo 为新建仓库，即 <Github Username>/<Repo Name>
  • 设置 Issue Mapping 为 Issue title contains page pathname (即 issue 会以网页的 title 作为标题)
• 第五步：在 _config.fluid.yml 中填写 utterances 的 repo、issue_term、theme、label（可不填写）、crossorigin 字段， 示例如下

utterances:
  repo: xxxxx/blog-comments
  issue_term: pathname
  label:
  theme: github-light
  theme-dark: github-dark
  crossorigin: anonymous

完成以上步骤后，重新生成页面，即可看到每个文章页面底部都增加了评论框。

注意：不能违反相关法律法规。

4. 初步 SEO

SEO 即搜索引擎优化 ( Serach Engine Optimization )，目的是提高搜索引擎的检索率，从而扩大影响力。博主其实并没有多少推广需求，但是个人博客如果能发挥名片的作用，还是相当不错的。因此，博主对网页做了简单的 SEO。 主要是在 _config.yml 中设置了页面的 keywords 字段， 同时简单优化了页面的 URL。

Hexo 博客文章默认的 URL 包括一长串的日期，导致链接过深，对搜索引擎并不友好。因此，应当适当的缩短链接。缩短链接可以直接在 _config.yml 中设置 permlink， 删除日期，保留文章标题即可。但是，博主可能需要发布中文文章，以标题作为 URL 多少不够优雅。因此，博主安装了 hexo-abbrlink 插件

npm install hexo-abbrlink --save

在 _config.yml 中进行如下设置

permlink: :abbrlink.html
# 若在博文 Front-matter 中自定义 abbrlink，则注释下面 3 行。
abbrlink:             
  alg: crc32
  rep: hex

这样，插件会根据标题生成固定长度的编码作为博文的链接。如果希望自定义 abbrlink， 则可以注释掉所标注的 3 行字段，并在每篇博文的 Front-matter 中指定 abbrlink

abbrlink: 2023-hexo-fluid-deployment

SEO 优化还有很多其它技巧，包括生成站点地图、添加主动推送等， 这些就留到以后再折腾吧···

如果是在 vscode 中打开 markdown 文档编辑 abbrlink，需要注意不能同时本地预览页面，即需要 Ctrl+C 退出 hexo s，否则会导致文档无法保存。

总结

一番折腾后，博主的博客页面终于有了极大改观。总的来说，利用现有框架搭建博客并进行个性化定制对新手非常友好，还能带来自由 DIY 的无穷快感。当然，目前博主进行的页面优化还是很初步的，增添其它更丰富的功能还需要进一步的探索。折腾无止境，让我们一起来折腾吧~