每篇博客都是一个markdown文件，由Butterfly渲染生成页面，下面介绍一些文章的设置以及写法：

每篇文章的开头都有一个Front-matter，用于提供这篇文章的相关信息，详情请看 https://butterfly.js.org/posts/dc584b87/

以本篇文章的设置为例，讲一下各个属性的意义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
---
title: 博客书写指南
cover: 'https://picst.sunbangyan.cn/2023/10/13/oynsmu.jpg'
abbrlink: 10003
date: 2023-10-13 22:59:32
tags: [Hexo & Butterfly tutorial]
categories: 
  - [Hexo & Butterfly tutorial]
updated:
type:
comments:
description: 介绍博客文章的书写方法
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
random:
---

  • title

    博客的标题

  • cover

    博客的封面（显示在首页）

  • abbrlink

    由插件 hexo-abbrlink 生成，替换hexo原生的页面url生成方案。该值可自定义，唯一指定一篇文章（不可重复），同时也是该页面的url地址。

  • date

    文章的发表时间

  • tags

    该篇文章的标签，语法为 tags:[tag1, tag2, …]

  • categories

    该篇文章的分类，推荐语法为：

    1
    2
    categories: 
      - [A, B]

    表示该文章属于分类A下的子类B

  • description

    在首页看到的文章内容简介。如果设置了 description ，则会显示这个，否则会显示文章内容节选

    这一项可以在 _config.butterfly.yml 中的 index_post_content 一栏修改（详见：https://anti-entrophic.github.io/posts/10002.html）

  • 待补充

创建css文件

以我目前使用的字体为例，首先需要在 /{root}/source/css 目录下新建一个文件，暂且命名为 custom.css ，内容如下：

1
2
3
4
5
6
7
8
9
10
11
/*感谢安知鱼大佬的教程！*/
@font-face {
    font-family: ZhuZiAYuanJWD;
    src: url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/fonts/ZhuZiAWan.woff2);
    font-display: swap;
    font-weight: lighter;
  }

  body {
    font-family: "ZhuZiAYuanJWD";
  }

当然，你也可以不指定全局使用这一个字体，可以换，比如说仅指定导航栏当然也是可以的，可以自己魔改：

1
2
3
div#menus {
  font-family: "ZhuZiAYuanJWD";
}

引入css文件

在 _config.butterfly.yml 中找到 inject 这一栏，就像html链接css一样引入：

1
2
3
4
5
inject:
  head:
    # 自定义CSS
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
    # 暂时不清楚media和onload有什么用

之后，在 _config.butterfly.yml 中指定渲染时使用我们新引入的字体：（这步不清楚需不需要）

1
2
3
4
5
font:
  global-font-size:
  code-font-size:
  font-family: ZhuZiAYuanJWD
  code-font-family: ZhuZiAYuanJWD

其中，font-family 是全局的字体， code-font-family 是代码块中的字体