Volantis 主题下自定义吉卜力风格与柔和配色的实践
在搭建 Hexo 博客并使用 Volantis 主题的过程中，为了营造一种温柔、宁静、类似吉卜力风格的视觉效果，我进行了以下几个方面的样式调整和优化。 顶栏样式调整将默认主题的顶栏背景色替换为柔和的奶油色： 1234#l_header { background-color: #e5ddc5 !important; box-shadow: none !important;} 链接颜色调整为了呼应整体的暖色调，同时保持良好的可读性和视觉反馈，设置了如下链接颜色： 123456a { color: #3b7d99;}a:hover { color: #bb4d3b;} 模糊背景优化Volantis 默认通过 .blur 类结合 backdrop-filter 添加半透明白色背景。为了贴近吉卜力风格，我将其调整为更温暖的色调： 1234.blur { background: rgba(250, 245, 235, 0.9) !important; /* 柔和奶油白 */ backdrop-filter...
Hexo 博客头像图片异常变回旧图的问题排查记录
问题描述在使用 Hexo 搭建博客（主题为 Volantis）过程中，用户修改了博客头像路径： 1avatar: /images/website/avatar.png 原头像为旧图 /images/logo_2.png，已确认删除。但在使用 hexo server 启动后，首页初始加载时头像显示正常，一旦打开 Chrome DevTools 并刷新页面，头像却重新变回 /images/logo_2.png，尽管图片已被删除，且请求返回 404。 排查过程✅ 配置方面 清除 Hexo 缓存：hexo clean && hexo g 删除 public/、.cache/、db.json 确认 themes/volantis/_config.yml 中 widgets.blogger.avatar 设置正确 确认模板文件 blogger.ejs 中渲染了正确路径 使用固定路径 <img src="/images/website/avatar.png" /> 确保非变量问题 ✅ 运行时调试 使用 Firefox 正常，问题仅在 Ch...
从 Hexo 模板创建新博客并独立管理 Volantis 子模块的完整过程
在 Hexo 博客搭建中，很多用户会选择将主题如 Volantis 作为子模块管理以便于后续更新。然而，如果你想以现有的博客为模板创建新的博客，并保留主题改动，同时又不希望多个项目之间相互干扰，合理管理 Git 子模块就显得非常重要。 本文记录了一个完整的实践过程，包含遇到的问题、原因分析和最终的解决方法。 场景说明 已有博客项目：ai_blog，使用 fork 的 Volantis 主题作为 Git 子模块，且 _config.yml 中做了大量定制修改； 目标：创建一个新博客 tech_blog，以 ai_blog 为基础模板，但希望主题配置独立； 遇到的问题包括：子模块复用导致冲突、分支不同步、远程混乱、推送失败等。 一、从模板创建新项目12345678910111213# 克隆 ai_blog，包括子模块git clone --recursive https://github.com/yourname/ai_blog.git tech_blogcd tech_blog# 删除旧 git 记录，准备建立新仓库rm -rf .gitgit init# 重新添加远程并提交g...
Hexo 博客中添加字数统计功能出现标题解析异常的排查记录
在为 Hexo 博客集成字数统计功能时，我遇到一个渲染异常的问题：一段普通的文字和其后的图片被误解析为标题（<h2> 标签），导致显示错乱。这篇文章记录了该问题的排查和解决过程，供遇到类似情况的朋友参考。 一、背景与问题描述我为 Hexo 博客安装了 hexo-wordcount 插件，并使用 Volantis 主题。在配置 top_meta 后，字数统计功能成功显示。但在文章中记录成功效果时，出现如下异常渲染： 1234<h2 id="最终，在文章标题下方正确显示了字数统计和阅读时长信息。"> ... <img src="..."></h2> 原因是如下 Markdown 被错误渲染为一个标题标签： 12最终，在文章标题下方正确显示了字数统计和阅读时长信息。 二、原因分析这一问题的根本原因在于 Markdown 渲染器（如 hexo-...
用 Cursor 开发 VSCode 插件时遇到的版本兼容性问题排查实录
VSCode 插件在 Cursor 不能用？一次环境兼容性大坑的排查与解决最近在开发 VSCode 插件时，遇到了一个非常隐蔽但又很有代表性的大坑：插件在官方 VSCode 客户端中一切正常，但在 Cursor 编辑器中死活激活不了，命令也不显示。 这篇文章记录我的排查过程、最终的解决办法，以及一些经验教训，希望能帮到遇到类似问题的你。 问题描述我写了一个 VSCode 插件，在官方 VSCode 客户端里可以正常激活和使用，命令也能正常显示。但当我切换到 Cursor 编辑器，发现插件根本没有被激活，命令也找不到。 我反复检查代码、配置，依赖也都装了，编译也没报错，就是不行！ 排查过程1. 常规排查 重新安装依赖（pnpm install） 重新编译（pnpm run compile） 检查 package.json 配置 查看输出面板和调试控制台 结果都没有发现明显问题。 2. 环境对比（真实心路）其实在排查过程中，我并没有第一时间注意到 VSCode 和 Cursor 的底层版本差异。一开始只是觉得它们界面很像，理所当然地以为插件兼容性不会有大问题。 直到我在向 Chat...
Hexo 博客结构化数据与 SEO 配置实践全记录
最近对 Hexo 博客进行了结构化数据（Structured Data）与 SEO 配置优化，过程中踩了不少坑，以下是完整的记录与总结，希望对同样使用 Hexo 的朋友有所帮助。 一、起因：Search Console 无法检测结构化数据起初在 Google 的 Rich Results 测试工具和 Search Console 中发现博客页面无法识别任何结构化数据，怀疑是结构化数据输出有误。 二、排查过程与问题定位1. 替换 schema.org.cn 为 schema.org在检查页面源代码后发现结构化数据的 @context 字段中使用了 https://schema.org.cn，而 Google 仅识别 https://schema.org，于是批量替换： 1find . -type f -exec sed -i 's/schema\.org\.cn/schema.org/g' {} + 修改后重新部署，Rich Results 测试开始可以正常识别结构化数据。但具体是因为该原因还是只是延迟导致的，还没有完全确定。 2. Sea...
Hexo 博客中添加字数统计功能的实践记录
在搭建 Hexo 博客并使用 Volantis 主题时，我尝试为文章添加字数统计功能。以下是我在此过程中遇到的问题和最终解决方案的完整记录。 一、安装插件与初始配置我按照_config.yml中说明的，安装了 hexo-wordcount 插件： 1npm i hexo-wordcount 并在博客volantis主题目录下的 _config.yml 文件中进行了如下配置： 1234plugin: # ...(省略) wordcount: enable: true 并运行以下命令以重建博客： 1hexo clean && hexo g && hexo s 二、发现没有生效尽管配置无误，且 hexo-wordcount 插件安装成功，但在本地启动博客预览时，文章标题下方并未显示任何字数统计信息。 三、逐步排查1. 检查 article.ejs首先我查看了主题路径下的 themes/volantis/layout/_partial/article.ejs，发现其通过 <%- partial('meta', ...
Hexo 博客中为文章添加封面图的实践记录
1. 写在前面在搭建 Hexo 博客的过程中，我一直希望文章列表能更美观一些。特别是首页的文章卡片，如果能加上一张封面图，整体效果会更加吸引人。于是我着手尝试为文章添加封面图，并记录下这个过程，希望对同样使用 Volantis 主题的朋友有所帮助。 2. 封面图功能的支持背景我使用的是 Hexo + Volantis 主题，发现主题的文章预览卡片中，实际上是支持封面图显示的。只是这一功能并不默认开启，也没有在文档中有明显说明，需要我们自己手动配置。 在文章的 front-matter 中加入headimg字段，就可以控制每篇文章的封面图显示。 3. 添加封面图的方法在每篇 Markdown 文章的开头（也就是 front-matter 区域），添加 headimg 字段即可。 比如： 1234567---title: Hexo 博客封面图测试date: 2025-06-10 16:20:00tags: - 博客测试cover: /images/test-cover.jpg--- 💡 图片路径推荐放在 source/images/ 目录中，发布后可通过 /images/xx...
Hexo 博客中插入本地图片的实践记录
🗃️ 图片存放位置的选择我将图片统一放在了博客项目的 source/images/ 目录下，这样在 Hexo 构建时会自动复制到 public/images/ 中，路径清晰、引用方便。 ✏️ Markdown 插图语法示例在 Markdown 中插入图片，我采用的是标准语法： 1 图片路径是以 /images/ 开头的绝对路径，对应的是构建后 public/images/ 中的资源。 🔍 本地预览验证方法执行以下命令后，可以本地预览： 1hexo clean && hexo g && hexo s 浏览器打开 http://localhost:4000/ 后，文章内图片能正常显示。也可以直接访问图片链接： 1http://localhost:4000/images/comment-preview.png 如果图片能单独访问，但在文章里不显示，那就要检查是否用了相对路径、或者图片链接是否打错。 ✅ 总结Hexo 插图其实不复杂，只要把图片放在 source/ 下，并使...
Hexo 博客中添加分类、标签、关于、友链页面的完整教程（Volantis 主题）
Hexo Volantis 添加常用页面指南前言在搭建 Hexo 博客并使用 Volantis 主题时，很多人会遇到访问 /categories/、/tags/、/about/ 或 /friends/ 页面时提示 Cannot GET 的问题。本文将手把手教你如何手动添加这些页面并正确配置它们的 front-matter，从而让博客结构更完整，功能更齐全。 一、添加分类页面（/categories/）1. 安装插件（如未安装）1npm install hexo-generator-category --save 2. 创建页面1hexo new page categories 3. 修改 front-matter编辑 source/categories/index.md 内容如下： 12345---layout: categoryindex: truetitle: 分类--- 4. 重建博客1hexo clean && hexo g && hexo s 5. 访问验证浏览器访问：http://localhost:4000...
