Hexo 博客中插入本地图片的实践记录
🗃️ 图片存放位置的选择
我将图片统一放在了博客项目的 source/images/ 目录下，这样在 Hexo 构建时会自动复制到 public/images/ 中，路径清晰、引用方便。
✏️ Markdown 插图语法示例
在 Markdown 中插入图片，我采用的是标准语法：
1 |  |
图片路径是以 /images/ 开头的绝对路径，对应的是构建后 public/images/ 中的资源。
🔍 本地预览验证方法
执行以下命令后，可以本地预览：
1 | hexo clean && hexo g && hexo s |
浏览器打开 http://localhost:4000/ 后，文章内图片能正常显示。也可以直接访问图片链接：
1 | http://localhost:4000/images/comment-preview.png |
如果图片能单独访问，但在文章里不显示，那就要检查是否用了相对路径、或者图片链接是否打错。
✅ 总结
Hexo 插图其实不复杂，只要把图片放在 source/ 下，并使用正确路径，就可以稳定地显示。
以后写文时，我都会统一放在 source/images/，省心不少。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 AI WHALE！
相关推荐
2025-06-10
Hexo 博客中 Markdown 标题序号的添加与规范实践
引言在写博客时，Markdown 标题序号经常会出现缺失或混乱的问题，尤其是在多人编辑或长期维护的博客项目中。标题结构跳级也常导致 Hexo 渲染页面时出现错乱，比如标题被误识为列表，页面结构紊乱。 本文聚焦两个核心问题： 如何统一给 Markdown 标题添加序号，以及如何清理已有的错误序号； 如何检测并规范标题等级跳级，避免 Hexo 渲染异常。 Part 1：统一添加 / 删除标题序号1.1 使用 VS Code 插件自动添加序号推荐使用 VS Code 插件 Markdown All in One 来自动给 Markdown 标题添加序号。 安装插件后，使用命令面板（Ctrl+Shift+P）执行：Add/Update Section Numbers 该命令会遍历文档所有标题，自动添加类似如下的编号： 12## 1. 项目初始化### 1.1 安装依赖 注意： 目前该插件只能生成阿拉伯数字格式的序号； 它不会自动检测并删除已有的编号，重复执行可能导致序号重复。 1.2 删除已有标题序号（使用 Replace Rules）为了避免编号重复，建议先清...
2025-06-18
Hexo 博客中添加字数统计功能出现标题解析异常的排查记录
在为 Hexo 博客集成字数统计功能时，我遇到一个渲染异常的问题：一段普通的文字和其后的图片被误解析为标题（<h2> 标签），导致显示错乱。这篇文章记录了该问题的排查和解决过程，供遇到类似情况的朋友参考。 一、背景与问题描述我为 Hexo 博客安装了 hexo-wordcount 插件，并使用 Volantis 主题。在配置 top_meta 后，字数统计功能成功显示。但在文章中记录成功效果时，出现如下异常渲染： 1234<h2 id="最终，在文章标题下方正确显示了字数统计和阅读时长信息。"> ... <img src="..."></h2> 原因是如下 Markdown 被错误渲染为一个标题标签： 12最终，在文章标题下方正确显示了字数统计和阅读时长信息。 二、原因分析这一问题的根本原因在于 Markdown 渲染器（如 hexo-...
2025-06-09
使用 Hexo 搭建 AI 编程风格的吉卜力风博客
本文整合了我在搭建博客过程中的对话内容，系统地记录了使用 Hexo + Volantis 搭建一个 AI 编程主题的吉卜力风格博客的过程，包括部署、主题安装、美化、图标替换、壁纸设置与自动刷新等内容。 1. 项目初始化与环境准备1234npm install -g hexohexo init ai_blogcd ai_blognpm install 确认版本： 1hexo -v ✅ 为什么要确认版本？ Volantis 主题对 Hexo 有最低版本要求。根据 Volantis 官方文档，推荐使用 Hexo 6.3.0 或更高版本，以获得最佳兼容性和功能支持。 使用以上命令检查当前版本是否符合要求。如果你的 Hexo 版本低于要求，可以通过以下方式升级： 1npm install -g hexo@latest 2. 主题安装与配置 Volantis ✅ 推荐使用 Git 子模块的方式安装主题，以便未来方便升级、避免嵌套仓库冲突。 2.1. 安装 Volantis 主题（推荐方式 ✅） Fork Volantis 仓库到你自己的 GitHub 账户前往官方仓库：👉 ht...
2025-06-10
Hexo 博客中集成 Giscus 评论系统的实践记录
Hexo 集成 Giscus 评论系统完整指南📘 一、Giscus 简介Giscus 是一个基于 GitHub Discussions 的现代评论系统，支持 Markdown、暗黑模式、Reactions，并通过 GitHub OAuth 实现身份识别。它不需要额外数据库，适用于技术博客、文档站点等。 volantis默认支持 Giscus，所以选择了这个插件系统。 🚀 二、准备工作2.1 拥有一个公开 GitHub 仓库确保你的博客源代码所在的仓库是公开的。 2.2 Hexo 安装与主题准备本文以 Volantis 主题为例，你应已完成以下操作： 安装 Hexo 配置并使用 Volantis 主题 启用 Hexo 的 deploy 功能（如 hexo-deployer-git） 🔧 三、GitHub 端配置3.1 启用 Discussions 功能 进入你的 GitHub 仓库主页 点击菜单栏的【Settings】→ 左侧【Features】 → 勾选 Discussions 3.2 创建 Discussion 分类 打开仓库的 Discussions 页面 点...
2025-06-11
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...
2025-06-12
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...
评论
