背景与方法
本次调研不再局限于博客主题,而是盘点「静态博客(Hexo / Hugo / Jekyll)理论上能实现、且适合做成标签插件/短代码的实用工具能力」。筛选标准:① 在写作、阅读、分享场景中真实有用;② 静态站点可承载(无后端,或可依赖第三方 API / iframe / 开源 JS 库);③ 实现成本可控。口径为「能力」而不限实现方式,参考来源包括主流主题、Hexo 插件生态与 Hugo 短代码生态。结论统一标注:✅ Stellar 原生覆盖 / 🟡 可用现有标签+官方标签+HTML/插件组合实现 / ❌ 真正缺失(需新增标签或引入库)。
能力域盘点
A. 数据可视化与图表
| 能力 |
参考实现 |
Stellar 对照 |
实现路径 |
| 折线/柱状/饼/雷达/桑基图 |
FixIt echarts、Blowfish chart、hexo-tag-echarts |
❌ 无 |
新增 echarts 标签(配置化 + 按需加载 ECharts) |
| 流程图/时序图/甘特图 |
mermaid(各生态通用) |
✅ 插件已文档化 |
无需动作 |
| 词云 / 关系图谱 / 思维导图 |
ECharts 扩展、markmap |
❌ 无 |
扩展 echarts 标签支持 wordcloud/graph/tree |
| 日历热力图(GitHub 风格) |
自研短代码 |
❌ 无 |
新标签 + 轻量 JS |
| PlantUML |
在线渲染 iframe |
🟡 |
{% iframe %} 指向 PlantUML 在线服务 |
B. 数学与公式
| 能力 |
参考实现 |
Stellar 对照 |
实现路径 |
| LaTeX 公式 |
KaTeX / MathJax |
✅ 插件已文档化 |
无需动作 |
| 化学式/分子式(mhchem) |
KaTeX 扩展 |
🟡 |
配置 KaTeX 扩展后随公式使用 |
C. 代码与开发者工具
| 能力 |
参考实现 |
Stellar 对照 |
实现路径 |
| 代码复制/高亮/行号 |
Stellar 内置 |
✅ 已覆盖 |
无需动作 |
| Gist / CodePen / JSFiddle / CodeSandbox / StackBlitz 嵌入 |
Hexo 官方标签、FixIt gist |
🟡 |
{% gist %} {% jsfiddle %} {% iframe %} |
| 交互式文件树 |
FixIt file-tree |
❌ 无 |
新标签(纯 CSS + 少量 JS,不依赖外部库) |
| 终端模拟/命令行演示 |
asciinema、自研样式 |
❌ 无 |
新标签或 iframe |
| 正则测试 / JSON 格式化 / 时间戳转换 |
在线工具 iframe |
🟡/❌ |
iframe 嵌入;原生体验需自研小标签 |
| 代码 diff 展示 |
自研/插件 |
🟡 |
可先用 box+代码块排版 |
D. 交互组件
| 能力 |
参考实现 |
Stellar 对照 |
实现路径 |
| 折叠/标签页/手风琴 |
各主题通用 |
✅ folding/tabs/folders |
无需动作 |
| 投票 / 评分 |
Stellar 独有 |
✅ vote/rating |
无需动作 |
| 测验 / 问答卡片(flashcard/quiz) |
自研短代码 |
❌ 无 |
新标签 + 轻量 JS |
| 倒计时 / 距目标日期 |
自研短代码 |
❌ 无 |
新标签(纯 JS) |
| 抽奖 / 随机选择 |
自研 |
❌ 无(低价值) |
新标签 |
| 打字动画 / 数字滚动 |
FixIt typeit、ScrollReveal |
❌ 无 |
新标签或文档降级 |
E. 媒体播放
| 能力 |
参考实现 |
Stellar 对照 |
实现路径 |
| 单曲音频 / 网易云单曲 |
Stellar 内置 |
✅ audio |
无需动作 |
| 歌单播放器 |
APlayer + Meting、hexo-tag-mmedia |
❌ 无 |
新增 aplayer 标签,样式对齐现有 audio |
| 视频(B 站/YouTube/MP4) |
Stellar 内置 |
✅ video |
无需动作 |
| 抖音 / 优酷 / Vimeo |
FixIt douyin、官方 vimeo 标签 |
🟡/❌ |
Vimeo/优酷用官方标签或 iframe;抖音需新标签 |
| 播客 / Spotify / Apple Podcast |
FixIt spotify、iframe |
🟡 |
{% iframe %} |
| 音频波形可视化 |
自研 |
❌ 无(低价值) |
新标签 |
| 3D 模型展示(GLB) |
model-viewer |
❌ 无 |
新标签 + model-viewer 库 |
F. 地图与位置
| 能力 |
参考实现 |
Stellar 对照 |
实现路径 |
| 静态地图图片 |
地图 API 静态图 URL |
🟡 |
{% image %} |
| 交互地图(Mapbox/高德/Leaflet) |
FixIt mapbox |
❌ 无 |
新标签(iframe 或 JS SDK) |
| 路线 / 轨迹展示 |
自研 |
❌ 无(低价值) |
新标签 |
G. 社交与内容嵌入
| 能力 |
参考实现 |
Stellar 对照 |
实现路径 |
| GitHub 仓库/用户卡片 |
ghcard |
✅ 已覆盖 |
无需动作 |
| 通用 oEmbed(Twitter/X、Instagram、Bluesky、Mastodon、Threads、微博) |
FixIt bluesky、Hugo 官方 tweet/instagram |
❌ 无 |
新增 oembed 标签(服务端取 embed HTML 或前端 fetch) |
| RSS / 订阅按钮 |
通用 |
🟡 |
{% button %} + 链接 |
H. 实用小工具
| 能力 |
参考实现 |
Stellar 对照 |
实现路径 |
| 二维码 |
外部 QR API |
🟡 |
{% image %} + api.qrserver.com |
| 徽章 / 状态标 |
shields.io |
🟡 |
{% image %} + shields.io |
| 打赏 / 赞赏码 |
FixIt reward |
🟡 |
{% image %} + {% button %};原生需新标签 |
| 进度条(技能条/人生进度) |
Butterfly progress |
❌ 无 |
新标签(可复用 okr/mbti 已有进度样式) |
| 天气 / 空气质量 |
第三方 API |
❌ 无 |
新标签 + API |
| 行情(股票/加密货币) |
第三方 API |
❌ 无(低价值) |
新标签 |
| 单位换算 / 进制转换 |
在线工具 iframe |
🟡/❌ |
iframe 嵌入;原生需自研 |
| 文本朗读 TTS |
Web Speech API |
❌ 无(低价值) |
新标签 |
I. 内容增强与阅读
| 能力 |
参考实现 |
Stellar 对照 |
实现路径 |
| 目录 / 参考资料 / 脚注 |
Stellar 内置 |
✅ toc/references |
无需动作 |
| 引用 / 强调 / 提示块 |
Stellar 内置 |
✅ quot/blockquote/note/box |
无需动作 |
| 气泡注释 / 术语 tooltip |
Butterfly bubble/reference |
❌ 无 |
新标签(或先用 HTML abbr/title) |
| 隐藏 / 密码加密内容 |
Butterfly tag-hide、FixIt encryptor |
❌ 无 |
新 encrypt 容器标签,或文档推荐 hexo-blog-encrypt |
J. 动态数据接入
| 能力 |
参考实现 |
Stellar 对照 |
实现路径 |
| GitHub/Gitea Issues/Releases 时间线 |
Stellar 内置 |
✅ timeline |
无需动作 |
| memos / 其他动态源 |
Stellar 内置 |
✅ timeline/memos |
无需动作 |
| 自定义 API → 数据卡片 |
自研 |
🟡/❌ |
timeline/ghcard 模式可扩展;通用 data 标签需新开发 |
三档结论
✅ 原生覆盖(52 个标签)
容器:box、tabs、folding、folders、grid、swiper、gallery、banner、about;数据:timeline、friends、sites、albums、posters、ghcard、toc、md、chat;表达:note、quot、blockquote、link、button、image、audio、video、emoji、icon、mark、checkbox、radio、copy、poetry、hashtag、navbar、frame、mbti、okr、rating、vote;阅读:reel、paper;行内:u、emp、wavy、del、kbd、psw、blur、sup、sub。mermaid、KaTeX、MathJax 已由官方文档提供接入方案。
🟡 可组合实现(无需改主题)
- tag-hide 点击显示 →
{% folding %}
- 彩色/超大文字、label、tip →
{% mark color:red %} / HTML span / {% quot el:h1 %}
- 居中引用 →
{% quot %} + HTML 对齐
- 全宽图 →
{% image width:120% }
- 按钮组 →
{% grid %} + {% button %}
- Gist/jsFiddle/vimeo/PDF/播客/Spotify/优酷 → Hexo 官方
{% gist %} {% jsfiddle %} {% vimeo %} {% iframe %}
- 二维码/徽章/静态地图/打赏 →
{% image %} + 外部 API 或按钮组合
- PlantUML →
{% iframe %} 在线渲染
❌ 真正缺失(按优先级)
- 高:图表(ECharts)、歌单播放器(APlayer/Meting)、加密内容块、交互文件树、交互地图
- 中:通用进度条、气泡注释/术语 tooltip、oEmbed 社交嵌入、测验/问答卡片、倒计时/日期计算、词云/关系图、自定义 API 数据卡片
- 低:3D 模型、音频波形、抖音嵌入、打字/数字滚动动效、打赏原生标签、QR 原生标签、天气/行情、TTS、抽奖、终端模拟、在线小工具 iframe 套件
优先级建议
- 高优先:图表与歌单播放器。写作频率最高且 Stellar 完全没有;推荐新增
echarts(配置化、按需加载)与 aplayer(Meting 歌单 + 单曲,样式对齐 audio)。
- 高优先:加密内容块与文件树。加密可先文档推荐 hexo-blog-encrypt;文件树为纯 CSS/JS 新标签,展示项目结构实用。
- 中档按需开发:进度条可复用 okr/mbti 样式成本最低;oEmbed 与地图是「非主题也能做」的典型通用能力,建议做成与主题无关的通用标签。
- 低档不建议开发或仅文档降级:QR、打赏、天气等用 image/iframe 组合即可;动效类与 Stellar 简洁风格契合度低。
- 实现原则:优先「原生标签 + 风格统一」;通用型工具(echarts/aplayer/oembed/加密)应设计为可独立复用的标签,避免与主题样式强耦合。
参考来源
背景与方法
本次调研不再局限于博客主题,而是盘点「静态博客(Hexo / Hugo / Jekyll)理论上能实现、且适合做成标签插件/短代码的实用工具能力」。筛选标准:① 在写作、阅读、分享场景中真实有用;② 静态站点可承载(无后端,或可依赖第三方 API / iframe / 开源 JS 库);③ 实现成本可控。口径为「能力」而不限实现方式,参考来源包括主流主题、Hexo 插件生态与 Hugo 短代码生态。结论统一标注:✅ Stellar 原生覆盖 / 🟡 可用现有标签+官方标签+HTML/插件组合实现 / ❌ 真正缺失(需新增标签或引入库)。
能力域盘点
A. 数据可视化与图表
echarts标签(配置化 + 按需加载 ECharts)echarts标签支持 wordcloud/graph/tree{% iframe %}指向 PlantUML 在线服务B. 数学与公式
C. 代码与开发者工具
{% gist %}{% jsfiddle %}{% iframe %}box+代码块排版D. 交互组件
E. 媒体播放
aplayer标签,样式对齐现有audio{% iframe %}F. 地图与位置
{% image %}G. 社交与内容嵌入
oembed标签(服务端取 embed HTML 或前端 fetch){% button %}+ 链接H. 实用小工具
{% image %}+ api.qrserver.com{% image %}+ shields.io{% image %}+{% button %};原生需新标签I. 内容增强与阅读
encrypt容器标签,或文档推荐 hexo-blog-encryptJ. 动态数据接入
三档结论
✅ 原生覆盖(52 个标签)
容器:box、tabs、folding、folders、grid、swiper、gallery、banner、about;数据:timeline、friends、sites、albums、posters、ghcard、toc、md、chat;表达:note、quot、blockquote、link、button、image、audio、video、emoji、icon、mark、checkbox、radio、copy、poetry、hashtag、navbar、frame、mbti、okr、rating、vote;阅读:reel、paper;行内:u、emp、wavy、del、kbd、psw、blur、sup、sub。mermaid、KaTeX、MathJax 已由官方文档提供接入方案。
🟡 可组合实现(无需改主题)
{% folding %}{% mark color:red %}/ HTML span /{% quot el:h1 %}{% quot %}+ HTML 对齐{% image width:120% }{% grid %}+{% button %}{% gist %}{% jsfiddle %}{% vimeo %}{% iframe %}{% image %}+ 外部 API 或按钮组合{% iframe %}在线渲染❌ 真正缺失(按优先级)
优先级建议
echarts(配置化、按需加载)与aplayer(Meting 歌单 + 单曲,样式对齐audio)。参考来源