主题

主题

page front-matter

1
2
3
4
5
6
7
8
9
10
11
12
---
title: [必需]页面标题
date: [必需]页面创建时间
type: [必需]标签, 分类, 友链三个页面需要配置
comments: [可选]显示页面评论模块(默认true)
description: [可选]页面描述信息
keywords: [可选]页面关键字
top_img: [可选]页面顶部图片
mathjax: [可选]显示mathjax(当设置mathjax的per_page: false时,才需要配置,默认 false)
katex: [可选]显示katex(当设置katex的per_page: false时,才需要配置,默认 false)
aside: [可选]显示侧边栏
---

post front-matter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: [必需]文章标题
date: [必需]文章创建日期
tags: [可选]文章标签
categories: [可选]文章分类
keywords: [可选]文章关键字
description: [可选]文章描述信息
top_img: [可选]文章顶部图片
comments：[可选]显示评论模块(默认true)
cover: [可选]文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图,可设置为false/图片地址/留空)
toc: [可选]显示文章TOC(默认为toc中的enable配置)
toc_number: [可选]显示toc_number(默认为toc的number配置)
copyright: [可选]显示文章版权模块(默认true)
mathjax: [可选]显示mathjax(当设置mathjax的per_page: false时,才需要配置,默认 false)
katex: [可选]显示katex(当设置katex的per_page: false时,才需要配置,默认 false)

标签外挂

Note

用法:

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
{% note default %}
content
{% endnote %}
1
2
3
{% note primary %}
content
{% endnote %}
1
2
3
{% note success %}
content
{% endnote %}
1
2
3
{% note info %}
content
{% endnote %}
1
2
3
{% note warning %}
content
{% endnote %}
1
2
3
{% note danger %}
content
{% endnote %}

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
<div class="gallery-group-main"> 
{% galleryGroup 'wallpaper' '一些文章封面和背景图' 'Gallery/wallpaper/'  https://cdn.jsdelivr.net/gh/w-gx/img/wallhaven-oxj9d7_1920x1080.png %} 
{% galleryGroup '二次元' '二次元图片' 'Gallery/2D/' https://cdn.jsdelivr.net/gh/w-gx/2D/20200206164421.webp %} 
</div>

Gallery相册

写法:

1
2
3
4
{% gallery %}
markdown 圖片格式
{% endgallery %}

例如:

1
2
3
4
5
6
7
8
9
{% 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 %}

tag-hide

inline

inline在文本中添加按钮隐藏内容, 只限文字

(content不能包含英文逗号, 可用&abquo;)

1
2
{% hideInline content,display,bg,color %}

  • content: 文本内容
  • display: 按钮显示的文字[可选]
  • bg: 按钮的背景颜色[可选]
  • color: 按钮文字的颜色

block

block 独立的隐藏内容,可以隐藏很多内容,包括图片,代码块等等
(display不能包含英文逗号, 可用&abquo;)

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  • content: 文本内容
  • display: 按钮显示的文字[可选]
  • bg: 按钮的背景颜色[可选]
  • color: 按钮文字的颜色

Toggle

如果你需要展示的内容太多, 可以把它隐藏在收缩框里, 需要时在把它展开.

查看用法

(display不能包含英文逗号, 可用&abquo;)

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

mermaid

(还没用过)
使用mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看meimaid文档
写法:

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
22
{% 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; eg 'Tab caption @icon' similar to 'Tab caption@icon'. 
                Optional parameter.

Demo1 - 预设选择第一个[默认选项]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% 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.

Demo2 - 预设选择tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% 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.

Demo3 - 没有预设值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% 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.

Demo4 - 自定义Tab名 + 只有icon + icon和tab名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% 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
17
{% 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/留空

Deno

1
2
3
4
5
6
This is my website, click the button {% btn 'http://w-gx.github.io',Home %} 
This is my website, click the button {% btn 'http://w-gx.github.io',Home ,far fa-hand-point-right %} 
This is my website, click the button {% btn 'http://w-gx.github.io',Home,outline %} 
This is my website, click the button {% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,outline %} 
This is my website, click the button {% btn 'http://w-gx.github.io', Home,far fa-hand-point-right,larger %}

This is my website, click the button Home
This is my website, click the button Home
This is my website, click the button Home
This is my website, click the button Home
This is my website, click the button Home

1
2
3
4
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,block %} 
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,block center larger %} 
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,block right outline larger %}

Home Home Home 
1
2
3
4
5
6
7
8
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,larger %} 
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,blue larger %} 
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,pink larger %} 
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,red larger %} 
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,purple larger %} 
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,orange larger %} 
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,green larger %}

Home Home Home Home Home Home Home 
1
2
3
4
5
6
7
8
9
< div  class = "btn-center" >
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,outline larger %}
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,outline blue larger %}
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,outline pink larger %}
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,outline red larger %}
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,outline purple larger %}
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,outline orange larger %}
{% btn 'http://w-gx.github.io',Home,far fa-hand-point-right,outline green larger %}
</ div >
Home Home Home Home Home Home Home