Hexo-Butterfly美化教程-[3]建主要页面

安装Tag Plugins Plus 标签外挂插件

安装标签外挂插件，方便之后各主要页面配置使用

1	npm install hexo-butterfly-tag-plugins-plus --save

markdown 渲染插件 hexo-renderer-marked 与外挂标签语法的兼容性较差，将其替换成 hexo-renderer-kramed

1 2	npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save

在hexo的配置文件 _config.yml 中，添加tag_plugins配置信息

# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true # 开关
  priority: 5 #过滤器优先权
  issues: false #issues标签依赖注入开关
  link:
    placeholder: https://cdn.pixabay.com/photo/2022/07/08/10/37/books-7309019_960_720.png #link_card标签默认的图标图片
  CDN:
    anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
    issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
    iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
    tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

标签页

在blog根目录下打开命名指示符，输入如下命令创建标签页。

1	hexo new page tags

打开blog\source\tags目录下的index.md文件，在Front-matter部分加入以下内容。

type: "tags"
orderby: random
top_img: false
order: 1
comments: false
aside: false

orderby: random #标签排序方式是随机
top_img: false #不显示顶部图片
order: 1 #排序优先级为1
comments: false #不显示评论功能
aside: false #不显示侧边栏

分类页

在blog根目录下打开命名指示符，输入如下命令创建分类页。

1	hexo new page categories

打开blog\source\categories目录下的index.md文件，在Front-matter部分加入以下内容。

type: "categories"
comments: false
top_img: false
aside: false

友情链接

在blog根目录下打开命名指示符，输入如下命令创建友情链接页。

1	hexo new page link

打开blog\source\link目录下的index.md文件，在Front-matter部分加入以下内容。

type: "link"
top_img: false
aside: false
comments: true

小编博客中创建的友链使用的是Tag Plugins Plus插件中的flink友链组件。首先要安装好Tag Plugins Plus插件，具体安装过程见文章开头《安装Tag Plugins Plus 标签外挂插件》部分。

在blog\source\link\index.md文件中，加入flink友链组件内容。

{% flink %}

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: catsky
      link: https://catsky.org/
      avatar: https://cdn.catsky.org/catskyCDN/img/blog/catsky/blog_samll-toy-windmill.webp
      descr: Cat's Blog

{% endflink %}

点击查看Butterfly官方使用的友链页面数据来源教程

说说页

在blog根目录下打开命名指示符，输入如下命令创建说说页。

1	hexo new page shuoshuo

打开blog\source\shuoshuo目录下的index.md文件，在Front-matter部分加入以下内容。

type: "shuoshuo"
aside: false
top_img: false
comments: false

在blog\source目录下创建_data文件夹，并在_data文件夹下创建shuoshuo.yml，加入以下内容进行测试。

- author: Butterfly
  avatar: https://butterfly.js.org/img/avatar.png
  date: 2024-06-21 23:33:26
  key: key-1
  content: |
    This is a sample content for **Author 1**.
    ![Sample Image](https://via.placeholder.com/150)
  tags:
    - tags1
    - tags2
- author: Butterfly
  avatar: https://butterfly.js.org/img/avatar.png
  date: 2024-06-20 23:33:26
  key: key-2
  content: |
    This is a sample content for **Author 2**.
    ![Sample Image](https://via.placeholder.com/150)
  tags:
    - tag2
    - tag3

- author: Butterfly
  avatar: https://butterfly.js.org/img/avatar.png
  date: 2024-06-19 23:33:26
  key: key-3
  content: |
    This is a sample content for **Author 3**.

其中的author和avatar可不填，会自动读取_config.butterfly.yml与_config.yml配置文件中的 author 和 avatar，相关应用可查看Jerry的Butterfly 文档的说说页面

关于页

在blog根目录下打开命名指示符，输入如下命令创建关于页。

1	hexo new page about

打开blog\source\about目录下的index.md文件，在Front-matter部分加入以下内容。

type: "about"
aside: false
top_img: false
comments: false

配置创建的页面

打开blog\_config.butterfly.yml，修改menu部分如下。

menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  说说: /shuoshuo/ || fas fa-comment-dots
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart