FFFF
Skip to content

调研:静态博客可实现的实用标签插件能力盘点与 Stellar 缺口分析 #685

Description

@xaoxuu

背景与方法

本次调研不再局限于博客主题,而是盘点「静态博客(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 套件

优先级建议

  1. 高优先:图表与歌单播放器。写作频率最高且 Stellar 完全没有;推荐新增 echarts(配置化、按需加载)与 aplayer(Meting 歌单 + 单曲,样式对齐 audio)。
  2. 高优先:加密内容块与文件树。加密可先文档推荐 hexo-blog-encrypt;文件树为纯 CSS/JS 新标签,展示项目结构实用。
  3. 中档按需开发:进度条可复用 okr/mbti 样式成本最低;oEmbed 与地图是「非主题也能做」的典型通用能力,建议做成与主题无关的通用标签。
  4. 低档不建议开发或仅文档降级:QR、打赏、天气等用 image/iframe 组合即可;动效类与 Stellar 简洁风格契合度低。
  5. 实现原则:优先「原生标签 + 风格统一」;通用型工具(echarts/aplayer/oembed/加密)应设计为可独立复用的标签,避免与主题样式强耦合。

参考来源

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

    0