<?xml version="1.0"?>
<rss version="2.0">
    <channel>
        <title>lavender</title>
        <subtitle>浩瀚众星，皆降为尘</subtitle>
        <icon>https://blog.lavender816.top/images/favicon.ico</icon>
        <link>https://blog.lavender816.top</link>
        <author>
          <name>Lavender</name>
        </author>
        <description>Lavender 的个人技术博客，分享 Hexo 与 Shoka 主题改造、前端开发、Java、计算机图形学、软件工具及学习笔记。</description>
        <language>zh-CN</language>
        <pubDate>Mon, 28 Sep 2026 22:50:00 +0800</pubDate>
        <lastBuildDate>Mon, 28 Sep 2026 22:50:00 +0800</lastBuildDate>
        <category term="Lavender博客" />
        <category term="Hexo" />
        <category term="Shoka主题" />
        <category term="前端开发" />
        <category term="Java" />
        <category term="计算机图形学" />
        <category term="技术教程" />
        <category term="软件分享" />
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/2026092801/</guid>
            <title>Shoka主题：从零部署服务器AI服务并接入博客</title>
            <link>https://blog.lavender816.top/posts/2026092801/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <category term="Hexo" scheme="https://blog.lavender816.top/tags/hexo/" />
            <category term="AI" scheme="https://blog.lavender816.top/tags/ai/" />
            <pubDate>Mon, 28 Sep 2026 22:50:00 +0800</pubDate>
            <description><![CDATA[ 给静态博客接入 AI，不是把 API Key 写进主题，而是在自己的服务器上放一个受保护的中间服务。本篇按 “准备 → 部署 → 接入 → 验证 → 日常维护” 的顺序，说明服务器和 Shoka 两边分别要做什么。 #前言 本文沿用《Shoka 主题：美化统计页面并新增多维图表》的教程组织方式：先说明效果和文件结构，再分步操作，每个阶段都有检查方法。所有域名、账号、路径和额度都是通用示例，不是某个站点的生产配置。 基础问答可以先做，联网搜索、宇宙导游、音乐控制和文字工坊随后再加。不要一次复制几十处修改后，才第一次检查页面能不能打开。 下面列的是完整方案的能力清单，不是 “原版 Shoka 一次复制就会拥有的所有模块”。建议先按基础路线验收，再增加可选能力： 路线 可以实现什么 额外前提 基础路线 AI 问答、文章导读、选区解释、Markdown 回答、原文联动、七种文字工坊、服务管理 一个已经正常运行的 Shoka 博客；完成本篇的主题合并 联网路线 通过 SearXNG 获取实时搜索摘要 搜索容器与上游引擎实测可用 控制与漫游路线 页面导航、日夜切换；进一步控制音乐、阅读设置、查询统计 导航目录；其他操作分别需要对应的真实组件与接口 宇宙导游路线 推荐文章并在星系中高亮路线 先有博客宇宙页面及路线高亮接口 完整功能包括： 导航栏 “问问本站”：普通搜索保留，AI 搜索作为另一种入口； 右下角工具栏 AI 助手：点击打开对话框，再次点击关闭； 文章开头的 AI 导读，以及选中文字附近的解释窗口； AI 回答支持 Markdown、参考来源和跳回原文章节； 博客资料优先，资料不足时用通用知识补充； 可选的实时联网检索，不把 DeepSeek 网页端的搜索功能误认为 API 自带能力； 博客宇宙 AI 导游、自然语言导航和心情漫游； 自然语言控制音乐、页面、阅读设置和日夜模式，… ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/2026090501/</guid>
            <title>Shoka主题：Markdown扩展语法展示与使用指南</title>
            <link>https://blog.lavender816.top/posts/2026090501/</link>
            <category term="shoka主题" scheme="https://blog.lavender816.top/categories/shoka%E4%B8%BB%E9%A2%98/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <category term="Hexo" scheme="https://blog.lavender816.top/tags/hexo/" />
            <category term="Markdown" scheme="https://blog.lavender816.top/tags/markdown/" />
            <category term="教程" scheme="https://blog.lavender816.top/tags/%E6%95%99%E7%A8%8B/" />
            <pubDate>Sat, 05 Sep 2026 12:00:00 +0800</pubDate>
            <description><![CDATA[ 在原有 Shoka 特殊语法的基础上，整理适合写教程、项目介绍和图文记录的 Markdown 扩展，并补充本站已有的交互式 3D 留声机标签，以及本次新增的行内批注、参数卡片和阅读增强。这篇文章既是使用手册，也是一张可以直接操作的展示页：每一节先给出源码，再展示实际效果。 原有语法仍然可以照常使用，包括提示块、折叠块、选项卡、公式、Mermaid、行号与高亮代码块等。原有手册见 Step.4 主题特殊功能（转载）。本文的新增语法和查看器不会替换原有写法或音乐语法。 #一、扩展速览 扩展 最简写法 适合的内容 文件树 文件夹层级、项目结构、文件增删说明 代码树 一个示例包含多个代码文件时，切换查看 步骤流 安装、配置、排错等需要按顺序操作的教程 图片画廊网格 截图、作品集、照片；点击查看完整原图 GitHub 仓库卡片 分享开源项目 交互式 3D 留声机 成对标签 歌单唱片架、音乐播放、歌词与模型互动 行内批注 与 不打断阅读的术语解释和补充说明 参数卡片 配置项、接口字段、类型、必填与默认值 增强代码块 三个反引号后填写 文件标题、增删标记、局部折叠、复制和下载 代码组 同一操作的不同命令，切换选项卡阅读 #使用前需要设置什么？ 除留声机外，表中的语法直接写在文章正文中即可，不需要为每篇文章单独打开开关，也不需要安装 Astro 或 Svelte。留声机还需要在该文章顶部的 Front Matter 中加入 ，具体见第七节。批注、参数卡片、流程图查看器与阅读设置见第九节。 多行容器以 结束；GitHub 卡片只有一行，不写结束标记。 参数写在开头的花括号中，含空格的值使用英文引号。 示例中的四个反引号仅用于在教程里展示三个反引号的写法；真正使用时，复制示例框里面的内容即可。 修改语法插件后，如果本地预览一直开着，需要重启一次 ；正常写文章不需要反复重启。 #二、文件树：清楚… ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/1876049321/</guid>
            <title>Shoka主题：使用Three.js实现交互式3D留声机</title>
            <link>https://blog.lavender816.top/posts/1876049321/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <category term="Hexo" scheme="https://blog.lavender816.top/tags/hexo/" />
            <pubDate>Thu, 03 Sep 2026 21:45:00 +0800</pubDate>
            <description><![CDATA[ 把 Shoka 的普通音乐播放器改造成一个可以旋转、换唱片、看歌词和跟随音乐律动的 Three.js 三维留声机，并保证 Three.js 只在留声机页面加载。 搞这个活也是为了消耗下 token #前言 Shoka 原本已经支持 音乐标签，但它主要负责播放音乐，并不会把音乐状态呈现在三维场景中。本次改造保留主题原来的音频解析和播放能力，在它外面增加一层 Three.js 交互场景。 最终效果包含： 三渲二风格的留声机底座、唱盘、唱针、喇叭、摇把、花草、路牌和喷泉； 播放时唱片和摇把转动，暂停后停止； 唱针随播放状态平移，并根据播放进度逐渐改变位置； 喇叭口只在播放时出现声浪； 唱片周围显示跟随音乐变化的彩色频谱； 点击唱片架后展开多个歌单，支持左右浏览和换片动画； 点击正面屏幕打开播放面板，可操作播放、暂停、停止、上一首、下一首、进度、音量和具体歌曲； 播放面板支持单曲循环、列表播放和随机播放，并自动定位当前歌曲； 支持当前歌词、下一句歌词、封面和当前歌单曲目列表； 支持拖动视角、滚轮缩放和全屏浏览； 离开页面时释放场景、纹理、监听器和动画； Three.js、留声机脚本及样式只在指定页面加载。 这篇教程以 “能照着做出来” 为目标。即使你以前没有写过 Three.js，也可以先按顺序搭好结构，再逐步替换模型细节。 #实现思路 先看清楚各部分之间的关系，后面修改时会容易很多： 最重要的一点是：音乐仍由 Shoka 原播放器负责，Three.js 只负责表现和交互。 这样不需要重新实现网易云歌单解析，也不会出现两个播放器同时播放的问题。 #开始前准备 #1. 找到博客根目录 能看到下面这些文件和文件夹的位置就是博客根目录： 本文所有路径都从博客根目录开始计算。 #2. 先备份 建议先提交一次 Git，或者至少备份以下目录： #3. 安装 Three.js 在博客根目录打开终… ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/584182234/</guid>
            <title>在线网页加载本地资源</title>
            <link>https://blog.lavender816.top/posts/584182234/</link>
            <category term="前端" scheme="https://blog.lavender816.top/categories/%E5%89%8D%E7%AB%AF/" />
            <category term="html" scheme="https://blog.lavender816.top/tags/html/" />
            <category term="css" scheme="https://blog.lavender816.top/tags/css/" />
            <category term="JavaScript" scheme="https://blog.lavender816.top/tags/javascript/" />
            <pubDate>Mon, 24 Aug 2026 22:30:00 +0800</pubDate>
            <description><![CDATA[ 本来想浏览主题作者的博客，奈何作者大大很久没更新了，网站：琉璃的医学 &amp; 编程笔记打不开了，控制台找到报错： ，直接的意思是：在 app.js 第 1 行，变量 t 被声明了两次。浏览器直接拒绝执行这个文件；这样的报错许多 shoka 主题的很久没有维护的网站都出现了，但是我想临时看下博主网页内容，查到如下方法，作为记录，说不定以后也能用得上…… 适用场景：线上网站 JS 有语法错误 / 想临时改线上代码 / 改完刷新不丢失 / 覆盖后还能正常打断点 环境：Microsoft Edge（Chromium 内核，版本 ≥ 90 均可） 原理：DevTools 把线上文件存到本地文件夹，刷新时浏览器用本地副本代替网络响应 #一、整体流程一览 开 DevTools → Sources（源代码）→ Overrides（覆盖） 选一个空本地文件夹 → 点 Allow 授权 在 Page 树里找到报错的 JS → 右键 Save for overrides 在 Sources 编辑器里改代码 Ctrl + S 保存 → 刷新页面 → 浏览器用本地版 覆盖状态下照样可以点行号打断点 #二、详细步骤 #Step 1 打开 DevTools 快捷键：F12 或 Ctrl+Shift+I 切到顶部 Sources（源代码） 标签 #Step 2 进入 Overrides 并授权文件夹 左侧文件树底部切到 Overrides（覆盖） 标签（和 Page 并列，找不到点 更多标签） 点击 + Select folder for overrides（选择替代文件夹） 选一个空文件夹，例如： 系统弹窗点 允许（Allow） —— 这一步必须点，不点后面存不进磁盘 授权后： 文件夹出现在 Overrides 列表 Enable Local Overrides（启用本地替代） 复选框自动勾上 缓存… ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/1882074506/</guid>
            <title>Shoka主题：实现桌面歌词展示效果</title>
            <link>https://blog.lavender816.top/posts/1882074506/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <pubDate>Wed, 19 Aug 2026 18:30:00 +0800</pubDate>
            <description><![CDATA[ 为 Shoka 右下角音乐播放器加入默认开启的桌面歌词开关，将当前 LRC 歌词以主题色浮层显示在屏幕底部，并同步播放、暂停、拖动进度、切歌和刷新后的状态。 #前言 Shoka 播放器原本可以在音乐面板内部滚动显示歌词，但关闭面板后就无法继续看到当前歌词。本次改造会复用播放器已有的 LRC 解析结果，在页面底部增加一条独立的桌面歌词浮层。 最终效果包含： 在音乐面板控制栏中加入桌面歌词按钮； 默认开启，用户关闭后记住选择； 当前歌词显示在屏幕最下方； 使用主题色文字、半透明背景和模糊效果提高可读性； 播放时显示，暂停时自然隐藏； 拖动进度条时立即同步歌词； 切歌后重新解析新歌曲的 LRC； 无歌词时不会显示空浮层； 支持日间/夜间模式、移动端和减少动态效果设置； 支持键盘操作与基础无障碍属性。 #开始前准备 找到博客根目录，并备份 与 ； 确认右下角音乐播放器已经可以正常打开、播放和切歌； 至少准备一首带 LRC 歌词的音乐； 如果歌单由 Meting 接口返回，先确认返回对象中存在 字段； 本功能不需要安装新依赖； 修改完成后通过 测试，不要直接编辑 目录。 桌面歌词依赖带时间标签的 LRC，例如 。只有纯文本、没有时间标签的歌词无法跟随播放进度切换。 #文件结构 #文件变更清单 操作 文件 具体变化 修改 增加歌词按钮、默认状态、浏览器存储、底部浮层、当前歌词同步、播放和暂停联动以及键盘操作。 修改 增加歌词按钮图标、状态圆点、激活样式、底部歌词浮层、暗色模式和移动端适配。 检查或补充音乐数据 确保歌曲对象带有内联 LRC 或歌词 URL。教程只提供通用示例，不展示当前网站歌单。 本次没有删除播放器原有的面板歌词。面板歌词和桌面歌词共用同一份解析数据：前者负责完整上下文，后者只显示当前一句。 #实现原理 播放器原有的 会把 LRC 转换成下面的二维数组： 每次触发音频的… ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/3257086419/</guid>
            <title>Shoka主题：实现音乐音效可视化</title>
            <link>https://blog.lavender816.top/posts/3257086419/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <pubDate>Wed, 19 Aug 2026 18:00:00 +0800</pubDate>
            <description><![CDATA[ 为 Shoka 右下角音乐播放器增加音效可视化开关，使用 Web Audio API 分析真实音乐能量，并在页面顶部原有波浪区域绘制彩色、平滑且随节奏起伏的音频波形。 #前言 Shoka 自带的音乐播放器可以播放歌单，但默认页面波浪只是固定动画，与当前音乐内容没有关系。本次改造会在播放器内部加入一个音效可视化按钮：开启后，原有 SVG 波浪自然淡出，Canvas 彩色波形接替显示；暂停或关闭功能后，页面再平滑恢复原来的波浪。 最终效果包含： 可在音乐面板中实时开启或关闭； 开关状态保存到浏览器，刷新页面后仍然保留； 优先读取真实频率、低频能量和瞬时冲击； 波峰和波谷均会跟随音乐起伏，而不是固定循环； 使用多层贝塞尔曲线绘制圆滑波形； 开启可视化并播放音乐时，原有 SVG 波浪自然淡出； 暂停、切歌、PJAX 切换和窗口缩放后仍能继续工作； 无法取得真实音频数据时提供柔和的后备动画； 支持键盘操作、日间/夜间模式和减少动态效果设置。 #开始前准备 第一次修改主题时，建议先完成下面几项： 找到博客根目录。能看到 、 、 和 的目录就是根目录； 备份 以及本教程涉及的两个 Stylus 文件，或者先提交一次 Git； 确认主题配置中的 已经可以正常加载并播放音乐； 在博客根目录执行一次 ，确保原项目依赖完整； 本功能不需要安装新的 npm 包，浏览器原生的 Web Audio API 和 Canvas 已经足够； 建议通过 的本地地址或 HTTPS 网站测试，不要直接双击生成的 HTML 文件。 音频可视化最容易遇到的问题是跨域。即使 可以播放远程音乐，音乐服务器没有返回正确的 CORS 响应头时，浏览器仍可能禁止 Web Audio API 读取频率数据。前端代码无法绕过服务器的跨域策略。 #文件结构 本次主要涉及以下文件： 主题原有的 已经负责创建播放器并在页面切换后重新加载… ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/3178159665/</guid>
            <title>Shoka主题：美化归档、分类与标签页面</title>
            <link>https://blog.lavender816.top/posts/3178159665/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <category term="Hexo" scheme="https://blog.lavender816.top/tags/hexo/" />
            <pubDate>Wed, 19 Aug 2026 10:30:00 +0800</pubDate>
            <description><![CDATA[ 将 Shoka 默认的线性归档、分类和标签列表改造成统一的卡片页面，加入数据概览、层级分类、最近文章、日期卡片、面包屑和移动端适配。 #前言 Shoka 默认归档页面使用时间轴展示文章，结构清晰，但当文章、分类和标签逐渐增多后，页面会显得较长，也不容易快速浏览。本次改造把归档、分类和标签统一为一套视觉系统，同时保留 Hexo 原有分页、分类层级和 PJAX 行为。 改造后的页面分为四类： ：按年份分组的文章卡片； ：当前分类下的文章卡片； ：当前标签下的文章卡片； 和 ：分类索引卡片与标签索引卡片。 #开始前准备 这篇教程会修改主题模板、主题脚本和 Stylus 样式。第一次接触 Hexo 也不用担心，按下面的顺序操作即可。 找到博客根目录。能够看到 、 、 和 的文件夹，就是博客根目录。 复制一份 作为备份，或者先提交一次 Git。这样即使粘贴错误也可以快速恢复。 在博客根目录打开终端，执行 ，确保现有依赖已经安装。 后文出现的所有路径都从博客根目录开始计算，不要修改 目录。 是 Hexo 每次生成时自动创建的成品目录，直接修改会被覆盖。 每完成一个大步骤，都可以执行一次 。如果某一步写错，终端会更容易指出具体文件。 本文本身也由 Hexo 生成。为了防止文章中的 Nunjucks 示例被当成真正的主题指令执行，教程源文件对花括号做了转义；网页中显示和复制出来的代码仍然是正常的 Nunjucks 语法。真正修改 文件时，不要手动把花括号改成 HTML 实体。 #文件结构 #文件变更清单 下面先把文件级变化说清楚，再进入具体操作。这样即使是第一次修改主题，也能知道每一步应该新建文件、修改原文件，还是只做检查。 操作 文件 具体变化 新增 新建可复用的文章卡片宏，统一日期、标题、分类、字数、阅读时间和跳转箭头。 新增 自动注册完整集合计数帮助函数 ，让分类、标签、年度和月度分… ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/942686986/</guid>
            <title>Shoka主题：美化统计页面并新增多维图表</title>
            <link>https://blog.lavender816.top/posts/942686986/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <category term="Hexo" scheme="https://blog.lavender816.top/tags/hexo/" />
            <pubDate>Wed, 19 Aug 2026 10:00:00 +0800</pubDate>
            <description><![CDATA[ 重新设计 Shoka 主题统计页面，加入多年份文章日历、发布趋势、创作时钟、文章体量散点图、标签排行、分类分布以及分类与标签旭日图。 #前言 早期的统计页面只包含几个基础 ECharts 图表，功能可以使用，但在移动端、PJAX 页面切换、日间与夜间模式以及大量数据展示方面不够完善。本次改造在保留 Shoka 配色的基础上，重新设计图表卡片和加载方式，并让图表只在接近可视区域时初始化。 最终页面包含以下内容： 可从左侧切换年份的文章发布日历； 支持最近 6、12、24 个月、全部月份和自定义范围的发布趋势； 按星期和 24 小时展示发布习惯的创作时钟； 可点击进入文章、并随可视时间范围调整纵轴的文章体量散点图； TOP 10 标签、文章分类分布； 展示 “分类 → 标签” 关系的旭日图； PJAX 切换、窗口缩放、移动端和日间/夜间模式实时适配。 #开始前准备 如果是第一次修改 Hexo 主题，请先完成下面几项： 找到博客根目录。能看到 、 、 和 文件夹的目录就是根目录； 备份 和 ，或者先提交一次 Git； 在博客根目录打开终端，执行 ，确认依赖已经安装； 本文出现的路径都从博客根目录开始计算，不要把主题配置文件和站点根配置文件混淆； 每完成一个大步骤都可以执行一次 ，这样更容易找到出错位置。 本教程需要 、 和 。如果项目还没有安装，请执行： 请不要直接在 文件夹中修改代码。 是 Hexo 自动生成的目录，下一次执行 后其中的手动修改会全部消失。 #文件结构 本次主要涉及以下文件： #文件变更清单 下面按 “新增、修改、自动生成、删除” 说明每个文件发生了什么。这里描述的是完成本教程后的最终状态，实际操作时应按后文步骤依次进行。 操作 文件 具体变化 修改或重建 重做统计页结构和样式；加入年份选择、时间范围选择、7 个图表容器及主题同步脚本；关闭评论和版权区。若原来没… ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/3644149879/</guid>
            <title>Step.4 主题特殊功能（转载）</title>
            <link>https://blog.lavender816.top/posts/3644149879/</link>
            <category term="shoka主题" scheme="https://blog.lavender816.top/categories/shoka%E4%B8%BB%E9%A2%98/" />
            <category term="Hexo" scheme="https://blog.lavender816.top/tags/hexo/" />
            <category term="教程" scheme="https://blog.lavender816.top/tags/%E6%95%99%E7%A8%8B/" />
            <pubDate>Thu, 13 Aug 2026 21:45:48 +0800</pubDate>
            <description><![CDATA[ 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能 以下介绍可以使用的 markdown 或者标签代码。 功能大部分基于 渲染器，尤其是代码块的显示，与默认渲染器不兼容。 链接块 本功能参考 NexT，基于 Hexo Tag 功能，用来建立友链或其他网址链接功能。 文章中的使用格式： 使用 标签块，包围 语法书写的内容，字段包括 站点名称 必填 管理员名字 可选，默认为 的值 站点链接 必填 站点描述 可选，默认为 的值 站点图片 可选，默认为 方块颜色 可选，默认为 举个栗子： 優萌初華 琉璃的医学 &amp; 编程笔记 優萌初華 https://shoka.lostyu.me 優萌初華 琉璃的医学 &amp; 编程笔记 以上标签块里的内容，还可以保存到一个 文件中，然后使用 标签。 其中， 位于 目录下。 举个栗子： 代码块 使用 进行代码高亮，支持显示行号、行高亮 、命令行提示符 、代码块标题。 基本格式： 选项 描述 默认值 language 支持的语言戳此 如果不需要代码高亮，但希望显示代码块样式，则设为 留空或设为 ，将不显示代码高亮和代码块样式 null title 代码块的标题文字 null url 代码块标题右侧显示的链接 null link text 上述链接显示的标题 link mark 行高亮显示，格式为 。 例如 ，将高亮显示第 1、4、5、6、7、10 行 null command 命令行提示符，格式为 例如 null 练习题与答案 这个功能是用来显示练习题的。 需要在 Front Matter 中添加 ，以正确显示题型标签。 点击选项可以显示答案，以及答案解析。 下列叙述正确的是 。 虚函数只能定义成无参函数 虚函数不能有返回值 能定义虚构造函数 A、B、C 都不对 有基类 ，派生类 ，声明如下变量： 下列哪些项是 “派生类对象… ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/3076693460/</guid>
            <title>Step.3 界面显示（转载）</title>
            <link>https://blog.lavender816.top/posts/3076693460/</link>
            <category term="shoka主题" scheme="https://blog.lavender816.top/categories/shoka%E4%B8%BB%E9%A2%98/" />
            <category term="Hexo" scheme="https://blog.lavender816.top/tags/hexo/" />
            <category term="教程" scheme="https://blog.lavender816.top/tags/%E6%95%99%E7%A8%8B/" />
            <pubDate>Thu, 13 Aug 2026 21:12:48 +0800</pubDate>
            <description><![CDATA[ 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能 首页置顶文章 在文章的 Front Matter 设置 ，则该文章将显示在首页最上方的 列。 多篇文章按照发布时间倒序排列，不分页。 首页精选分类 想要在首页显示分类翻转块，需要按照以下示例的方式，给需要显示的分类加上封面图。 首先，修改站点配置： 找到 ，配置每个分类对应的英文映射，比如： 注意：hexo 会自动处理路径中的特殊字符，~`!@#$%^&amp;*()-_+={}|\;:&quot;'&lt;&gt;,.? 以及空格，这些全部会被替换成 所以避免在设置中使用上述字符，否则可导致无法抓取到目录下的 在 文件夹相应的目录里，存放封面图 例子：如 第 1 周 计算 这篇文章。 所处的分类是 现在需要在首页显示 这个分类，翻转卡片后，显示这个分类下的文章们。 而该分类经过英文映射，它的路径将是 。 那么，请在 的目录下放置 文件。 只要 对应的目录下存在 文件，这个分类就会在首页显示。 在进行 时，本分类的封面图会自动被复制到 public 目录里相应的位置。 事实上，为了方便文章管理，这个分类下所有文章的 md 文件，我都会放在 这个目录下。 且站点配置文件里，永久链接设置如下 后，文章的 html 文件们将全部生成到 目录。 具体可以查看本博客的 github 仓库。 文章详情界面中的 ，显示的是与当前文章同一分类的其他文章，并按照文章名正序排序。 o (*￣▽￣*) ゞ 其实，不设置 也可以，只要在分类路径对应的文件夹下存在 文件就行。 现在，这项功能与 的配置也无关， 生成后，图片会自动被转移到 的相关子目录下。 文章封面图 如果文章的 Front Matter 设置了 ，则封面会显示这张图片。 这里 的值可以是位于 目录里的图片文件，此处是 文件，也可以是一个某网址。 如果文章是一个 ，即… ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/140130072/</guid>
            <title>Step.2 基本配置（转载）</title>
            <link>https://blog.lavender816.top/posts/140130072/</link>
            <category term="shoka主题" scheme="https://blog.lavender816.top/categories/shoka%E4%B8%BB%E9%A2%98/" />
            <category term="Hexo" scheme="https://blog.lavender816.top/tags/hexo/" />
            <category term="教程" scheme="https://blog.lavender816.top/tags/%E6%95%99%E7%A8%8B/" />
            <pubDate>Thu, 13 Aug 2026 20:56:48 +0800</pubDate>
            <description><![CDATA[ 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能 站点别称 这里设置的名称代替 Logo，显示在页面顶部，以及页尾©️处 静态文件目录 默认值是 ，指使用本地静态文件 可以修改成 这种形式，以使用 jsDelivr 进行加速。 PS：jsDelivr 并不是实时更新，重新生成文件后需要耐心等待 静态文件所处目录的实际目录名，这些一般不改。 夜间模式 默认情况下，是否开启夜间模式取决于（优先级从高到低）： 访客点击页面头部切换按钮的自行选择 访客切换了浏览设备的主题色调 您的 配置项 自动定位 默认情况下，再次打开页面时，会自动滚动到上次浏览的位置。 这个选项设为 时将停用此功能。 加载动画 tab 切换后只是显示 loading 动画，实际并未重新加载页面 页面特效 单击页面的烟花效果配置如下 加载谷歌字体 此功能基本参考 NexT。 加粗标题的字体总是使用 ，为了正确友好的显示日文中的汉字，会先后加载 和 的字体设置。 图标 主题没有直接使用 Font Awesome，是因为用不到那么多 icon 感觉非常浪费，因此在 Iconfont 上重新建立了一个项目。 设为 ，所有字体样式前缀为 ，具体参见 。 如果需要添加或修改，请留言告诉我您的 Iconfont 用户名，我将把您添加到目前的项目中。 添加权限为 ，此后您可以任意全选，批量保存到购物车中，添加至您自己的项目里，并将主题配置文件中的 值改为您的项目。 注意，您的项目应设置 为 。 在 目录新建文件 ，把新增或修改的图标样式复制到这个文件中。 自定义 文件将覆盖主题默认样式，为了避免出错，请保证原有样式名均存在，在原有样式基础上进行增删改。 菜单与社交按钮 如上，使用 作为分隔符，依次为 。 注意，只需要写图标名称，如 ，则会自动转换为 。 十六进制颜色码需要 包绕。 支持一级子目录，子目录设置中… ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/3540591317/</guid>
            <title>Step.1 依赖插件（转载）</title>
            <link>https://blog.lavender816.top/posts/3540591317/</link>
            <category term="shoka主题" scheme="https://blog.lavender816.top/categories/shoka%E4%B8%BB%E9%A2%98/" />
            <category term="Hexo" scheme="https://blog.lavender816.top/tags/hexo/" />
            <category term="教程" scheme="https://blog.lavender816.top/tags/%E6%95%99%E7%A8%8B/" />
            <pubDate>Thu, 13 Aug 2026 20:46:48 +0800</pubDate>
            <description><![CDATA[ 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能 请务必将 hexo-renderer-multi-markdown-it 升级到最新版，目前为 0.1.5 Theme Shoka 依赖以下 Hexo 插件 插件名称 npm 地址 功能 依赖程度 hexo-renderer-multi-markdown-it 链接 md 文件渲染器，压缩 css/js/html 必需 hexo-autoprefixer 链接 给生成的 css 文件们添加浏览器前缀 必需 hexo-algoliasearch 链接 站内搜索功能 搜索按钮失灵 hexo-symbols-count-time 链接 文章或站点字数及阅读时间统计 统计没有 hexo-feed 链接 生成 Feed 文件 Feed 文件没有 没有正确安装以上插件的话，本主题会报错 or 无法正确显示 or 部分功能失效。 请注意升级到最新版 安装完以上插件后，修改站点配置文件，加入相关配置。 multi-markdown-it 安装与配置 #安装 安装前，记得务必卸载掉默认的 ，以及别的 markdown 文件渲染器。 安装 如果安装缓慢，或者失败 如报错 因为有一步需要下载 puppeteer 里的 Chromium 内核，基于天朝内部网络现状，这一步能不能成功要靠科学和运气，所以为了避免安装失败，需要加上 跳过 Chromium 内核的下载。 puppeteer 主要是用来渲染 mermaid 流程图，只要文章中不使用 mermaid 就没有任何问题，如果要使用 mermaid 建议还是想办法完全安装。 #配置 加入 配置，用来渲染 md 文件 加入 配置，压缩 css/js/html 停用默认代码高亮功能，否则代码块的 mac 样式不能正常显示。 找到 和 ，把 改成 。 autoprefixer 配置建议… ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/2448596547/</guid>
            <title>Shoka主题：修改标签页显示效果</title>
            <link>https://blog.lavender816.top/posts/2448596547/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <pubDate>Wed, 22 Jun 2022 23:00:00 +0800</pubDate>
            <description><![CDATA[ 修改标签页显示效果 #前言 本标签页面参考 HEO 大佬的标签页面，实现标签的美化以及右上角标签对应文章数量的显示 本标签页右上角显示文章数量参考 Eurkon 大佬的文章：Butterfly 标签云增加文章数上下标 #实现 #主题 yml 文件 找到主题配置文件 ; 找到 ： 其中 和 可以修改字体颜色范围。 #新增标签颜色 找到 css 颜色文件 ； 可以在 50 行左右新增自定义的标签颜色设置； 接下来修改夜间模式颜色，大概 150 行左右 在 下新增夜间模式的颜色值 单独复制用： #修改背景以及鼠标悬浮效果 找到 文件，修改如下： 修改为 #增加右上角文章数量显示 找到 文件； 60 行左右找到 部分 在最后的 中，找到最后一个 ，修改 新增上标： 或者下标 加入后如下（上标）： 最后 ，重新生成即可。 完成！ ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/4042067032/</guid>
            <title>Shoka主题：修改页面滚动视差效果</title>
            <link>https://blog.lavender816.top/posts/4042067032/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <pubDate>Wed, 22 Jun 2022 22:00:00 +0800</pubDate>
            <description><![CDATA[ 修改页面滚动视差效果 #前言 实现页面滚动时背景图随滚动发生位移的视差效果 #实现 #修改 Js 找到 ; 大概 20 行左右新增： 位置参考： 在 188 行左右： 代码处新增以下代码： 此处的 中的数值根据自己实际情况喜好可做出修改 修复切换页面时视差效果失效的问题：在 文件大概 53 行 新增如下代码 完成！ ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/1168994136/</guid>
            <title>Shoka主题：修改首页文章摘要hover效果</title>
            <link>https://blog.lavender816.top/posts/1168994136/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <pubDate>Wed, 22 Jun 2022 15:00:00 +0800</pubDate>
            <description><![CDATA[ 修改首页文章摘要 hover 效果 #前言 想法来自于 HEO 大佬首页文章效果，实现首页文章摘要的 hover 显示效果 #实现 #修改 Stylus 找到 ; 大概 260 行左右，找到 代码部分，修改如下： 修改鼠标悬浮后图片变暗效果，增加 属性： 修改鼠标悬浮后旋转效果 修改另一个方向的旋转效果（410 行左右，即最后部分） 修改鼠标悬浮后内容宽度、标题位置，摘要显示 修改鼠标悬浮前标题位置 (340 行左右 处) 修改为 修改悬浮前摘要内容显示，在紧接着 下的 中 修改为（新增） 平滑过渡（290 行左右 ，315 行左右 ，340 行左右 ，350 行 中加入平滑动画代码 在 source/css/_mixins.styl 中，仿照 的写法，自定义 ，如下： 中我加入的平滑便是 适配移动端（270 行左右， 中加入 的 100% 属性保证移动端不会出现错位） #总结 最后把所有代码贴入（以上所有改后的 代码） 完成！ ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/1237297410/</guid>
            <title>Shoka主题：修改夜间模式切换动画</title>
            <link>https://blog.lavender816.top/posts/1237297410/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <pubDate>Tue, 21 Jun 2022 19:00:00 +0800</pubDate>
            <description><![CDATA[ 修改夜间模式切换动画 #前言 仍然想要折腾下主题默认的夜间模式切换动画 #实现 #修改 Js 找到 ; 找到 的位置，修改 添加 块的代码： 将 中替换为你喜爱的新的 部分（将 html 压缩，可用在线工具），以本网站动画为例， 改为: 找到 部分（在刚才部分下方十行左右），修改按钮触发动画 ： 修改为： 其中，以上是个人动画示例， 是刚才 中最外层的 盒子。 #修改 Stylus 找到 ； 可以直接删除原本的 代码，增加个人喜爱的切换模式动画的 ，以本网站动画为例： 完成！ ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/608012233/</guid>
            <title>Shoka主题：修改加载动画</title>
            <link>https://blog.lavender816.top/posts/608012233/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <pubDate>Tue, 21 Jun 2022 09:00:00 +0800</pubDate>
            <description><![CDATA[ 修改主题加载动画 #前言 主题默认加载动画是旋转的猫猫（ha），鉴于个人想要折腾的想法，修改成其他喜爱的加载动画 主题的加载动画实际上就是一个单独的播放循环动画的网页 div 块（ )，页面最开始显示这个 div 块，加载完成后设置隐藏，即 #实现 #修改 nunjucks (layout) 找到 目录; 修改 , 修改 的位置, 大概 12 行左右: 将 的 块内填入新的 的 部分，以本网站动画为例， 下改为: #修改 Stylus 找到 ； 修改最开头的 的 : 新增居中 ，修改为 在下方新增新增的 的 代码（可以删除原来的代码）按本网站举例： 其中， 和 部分是适配移动端的 css，要根据自己的实际情况设置对应的参数： #修复页面内加载动画位置偏移的问题 找到 ； 40 行左右找到 的 配置项，仿照 的写法，加入 的 下包围整个加载动画的 块： 删除 加入或者直接在下方加入新的 ： 其中：根据自己的实际情况调整 的值。 完成！ ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/2028137251/</guid>
            <title>冰墩墩雪容融</title>
            <link>https://blog.lavender816.top/posts/2028137251/</link>
            <category term="前端" scheme="https://blog.lavender816.top/categories/%E5%89%8D%E7%AB%AF/" />
            <category term="html" scheme="https://blog.lavender816.top/tags/html/" />
            <category term="css" scheme="https://blog.lavender816.top/tags/css/" />
            <pubDate>Fri, 25 Feb 2022 22:00:00 +0800</pubDate>
            <description><![CDATA[ 这里记录下冰墩墩和雪容融的前端代码，源码从网络上获得，仅作记录 #冰墩墩 #HTML 部分 #CSS 部分 #效果图 #雪容融 #HTML 部分 #CSS 部分 #效果图 ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/22579722/</guid>
            <title>Shoka主题：新增博客新年灯笼</title>
            <link>https://blog.lavender816.top/posts/22579722/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <pubDate>Wed, 05 Jan 2022 15:00:00 +0800</pubDate>
            <description><![CDATA[ 新增：博客页面右上角新年灯笼 #前言 本文参考：知更鸟：过年啦，挂灯笼！ （原作者） 之前的 wordpress 主题也搞过这个灯笼，还是挺简单的，临近农历新年，在这个主题再搞一下 #实现 #新增主题设置 在主题的 文件中，找到 ，下面新增 选项，如下： #新增 在 中新增（可以在 这句代码前增加以下内容) #添加样式表 在根目录的 新建文件命名为 ； 填入以下内容： 重新生成，🆗 完成！ ]]></description>
        </item>
        <item>
            <guid isPermalink="true">https://blog.lavender816.top/posts/1409583388/</guid>
            <title>Shoka主题：新增博客访问统计页面</title>
            <link>https://blog.lavender816.top/posts/1409583388/</link>
            <category term="SHOKA" scheme="https://blog.lavender816.top/categories/SHOKA/" />
            <category term="shoka" scheme="https://blog.lavender816.top/tags/shoka/" />
            <pubDate>Wed, 29 Dec 2021 15:30:00 +0800</pubDate>
            <description><![CDATA[ 新增页面：新增博客访问统计页面 #前言 参考文章： Hexo 博客实时访问统计图 基于 Butterfly 主题的首页置顶 gitcalendar 本教程将会泄漏属于百度统计的 和百度统计 ，请先前往 百度统计用户手册了解，介意者请谨慎部署。 可能有时会出现跨域请求的问题 开通前条件：链接：https://tongji.baidu.com/web/help/article?id=123 需要自有网站昨日 PV 数大于 100 #实现 #加入百度统计 进入百度统计，注册或者登录，新增站点，填入信息； 获取统计代码：在管理 -&gt; 代码管理 -&gt; 代码获取 因为主题内置百度统计，只需要下图框内的代码： 找到主题 文件中 ，后面填入上图框中的问号后面的代码； #新建页面 在根目录下的 下新建文件夹，命名为 ，并在该目录下新建文件： ，填入以下内容： #更改语言并添加到菜单 刚才新建的 中，如果是用命令创建， 一行是英文，改成对应的中文就可以了； 在 中，找到 一行，新增 ； 在主题的 文件里，在 里添加到菜单中 #获取网站统计数据 进入百度统计 - 管理 - 数据导出服务; 开通数据导出服务，获得 与 ，之后直接打开数据导出服务页面或者登录开发者服务管理获取 与 ; 通过如下 进入百度账号登录页，此处的登录账号就是您登录百度统计查看报告数据的账号，登录完成后将跳转至获取 的页面： 其中： {CLIENT_ID} 填写您的 API Key 通过身份验证获取 ；用户同意授权后，将跳转至一个获取 CODE 的页面。复制 CODE 值后可将其加入以下 URL 换取 ACCESS_TOKEN ： 其中： {CLIENT_ID} 填写您的 API Key {CLIENT_SECRET} 填写您的 Secret Key {CODE} 填写您刚才拿到的 CODE 返回如下（举例）： （… ]]></description>
        </item>
    </channel>
</rss>
