Hexo Stellar 添加文章字数统计和阅读时长
Hexo Stellar 添加文章字数统计和阅读时长
效果预览
在文章标题下方、面包屑导航下方显示:
- 📅 发布时间和更新时间
- 📊 字数统计:显示文章总字数
- ⏱️ 阅读时长:估算阅读所需时间
- 🏷️ 标签列表:显示文章标签
实现步骤
1. 创建字数统计辅助函数
在 themes/stellar/scripts/helpers/ 目录下创建 wordcount.js 文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
|
hexo.extend.helper.register('wordcount', function(content) { if (!content) return 0; const text = content.replace(/<[^>]+>/g, ''); const chinese = (text.match(/[\u4e00-\u9fa5]/g) || []).length; const english = (text.match(/[a-zA-Z0-9_\u00C0-\u00FF]+/g) || []).length; return chinese + english; });
hexo.extend.helper.register('min2read', function(content) { if (!content) return 0; const words = this.wordcount(content); const minutes = Math.ceil(words / 300); return minutes > 0 ? minutes : 1; });
|
2. 修改文章导航栏模板
编辑 themes/stellar/layout/_partial/main/navbar/article_banner.ejs 文件,在 // 3.left.bottom 部分添加:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| el += partial('dateinfo')
if (page.layout == "post") { el += '<div class="flex-row" id="page-words"><span style="padding: 4px;">本文:' + wordcount(page.content) + '字</span><span class="sep updated" style="padding: 4px;"></span><span class="text updated" style="padding: 4px;">阅读时长:' + min2read(page.content) + '分</span></div>'; if (page.tags && page.tags.length > 0) { el += '<div class="flex-row" id="tag"><span> 标签:</span>'; el += list_categories(page.tags, { class: "cap breadcrumb", show_count: false, separator: ' ', style: "none" }); el += ' </div>'; } }
el += `</div>`
|
3. 添加 CSS 样式
在 themes/stellar/source/css/_custom.styl 文件末尾添加:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| .bread-nav div#page-words span.sep:before content: '|'
.bread-nav div#page-words span.updated visibility: hidden
.bread-nav:hover div#page-words span.updated visibility: visible
#page-words font-size: $fs-14 color: var(--text-p3) margin-top: 4px
#tag font-size: $fs-14 color: var(--text-p3) margin-top: 4px .cap.breadcrumb color: var(--text-link) &:hover color: var(--theme)
|
4. 重新生成博客
1 2 3
| hexo clean hexo generate hexo server
|
功能说明
字数统计
- 计算规则:中文字符数 + 英文单词数
- 显示位置:文章标题下方
- 显示格式:
本文:XXX 字
阅读时长
- 计算规则:总字数 ÷ 300 字/分钟
- 向上取整:不足 1 分钟按 1 分钟计算
- 显示格式:
阅读时长:X 分
标签显示
- 条件显示:仅当文章有标签时显示
- 格式:
标签:tag1 tag2 tag3
- 可点击:点击标签可跳转到标签页面
自定义配置
修改阅读速度
在 wordcount.js 中修改除数:
1 2 3 4 5
| const minutes = Math.ceil(words / 400);
const minutes = Math.ceil(words / 200);
|
修改显示样式
在 _custom.styl 中调整:
1 2 3 4
| #page-words font-size: $fs-13 // 字体大小 color: var(--text-p2) // 文字颜色 margin-top: 8px // 上边距
|
修改显示格式
在 article_banner.ejs 中修改字符串:
1 2 3
| el += 'Words: ' + wordcount(page.content) + ' | ' el += 'Reading time: ' + min2read(page.content) + ' min'
|
技术细节
wordcount 函数
- 移除 HTML 标签,避免统计标签字符
- 使用中文字符 Unicode 范围
[\u4e00-\u9fa5]
- 使用英文单词正则
[a-zA-Z0-9_\u00C0-\u00FF]+
min2read 函数
- 调用
wordcount 获取总字数
- 除以阅读速度(默认 300 字/分钟)
- 使用
Math.ceil 向上取整
list_categories
Hexo 内置的标签列表生成函数:
class: CSS 类名
show_count: 是否显示文章数
separator: 标签分隔符
style: 列表样式
效果展示
1 2 3 4 5 6
| 主页 / 文章 / 博客 / 折腾 发布于:53 分钟前 | 更新于:刚刚 本文:880 字 / 阅读时长:4 分 标签:hexo 博客
# Hexo Stellar 主题装修笔记
|
注意事项
- 仅对文章生效:
page.layout == "post" 时才显示
- 标签可选:没有标签时不显示标签行
- 性能优化:字数统计在生成时计算,不影响页面加载速度
- 主题适配:使用主题变量,自动适配明暗模式
参考资料
作者: Kemeow0815
发布日期: 2026-04-25
本文链接: /2026/04/25/wordcount-reading-time/