Hexo博客

前言在博客中，除了长篇的技术文章，我们有时也想分享一些简短的想法、生活感悟或者日常动态。说说功能就像微博、朋友圈一样，可以让我们快速记录生活中的点滴，让博客更加生动有趣。 本教程将教你如何在 Hexo + Butterfly 主题中实现一个完整的说说功能。 功能特点✨ 核心功能： 📝 支持发布简短动态 📅 自动按时间降序排序 🕐 智能时间显示（刚刚、几分钟前、具体日期） 📍 支持显示发布来源（Web、手机等） 🎨 精美的卡片式设计 📱 完美的响应式布局 🌙 深色模式适配 ✨ 流畅的动画效果 实现步骤第一步：创建说说页面使用 Hexo 命令创建说说页面： 1hexo new page talking 编辑 source/talking/index.md，设置页面类型： 12345678910---title: 说说date: 2026-01-07 18:35:09type: talkingcomments: true---<div id="talking-container"> <div class="talki...

前言关于页面是博客中非常重要的一个页面，它是访客了解博主的第一窗口。一个精心设计的关于页面不仅能展示个人信息，还能体现博主的个性和品味。本文将详细介绍如何在 Hexo + Butterfly 主题中实现一个功能完善、美观大方的关于页面。 什么是关于页面关于页面（About Page）是博客中用于介绍博主个人信息的专门页面，通常包含： 个人简介：姓名、头像、个人描述 技能标签：掌握的技术栈和技能 博客统计：文章数、分类数、标签数、总字数等 联系方式：GitHub、Email、社交媒体等 个人理念：座右铭、人生格言等 一个好的关于页面能够： 让访客快速了解博主 展示博主的专业能力 提供联系方式，促进交流 增强博客的个性化和亲和力 实现步骤步骤 1：创建关于页面首先使用 Hexo 命令创建关于页面： 1hexo new page about 这会在 source/about/ 目录下生成 index.md 文件。 步骤 2：编辑页面内容编辑 source/about/index.md，设置页面类型和内容： 123456789101112131415161718192021...

Hexo 友链页面 - 增加博客社交属性想让你的博客更有社交属性？想和其他博主互相交流？友链页面是必不可少的！本教程教你如何在 Hexo + Butterfly 主题中实现一个完整的友链功能。 📋 目录 什么是友链 为什么需要友链 实现步骤 功能特点 使用说明 总结 什么是友链1. 定义友情链接（Friend Links）是博客之间互相推荐的链接，通常展示在专门的友链页面上。 2. 展示形式友链通常以卡片形式展示，包含： 🖼️ 网站头像：网站的 Logo 或代表图片 📝 网站名称：网站的标题 🔗 网站链接：网站的 URL 💬 网站描述：一句话介绍 3. 作用 互相推广：增加网站曝光度 建立联系：与其他博主交流 提升 SEO：增加外链权重 丰富内容：让博客更有人情味 为什么需要友链1. 社交属性问题：博客是孤立的，缺乏与其他博主的联系 解决：通过友链建立博客圈子，互相交流学习 2. 流量互换问题：新博客流量少，难以被发现 解决：通过友链互相推荐，增加访问量 3. SEO 优化问题：搜索引擎收录慢，排名低 解决：友链提供外链，提升网站权重 4. 内容发现问题：不知道...

Hexo PWA 支持 - 离线访问与应用化配置教程 想让你的博客像原生 App 一样？支持离线访问？可以添加到手机主屏幕？PWA 技术帮你实现！本教程教你如何为 Hexo 博客配置 PWA 支持。 📋 目录 什么是 PWA 为什么需要 PWA 安装插件 配置说明 验证 PWA 使用体验 总结 什么是 PWA1. 定义PWA（Progressive Web App） 是一种渐进式 Web 应用技术，让网站具备类似原生应用的体验。 2. 核心技术PWA 主要依赖三大技术： 📱 Web App Manifest：应用清单文件，定义应用的名称、图标、主题色等 🔧 Service Worker：服务工作线程，实现离线缓存和后台同步 🔒 HTTPS：安全连接，PWA 必须在 HTTPS 环境下运行 3. 主要特性✅ 离线访问：即使没有网络也能浏览已缓存的内容✅ 添加到主屏幕：像 App 一样安装到手机桌面✅ 全屏显示：隐藏浏览器地址栏，沉浸式体验✅ 推送通知：支持消息推送（需额外配置）✅ 后台同步：在后台更新内容✅ 快速加载：利用缓存加速页面加载 为什么需要 PWA1....

Hexo 系列文章功能 - 组织相关内容的最佳实践 写了很多相关的文章，但读者不知道该按什么顺序阅读？系列文章功能帮你解决这个问题！本教程教你如何使用 Butterfly 主题的系列文章功能。 📋 目录 什么是系列文章 为什么需要系列文章 启用系列文章功能 创建系列文章 配置选项详解 最佳实践 总结 什么是系列文章1. 定义系列文章（Series） 是将多篇相关文章组织在一起的功能，让读者可以按照特定顺序阅读。 2. 展示效果启用系列文章后，在文章页面会显示： 12345📚 本文属于「Hexo魔改教程」系列├── 1. Hexo 性能优化 - 代码压缩配置教程├── 2. Hexo SEO 优化 - 站点地图配置教程├── 3. Hexo 数据统计 - 百度统计与 Google Analytics 配置教程└── 4. Hexo 系列文章功能 - 组织相关内容的最佳实践 (当前) 3. 功能特点✅ 自动编号：按顺序显示文章编号✅ 导航便捷：点击即可跳转到其他文章✅ 高亮当前：当前文章会特殊标记✅ 自动排序：可按标题或日期排序 为什么需要系列文章1. 提升用户体验问题...

Hexo 双分支部署指南：从原理到 Netlify 实战在 Hexo 博客部署中，很多人会困惑于hexo d自动部署与 GitHub 手动提交的区别，以及如何通过双分支结构优雅地部署到 Netlify。本文将清晰拆解两种部署方式的核心差异，并手把手教你用双分支策略实现 Netlify 部署，兼顾源码安全与静态文件发布需求。 一、核心概念：hexo d与 GitHub 手动提交的区别简单说，两者的本质是操作对象和目标分支的不同，具体区别如下： 维度 hexo d（自动部署） GitHub 手动提交（git push） 操作对象 仅处理public文件夹（静态文件：HTML/CSS/JS 等） 处理 Hexo 源码（source文章、themes主题、_config.yml配置等） 依赖配置 依赖_config.yml中的deploy字段（指定仓库和分支） 依赖 Git 基础命令（add/commit/push），无需特殊配置 分支用途 通常部署到静态文件分支（如gh-pages/netlify-pages） 通常...

Hexo+Butterfly 优雅配置音乐播放器在博客中嵌入音乐播放器，能为访客营造更沉浸的阅读氛围。Hexo 搭配 Butterfly 主题时，借助 APlayer 和 Meting.js 可快速实现这一功能，无需复杂开发。本文将详细讲解配置流程、参数含义及实用技巧，帮你轻松打造专属音乐博客。 一、核心工具与原理配置音乐播放器需依赖两个关键工具，二者分工明确： APlayer：轻量级 HTML5 音乐播放器内核，负责渲染播放界面、控制播放逻辑（如暂停、切换歌曲）； Meting.js：音乐平台 API 封装工具，支持直接调用网易云、QQ 音乐等平台的播放列表，无需自建音乐文件库。 工作流程：Meting.js 从音乐平台获取播放列表数据，APlayer 将数据渲染为可视化播放器，实现 “一键接入在线音乐” 的效果。 二、前置准备 环境要求： 已安装 Hexo 博客框架及 Butterfly 主题（建议使用最新版本，兼容性更好）。 若未安装主题，可参考 Butterfly 官方文档 完成部署。 获取音乐资源 ID： 以网易云音乐为例，打开目标播放列表，URL 中 i...

Hexo 中 Butterfly 主题修改字体大小教程在使用 Hexo 搭建博客并采用 Butterfly 主题时，有时我们需要根据自己的阅读习惯调整字体大小，下面就来介绍具体的修改方法。 找到配置文件首先，我们需要找到字体大小设置所在的文件，路径为： 1\node_modules\hexo-theme-butterfly\source\css\var.styl 可以通过文件管理器导航到该路径，也可以在博客的开发工具中直接定位到这个文件。 修改字体大小参数打开var.styl文件后，我们会看到关于字体大小的配置代码： 1234// Global Variables$font-size = hexo-config('font.global_font_size') ? convert(hexo-config('font.global_font_size')) : 18px // 全局字体大小$code-font-size = hexo-config('font.code_font_size') ? convert(hex...

Hexo 常用命令使用和详解Hexo 作为一款高性能的静态博客框架，其命令行工具设计简洁却功能强大。无论是新手搭建第一个博客，还是老手批量管理内容，掌握核心命令都是提升效率的关键。详细解析 Hexo 常用命令的用法与技巧。 一、内容管理：文章与页面的创建与发布1. 创建文章（默认布局为 post）1hexo new "文章标题" # 等价于 hexo new post "文章标题" 生成路径：source/_posts/文章标题.md Markdown 头部信息（Front-matter）：自动生成包含标题、日期、标签等元数据的头部，例如： 123456---title: 文章标题date: 2025-08-10 15:30:00tags:- Hexo--- 2. 创建独立页面（如关于页、分类页）1hexo new page "页面名称" # 如 hexo new page "about" 生成路径：source/页面名称/index.md ...

在 Hexo 博客中插入图片的完整指南Hexo 是一个基于 Node.js 的静态博客生成器，因其灵活性和扩展性而广受欢迎。然而，在使用 Markdown 编写博客时，插入图片可能会遇到路径问题或格式限制。本文将详细介绍如何在 Hexo 中插入图片的多种方法 一、插入图片的三种种方法方法 1：使用文章资源文件夹（推荐）Hexo 提供了一个 post_asset_folder 功能，允许为每篇文章创建独立的资源文件夹。修改 Hexo 根目录下的 _config.yml 文件： 1234post_asset_folder: truemarked: prependRoot: true postAsset: true 说明：此配置会为每篇新文章自动生成一个与文章同名的文件夹，用于存放图片等资源。 创建新文章： 1hexo new "你的文章标题" 这会在 source/_posts/ 目录下生成一个同名文件夹（如 你的文章标题）和 .md 文件。 存放图片：将图片放入生成的文件夹中（例如 source/_posts/你的文章标题/）。 插入图片：...