网站语法

启用宽页模式

将主要内容向右扩展，填充目录通常占用的空间。将以下内容添加到帖子或页面的 YAML 字段：

classes: wide

自动生成目录

可以通过添加toc: true到 YAML 字段来启用为您的帖子和页面自动生成的目录列表。

参数	是否必须	描述	默认
toc	自选	显示目录。（布尔值）	false
toc_label	自选	目录标题。（字符串）	toc_label在 UI 文本数据文件中。
toc_icon	自选	目录图标，显示在标题之前。（字符串）	Font Awesome 图标。
toc_sticky	自选	将目录粘到屏幕顶部。	false

具有自定义标题和图标的目录示例

---
toc: true
toc_label: "语法目录"
toc_icon: "cog"
---

注意：您需要使用连续的标题才能正确生成 TOC。例如：

Good headings:

# Heading
## Heading
### Heading
### Heading
# Heading
## Heading

Bad headings:

# Heading
### Heading (skipped H2)
##### Heading (skipped H4)

添加标题图片

将图像放在/assets/images/文件夹中，并添加以下 YAML 字段：

header:
  image: /assets/images/image-filename.jpg

对于外部托管的图片：

header:
  image: http://some-site.com/assets/images/image.jpg

要为屏幕阅读器提供自定义 alt 标记：

header:
  image: /assets/images/unsplash-image-1.jpg
  image_description: "A description of the image"

为图片添加说明或署名：

header:
  image: /assets/images/unsplash-image-1.jpg
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"

有了这个 YAML 字段：

excerpt: "This post should display a **header with an overlay image**, if the theme supports it."
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "More Info"
      url: "https://unsplash.com"

你会得到一个覆盖着文本的标题图片和一个号召性用语按钮。

选择指定要使用的纯色背景色而不是图像：

excerpt: "This post should display a **header with a solid background color**, if the theme supports it."
header:
  overlay_color: "#333"

还可以指定黑色叠加层的不透明度（介于0和1之间）：

excerpt: "This post should [...]"
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "Download"
      url: "https://github.com"

使用其他颜色叠加：

excerpt: "This post should [...]"
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  overlay_filter: rgba(255, 0, 0, 0.5)
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "Download"
      url: "https://github.com"

使用渐变颜色叠加：

excerpt: "This post should [...]"
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  overlay_filter: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 255, 255, 0.5))
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "Download"
      url: "https://github.com"

可以像这样分配多个号召性用语按钮链接：

excerpt: "This post should display a **header with an overlay image**, if the theme supports it."
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "Foo Button"
      url: "#foo"
    - label: "Bar Button"
      url: "#bar"

文本对齐方式

将文本块与以下类对齐。

左对齐文本.text-left

Left aligned text
{: .text-left}

---

居中对齐的文本。.text-center

Center aligned text.
{: .text-center}

---

右对齐的文本。.text-right

Right aligned text.
{: .text-right}

---

两端对齐的文本。.text-justify

Justified text.
{: .text-justify}

---

无换行的文本。.text-nowrap

No wrap text.
{: .text-nowrap}

按钮

.btn .btn--primary使链接更加突出。

<a href="#" class="btn btn--primary">Link Text</a>

按钮类型	例子	种类	Kramdown
违约	文本	.btn	[文本](#link){: .btn}
主要	文本	.btn .btn--primary	[文本](#link){: .btn .btn--primary}
成功	文本	.btn .btn--success	[文本](#link){: .btn .btn--success}
警告	文本	.btn .btn--warning	[文本](#link){: .btn .btn--warning}
危险	文本	.btn .btn--danger	[文本](#link){: .btn .btn--danger}
信息	文本	.btn .btn--info	[文本](#link){: .btn .btn--info}
对比	文本	.btn .btn--inverse	[文本](#link){: .btn .btn--inverse}
轮廓	文本	.btn .btn--light-outline	[文本](#link){: .btn .btn--light-outline}

按钮尺寸	例子	种类	Kramdown
超大	超大按钮	.btn .btn--primary .btn--x-large	[文本](#link){: .btn .btn--primary .btn--x-large}
大	大按钮	.btn .btn--primary .btn--large	[文本](#link){: .btn .btn--primary .btn--large}
默认	默认按钮	.btn .btn--primary	[文本](#link){: .btn .btn--primary }
小	小按钮	.btn .btn--primary .btn--small	[文本](#link){: .btn .btn--primary .btn--small}

通知

引起对文本块的注意。

通知类型	种类
默认	.notice
主要	.notice--primary
信息	.notice--info
警告	.notice--warning
成功	.notice--success
危险	.notice--danger

小心！这段内容被{: .notice} 强调了。

小心！这段内容被 {: .notice--primary} 强调了。

小心！这段内容被{: .notice--info} 强调了。

小心！这段内容被{: .notice--warning} 强调了。

小心！这段内容被{: .notice--success} 强调了。

小心！这段内容被{: .notice--danger} 强调了。

响应式视频嵌入

参数	必填	描述
id	必填	视频的 ID
provider	必填	视频的托管服务提供商：youtube、vimeo、google-drive或bilibili
danmaku	自选	仅限哔哩哔哩，详情如下

YouTube

要将 YouTube 视频嵌入到帖子或网页的主要内容中，可以使用：

{% include video id="XsxDH4HcOWA" provider="youtube" %}

若要将其嵌入为视频标头，请使用以下 YAML Front Matter：

header:
  video:
    id: XsxDH4HcOWA
    provider: youtube

哔哩哔哩

要将以下哔哩哔哩哔哩视频嵌入到帖子或页面的主要内容中，可以使用：

{% include video id="BV1E7411e7hC" provider="bilibili" %}

如果要为嵌入的视频启用弹幕（默认情况下处于禁用状态），则可以提供一个附加参数，如下所示：danmaku="1"

{% include video id="BV1E7411e7hC" provider="bilibili" danmaku="1" %}

若要将其嵌入为视频标头，请使用以下 YAML Front Matter：

header:
  video:
    id: BV1E7411e7hC
    provider: bilibili
    danmaku: 1

引用

单行块引用

求知若饥，虚心若愚。

> 求知若饥，虚心若愚。

带有引用参考的多行块引用

人们以为“专注”的意思就是对你必须关注的事情点头称是。大错特错！“专注”的内涵在于你要对另外100个好主意说“不”！你必须要谨慎地做出选择。

史蒂夫·乔布斯 — Apple 全球开发者大会，1997 年

> 人们以为“专注”的意思就是对你必须关注的事情点头称是。大错特错！“专注”的内涵在于你要对另外100个好主意说“不”！你必须要谨慎地做出选择。

<cite>史蒂夫·乔布斯</cite> --- Apple 全球开发者大会，1997 年
{: .small}

表单

个人简介

姓名:
邮箱：
生日：