外部链接安全跳转页面配置
前言博客中不可避免地会引用外部链接。默认情况下，点击外部链接会直接跳转到目标站点，用户没有任何心理准备。这存在两个问题： 用户体验 — 用户无法感知即将离开博客，容易产生困惑 安全风险 — 不熟悉的外部链接可能带来钓鱼或恶意网站风险 本文将实现一个外部链接安全跳转页面：用户点击任何外部链接后，先跳到一个中间提示页，展示目标地址和安全警告，确认后才跳转。效果类似 V2EX、知乎的外链跳转机制。 实现思路整体方案采用构建时重写 + 静态跳转页： Hexo Filter — 在 HTML 渲染完成后，通过 after_render:html 钩子扫描所有 <a> 标签，将外部链接重写为 /go/?url=<encoded_url> 静态跳转页 — 在 source/go/ 生成一个页面，通过 JS 解析 URL 参数，展示目标信息并实现跳转 样式隔离 — 通过内联 CSS 隐藏主题的导航栏、侧边栏等元素，使跳转页成为独立的全屏页面 这种方案是纯静态的，兼容 GitHub Pages 和 Vercel 等静态托管平台，无需服务器支持。 一、创建 H...
首页分类磁贴配置与自定义
前言默认的 Butterfly 主题首页只有文章列表，缺少直观的分类入口。hexo-butterfly-categories-card 插件可以在首页文章列表上方展示一组分类磁贴卡片，每个卡片显示分类名称、描述、文章数量和背景封面，点击即可跳转到对应分类页面。本文介绍插件的安装配置，以及如何通过自定义 CSS 修改图标和悬停效果。 一、安装插件在博客根目录执行： 1npm install hexo-butterfly-categories-card --save 二、基础配置在 _config.butterfly.yml 中添加以下配置： 123456789101112131415161718192021222324# hexo-butterfly-categories-card 首页分类磁贴categoryBar: enable: true priority: 5 enable_page: / layout: type: id name: recent-posts index: 0 column: even # odd：3列 | even：...
音乐页面配置与播放器集成
前言在博客中嵌入音乐播放器可以让访客在阅读时享受音乐。本文将介绍如何利用 Butterfly 主题内置的 APlayer + MetingJS 支持，接入网易云音乐和QQ音乐的个人歌单，并通过自定义样式实现平台专属配色和优雅的卡片布局。 一、技术方案使用 Butterfly 主题内置的 APlayer + MetingJS 支持（无需额外安装播放器包），配合 hexo-tag-aplayer 插件提供 {% meting %} 标签语法： APlayer：HTML5 音乐播放器 UI MetingJS：客户端 JS 库，从音乐平台 API 拉取歌单元数据并渲染为 APlayer 播放器 hexo-tag-aplayer：Hexo 标签插件，提供 {% meting %} 标签语法，解决 <meting-js> 被 Markdown 渲染器过滤的问题 支持的平台：网易云音乐（netease）、QQ音乐（tencent）、酷狗（kugou）等。 二、安装与配置2.1 安装插件1npm install hexo-tag-a...
Bilibili追番追剧页面配置
前言在博客中展示自己的追番追剧记录是一件很有趣的事情。本文将介绍如何使用 hexo-bilibili-bangumi 插件，将 Bilibili 的追番追剧数据自动同步到 Hexo 博客中，并自定义样式使其与 Butterfly 主题风格统一。 一、安装插件在博客根目录执行： 1npm install hexo-bilibili-bangumi --save 插件依赖 hexo-renderer-pug，如果未安装需先执行： 1npm install hexo-renderer-pug --save 二、获取 Bilibili SESSDATA插件需要 Bilibili 的 SESSDATA cookie 来获取观看进度数据。获取方式： 在浏览器中登录 bilibili.com 按 F12 打开开发者工具 切换到 Application（应用程序）标签页 左侧找到 Cookies > https://www.bilibili.com 在右侧列表中找到 SESSDATA，复制它的 Value 注意：SESSDATA 会过期（通常几个月），过期后需要重新获取。没...
Hexo文章加密功能配置
前言在搭建个人博客的过程中，有时候我们需要对某些文章进行加密保护，比如面试笔记、私人日记等敏感内容。本文将详细介绍如何使用 hexo-blog-encrypt 插件为 Hexo 博客添加文章加密功能，并实现按分类自动加密。 一、安装加密插件首先需要安装 hexo-blog-encrypt 插件： 1npm install hexo-blog-encrypt --save 安装完成后，插件会自动注册到 Hexo 的过滤器系统中。 二、基础配置2.1 站点配置在站点根目录的 _config.yml 文件中添加加密配置： 1234# hexo-blog-encrypt 文章加密配置encrypt: abstract: 本文已加密，请输入密码查看 wrong_pass_message: 密码错误，请重新输入 注意：配置字段名必须是 encrypt，而不是 hexo_blog_encrypt。 2.2 配置项说明 配置项 说明 默认值 abstract 加密文章显示的提示文字 “Here’s something encrypted…” wrong_pass_m...
Butterfly分类标签导航栏配置
前言默认的Butterfly主题在分类和标签页面没有导航栏，用户需要返回总页面才能切换到其他分类或标签。本文介绍如何通过JavaScript动态注入的方式，在具体分类/标签页面添加一个横向导航栏。 实现思路由于使用npm安装的Butterfly主题无法直接修改pug模板文件，采用以下方案： JavaScript动态注入 - 检测页面类型，动态创建导航栏 从侧边栏获取数据 - 利用侧边栏已有的分类/标签列表 CSS样式美化 - 添加导航栏样式和高亮效果 一、创建JavaScript脚本在 source/js/catalog-bar.js 创建脚本： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104...
Butterfly搜索与自定义页面配置
前言除了常规的文章页面，博客还可以添加搜索功能和自定义页面来丰富内容。本文将介绍如何配置搜索功能，以及如何创建音乐、电影、友链等自定义页面。 一、搜索功能配置1.1 安装搜索插件首先需要安装 hexo-generator-search 插件来生成搜索索引文件： 1npm install hexo-generator-search --save 1.2 Butterfly 主题配置在 _config.butterfly.yml 中配置搜索功能： 12345678# 搜索search: use: local_search # 指定搜索引擎：local_search / algolia_search placeholder: 搜索文章... # 搜索框提示文字 local_search: preload: true # 页面加载时预加载搜索数据 top_n_per_article: 1 # 每篇文章显示的搜索结果数量 unescape: false # 是否转义 HTML 注意：必须使用 use 字段指定...
博客页脚美化与运行时间脚本
前言页脚是博客的重要组成部分，一个精心设计的页脚可以让博客更加专业。本文将介绍如何美化页脚，包括自定义文字、运行时间计时器和心跳动画效果。 一、页脚基础配置1234567891011121314151617181920212223# 页脚footer: owner: enable: true since: 2026 # 建站年份 custom_text: | # 自定义 HTML 内容 <div style="text-align:center; padding:10px 0;"> <p style="margin:5px 0; font-size:0.9em; color:#555;"> <i class="fas fa-heart" style="color:#e74c3c; margin:0 5px;"></i> 用代码编织梦想，用文字记录成长 <i class=...
Butterfly文章页与内容配置
前言文章页是博客的核心页面，良好的配置可以提升阅读体验。本文将介绍代码块样式、文章元信息、目录、相关文章、版权信息、字数统计和访问统计等配置。 一、代码块配置12345678910# 代码块配置code_blocks: theme: darker # 主题：darker / pale night / light / ocean / false macStyle: true # Mac 风格（红绿黄按钮） height_limit: 300 # 代码块高度限制（px） word_wrap: false # 自动换行 copy: true # 复制按钮 language: true # 显示语言 shrink: false # 是否可收缩 fullpage: false # 全屏按钮 提示: macStyle: true 会让代码块顶部显示 Mac 风格的红绿黄按钮，视觉效果更好。 二、文章元信息2.1 页面元信息1234567...