网页建设

转载过来一些常用的书写格式,以备平时方便粘贴，图用的随机api接口，这个好用 https://source.unsplash.com/

后面跟需要的分辨率，大方美观

标签外挂的使用

example:

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>

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.

examples：

default 提示塊標籤

primary 提示塊標籤

success 提示塊標籤

info 提示塊標籤

warning 提示塊標籤

danger 提示塊標籤

新版gallery

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

examples

（随机在网上抓的图，载入速度比较慢）

[{"url":"https://api.dujin.org/bing/1366.php","alt":""},{"url":"https://source.unsplash.com/random/600x802","alt":""},{"url":"https://source.unsplash.com/random/700x803","alt":""},{"url":"https://source.unsplash.com/random/800x804","alt":""},{"url":"https://source.unsplash.com/random/900x805","alt":""},{"url":"https://source.unsplash.com/random/400x806","alt":""},{"url":"https://source.unsplash.com/random/600x800","alt":""},{"url":"https://source.unsplash.com/random/800x200","alt":""}]

tag hide

{% hideInline content,display,bg,color %} ### examples： 哪個英文字母最酷？ 因為西裝褲(C裝酷) 門裏站着一個人? 閃

画图

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

examples

Tabs：

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

This is Tab 1.

This is Tab 2.

This is Tab 3.

自定义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/留空

This is my chinese website, click the button This is my chinese website, click the button SheldonZ This is my chinese website, click the button SheldonZ This is my chinese website, click the button SheldonZ This is my chinese website, click the button SheldonZ

*注：来源@jerryc.me 仅供学习使用,侵权删除;>