06月
5 篇- Shoka主题: 去jsDelivr依赖之资源本地化Shoka主题: 去jsDelivr依赖之资源本地化AI 摘要
文章记录将 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 的依赖。
知名的免费cdn服务提供商,在去年年底由于大陆域名备案的问题,国内 解析异常时常无法连接到服务器 尤其是重度依赖 的 主题,在这种情况下由于资源无法加载完成导致网页卡顿,显示效果异常等一系列问题 于是决定探索资源本地化方案去除对 的依赖 截止到目前国内的 的 污染貌似已经解除了,不过资源本地化还是有很多好处的,记录下过程权当自己的备忘了。 主题用到了不少第三方组件,全部基于 加载,资源依赖配置在了 主题配置文件 的 内。 依赖的组件又再次依赖 加载依赖 再次依赖 本地化的一个非常重要的部分就是,将远程资源下载到本地。好在依赖项不是很多哈,可以慢慢手动操作一波,就是慢点 🤣~~ 需要注意的是,为了最小化修改,其实应该在本地享有和链接一…
- Shoka主题: 自定义过滤器重定向资源文件夹图片相对路径引用Shoka主题: 自定义过滤器重定向资源文件夹图片相对路径引用AI 摘要
文章针对启用 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 属性重定向到文章同名资源文件夹的正确路径,同时跳过外链和绝对路径图片,从而兼得本地预览与发布路径正确。
资源文件夹 启用后, 采取相对路径引用图片以便于本地预览 和 发布时资源路径重定向冲突。 本文主要解决两者之间的冲突,使得二者能够兼得. 如果你的 项目中只有少量图片,那最简单的方法就是将它们放在 文件夹中。然后通过类似于 的方法访问它们。 但是这样不利于 维护 也不够 优雅, 资源文件夹就主要解决了这个痛点, 资源()代表 文件夹中除了文章以外的所有文件,例如图片、、 文件等。 这样就可以引用 资源文件夹 的图片资源来书写文章了 在启用资源文件夹后,一篇名为 的文章在 创建时 会生成同名文件夹 . 一般来说 用户,都是在本地使用 之类的编辑器,本地编写预览文章,那么文章的引用很自然的采取 相对路径 的方式 来引用图片,以便于本地能…
- Shoka主题: 文章更新历史记录时间轴Shoka主题: 文章更新历史记录时间轴AI 摘要
文章借用 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 构建即可自动生成更新记录时间轴。
灵感来源于主题文章 归档 的时间轴效果,用同样时间轴的方式对文章修订记录进行展示 时间轴的实现,采用集成到主题的方式,使用文章 记录历史信息,在 渲染时,读取信息,解析成时间轴对应的 文本段 直接 主题的归档样式。 f12 查看样式,找到主题对应的归档时间轴样式在文件 内。 同级目录 下新建一个 文件,直接粘贴样式,进行简单修改即可,修改后的完整代码如下 其中的几个代表 颜色 的变量,定义在了主题文件 中,分别对应 日间和夜间 模式 时间轴 文字颜色和鼠标悬浮的前景颜色 最后在 最后面引入自定义样式 事实上有了上面的样式后,我们在文章的头部其实手撸 就能够写出历史时间轴了,但这样总归不够 优雅,和直接写页面有什么区别 于是我盯上了 …
- Hexo: 标签云TagCloud标签文章数量数字角标Hexo: 标签云TagCloud标签文章数量数字角标AI 摘要
文章记录为 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,以便跨设备维护,最终实现效果。
多出去看看,见的多了,就知道该折腾啥了~ Demo地址, Click here! 没错,这是一个闲逛其他博主的博客时,逛出来的一个需求 🤣 最近重启了自己的个人博客,告别了 拥抱了 ,机缘巧合之下用上了 主题,在作者的博客扒拉食用指南时,进入了 灵香轩(Lavender)的站点,当看到了他主题的标签云时(比原主题的标签云更得劲儿,效果丰富还显示了标签对应文章数量),只剩下了四个字,我也想要~ 由于在 Lavender 的站点和网上都没有找到相关教程,于是乎开始了自己的 逆向之旅,再然后就有了这篇文章。 F12 一波,窥探到了样式的秘密 修改 即可 主题搜索 关键字,在主题文件 中找到了 的生成调用 , 传入的即主题文件 相关配置 官…
- Hexo - Shoka主题使用手册Hexo - Shoka主题使用手册AI 摘要
这是一篇用于个人查阅的 Hexo Shoka 主题使用手册占位文章。目前正文只有引言和 Todo 标记,具体配置、使用方法与操作步骤尚未展开。
本文是 Hexo 主题 Shoka 使用手册的引言部分,主要面向个人使用场景,目的在于整理和查阅该主题的相关说明与待办事项。内容以手册形式呈现,帮助使用者快速定位 Shoka 主题的使用要点、配置方法和后续维护方向,并作为个人查找 Todo 的参考文档。整体起到导航与索引作用,强调实用性和便捷性,便于后续按需补充和更新具体教程内容。
Hexo 主题 Shoka 使用手册,主要供个人使用时快速查阅。手册介绍了该主题的安装与配置方法,包括站点配置、主题配置、页面生成、评论系统、音乐播放器、图片展示等功能的使用说明,并涵盖自定义样式、插件依赖等进阶内容,帮助用户快速上手并个性化博客外观与功能。
主题 使用手册, 用于个人使用查找 Todo -----
