🌱 🦤 🌱

快捷导航

点击下载

1
<a href="/images/github.svg" download="test"> 点击下载 </a>

点击下载

引用文章

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

文章标题（可选）

分栏

1
2
3
4
5
6
7
8
9
10
11
{% tabs code %}

<!-- tab code -->
``````
<!-- endtab -->

<!-- tab debug -->
``````
<!-- endtab -->

{% endtabs %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% tabs code %}

<!-- tab md -->
``````
<!-- endtab -->

<!-- tab html -->
``````
<!-- endtab -->

<!-- tab 渲染样式 -->

<!-- endtab -->

{% endtabs %}

隐藏内容

少量文字

1
{% hideInline content,display,bg,color %}
  • content: 文本内容
  • display: 按钮显示的文字(可选)
  • bg: 按钮的背景颜色(可选)
  • color: 按钮文字的颜色(可选)

content

较多内容

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

content

太多内容

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}
  • content: 文本内容
  • display: 按钮显示的文字(可选)
  • bg: 按钮的背景颜色(可选)
  • color: 按钮文字的颜色(可选)
display

content

大量内容

1
2
3
4
<details>
<summary>显示的文字</summary>
隐藏的内容
</details>
显示的文字 隐藏的内容

组合写法

强调

1
> ***ciallo***
1
2
3
<blockquote><p><em><strong>
ciallo
</strong></em></p></blockquote>

ciallo

ciallo

隐藏内容加高亮文字

1
{% hideBlock %}{% label √× pink %}{% endhideBlock %}

√×

隐藏内容加代码块

1
2
3
4
5
6
7
{% hideBlock (点我),pink,green %}

{% codeblock lang:bash %}
rm -rf *
{% endcodeblock %}

{% endhideBlock %}
1
rm -rf *

同行表情包

1
2
3
4
5
6
7
8
<div style="padding-top: 5px;height: 50px;line-height: 30px">
  <div style="float: left;position: relative">
    <img src="img_path">
  </div>
  <div style="float: left;position: relative">
    <img src="img_path">
  </div>
</div>

文字+表情包

1
2
3
4
5
6
<div style="padding-top: 5px;height: 50px;line-height: 30px">
  <span style="float: left"> 显示的文字 </span>
  <div style="float: left;position: relative">
    <img src="img_path">
  </div>
</div>
显示的文字

文字+表情包, 引用格式

1
2
3
4
5
6
7
8
<blockquote><p><em><strong>
<div style="padding-top: 5px;height: 50px;line-height: 30px">
  <span style="float: left"> 文字 </span>
  <div style="float: left;position: relative">
    <img src="img_path">
  </div>
</div>
</strong></em></p></blockquote>

文字

图片加文字

1
2
3
4
5
6
7
8
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img src="img_path"/> </td>
  </tr>
  <tr>
    <td align="center">有关图片的文字</td>
  </tr>
</table>
有关图片的文字

复杂表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
  <tr>
    <td align="center">1</td>
    <td colspan=3 align="center">1</td>
    <td align="center">1</td>
  </tr>
  <tr>
    <td align="center"></td>
    <td align="center">3</td>
    <td align="center">3</td>
    <td align="center">3</td>
    <td align="center"></td>
  </tr>
  <tr>
    <td align="center">1</td>
    <td align="center">1</td>
    <td align="center">1</td>
    <td align="center">1</td>
    <td align="center">1</td>
  </tr>
</table>
1 1 1
3 3 3
1 1 1 1 1

高亮文字

1
{% label text color %}
  • text 文字
  • color (可选)背景颜色，默认为 default
  • default/blue/pink/red/purple/orange/green

text

note

配置文件

1
2
3
4
5
6
7
8
9
10
11
12
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

用法一

  • 用法

    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（simple/modern/flat/disabled）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% note simple %}
默认 提示块标签
{% endnote %}

{% note default simple %}
default 提示块标签
{% endnote %}

{% note primary simple %}
primary 提示块标签
{% endnote %}

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

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

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

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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% note modern %}
默认 提示块标签
{% endnote %}

{% note default modern %}
default 提示块标签
{% endnote %}

{% note primary modern %}
primary 提示块标签
{% endnote %}

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

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

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

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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% note flat %}
默认 提示块标签
{% endnote %}

{% note default flat %}
default 提示块标签
{% endnote %}

{% note primary flat %}
primary 提示块标签
{% endnote %}

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

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

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

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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% note disabled %}
默认 提示块标签
{% endnote %}

{% note default disabled %}
default 提示块标签
{% endnote %}

{% note primary disabled %}
primary 提示块标签
{% endnote %}

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

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

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

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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% note no-icon %}
默认 提示块标签
{% endnote %}

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

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

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

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

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

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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

用法二

  • 用法

    1
    2
    3
    {% note [color] [icon] [style] %}
    Any content (support inline tags too.io).
    {% endnote %}

  • color: 【可选】顔色(default / blue / pink / red / purple / orange / green)

  • icon: 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )

  • style: 【可选】可以覆盖配置中的 style（simple/modern/flat/disabled）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' simple%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' modern%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' flat%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' disabled %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' disabled %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' disabled %}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' disabled %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue no-icon %}
2021年快到了....
{% endnote %}
{% note pink no-icon %}
小心开车 安全至上
{% endnote %}
{% note red no-icon %}
这是三片呢？还是四片？
{% endnote %}
{% note orange no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple no-icon %}
剪刀石头布
{% endnote %}
{% note green no-icon %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

mermaid

配置文件

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
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 %}

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
6
7
8
9
<div class="btn-center">
{% btn 'https://lynvtiki.pages.dev/',Lynvtiki,far fa-hand-point-right,outline larger %}
{% btn 'https://lynvtiki.pages.dev/',Lynvtiki,far fa-hand-point-right,outline blue larger %}
{% btn 'https://lynvtiki.pages.dev/',Lynvtiki,far fa-hand-point-right,outline pink larger %}
{% btn 'https://lynvtiki.pages.dev/',Lynvtiki,far fa-hand-point-right,outline red larger %}
{% btn 'https://lynvtiki.pages.dev/',Lynvtiki,far fa-hand-point-right,outline purple larger %}
{% btn 'https://lynvtiki.pages.dev/',Lynvtiki,far fa-hand-point-right,outline orange larger %}
{% btn 'https://lynvtiki.pages.dev/',Lynvtiki,far fa-hand-point-right,outline green larger %}
</div>
Lynvtiki Lynvtiki Lynvtiki Lynvtiki Lynvtiki Lynvtiki Lynvtiki

行内图片

1
2
3
4
{% inlineImg [src] [height] %}

[src]      :    图片链接
[height]   ：   图片高度限制【可选】
1
veyle {% inlineImg images/veyle.jpg 150px %}

veyle

时间线

  • 用法

    1
    2
    3
    4
    5
    6
    7
    8
    {% timeline title,color %}
    <!-- timeline title -->
    xxxxx
    <!-- endtimeline -->
    <!-- timeline title -->
    xxxxx
    <!-- endtimeline -->
    {% endtimeline %}

  • title: 标题/时间线

  • color: timeline 颜色default(留空) / blue / pink / red / purple / orange / green

1
2
3
4
5
{% timeline 2022,pink %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

2022

01-02

这是测试页面

基本语法

段落语法

1
2
3
ciallo~ciallo

yoshino
1
2
<p>ciallo~ciallo</p>
<p>yoshino</p>

ciallo~ciallo

yoshino

ciallo~ciallo

yoshino

强调语法

粗体(Bold)

1
**ciallo**
1
<strong>ciallo</strong>

ciallo

ciallo

斜体(Italic)

1
*ciallo*
1
<em>ciallo</em>

ciallo

ciallo

粗体(Bold)和斜体(Italic)

1
***ciallo***
1
<strong><em>ciallo</em></strong>

ciallo

ciallo

引用语法

1
> ciallo
1
2
3
4
5
> ciallo~ciallo
>
> yoshino
> - `ciallo`, ***ciallo***
> > ciallo
1
<blockquote>ciallo</blockquote>

ciallo

ciallo~ciallo

yoshino

  • ciallo, ciallo

    ciallo

ciallo

代码语法

1
2
`ciallo`
`` `ciallo` ``
1
2
<code>ciallo</code>
<code>ciallo`ciallo`ciallo</code>

ciallo
`ciallo`

ciallo
ciallociallociallo

链接语法

自定义链接

1
[超链接显示名](超链接地址%20"超链接title")
1
<a href="超链接地址" title="超链接title">超链接显示名</a>

超链接显示名

超链接显示名

网址和Email地址

1
2
<https://ciallo.ciallo>
<ciallo@ciallo.ciallo>

https://ciallo.ciallo
ciallo@ciallo.ciallo

带格式化的链接

1
2
3
**[ciallo](https://ciallo.ciallo)**
*[ciallo](https://ciallo.ciallo)*
[`ciallo`](#ciallo).

ciallo
ciallo
ciallo.

图片语法

1
![图片](图片链接 "图片title")
1
<img src="图片链接" alt="图片" title="图片title">

图片

图片

给图片增加链接

1
[![图片](/none/img/ciallo.jpg "ciallo~")](https://ciallo.ciallo)

图片

分隔线语法

1
---
1
<hr>