Hexo 文章編輯技巧-流程圖、按扭、分頁、小圖示

發表於
文章字數： 2.7k | 閱讀時間≈ 0:14

筆記一下，過去沒用過的功能用法

流程圖

官網1
需要安裝插件

1
npm install --save hexo-filter-flowchart

線上測試 flowchart.js 貼一下官方的範例：
目前暫無法成功。

按扭

參考資料2

1
2
Usage: {% button /path/to/url/, text, icon [class], title %}
Alias: {% btn /path/to/url/, text, icon [class], title %}
1
{% button #, Text %}{% btn #,, home fa-lg %}{% btn #,, home %}
Text 
1
{% btn #,, home fa-4x %}
1
2
{% btn #, Text & Icon (buggy), home %}
{% btn #, Text & Large Icon, home fa-fw fa-lg %}
Text & Icon (buggy) Text & Large Icon

分頁

1
2
3
4
5
6
7
8
9
10
11
{% tabs First unique name %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Tab tag simple sample

This is Tab 1.

This is Tab 2.

This is Tab 3.

Tab tag with 3rd tab selected

1
2
3
4
5
6
7
8
9
10
11
{% tabs Second unique name, 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.

Tab tag with no tab selected

1
2
3
4
5
6
7
8
9
10
11
{% tabs Third unique name, -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.

Tab tag with custom labels

1
2
3
4
5
6
7
8
9
10
11
{% tabs Fourth unique name %}
<!-- tab Solution 1 -->
**This is Tab 一.**
<!-- endtab -->
<!-- tab Solution 2 -->
**This is Tab 二.**
<!-- endtab -->
<!-- tab Solution 3 -->
**This is Tab 三.**
<!-- endtab -->
{% endtabs %}

This is Tab 一.

This is Tab 二.

This is Tab 三.

Tab tag with icons only

1
2
3
4
5
6
7
8
9
10
11
{% tabs Fifth unique name %}
<!-- tab @text-width -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab @amazon -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab @bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Tab tag with icons and labels

1
2
3
4
5
6
7
8
9
10
11
{% tabs Sixth unique name %}
<!-- tab Solution 1@text-width -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab Solution 2@amazon -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab Solution 3@bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

小圖示

用法來源3，可以看官網的範例，更多圖示可去官網找5

1
2
3
<i class="fa fa-pencil"></i> 鉛筆
<i class="fa fa-cloud-upload"></i> 上傳
<i class="fa fa-download"></i> 下載

鉛筆
上傳
下載

1
2
3
<i class="fa fa-download"></i> 下載
<i class="fa fa-download fa-lg"></i> 下載變大 33%
<i class="fa fa-download fa-2x"></i> 下載兩倍大

下載
下載變大 33%
下載兩倍大

Bordered & Pulled Icons

Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or article icons.

1
2
3
4
<i class="fas fa-quote-left fa-2x fa-pull-left fa-border"></i>
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.


Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further…
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

Animated Icons

Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it rotate with 8 steps. Works especially well with fa-spinner & everything in the spinner icons category.

1
2
3
4
<div class="fa-3x">
  <i class="fa fa-cog fa-spin"></i>
  <i class="fa fa-spinner fa-pulse"></i>
</div>



Masking

Inner Icon (cut out)：Set using typical class attribute. Transform using any data-fa-transform properties.
Outer Icon：Set using data-fa-mask attribute.

1
2
3
4
<div class="fa-4x">
  <i class="fa fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fa fa-circle" style="background:MistyRose"></i>
  <i class="fa fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fa fa-square" style="background:MistyRose"></i>
</div>



------ THE END ------

Gitalking ...