0. 前言

通过 hexo 和 github pages 已经搭建好了个人blog框架，也替换了自己喜欢的 hexo 主题样式，将blog部署后在线上查看，网站样式大体上是和模板样式一致的，但是还是有一些区别：文章页面的字数统计和预计时长未显示、各导航页面的大图展示样式不一致等问题。这篇文章就是通过查看 fuild 主题配置文档和 Hexo 配置文档进行解决这些问题。

1. 主题配置

1.1 文章页-字数统计和预计时长

按照 开始使用 | Hexo Fluid 用户手册 (fluid-dev.com) 完成 fluid 主题安装后，首先发现的问题就是在文章页面-文章标题下的字数统计以及预估时长显示错误，展示为 {undefined}字 {undefined}分钟，于是我便意识到这应该是配置项没有配置到位，接下来便开始查看文档的漫漫长路。

首先是在 配置指南 | Hexo Fluid 用户手册 (fluid-dev.com) 的“日期/字数/阅读时长/阅读数”章节中找到配置规范：

# 显示在文章页大标题下的文章信息，除了作者和阅读次数，其他功能都是默认开启的。
post:
  meta:
    ···
    ···
    wordcount:  # 字数统计
      enable: true
      format: "{} 字"  # 显示的文本，{}是数字的占位符（必须包含)，下同
    min2read:  # 阅读时间
      enable: true
      format: "{} 分钟"
    ···
    ···

然后在通过对比我本地blog源文件中名为 _config.fluid.yml 的主题配置文件的内容时，发现在该文件中 wordcount 和 min2read 部分缺少字段 format: "{} 字" 和 format: "{} 分钟"，配置项的缺失导致了最后部署的静态网页该部分未正常展示。解决方法是也很简单，只需要将本地的 _config.fluid.yml 主题配置文件的 wordcount 和 min2read 部分补充完整，然后重新发布即可；

1.2 导航页面的大图展示样式

第二个发现的问题便是网站各导航页面（ 首页 | 归档 | 分类 | 标签 | 关于 ）的大图展示高度不一致，这对于我来说可太不舒服了，于是准备看看能不能将它们都配置成同样的显示高度。这次直接查看主题配置文件 _config.fluid.yml 中有没有相关的配置项可供使用，啪~很快啊，我便发现了如下的内容：

# 首页
index:
  ···
  ···
  # 头图高度，屏幕百分比
  # Height ratio of banner image
  # Available: 0 - 100
  banner_img_height: 100
  ···
  ··· 

除了在首页的配置项下面找到了该字段 banner_img_height ，也在文章 post 、归档 archive 、分类 category 、 标签 tag 、 关于 about 、 自定义 custom 、 404页 page404 中找到了相关设置图片高度的字段 banner_img_height ，那么接下来的操作便简单了，只需要将该字段设置成同一个值就行。

另外我在查看主题配置文件 _config.fluid.yml 中的时候发现该文件的注释十分详细，完全可以当作一个配置文档来进行使用，如果还是有不懂的地方也可以直接查看 fuild 主题配置文档 | Hexo Fluid 用户手册 和 Hexo 配置文档 。

2. 参考

• 配置指南 | Hexo Fluid 用户手册
• Front-matter | Hexo
• 文档 | Moment.js 中文网 (momentjs.cn)