基于 Hexo 从零开始搭建个人博客（四）

阅读本篇前，请确保已经完成下面两篇文章的步骤：
基于 Hexo 从零开始搭建个人博客（一）。
基于 Hexo 从零开始搭建个人博客（二）。
基于 Hexo 从零开始搭建个人博客（三）。

修改站点配置文件_config.yml，路径为【BlogRoot/_config.yml】。

修改主题配置文件_config.butterfly.yml，路径为【BlogRoot/_config.butterfly.yml】。

前言

本站基于Hexo搭建，用的是 最新的🦋 hexo-theme-butterfly 主题 v4.10.0-b1，如果你是 v4.10.0-b1 之外的版本，可能有些地方会有出入，请留意。

Front-matter

Front-matter 是 markdown 文件最上方以—-分隔的区域，用于指定个别档案的变数。

• Page Front-matter 用于页面配置
• Post Front-matter 用于文章页配置

  如果标注可选的参数，可根据自己需要添加，不用全部都写在markdown里

  Page Front-matter

  ---
  title:
  date:
  updated:
  type:
  comments:
  description:
  keywords:
  top_img:
  mathjax:
  katex:
  aside:
  aplayer:
  highlight_shrink:
  ---

必需配置项

配置项	解释
title (必需)	文章标题
date (必需)	文章创建日期

可选配置项

配置项	解释
updated (可选)	文章更新日期
tags (可选)	文章标签
categories (可选)	文章分类
keywords (可选)	文章关键字
description (可选)	文章描述
top_img (可选)	文章顶部图片
cover (可选)	文章缩略图（如果没有设置top_img，文章页顶部将显示缩略图，可设为false/图片地址/留空）
comments (可选)	显示文章评论模块（默认为true）
toc (可选)	显示文章TOC（默认为设置中toc的enable配置）
toc_number (可选)	显示toc_number（默认为设置中toc的number配置）
toc_style_simple (可选)	显示 toc 简洁模式
copyright (可选)	显示文章版权模块（默认为设置中post_copyright的enable配置）
copyright_author (可选)	文章版权模块的文章作者
copyright_author_href (可选)	文章版权模块的文章作者链接
copyright_url (可选)	文章版权模块的文章连结链接
copyright_info (可选)	文章版权模块的版权声明文字
mathjax (可选)	显示MathJax（当设置mathjax的per_page: false时，才需要配置，默认为false）
katex (可选)	显示KaTeX（当设置katex的per_page: false时，才需要配置，默认为false）
aplayer (可选)	在需要的页面加载APlayer的js和css，请参考文章下面的音乐配置
highlight_shrink (可选)	配置代码框是否展开（true/false）（默认为设置中highlight_shrink的配置）
aside (可选)	显示侧边栏（默认为true）

Page Front-matter

---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
---

写法说明

配置项	解释
title	(必需) 文章标题
date	(必需) 文章创建日期
updated	(可选) 文章更新日期
tags	(可选) 文章标签
categories	(可选) 文章分类
keywords	(可选) 文章关键字
description	(可选) 文章描述
top_img	(可选) 文章顶部图片
cover	(可选) 文章缩略图（如果没有设置top_img，文章页顶部将显示缩略图，可设为false/图片地址/留空）
comments	(可选) 显示文章评论模块（默认为true）
toc	(可选) 显示文章TOC（默认为设置中toc的enable配置）
toc_number	(可选) 显示toc_number（默认为设置中toc的number配置）
toc_style_simple	(可选) 显示 toc 简洁模式
copyright	(可选) 显示文章版权模块（默认为设置中post_copyright的enable配置）
copyright_author	(可选) 文章版权模块的文章作者
copyright_author_href	(可选) 文章版权模块的文章作者链接
copyright_url	(可选) 文章版权模块的文章链接链接
copyright_info	(可选) 文章版权模块的版权声明文字
mathjax	(可选) 显示MathJax（当设置mathjax的per_page: false时，才需要配置，默认为false）
katex	(可选) 显示KaTeX（当设置katex的per_page: false时，才需要配置，默认为false）
aplayer	(可选) 在需要的页面加载APlayer的js和css，请参考文章下面的音乐配置
highlight_shrink	(可选) 配置代码框是否展开（true/false）（默认为设置中highlight_shrink的配置）
aside	(可选) 显示侧边栏（默认为true）

标签页

1. 前往你的Hexo博客根目录，打开cmd命令窗口执行hexo new page tags。
2. 在【BlogRoot/source/】会生成一个含有index.md文件的tags文件夹。
3. 修改【BlogRoot/source/tags/index.md】，添加type: “tags”。

   ---
   title: tags
   date: 2023-9-22 15:28:40
   type: "tags"
   orderby: random
   order: 1
   ---

写法说明

配置项	解释
type	(必须) 页面类型，必须为 tags
orderby	(可选) 排序方式：random/name/length
order	(可选) 排序次序：1, asc for ascending; -1, desc for descending

分类页

1. 前往你的Hexo博客根目录，打开cmd命令窗口执行hexo new page categories。

2. 在【BlogRoot/source/】会生成一个含有index.md文件的categories文件夹。

3. 修改【BlogRoot/source/categories/index.md】，添加type: “categories”。

   ---
   title: categories
   date: 2023-9-22 15:28:40
   type: "categories"
   ---

友情链接

创建友情链接页面

1. 前往你的Hexo博客根目录，打开cmd命令窗口执行hexo new page link。

2. 在【BlogRoot/source/】会生成一个含有index.md文件的link文件夹。

3. 修改【BlogRoot/source/link/index.md】，添加type: “link”。

   ---
   title: link
   date: 2022-05-29 22:03:35
   type: "link"
   ---

   友情链接页面添加友链信息

   前往Hexo博客目录（【BlogRoot/source/_data】）创建一个文件link.yml（如果沒有 _data 文件夹，请自行创建）。

   

   - class_name: 友情链接
     class_desc: 那些人，那些事
     link_list:
       - name: wenkj
         link: https://wenkj.top/
         avatar: https://cdn.jsdelivr.net/gh/uEatpeach/Bolg-img/img/1.png
         descr: 不积跬步，无以至千里；不积小流，无以成江海。
   - class_name: 网站
     class_desc: 值得推荐的网站
     link_list:
       - name: Youtube
         link: https://www.youtube.com/
         avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
         descr: 视频网站
       - name: Weibo
         link: https://www.weibo.com/
         avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
         descr: 中国最大社交分享平台
       - name: Twitter
         link: https://twitter.com/
         avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
         descr: 社交分享平台

   class_name和class_desc支持 html 格式，如不需要，也可以留空。(注意缩进单位)

图库

图库页面只是普通的页面，你只需要hexo new page xxxxx创建你的页面就行。

然后使用标签外挂 galleryGroup，具体用法请查看对应的内容。

<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

壁纸

收藏的一些壁纸

漫威

关于漫威的图片

OH MY GIRL

关于OH MY GIRL的图片

子页面

子页面也是普通的页面，你只需要hexo new page xxxxx创建你的页面就行。

然后使用标签外挂 gallery，具体用法请查看对应的内容。

{% gallery %}
  ![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
  ![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
  ![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
  ![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
  ![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
  ![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
  ![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
  ![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
  {% endgallery %}

[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]

404页面

主題內置了一个简单的404页面，可在设置中开放。

# A simple 404 page
error_404:
  enable: true
  subtitle: "页面沒有找到"
  background: 

如需本地预览，请启动项目并访问 http://localhost:4000/404.html