1.Font-matter

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

1.1 Page Front-matter 用于页面配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
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的配置)

1.2 Post Front-matter 用于文章页配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
---
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)

2.文章页相关配置

2.1 文章meta显示

post_meta这个属性用于显示文章的相关信息的，修改主题配置文件_config.butterfly.yml。

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
  page:
    date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 主页是否显示分类
    tags: true # true or false 主页是否显示标签
    label: true # true or false 显示描述性文字
  post:
    date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 文章页是否显示分类
    tags: true # true or false 文章页是否显示标签
    label: true # true or false 显示描述性文字

2.2 文章置顶滚动栏

使用方法:在文章的front_matter中添加swiper_index配置项即可。

1
2
3
4
5
6
7
8
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---

2.3 文章页局部 html 代码不渲染

在你的 md 文章页中，部分内容不想经过 Hexo 渲染，则包一层 raw标签，那么标签内的代码就不会被框架渲染了~

1
2
3
4
{% raw %}
<div class="">你的一些代码...</div>
<script>你的一些代码...</script>
{% endraw %}

2.4 文章H1~H6标题小风车转动效果

  1. 修改主题配置文件_config.butterfly.yml文件的beautify配置项：
1
2
3
4
5
6
beautify:
enable: true
field: post # site/post
# title-prefix-icon: '\f0c1' 原内容
title-prefix-icon: '\f863'
title-prefix-icon-color: "#F47466"
  1. 在[BlogRoot]\source\css\custom.css 中加入以下代码，可以自己调节一下转速:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    /* 文章页H1-H6图标样式效果 */
    /* 控制风车转动速度 4s那里可以自己调节快慢 */
    h1::before,
    h2::before,
    h3::before,
    h4::before,
    h5::before,
    h6::before {
      -webkit-animation: ccc 4s linear infinite;
      animation: ccc 4s linear infinite;
    }
    /* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
    @-webkit-keyframes ccc {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn);
      }
    }
    @keyframes ccc {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn);
      }
    }
    /* 设置风车颜色 */
    #content-inner.layout h1::before {
      color: #ef50a8;
      margin-left: -1.55rem;
      font-size: 1.3rem;
      margin-top: -0.23rem;
    }
    #content-inner.layout h2::before {
      color: #fb7061;
      margin-left: -1.35rem;
      font-size: 1.1rem;
      margin-top: -0.12rem;
    }
    #content-inner.layout h3::before {
      color: #ffbf00;
      margin-left: -1.22rem;
      font-size: 0.95rem;
      margin-top: -0.09rem;
    }
    #content-inner.layout h4::before {
      color: #a9e000;
      margin-left: -1.05rem;
      font-size: 0.8rem;
      margin-top: -0.09rem;
    }
    #content-inner.layout h5::before {
      color: #57c850;
      margin-left: -0.9rem;
      font-size: 0.7rem;
      margin-top: 0rem;
    }
    #content-inner.layout h6::before {
      color: #5ec1e0;
      margin-left: -0.9rem;
      font-size: 0.66rem;
      margin-top: 0rem;
    }
    /* s设置风车hover动效 6s那里可以自己调节快慢*/
    #content-inner.layout h1:hover,
    #content-inner.layout h2:hover,
    #content-inner.layout h3:hover,
    #content-inner.layout h4:hover,
    #content-inner.layout h5:hover,
    #content-inner.layout h6:hover {
      color: var(--theme-color);
    }
    #content-inner.layout h1:hover::before,
    #content-inner.layout h2:hover::before,
    #content-inner.layout h3:hover::before,
    #content-inner.layout h4:hover::before,
    #content-inner.layout h5:hover::before,
    #content-inner.layout h6:hover::before {
      color: var(--theme-color);
      -webkit-animation: ccc 6s linear infinite;
      animation: ccc 6s linear infinite;
    }