感谢各位的帮助 ，经过测试，大部分功能已经可以投入使用！🎉此文章只记录零散的信息内容

从安装到部署

hexo官方网站：https://hexo.io/docs/

node.js安装

具体安装教程网上搜寻

  1. 下载node.js安装包。
  2. 打开终端检查node.js和npm是否安装好.
  3. 配置环境。
  4. 检查环境是否正确设置。

git安装

官网：https://git-scm.com/downloads

选择二进制下载：

image-20250121194057495

安装完成使用命令行查询是否安装成功：

1
git --version

如果出现版本号代表安装成功，下一步进行基本的设置：

1
2
3
4
5
git config --global user.name "你的名字"
git config --global user.email "你的电子邮件地址"

# 查看你的设置信息
git config --list

初始化你的项目

依次运行下面的命令：

1
2
3
4
5
6
7
8
9
10
11
12
# 初始化
hexo init myblog
cd myblog
npm install

# 启动本地服务器后，通过给出的地址访问
hexo server

# 生成静态网页的命令
hexo g


常用命令

集成命令，清理生产并且上传

1
hexo clean && hexo generate && hexo deploy

创建新页面

1
hexo new page yourpagename

md文章的设置

Front-matter 是 Markdown 文件顶部的 YAML 或 JSON 格式的配置块，用于定义文章的元数据（如标题、日期、分类、标签等）。Front-matter 必须用 --- 包裹，位于文件的最顶部。

1. 常用 Front-matter 字段

字段名 说明 示例值
title 文章的标题 title: 我的第一篇文章
date 文章的创建日期（格式：YYYY-MM-DD HH:mm:ss） date: 2023-10-01 12:00:00
updated 文章的更新日期（格式：YYYY-MM-DD HH:mm:ss） updated: 2023-10-02 15:00:00
categories 文章的分类（支持多级分类） categories: [技术, Hexo]
tags 文章的标签（支持多个标签） tags: [Hexo, 教程]
permalink 自定义文章的永久链接 permalink: my-first-post
comments 是否启用评论（默认值由主题配置决定） comments: false
cover 文章的封面图片（部分主题支持） cover: /images/cover.jpg
toc 是否显示文章目录（Table of Contents） toc: true
mathjax 是否启用 MathJax 数学公式渲染 mathjax: true
sticky 是否置顶文章（数值越大，置顶优先级越高） sticky: 100
description 文章的描述（用于 SEO 和摘要） description: 这是我的第一篇文章
keywords 文章的关键词（用于 SEO） keywords: Hexo, 教程
layout 指定文章的布局（默认值为 post，页面可以使用其他布局如 page） layout: post
hide 是否隐藏文章（如果为 true，文章不会显示在列表或归档中） hide: true
photos 用于相册布局的图片列表（部分主题支持） photos: [/images/1.jpg, /images/2.jpg]
aplayer 用于嵌入音乐播放器（部分主题支持） aplayer: true

Front-matter 示例

示例 1：基本配置

1
2
3
4
5
6
7
8
9
10
11
12
---
title: 我的第一篇文章
date: 2023-10-01 12:00:00
categories:
  - 技术
  - Hexo
tags:
  - Hexo
  - 教程
comments: true
cover: /images/cover.jpg
---

示例 2：多级分类和标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 深入理解 JavaScript
date: 2023-10-02 14:00:00
categories:
  - 技术
  - 前端
  - JavaScript
tags:
  - JavaScript
  - ES6
  - 前端开发
toc: true
mathjax: true
---

示例 3：自定义永久链接和描述

1
2
3
4
5
6
7
---
title: 我的第一篇博客
date: 2023-10-03 10:00:00
permalink: my-first-blog
description: 这是我写的第一篇博客，记录了我的学习历程。
keywords: 博客, 学习, Hexo
---

示例 4：置顶文章

1
2
3
4
5
6
---
title: 重要公告
date: 2023-10-04 09:00:00
sticky: 100
comments: false
---

特殊 Front-matter 字段

页面布局

如果你创建的是页面（而非文章），可以使用 layout 字段指定布局。例如：

1
2
3
4
5
6
---
title: 关于我
date: 2023-10-05 08:00:00
layout: page
comments: false
---

隐藏文章

如果你希望某篇文章不显示在首页或归档中，可以使用 hide 字段：

1
2
3
4
5
---
title: 隐藏的文章
date: 2023-10-06 07:00:00
hide: true
---

注意

  • Front-matter 必须位于文件的最顶部，并用 --- 包裹。
  • 字段名和值之间需要用冒号 : 分隔，且值可以是字符串、列表或布尔值。
  • 如果字段值为列表（如 categories 或 tags），可以使用 YAML 的列表语法（- 或 []）。
  • 如果字段值为布尔值（如 comments 或 toc），直接写 true 或 false。

自定义 Front-matter

你可以根据主题或插件的需求，自定义 Front-matter 字段。Butterfly 主题支持以下字段：

  • cover：文章封面图片。
  • aplayer：嵌入音乐播放器。
  • photos：用于相册布局的图片列表。

音乐播放插件

项目根目录下执行终端命令

地址：https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

Markdown使用模板：

1
{% meting "9293083597" "tencent" "playlist" "theme:#3F51B5" "mutex:true" "preload:auto" %}

模板说明：

1
{% meting "你的音乐ID" "音乐服务提供商" "音乐类型" "主题颜色" "是否互斥" "预加载方式" %}
参数 说明 示例值
data-id 音乐内容的唯一标识符，如歌单ID、歌曲ID等 “9293083597”
data-server 音乐服务提供商 “tencent”
data-type 音乐类型，如单曲、歌单、专辑、搜索结果、艺术家等 “playlist”
data-theme 播放器主题颜色 “#3F51B5”
data-mutex 是否互斥，即是否允许多个播放器同时播放 “true”
data-preload 预加载方式，包括不预加载、自动预加载、仅预加载元数据 “auto”

相册的使用

相册的使用非常简单，不需要进行任何的配置，只需写markdown即可。

相册快速配置

我们直接新建一个页面（假设叫photo）即可，并且每个相册在下面的md文件中编写：

1
2
3
<div class="gallery-group-main">
    {% galleryGroup '壁纸' '收藏的一些壁纸' '/photos/wallpaper' 'https://1911711.jpg' %}
</div>

每个分组包含一个标题、描述、链接以及一个预览图片。以下是每个参数的说明以及整理后的模板：

参数说明：

参数 说明 示例值
标题 分组的标题 ‘壁纸’
描述 分组的简短描述 ‘收藏的一些壁纸’
链接 专辑的存放路径 ‘/photos/wallpaper’
预览图片链接 分组的预览图片URL ‘https://xxxx/picture/202501271911711.jpg‘

模板：

1
2
3
4
<div class="gallery-group-main">
    {% galleryGroup '分组标题' '分组描述' '分组路径' '预览图片链接' %}
    <!-- 可以根据需要添加更多分组 -->
</div>

galleryGroup 是一个用于生成画廊分组的标签，它接受四个参数：分组的标题、描述、链接和预览图片链接。你可以根据需要添加更多的分组到 div.gallery-group-main 中。

相册的内容

相册的内容填充是更为简单的，你只需要新建一个页面，然后把这个新建页面的文件夹存放到你前面新建的相册文件夹（photo文件夹）下，分组路径要对应到这个文件夹即可自动读取，格式如下：

1
2
3
4
5
{% gallery [true] %}
![](你的一张图片地址)
![](你的一张图片地址)
![](你的一张图片地址)
{% endgallery %}

你的相册文件结构大致如下：

你的相册文件结构大致如下