从 Material-T 到 Fluid

关于项目转移

用 Material-T 的同学应该注意到了，Material-T 已经更名为 Fluid 并转移到了 Fluid-dev 组织。之前在 issue #74 里简单解释了一下，其实原因也就是那么简单，我觉得 Material-T 交给社区比在我手里更靠谱，之前跟 @zkqiang 老哥合作开发的过程很流畅，也让我确信社区合作式的工作流不会增加时间成本（废话😂）。

下面简单说一下最近的更新，写完这篇以后就不再针对主题的更新水博客了，Release 里写的很清楚，我再 bb 就没必要了。

新功能

配置自动合并

对于 Hexo 主题更新这个大难题，总归是做了一次尝试，从 Theme configurations using Hexo data files 学来的（NexT 牛逼），现在体验还不错。

思路就是利用 Hexo 的数据文件功能，此功能要求 Hexo 3.0+。

有时您可能需要在主题中使用某些资料，而这些资料并不在文章内，并且是需要重复使用的，那么您可以考虑使用 Hexo 3.0 新增的「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件，如此一来您便能在网站中复用这些文件了。

具体配置请参考文档和 实现平滑升级。

自定义静态资源地址

(v1.5.0 版本及以上)如果需要使用 CDN 或其他方式存放静态资源：将 _static_prefix.yml 复制到博客根目录的 /source/_data/ 中，重命名为 fluid_static_prefix.yml并按自己的需求修改配置。若 _data/fluid_static_prefix.yml 存在则会自动覆盖 /theme/fluid/_static_prefix.yml。

博客托管在 GitHub Page 的话可能对有些地区访问速度不太友好，所以可以将第三方的资源引用改为靠谱的公共 CDN 服务商，比如 cdnjs、jsDelivr。有家底的同学可以用自己的 CDN 服务。

比如我的博客是托管在 GitHub Pages 的，国内访问速度不理想，而 jsDelivr 有在大陆部署节点，而且可以直接缓存 GitHub 仓库中的文件，所以选择 jsDelivr 优化一下加载速度。比如 fluid/source/lib/ 中的各种第三方库，我用 https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib 作为前缀，这个 url 的各个部分的意思即为：

gh => 从 GitHub 拉取资源
fluid-dev/hexo-theme-fluid => github.com/fluid-dev/hexo-theme-fluid 仓库
@1.5.0 => 指定版本 release v1.5.0
source/lib => 仓库的相应目录

这里只针对 source/lib 目录下的资源，是因为 source/js source/css source/img 的文件较小且没有全部用到，没必要上 CDN，而且 CSS 文件需要实时编译。source/lib 下的文件是稳定的，直接引用就可以了。

上述方式修改之后的 fluid_static_prefix.yml：

internal_js: /js
internal_css: /css
internal_img: /img

anchor: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/anchor

font_awesome: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/font-awesome

github_markdown: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/github-markdown

jquery: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/jquery

bootstrap: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/bootstrap

mdbootstrap: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/mdbootstrap

popper: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/popper

prettify: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/prettify

prettify_theme: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/prettify

tocbot: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/tocbot

typed: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/typed

经过测试，效果是很显著的，原本不挂代理需要 10s 左右才能显示轮廓的首页，使用 jsdelivr 配合懒加载功能，现在不挂代理也仅仅需要 1s。以后在更新的时候只需要把 1.5.0 改为相应的版本号即可。

当然也可以选择各个第三方库对应的 CDN，但要注意选用对应的版本。

lazyload

Fluid 也算是比较靠图片的主题，优秀的图片搭配会引导整个站点的风格。为了提高首屏加载速度（主要是我也不会优化其他的…），给图片做了懒加载，只有出现在视口的图片才会加载 现在是提前一段滚动距离加载。本想用现成的 lazysizes 库实现，但是实践的时候刷到了 图片 lazyload 的学问和在 Hexo 上的最佳实践，其中提到的思路是利用 srcset 属性优先级高于 src 的特性，既保证不支持 srcset 的爬虫、RSS 阅读器等可以读到 src 属性不至于抓取到一个有空白占位图的页面中，又可以让页面初次渲染的时候只加载很小的 loading 图。具体的实现参考了文中的代码，填了一些坑。

其他

  • 新配置项 about.md_path 用于指定 about.md 的路径
  • i18n && 中英 README 什么叫国际化主题啊（战术后仰）
  • 向下滚屏 && 向顶部滚屏

优化

  • 新 logo
  • 延迟打字机效果：#65
  • 统一默认的 banner_img：精简主题包大小，统一默认的风格
  • 可以指定 about.md 的存放位置：方便实现平滑更新
  • 优化首页文章摘要区的高度限制：当手动设置摘要时（摘要优先级：手动 > 自动），首页文章摘要区的高度不再锁定。方便喜欢不加文章缩略图的同学展示更多文章内容。如果已为文章添加首页缩略图，建议开启自动摘要或手动设置字数合适的摘要。

bug fix

  • 修复 valine 加载问题
  • 移除顶部进度条
  • 修复读取文件时路径错误

平滑更新指北

当前利用了数据文件的 Fluid 已经可以实现平滑更新了：下载最新 Release 并解压、改名、直接覆盖原主题即可。 当然需要做以下前提准备：

  1. 在 Hexo 的 source 目录下新建 _data 文件夹
  2. 将 Fluid 中的 _config.yml 和 _static_prefix.yml 拷贝到步骤 1 的文件夹中，分别改名为 fluid_config.yml 和 fluid_static_prefix.yml
  3. 将自定义的资源文件移动到主题之外，比如图片存放到 /source/images/，about.md 存放到 /source/about.md
  4. 将主题配置中的 banner_img、about.md 修改为上一步自定义的存放位置。比如按照如上配置的话，图片链接就是 /img/your_img_name.png，about.md 的位置就是 ../../source/about.md
  5. 下次更新就只需要用新的 Release 覆盖旧 Fluid 文件夹就可以了。当然也需要关注一下更新内容有没有涉及到配置文件或静态资源文件，及时更新存放在 /source/_data 下的数据文件