在 DoIt 博客文章中嵌入公式、图表、数据可视化和音乐

方案简介

本配方是 DoIt 主题的内容增强能力组合：主题通过扩展 Markdown 语法和 Hugo shortcode，把 KaTeX 数学公式、mermaid 图表、ECharts 交互式数据可视化、Mapbox 地图、APlayer/MetingJS 音乐播放器、Bilibili 播放器等前端库封装进 Hugo 博客。作者只需在文章中写扩展语法或 shortcode，即可嵌入公式、流程图、数据图表、地图和音乐视频，非常适合写技术、学术类文章的博主。

亮点与能力

• KaTeX 数学公式渲染
• mermaid 图表语法 shortcode
• ECharts 交互式数据可视化 shortcode
• Mapbox GL JS 地图 shortcode
• APlayer + MetingJS 音乐播放器 shortcode
• Bilibili 视频播放器 shortcode
• 扩展 Markdown：Font Awesome 图标、ruby 注音、分数
• 多种 admonition 提示块与自定义样式 shortcode

组成与分工

• KaTeX：数学公式渲染库，由主题内置支持
• mermaid：用文本语法绘制流程图等图表，通过 shortcode 使用
• ECharts：交互式数据可视化，通过 shortcode 嵌入
• Mapbox GL JS：地图展示 shortcode
• APlayer + MetingJS：嵌入式音乐播放器
• lightgallery.js：文章图片画廊
• TypeIt：打字机动画效果

使用与配置要点

主题已对这些库完成集成，作者只需在文章正文中使用对应的扩展 Markdown 语法或 shortcode。所有第三方库均支持 CDN 加载，可通过主题配置统一管理；此外还有自定义脚本 shortcode、cookie consent 横幅等增强能力可按需开启。

优缺点

• ✓ 写作即嵌入，无需手写脚本
• ✓ 内容形态丰富覆盖面广

出处

本方案挖掘自开源项目 HEIGE-PCloud/DoIt，方案内容与实施命令均来自其 README 原文。