新特性

在这里记录我手搓本博客主题的一些感受，哈哈。

排序时间从近到远。

图片排版

默认

一行最多支持4个，再小的话图片也很小不直观。

横图

竖图

一排 3 个

一排 4 个

2x1

4/3 比例 + 3/4 比例

1
2
3
4

:::image-grid r64
![](https://r2-assets-cn.thelynan.com/u/IMG_3411-hKVGTY.jpg)
![](https://r2-assets-cn.thelynan.com/u/IMG_3413-5hLuJB.jpg)
:::

3/4 比例 + 4/3 比例

1
2
3
4

:::image-grid r46
![](https://r2-assets-cn.thelynan.com/u/IMG_3413-5hLuJB.jpg)
![](https://r2-assets-cn.thelynan.com/u/IMG_3411-hKVGTY.jpg)
:::

3/2 比例 + 2/3 比例

1
2
3
4

:::image-grid r73
![](https://r2-assets-cn.thelynan.com/u/IMG_3411-hKVGTY.jpg)
![](https://r2-assets-cn.thelynan.com/u/IMG_3413-5hLuJB.jpg)
:::

2/3 比例 + 3/2 比例

1
2
3
4

:::image-grid r37
![](https://r2-assets-cn.thelynan.com/u/IMG_3413-5hLuJB.jpg)
![](https://r2-assets-cn.thelynan.com/u/IMG_3411-hKVGTY.jpg)
:::

刷新字体缓存

每次编译时生成字符文件 letters.txt，通过文件 hash 对比和上一次生成的 letters.txt 内容是否有变化，如果有变化则写入 scss 作为变量添加到字体文件 url 后使得客户端去加载新的字体文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const fs = require('fs');
const path = require('path');
const crypto = require('crypto');

hexo.extend.filter.register('before_generate', function () {
  const filePath = path.resolve(__dirname, "../../../custom-scripts/font/letters.txt");
  if (!fs.existsSync(filePath)) return;

  // 读取文件并计算 hash
  const content = fs.readFileSync(filePath);
  const hash = crypto.createHash('md5').update(content).digest('hex').slice(0, 8);

  // 写入到 scss 变量文件
  const scssPath = path.join(hexo.base_dir, 'themes', hexo.config.theme, 'source', 'css', 'font-version.scss');
  fs.writeFileSync(scssPath, `$font-version: "${hash}";\n`);
});

日期格式

英文："MMM D, YYYY"，例如 Jul 26, 2025
中文： "M月D日，YYYY"，例如 8月3日，2025

阅读时间计算

更新了阅读时间计算规则

RSS 内容修复

因为添加了一些例如图片懒加载的逻辑，修改了 html 的内容，原先使用 hexo-generator-feed 来生成 RSS 内容使用的 HTML 是已经修改过的，虽然不影响阅读，但是不够优雅。于是卸载了 hexo-generator-feed 插件并重新写了一段脚本 hexo.extend.generator.register("rss", function (locals) {}) 来生成纯净的 HTML 内容。

1
2
3
4

const rawHtml = hexo.render.renderSync({
  text: post._content,
  engine: "markdown",
});

实效性提示

灵感来自 V2EX 主题日期下的提示。
通过 Front Matter 中设置 ageWarning 字段来决定是否要给文章展示实效性提示文字。
目前在旅行系列下的文章都添加了 ageWarning，在当前时间 - 文章发布时间 > 180 天时展示。

锚点高亮

现在点击 H2、H3 （包含目录中的）时，对应的锚点标题会有一个短暂的高亮。

系列文章入口

移动端现在也可以查看系列文章目录，系列文章也有独立的页面了。

目前只有一个系列：旅行

移动端目录入口优化

当页面宽度小于 1280 px时，目录会被收进顶栏的按钮中，需要点击打开。

现在当页面从下往上滑时，用户可能正在寻找目录按钮，此时将顶栏悬浮，方便操作，无需回到顶部。

图片 Exif

点击下图可展示 Exif 信息

图片 Caption

龙猫
--宫崎骏打开大图查看 Caption 内容

"系列"边栏

目前只为旅行游记文章添加了“旅行”系列标签。

悬浮的文字

例如 悬浮这里 可以看到一些额外的文字。因为我经常有一些补充文字想写，比如 某些文案（补充说明），写多了感觉也不美观，以 ToolTip 形式展现或许是一个不错的选择。

相关文章

筛选所有文章中标签和当前页面文章标签重合达到 2 个以上，则认为它们是相关的，根据日期倒序展示最多 3 篇相关文章。

代码高亮

copy 了一些 highlight.js 中 GitHub 主题的配色方案。

大图预览插件

使用 PhotoSwipe

支持收缩代码块

移动端目录适配

目录 active 状态

现在支持在滚动页面时自动将当前阅读的内容块标题加粗。

整理CSS

预处理器用的是 SASS，将 @mixin 和 @media 相关的样式放入单独的文件。修复了之前部份样式需要用 !important 提升优先级的问题。

封面图地点信息

点击可唤起 Apple 地图。

文章页侧边新增目录

当文章内容较长的时候，有目录的话比较容易直接跳转到想看的部份。

提前加载评论数据

之前我的想法是在滚动到评论区域时才去加载评论模块的 js/css 和数据，避免在进入页面时加载不需要的东西。最近发现这样的感觉有点慢，总是要等一会才能看见评论，于是转念以前还是决定提前加载它们。

用于监听的元素放到了第二个副标题后面，也就是说当读者滑动到第二个 h2 时，我就认为他有可能会一直阅读到最底部去看评论。

更新完感觉确实体验提升了一些。

文章字数统计

1
2
3
4
5
6
7
8
9
10
11
12
13

<%
  const content = post.content || "";
  const text = content
    .replace(/<figure[^>]*>.*?<\/figure>/gs, "")
    .replace(/<noscript[^>]*>.*?<\/noscript>/gs, "")
    .replace(/<style[^>]*>.*?<\/style>/gs, "")
    .replace(/<script[^>]*>.*?<\/script>/gs, "")
    .replace(/<\/?[^>]+(>|$)/g, "")
  
  const currentLanguage = page?.language || config?.language;
  const words = (currentLanguage === 'en'? text?.split(' ')?.length : text?.trim()?.length) || 0;
  const photos = content.match(/class="gallery-item/gi, '')?.length || 0;
%>

复制代码

代码块不能复制着实是非常地不方便，整一个。

一开始想着用伪元素，但是写完样式发现点击事件不会作用于伪元素，除了定位没有其他办法判断点击了复制。

只好用 hexo 的钩子在构建的时候给代码块追加一个 <div class="copy-btn"></div>

手搓主题 1.0

换上了手搓主题 1.0。为什么想自己写一个主题呢，主要是我想要我的博客《小而美》。之前的主题 Icarus 也很符合我的审美，但是它对我来说有点重。过多的插件，有些无从下手去精简，干脆自己搓一个。