基于hexo搭建博客基础（二）

博客搭建导航 🌏

1.前言

这个系列是关于如何基于hexo框架以及GitHub Pages搭建自己的博客网站。
❗创建本系列博客的初衷也只是为了记录一下自己的学习过程，以防之后健忘❗。
虽说如此，但是本系列博客已经写的很详细了，可能后面的内容会比较简略，就算是零基础也能懂大部分。
配置文件参数含义在官方处都有讲解，这里只讲述自己修改了的部分。

2.Site信息修改

title: AnA.
subtitle: 🥳🥳欢迎来到我的小站🥳🥳
description: 一个讨论技术和作为个人知识库的小站
keywords: blog
author: AnA
language: zh-CN
timezone: 'Asia/Shanghai'

language常用参数:

en（英文）
zh-CN（中文简体（中国大陆））
zh-HK（中文繁体（中国香港））
zh-TW（中文繁体（中国台湾））

3.URL信息修改

url: https://ana-0823.github.io
permalink: post/:code/
permalink_defaults:
pretty_urls:
  trailing_index: true
  trailing_html: true

url：站内链接的前缀地址，将其改为自己站点的地址
permalink：站内文章的地址（:code是我自定义的参数，在post的markdown文档的front-matter中加上就好）

4.标签页

在博客根目录下打开终端输入以下命令：
1
npx hexo new page tags
会在博客根目录中的\source\生成一个含有index.md文件的tags文件夹。

修改index.md，添加type: "tags"。

---
title: tags
date: 2024-05-02 03:31:43
type: "tags"
---

安装以上步骤生成categories还有link标签页。

5.友链

在博客根目录下的\source\_data中创建一个link.yml文件，在这里按以下格式填写需要的链接：

- class_name: 1.技术支持
  class_desc: 本网站的搭建由以下开源作者提供技术支持
  link_list: 
    - name: Hexo 
      link: https://hexo.io/zh-cn/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架
      siteshot:

6.子页面

子页面就是普通的页面，通过npx hexo page <page name>创建就好
然后就可以在对应的index.md中编写页面内容

7.关于markdown文档的front-matter

front-matter就是markdown文档最上方以---分割的区域，作为页面和文章metadata

page front-matter用于配置页面
post front-matter用于配置文章

page front-matter

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

参数	含义
title	【必需】页面标题
date	【必需】页面创建日期
type	【必需】标签、分类和友链页面需要配置
updated	【可选】页面更新日期
description	【可选】页面描述
keywords	【可选】页面关键字
comments	【可选】显示页面评论模块(默认 true)
top_img	【可选】页面顶部图片
mathjax	【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
kates	【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside	【可选】显示侧边栏 (默认 true)
aplayer	【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐配置
highlight_shrink	【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)

post 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)

8.安装主题

推荐🦋hexo-theme-butterfly主题（当然也可以安装其他的主题），输入以下命令安装：

1	npm install hexo-theme-butterfly

9.应用主题

修改网站配置文件_config.yml，将主题更改为butterfly
1
theme: butterfly
安装pug和stylus渲染器，这两个渲染器都是butterfly生成页面的依赖包：
1
npm install hexo-renderer-pug hexo-renderer-stylus --save
为了后续修改方便，将butterfly的配置文件_config.yml复制到项目根目录底下，并改名为_config.butterfly.yml。

10.标签外挂

❗❗❗标签外挂是hexo特有的功能，并不是markdown的标准格式，以下的写法仅限于butterfly主题，将其应用于其他主题可能会导致报错❗❗❗

10.1.note (Bootstrap Callout)

详细介绍看官方链接🛫
使用方法有两种，语法格式：

1
2
3

{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

样例：

{% note flat %}
默认 提示块标签
{% endnote %}

{% note default flat %}
default 提示块标签
{% endnote %}

{% note primary flat %}
primary 提示块标签
{% endnote %}

{% note success flat %}
success 提示块标签
{% endnote %}

{% note info flat %}
info 提示块标签
{% endnote %}

{% note warning flat %}
warning 提示块标签
{% endnote %}

{% note danger flat %}
danger 提示块标签
{% endnote %}

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

1
2
3

{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

样例：

{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' flat%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

当style缺省时启用配置文件中的设置

10.2.Gallery相册图库

详细介绍看官方链接🛫
图库集合，语法格式：

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

name：图库名字
description：图库描述
link：跳转链接
img-url：封面图片

样例：

1
2
3

<div class="gallery-group-main">
{% galleryGroup '图库' '个人喜欢的一些图片🥰🥰' '/gallery/' '/img/background.jpg' %}
</div>

10.3.Gallery相册

详细介绍看官方链接🛫
图库，语法格式

{% gallery [lazyload],[rowHeight],[limit] %}
![](img-url)
...
{% endgallery %}

样例：

{% gallery %}
![](/img/1.jpg)
![](/img/2.jpg)
![](/img/3.jpg)
![](/img/4.jpg)
{% endgallery %}

[{"url":"https://lanal.site/file/blog/post-cover/1.jpg","alt":""},{"url":"https://lanal.site/file/blog/post-cover/2.jpg","alt":""},{"url":"https://lanal.site/file/blog/post-cover/3.jpg","alt":""},{"url":"https://lanal.site/file/blog/post-cover/4.jpg","alt":""}]

10.4.tag-hide

详细介绍看官方链接🛫
这个标签可以隐藏一些内容🧐，有三种可选：

可以在文本中的按钮后隐藏一些东西，仅限文字

1	{% hideInline content,display,bg,color %}

content: 文本内容
display: 按钮显示的文字（可选）
bg: 按钮的背景颜色（可选）
color: 按钮文字的颜色（可选）

样例：

1 2	🤣👉{% hideInline 🤡,你是谁？,#66CCCC,#fff %} 🤣👉{% hideInline 🤡 %}

🤣👉🤡
🤣👉🤡

可以在一个独立的按钮后隐藏很多内容，包括图片，代码块等

1
2
3

{% hideBlock display,bg,color %}
content
{% endhideBlock %}

content: 文本内容
display: 按钮显示的文字（可选）
bg: 按钮的背景颜色（可选）
color: 按钮文字的颜色（可选）

样例：

{% hideBlock 猜猜这里有什么？,#66CCCC,#fff %}
啥也没有🤣👉🤡
{% endhideBlock %}
{% hideBlock 你在再猜猜这里有什么？,#66CCCC,#fff %}
🤪还是啥也没有🤣👉🤡
{% endhideBlock %}
{% hideBlock 这里真的有东西的😲,#66CCCC,#fff %}
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&p=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>
{% endhideBlock %}

啥也没有🤣👉🤡

🤪还是啥也没有🤣👉🤡

折叠的收缩栏

1
2
3

{% hideToggle display,bg,color %}
content
{% endhideToggle %}

content: 文本内容
display: 按钮显示的文字（可选）
bg: 按钮的背景颜色（可选）
color: 按钮文字的颜色（可选）

样例：

{% hideToggle 还要再来一次吗😲,#1f1f1f,#fff %}
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&p=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>
{% endhideToggle %}

还要再来一次吗😲

10.5.mermaid

使用mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看mermaid文档🛫以及butterfly官方🛫

1
2
3

{% mermaid %}
content
{% endmermaid %}

样例：

{% mermaid %}
pie
    title 一个样例图
    "一部分" : 33
    "二部分" : 17
    "三部分" : 45
    "四部分" :  5
{% endmermaid %}

  pie
    title 一个样例图
    "一部分" : 33
    "二部分" : 17
    "三部分" : 45
    "四部分" :  5

10.6.tabs

详细介绍看官方链接🛫
页面中的分栏

{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

样例：

{% tabs %}
<!-- tab tab1 -->
😎
<!-- endtab -->
<!-- tab tab2 -->
😍
<!-- endtab -->
<!-- tab tab3 -->
🤩
<!-- endtab -->
{% endtabs %}

😎

😍

🤩

10.7.button

详细介绍看官方链接🛫
按钮

1	{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

样例：

1
2

{% btn 'https://ana-0823.github.io/',回到主页,fas fa-home,block %}
{% btn 'https://www.bilibili.com/video/BV1GJ411x7h7/?share_source=copy_web&vd_source=5ebc5a2a2473be67c2088121daedad91/',😲,,block %}

回到主页 😲

10.8.inlineImg

详细介绍看官方链接🛫
以内联元素显示的图片，使用此标签

1	{% inlineImg [src] [height] %}

样例：

1	🤣👉{% inlineImg /img/jocker.gif 100px %}

🤣👉

10.9.label

详细介绍看官方链接🛫
高亮标签

1	{% label text color %}

样例：

1	这是一个{% label 高亮 red %}，这是另一个{% label 高亮 pink %}

这是一个高亮，这是另一个高亮

10.10.timeline

详细介绍看官方链接🛫
时间线

{% timeline title,color %}
<!-- timeline title -->
content
<!-- endtimeline -->
<!-- timeline title -->
content
<!-- endtimeline -->
{% endtimeline %}

样例：

{% timeline 2024 %}
<!-- timeline 05-01 -->
test
<!-- endtimeline -->
<!-- timeline 05-02 -->
test2
<!-- endtimeline -->
{% endtimeline %}

2024

05-01

test1

05-02

test2

10.11.flink

详细介绍看官方链接🛫
添加友链

1
2
3

{% flink %}
content
{% endflink %}

样例：

{% flink %}
- class_name: 技术支持
  class_desc: 本网站的搭建由以下开源作者提供技术支持
  link_list: 
    - name: Hexo 
      link: https://hexo.io/zh-cn/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架
      siteshot:
    - name: butterfly
      link: https://butterfly.js.org/
      avatar: https://butterfly.js.org/img/avatar.png
      descr: butterfly美化主题🦋
      siteshot: 
{% endflink %}

技术支持

本网站的搭建由以下开源作者提供技术支持

10.12.abcjs乐谱

详细介绍看官方链接🛫
在页面上渲染乐谱
在主题配置中设置如下：

1
2
3

abcjs:
  enable: true
  per_page: true

格式：

1
2
3

{% score %}
乐谱代码
{% endscore %}

样例：

{% score %}
X:1
T:alternate heads
M:C
L:1/8
U:n=!style=normal!
K:C treble style=rhythm
"Am" BBBB B2 B>B | "Dm" B2 B/B/B "C" B4 |"Am" B2 nGnB B2 nGnA | "Dm" nDB/B/ nDB/B/ "C" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |]
%%text This translates to:
[M:C][K:style=normal]
[A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]>[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |]
GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb|
[K: style=x]
C/A,/ C/C/E C/zz2|
w:Rock-y did-nt like that
{% endscore %}

10.13.series系列文章

详细介绍看官方链接🛫
在页面上显示系列文章
修改主题配置文件如下：

series:
  enable: true
  orderBy: 'date'
  order: 1
  number: true

写法：

1 2	{% series %} {% series [series name] %}

要在文章的front-matter上添加参数series，给一个标识

样例：

1	{% series hexo %}

10.14.aplayer播放器

详细介绍看官方文档
通过命令npm install --save hexo-tag-aplayer安装插件
要在配置文件中修改如下：

1
2
3

aplayer:
  meting: true
  asset_inject: false

主题配置中修改如下：

1
2
3

aplayerInject:
  enable: true
  per_page: false

per_page为false时须在要使用的页面的front-matter中添加aplayer参数
为了使切换页面时音乐不中断，要打开pjax

1
2
3

pjax:
  enable: true
  exclude:

写法：

1	{% meting id server type %}

样例：

1	{% meting "9992949674" "netease" "playlist"%}