文章的基础设置

当我们使用hexo new "关于butterfly主题的相关说明"建立了新的.md文件和对应的文件夹之后,在.md的开头会为我们自动生成一些基础的设置,其形式如下:

1
2
3
4
title: 关于butterfly主题的相关说明
date: y-m-d h:m:s
tags:
    -

但是,依然有一些设置是需要自己添加的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title:  # 文章的题目
date:   # 文章的建立的日期
updated:    # 文章的最近的更新的日期
tags:   # 文章的标签
categories: # 文章的分类
keywords:   # 文章的关键字
description:    # 文章的描述
top_img:    # 文章页面顶部的图片,设置这个不会影响缩略图,但是我喜欢叫二者统一
cover:  # 文章在主页的缩略图
copyright:  # 显示文章的版权,默认使用post_copyright中的enable的设置
copyright_author:   # 本篇文章的作者,可能和博主不是一个人,不过我这里似乎没有这个问题
copyright_author_href:  # 文章作者的连接
copyright_url:  # 文章版权模块的文章连接
copyright_info: # 文章版权模块的版权声明
---

事实上,依然有很多其他设置可以调整,但是我喜欢保持每个页面的统一,所以都使用了默认的模式.

建立新文章和建立新页面

文章和页面是两个不同的东西,文章就是你现在看到的东西,而页面是分类,标签,友联这样的东西.创建文章和页面采用的是不同的命令.

建立文章

在_post文件夹下,打开git,输入下面的命令:

1
hexo new "文章的名字"   # 采用这样的方法,就实现了文章的建立

建立新页面

在hexo博客的根目录,也就是blog目录,打开git,输入下面的命令:

1
hexo new page categories/links/tags     # 这样就建立了分类/友链/标签页面

对不同的新页面会有一些不同的细节设置,具体可以参考帮助文档

标签外挂

这隔功能我第一次见的时候就感觉很神奇,但是一直没有机会好好的研究,接着这次机会好好的琢磨一下帮助文档给出了两种使用方法,这里一并介绍.

标签外挂是Hexo独有的功能，并不是标准的Markdown格式。

以下的写法，只适用于Butterfly主题，用在其它主题上不会有效果，甚至可能会报错。使用前请留意

标签外挂虽然能为主题带来一些额外的功能和UI方面的强化，但是，标签外挂也有明显的限制，使用时请留意。

用法一

这种方法采用了模板中给出的标记,使用方法如下:

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称 用法
class [可选]标识,不同的标识有着不同的颜色: default / primary / success / info / warning / danger
no-icon [可选]不显示icon
style [可选]使用新的style覆盖配置中的默认style

用法二

事实上,这个和上一个没有什么本质区别,只是用户可以根据自己的喜欢选择合适的icon

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称 用法
class 【可选】顔色default / blue / pink / red / purple / orange / green
no-icon 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style [可选]可以覆盖配置中的 style(simple/modern/flat/disabled)
fontawesome 图标 'fas fa-bullhorn’形如这样的格式进行使用,具体可以参考官方介绍

tag-hide

我感觉这是一个很帅的功能,但是我自己应该用不到,所以只是贴出官方的介绍

mermaid

使用mermaid标签可以绘制Flowchart(流程图)/Sequence diagram(时序图)/Class Diagram(类别图)/State Diagram(状态图)/Gantt(甘特图)和Pie Chart(圆形图).

首先需要在主题配置文件中做一些修改:

1
2
3
4
5
6
7
8
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark

然后是一些案例:

1
2
3
{% mermaid %}
内容
{% endmermaid %}

这个是一般的使用范式

案例

下面是一个流程图(Flowchart)的案例以及对应的代码:

1
2
3
4
5
6
7
{% mermaid %}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}

Tabs

同样是一个十分酷炫的功能,可以实现这样的效果:

1
2
3
4
5
6
7
{% mermaid %}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}

虽然文档给出了4种不同的使用方法,但是对于我只有Demo 4 - 自定义Tab名 + 只有icon + icon和Tab名这个选项是有用的:

tab名字为Tab

只有图标 没有Tab名字

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab Tab -->
**tab名字为Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 代码 @fa fa-code -->
****
<!-- endtab -->
{% endtabs %}

inlineImg

文章中的图片在没有特别说明的情况下都是块级元素但是有时候我们会需要内联元素这个时候就需要使用这个标签外挂.

块级元素

这里是内联元素的封面

这里是对应的代码

1
2
3
![块级元素](cover.jpg "这是块级元素的封面")

这里是内联元素的封面{% inlineImg cover.jpg 150px %}

结语

以上就是我觉得未来可能会用到的功能,如果以后发现上面的内容不够用,会把新使用的功能补充上来.