繁夜

# 引言 多出去看看，见的多了，就知道该折腾啥了~ 这次盯上的，是文章右侧那块平时不怎么起眼的 目录。 折腾博客主题迁移的时候，看到 Fumadocs 的文章目录：左边一根细线，遇到子标题会拐个弯，当前阅读位置对应的那一段还会亮起来。 好看，想要，安排 🤣 不过真开始做才发现，这东西不是给目录加一个 border-left 就完事了。线会随着阅读位置 游走，同屏几个标题可以同时高亮，目录展开和收起的时候，线还得跟着变。 于是乎，又有了这篇折腾记录。 本文右侧目录就是效果展示，往下滚动即可体验；窄屏需要先打开主题侧栏。 # 需求整理 # 先把效果看明白 第一眼看过去，很容易把那根线理解成

文章记录将 Fumadocs 风格曲线目录迁入 ShokaX 的实现。复用现有目录结构，以视口内标题控制高亮和分支展开，用 SVG 曲线及裁剪窗口绘制随层级变化的轨道。文中讲解动画同步、主题配色、单篇配置覆盖和 PJAX 清理，并提供 TypeScript、Stylus 与 Pug 的接入代码。

本文记录为 ShokaX 博客主题实现 Fumadocs 风格曲线目录的过程。核心是将高亮从阅读进度改为当前视口内标题范围，命中标题同时控制高亮和子目录展开；用 SVG 绘制底线、弯折路径与裁剪高亮区间，配合 TypeScript 监听滚动、动画和 PJAX 清理，并保留层级编号、点击跳转、主题配色、长标题换行及全局和单篇开关，最后给出按文件接入的完整方案。

这篇文章记录了作者为 Hexo 博客主题 ShokaX 移植 Fumadocs 风格“曲线目录”的过程。核心思路是不引入整套框架，而是复用 Hexo 原有的目录结构，在其上叠加展示逻辑：通过判断标题是否进入视口来决定高亮范围（可同时高亮多个标题，无命中时取最近标题兜底），并用同一份命中结果控制子目录的展开收起；左侧细线用 SVG 绘制，横坐标变化处用贝塞尔曲线拐弯，高亮区间通过 clipPath 裁剪窗口实现移动。文章还处理了展开动画与线条同步、主题配色变量、长标题换行、PJAX 切页时的实例清理与事件监听管理，并提供了全局配置加文章级覆盖的开关方案，最后给出按文件接入的完整代码。

# 引言 尊重原创，为 Shoka 主题添加文章转载标记——在主页文章缩略信息头部 segments 和 正文头部添加转载信息 # 实现 主要利用 文章 Front-matter 标记转载信息，在生成发布文章时进行解析添加相关转载信息 关于 Front-matter 标记的约定 以 || 作为分割，分为左右两部分 第一部分：代表链接显示的文本内容已经指向超链接时显示的文本内容 第二部分：代表链接网址 注意：可以只有第一部分，那么链接文本和网址均使用这一部分的内容，如果链接网址非 http 开头，默认转载链接不可追溯，使用 reprint_unable_trace_source 代指的文

文章介绍为 Shoka 文章添加转载标记的方法，使用 Front-matter 的 reprintlink 字段记录来源，并以双竖线分隔显示文字和链接。模板在主页元信息及正文头部展示转载说明，无法追溯的网址则显示提示文本。文中列出语言字段和模板的修改位置，并给出不同配置的展示示例。

文章介绍为 Shoka 主题添加文章转载标记的方法。借由文章 Front-matter 中的 reprintlink 字段记录转载信息，以“||”分隔链接文本与网址；若只写一部分则两者共用，非 http 链接会提示原文出处暂无处追寻。实现上需修改 zh-CN.yml 增加多语言文案，并调整 postmeta.njk 与 post.njk，在主页缩略信息头部和正文头部展示转载标识与来源链接。

文章介绍了如何为 Hexo 的 Shoka 主题添加文章转载标记功能。作者通过在文章 Front-matter 中定义 reprintlink 字段标记转载信息，约定以"||"分割为链接文本和网址两部分；若网址非 http 开头则视为无法追溯原文，显示预设提示文本。具体实现需修改三个文件：在 zh-CN.yml 中添加转载相关多语言文本，在 postmeta.njk 中为主页文章缩略信息头部添加“转载”标签，在 post.njk 中于正文顶部解析 Front-matter 并生成带超链接的转载提示信息。

# 引言 为 Shoka 主题添加文章实效性提示——文章发表时间过久，部分内容实际上可能以及过时，需要在显眼处给出浏览者实效性提示。 # 主题集成 需要修改的文件列表如下，相对于 Shoka 主题根目录 # theme/shoka shoka主题目录 ├── _config.yml ├── languages │ ├── en.yml │ ├── ja.yml │ ├── zh-CN.yml │ ├── zh-HK.yml │ └── zh-TW.yml ├── layout │ └── _partials │ └── layo

文章介绍为 Shoka 增加文章时效性提示：根据最后更新时间与当前时间的间隔，在超过配置天数后，于正文顶部展示发布和更新距今的时间。实现涉及主题开关、多语言模板、前端配置及 PJAX 刷新调用，同时允许通过 Front-matter 为单篇文章关闭检查，并给出完整修改位置。

本文介绍为 Shoka 主题添加文章时效性提示的方法。通过修改 _config.yml、多语言文件、layout.njk、global.js、pjax.js 和 script.js，配置启用开关、超时天数、提示模板与多语言文本；再由脚本计算文章发布及最后更新距今时间，超过设定天数后在正文顶部插入警告。文章还可通过 Front-matter 的 isOutdated: false 单独关闭提示。

文章介绍了如何为 Hexo 的 Shoka 主题添加文章实效性提示功能：当文章最后一次更新距今超过设定天数（默认 30 天）时，在正文顶部显示警告提示，告知读者部分内容可能已过时。实现方式包括：在 _config.yml 中添加启用开关和天数配置；在五种语言文件中添加多语言提示模板；在 global.js 中编写计算发布与更新时间差并插入提示的函数；并在 pjax.js、script.js 和 layout.njk 中分别注册调用、注入配置和本地化变量。此外支持通过文章 Front-matter 设置 isOutdated: false 单独关闭检测。

# 引言 cdn.jsdelivr.net 知名的免费cdn服务提供商，在去年年底由于大陆域名备案的问题，国内 cdn 解析异常时常无法连接到服务器 尤其是重度依赖 jsDelivr 的 Shoka 主题，在这种情况下由于资源无法加载完成导致网页卡顿，显示效果异常等一系列问题 于是决定探索资源本地化方案去除对 jsDelivr 的依赖 截止到目前国内的 cdn.jsdelivr.net 的 DNS 污染貌似已经解除了，不过资源本地化还是有很多好处的，记录下过程权当自己的备忘了。 # 资源本地化 # jsDelivr依赖热点 Shoka 主题用到了不少第三方组件，全部基于 jsDelivr

文章记录将 Shoka 对 jsDelivr 的依赖迁移到本地资源的过程，包括下载主题依赖、补齐组件内部依赖与表情资源、处理合批脚本，并修改资源地址生成逻辑。随后介绍压缩排除配置，以及独立资源仓库、对象存储和自建 CDN 的组织思路，减少外部加载异常对博客的影响。

文章因 jsDelivr 在国内访问异常，Shoka 主题资源加载受阻，作者将第三方依赖本地化。做法是下载 vendors 资源到 source/cdn.jsdelivr.net 并保持目录结构，整包下载 KaTeX、表情包，处理 MiniValine 嵌套依赖并替换链接；修改主题配置及加载代码为本地路径，配置压缩白名单，并可选用 Git、COS、CDN 优化推送缓存。最终摆脱 jsDelivr 依赖，提升稳定性。

文章介绍了因 jsDelivr 国内解析异常导致 Shoka 主题博客资源加载失败，作者探索资源本地化的完整方案。核心做法是：在 source 下建立与远程链接同构的本地目录，用 Python 脚本批量下载 vendors 依赖，对 katex、表情包等组件整包下载，并处理 MiniValine 等套娃依赖的合批请求；随后修改主题配置、脚本加载代码将资源指向本地路径，并在代码压缩配置中排除该目录。最后还提出可选优化：将本地资源库独立管理并同步至对象存储自建 CDN，避免每次推送重复上传，彻底摆脱对 jsDelivr 的依赖。

# 引言 Hexo 资源文件夹 启用后，Markdown 采取相对路径引用图片以便于本地预览 和 Hexo 发布时资源路径重定向冲突。 本文主要解决两者之间的冲突，使得二者能够兼得. # 需求整理 # Hexo资源文件夹 如果你的 Hexo 项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于  的方法访问它们。 但是这样不利于 维护 也不够 优雅，Hexo 资源文件夹就主要解决了这个痛点, 资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图

文章针对启用 Hexo 资源文件夹后，图片相对路径难以兼顾 Markdown 本地预览与发布访问的问题，给出 Shoka 主题集成方案。在主题脚本中注册文章渲染后过滤器，解析图片的 data-src，并按文章永久链接重建资源路径，统一处理正文与摘要，保留原有本地写作方式。

文章讨论 Hexo 启用资源文件夹后，Markdown 用相对路径引用图片便于本地预览，却与生成发布时的资源路径重定向冲突，官方方案又会破坏本地预览。作者提出利用 Hexo 的 after_post_render 过滤器，通过 cheerio 处理文章内容中的 img 标签，将 data-src 修改为指向文章资源文件夹的正确路径，从而兼顾本地预览和发布重定向。

文章针对 Hexo 启用资源文件夹后，Markdown 相对路径引用图片导致本地预览与发布路径重定向冲突的问题提出解决方案。官方的标签插件或 hexo-renderer-marked 插件虽可正确生成路径，但破坏了本地相对路径预览。作者利用 Hexo 的过滤器机制，注册 after_post_render 过滤器，在主题 scripts 目录新增脚本，借助 cheerio 遍历文章的 excerpt、more、content 中的 img 标签，将相对路径的 data-src 属性重定向到文章同名资源文件夹的正确路径，同时跳过外链和绝对路径图片，从而兼得本地预览与发布路径正确。

# 引言 灵感来源于主题文章 归档 的时间轴效果，用同样时间轴的方式对文章修订记录进行展示 # 实现 时间轴的实现，采用集成到主题的方式，使用文章 Front-matter 记录历史信息，在 Hexo 渲染时，读取信息，解析成时间轴对应的 HTML 文本段 # 时间轴css样式 直接 Copy 主题的归档样式。 f12 查看样式，找到主题对应的归档时间轴样式在文件 themes/shoka/source/css/_common/pages/collapse.styl 内。 同级目录 post 下新建一个 historytim

文章借用 Shoka 归档页的时间轴样式展示文章修订历史。通过 Front-matter 的 changelogs 保存每次修改的概述和可选明细，在模板中逆序解析为可折叠的时间轴，并补充语言文本和日夜模式配色。文中给出样式、配置与模板代码，使后续维护只需填写更新记录。

文章介绍如何在Hexo主题中为文章添加修订记录时间轴。灵感来自归档时间轴，通过在文章Front-matter中配置changelogs记录更新摘要与明细，渲染时解析生成对应HTML，并复制修改归档样式，新增颜色变量和语言包键值，在post.njk模板中插入可折叠的时间轴代码。发布后即可在文章头部展示更新记录，实现优雅的历史版本展示。

这篇文章介绍了在 Hexo 的 Shoka 主题中，为文章添加“更新记录”时间轴效果的实现方法。作者受主题归档页时间轴启发，先复制归档样式新建 historytimeline.styl 并适当修改，同时在主题颜色变量文件中新增日间与夜间模式的文字及悬浮前景色，再在 post.styl 中引入。数据方面，利用文章 Front-matter 以 YAML 格式定义 changelogs 配置，包含 summary（修改概括）和 list（明细条目）。最后在文章框架模板 post.njk 中添加解析代码，将配置渲染为可折叠的时间轴 HTML，并在语言包中新增标题文案。完成后只需在文章头部写好配置，执行 Hexo 构建即可自动生成更新记录时间轴。

# 引言 多出去看看，见的多了，就知道该折腾啥了~ Demo地址， Click here! 没错，这是一个闲逛其他博主的博客时，逛出来的一个需求 🤣 最近重启了自己的个人博客，告别了 WordPress 拥抱了 Hexo，机缘巧合之下用上了 Shoka 主题，在作者的博客扒拉食用指南时，进入了 灵香轩(Lavender)的站点，当看到了他主题的标签云时(比原主题的标签云更得劲儿，效果丰富还显示了标签对应文章数量)，只剩下了四个字，我也想要~ 由于在 Lavender 的站点和网上都没有找到相关教程，于是乎开始了自己的 逆向之旅，再然后就有了这篇文章。 # 逆向工程 F12 一波，窥探到

文章记录为 Shoka 标签云添加文章数量角标的过程。通过阅读 Hexo 内置 tagcloud 辅助函数，在主题中建立 tagcloudplus，利用标签的 length 字段输出上标数量，并替换模板调用。配合圆角背景、阴影、悬停缩放及日夜配色，使标签展示更丰富，同时避免直接修改依赖包。

作者在 Hexo 的 Shoka 主题中，为标签云增加显示标签对应文章数量的数字角标。他通过 F12 和源码定位到 Hexo 内置的 tagcloud 辅助函数，在主题 scripts/helpers 下新建 tagcloudplus.js，复制并改写源码，在链接中插入 sup 标签输出 tag.length，再调整标签云样式、颜色变量，并将 page.njk 中的调用替换为 tagcloudplus。这样避免直接修改 node_modules，便于跨设备维护。

作者在为 Hexo 博客的 Shoka 主题美化标签云时，受其他博主站点启发，希望实现带文章数量角标、样式更丰富的标签云。通过 F12 和源码逆向，定位到 Hexo 内置的 tagcloud 辅助函数，随后在主题 scripts/helpers 目录下新建 tagcloudplus.js，复制并改造源码，在标签名后追加 sup 上标显示文章数量，再修改主题的 styl 样式文件，为标签添加背景、圆角、阴影及 hover 放大效果，并在 page.njk 中将调用替换为自定义函数。作者强调将改动放在主题内部而非 node_modules，以便跨设备维护，最终实现效果。

# 引言 Hexo 资源文件夹 启用后，使得文章图片等外挂资源可以按文件夹和文章对应。 Hexo 若正常发布，需要 {% asset_img slug [title] %} 引入图片，或者 [](image file name)，无法在本地 markdwon 书写时预览 Markdown 若正常预览， 引入图片需要采用 相对路径 ，Hexo 发布时则 图片链接 异常 本文主要解决两者之间的冲突，使得二者能够兼得. # 实现 本地编写仍然采用方便预览的相对路径引入方式， 编写 Hexo 过滤器, 在文章渲染结束后，将 img 的 资源路径 进行替换 'use

文章针对 Hexo 文章资源文件夹中图片的路径冲突，提出用自定义过滤器兼顾 Markdown 本地预览与发布访问。实现时在文章渲染后解析图片标签，根据文章永久链接计算资源目录，改写相对的 data-src 路径，并同步处理正文和摘要等字段，最后提供主题集成文章作为参考。

Hexo 启用资源文件夹后，本地 Markdown 常用相对路径插入图片以便预览，但发布时需专用标签，导致图片链接异常。本文提出兼容方案：编写 after_post_render 过滤器，用 cheerio 解析文章内容中的 img 标签，把本地资源路径替换为发布后的正确链接，使本地预览与线上发布都能正常显示图片。文章还说明可按此原理集成到主题中。

文章介绍了解决 Hexo 资源文件夹图片引用与 Markdown 本地预览冲突的方法：本地写作时用相对路径引入图片以便预览，但 Hexo 发布后链接会失效。作者通过编写 Hexo 的 after_post_render 过滤器，在文章渲染完成后用 cheerio 解析 HTML，遍历 img 标签，将相对路径的资源链接替换为基于文章永久链接的正确路径，从而兼顾本地预览与线上正常显示。文中给出完整代码实现，并说明可集成到主题中。

这是一篇加密文章，需要密码才能继续阅读。

# 引言 查看 Hexo 生成的博客文件往往会发现其中存在大量的空格与空行，这虽然不影响页面显示，但是无形中会增加页面文件的大小 实际上不止空白，这些由 Hexo 生成的文件中还有很多能够被优化以减小大小的地方，而要提高网站访问速度，减小资源文件的大小一直是最有效的手段之一(尤其是图片压缩)。 gulp 是一个自动化构建工具，一般用于开发过程中执行一些常见任务，它有很多社区提供的强大插件可供使用，极大的简化了任务处理流程。在这里我们用它来对 Hexo 生成的博客文件进行压缩优化处理。 # gulp工作流构建 # 环境 本地环境如下 hexo: 6.2.0 hexo-cli: 4.3.0 o

文章介绍在 Hexo 生成静态文件后使用 gulp 压缩资源，以减小文件体积。通过配置 JavaScript、CSS、图片和 HTML 四类任务，演示插件安装、处理范围、目录排除以及压缩参数，并使用并行任务统一执行。最后将 gulp 插入生成与部署之间，形成可重复使用的博客发布流程。

文章介绍用 gulp 自动化压缩优化 Hexo 生成的博客文件，以减小空白与资源体积、提升访问速度。作者安装 gulp 及 CSS、JS、图片、HTML 压缩插件，新建 gulpfile.js，配置各项 minify 任务并默认并行执行。最后建议在部署命令中加入 gulp，形成 hexo clean、generate、gulp、deploy 的四连流程。

文章介绍了如何使用自动化构建工具 gulp 压缩优化 Hexo 博客生成的静态文件，以减小文件体积、提升网站访问速度。作者首先说明 Hexo 生成的文件中存在大量空格、空行等可优化内容，随后在本地环境（Hexo 6.2.0、Node 18）中安装 gulp 及其插件，包括 gulp-uglify-es、gulp-clean-css、gulp-imagemin 和 gulp-html-minifier-terser，分别用于压缩 JS、CSS、图片和 HTML。接着在博客根目录创建 gulpfile.js，编写四个压缩任务并配置默认任务并行执行，其中可排除特定目录和已压缩文件。最后将 gulp 命令插入原有的 hexo 部署流程，形成“hexo clean、hexo generate、gulp、hexo deploy”的推送四连操作。