字体大小

修改 themes\Butterfly\source\css\var.styl 找到

1
2
// Global Variables
$font-size = 14px

我修改成了16px

qq在线

  1. 打开此链接

  2. 然后点击立即免费开通服务就好了,进入到下面的界面可以复制其代码生成图片

  3. butterfly.yml 文件中找到

1
2
3
4
5
social:
fa fa-github: https://github.com/imgyh
fa fa-envelope: mailto:gyhnice@163.com
fa fa-qq: https://wpa.qq.com/msgrd?v=3&uin=1974355683&site=qq&menu=yes
fa fa-rss: /atom.xml

修改 fa-qq 这一项为你自己的链接就可以了

POST Front_matter写法

post和page模板

在博客根目录下的scaffolds文件夹中修改post.mdpage.md

page.md模板

1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
comments:true
description:
top_img:
katex:true
---

post.md模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: {{ title }}
date: {{ date }}
tags:
categories:
description:
top_img:
comments: true
cover:
toc: true
toc_number: true
copyright: true
katex: false
top:
---

tags写法

1
2
3
tags:
- tags1
- tags2

categories写法

1
2
3
4
5
6
7
8
9
10
11
12
单个分类,了解一下:
categories:
- Linux
并列分类,了解一下:
categories:
- [Linux]
- [Tools]

并列+子分类([]linux是父分类,hexo是子分类),再了解一下:
categories:
- [Linux, Hexo]
- [Tools, PHP]

解决代码块渲染问题

在代码块中输入html代码,hexo会把html代码渲染出来,而我只想看到代码是什么样子。
解决方法:只需要安装 cheerio

1
sudo npm install cheerio@0.22.0 --save

代码框高亮,显示行号

在站点配置文件 _config.yml 中修改这一项

1
2
3
4
5
6
7
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace: ''
wrap: true
hljs: false

coding 申请ssl认证失败

Coding的 SSL/TLS 证书每次申请只能使用90天

申请 SSL/TLS 证书时,要将指向Coding的线路类型设为为默认,然后把指向到Github的域名关掉,就可以成功申请了。

因为Coding申请 SSL/TLS 证书需要通过 Let’s Encrypt 的 HTTP 方式验证域名所有权。因为 Let’s Encrypt是国外网络,如果不更改域名设置,验证域名所有权时不能正确指向到Coding而是指向到Github,所以就会导致申请失败。

引用同站点的文章

在写文章的过程中,有时候需要引用站内的其他文章。可以通过内置的标签插件的语法post_link来实现引用。

1
{% post_link 文章文件名(不要后缀) 文章标题(可选) %}

举例 引用 Hello.md

1
2
3
{% post_link Hello %}
或者
{% post_link Hello 你好 %}

Note (Bootstrap Callout)

用法

1
2
3
4
5
6
7
8
{% note [class] [no-icon] %} 
Any content (support inline tags too.io).
{% endnote %}

[class] : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

All parameters are optional.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %} 
default提示块标签
{% endnote %}

{% note primary no-icon %}
primary提示块标签
{% endnote %}

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

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

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

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

Gallery 相册

写法:

1
2
3
{% gallery %} 
markdown图片格式
{% endgallery %}
1
2
3
4
5
6
7
8
{% gallery %} 
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-scary-pumpkin-hand-900x600.jpg)
![](https://gratisography.com /wp-content/uploads/2019/10/gratisography-fresh-fish-dinner-900x600.jpg)
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-mountain-cloud -landscape-900x600.jpg)
![](https://picjumbo.com/wp-content/uploads/iphone-free-stock-photos-2210x3315.jpg)
![](https://picjumbo.com/wp -content/uploads/young-millennial-girl-drinking-lemonade-and-overlooking-the-city-2210x1473.jpg)
![](https://picjumbo.com/wp-content/uploads/modern-graphic-designer -essentials _free_ stock _photos_ picjumbo_HNCK4919-2210x1474.jpg)
{% endgallery %}

Gallery 相册图库

配合Gallery 相册一起使用

写法:

1
2
3
4
5
<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
4
5
<div class="gallery-group-main"> 
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png % }
{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

mermaid

使用mermaid标签可以绘制Flowchart(流程图)、Sequence diagram(时序图)、Class Diagram(类别图)、State Diagram(状态图)、Gantt(甘特图)和Pie Chart(圆形图),具体可以查看mermaid文档

写法:

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

如:

1
2
3
4
5
6
7
8
{% mermaid %} 
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{% endmermaid %}

Tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not specified, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
Optional parameter.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
Optional parameter.
[@icon] : FontAwesome icon name (full-name, look like 'fas fa-font')
Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
Optional parameter.

Demo 1 - 预设选择第一个【默认】

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 2 - 预设选择tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 3 - 没有预设值

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 4 - 自定义Tab名 + 只有icon + icon和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 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 链接
[text] : 按钮文字
[icon] : [可选] 图标
[color] : [可选] 按钮背景顔色(默认style时)
按钮字体和边框顔色(outline时)
default/blue/pink/red/purple/orange/green
[style] : [可选] 按钮样式 默认实心
outline/留空
[layout] : [可选] 按钮佈局 默认为line
block/留空
[position] : [可选] 按钮位置 前提是设置了layout为block 默认为左边
center/right/留空
[size] : [可选] 按钮大小
larger/留空
1
2
3
4
5
This is my website, click the button {% btn 'https://gyh.im',元洪博客 %}
This is my website, click the button {% btn 'https://gyh.im',元洪博客,far fa-hand-point-right %}
This is my website, click the button {% btn 'https://gyh.im',元洪博客,,outline %}
This is my website, click the button {% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,larger %}

This is my website, click the button 元洪博客
This is my website, click the button 元洪博客
This is my website, click the button 元洪博客
This is my website, click the button 元洪博客
This is my website, click the button 元洪博客

1
2
3
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,block %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,block center larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,block right outline larger %}
元洪博客 元洪博客 元洪博客
1
2
3
4
5
6
7
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,blue larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,pink larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,red larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,purple larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,orange larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,green larger %}
元洪博客 元洪博客 元洪博客 元洪博客 元洪博客 元洪博客 元洪博客
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,outline larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,outline blue larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,outline pink larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,outline red larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,outline purple larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,outline orange larger %}
{% btn 'https://gyh.im',元洪博客,far fa-hand-point-right,outline green larger %}
</div>