文章

Chirpy模板语法

发表于 更新于
作者 Nan
898 字 4 分钟阅读
Chirpy模板语法

Chirpy模板语法

文件创建

在_posts路径下新建名为YYYY-MM-DD-TITLE.md的文件

文档属性

1
2
3
4
5
6

---
title: TITLE
date: YYYY-MM-DD HH:MM:SS +/-TTTT
categories: [TOP_CATEGORIE, SUB_CATEGORIE]
tags: [TAG]     # TAG names should always be lowercase
---
  • 时间：时区格式 +/-TTTT，例如+0800
  • 分类: categories最多两个，标签tags数量无限制
  • 目录：可以设置字段 TOC :false 关闭

  • 文章描述：默认现成，可以使用以下字段自定义

    1
2
3

    ---
description: ...
---

内容格式

图片

  • 图片注解 : 在图片下添加斜体文字

    1
2

    ![img-description](/path/to/image)
_Image Caption_

  • 图片大小

    1

    ![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }

  • 图片位置

    • 正常位置

      1

      ![Desktop View](/assets/img/sample/mockup.png){: .normal }

    • 左对齐

      1

      ![Desktop View](/assets/img/sample/mockup.png){: .left }

    • 右对齐

      1

      ![Desktop View](/assets/img/sample/mockup.png){: .right }

  • 图片亮暗模式

    1
2
3
4

    # 准备两张图片分别用在光亮模式和黑亮模式

![Light mode only](/path/to/light-mode.png){: .light }
![Dark mode only](/path/to/dark-mode.png){: .dark }

  • 图片阴影

    1

    ![Desktop View](/assets/img/sample/mockup.png){: .shadow }

  • 文章图片预览

    需要在文档属性里添加,注意图片的分辨率为 1200 x 630,宽高比必须满足 1.91 : 1

    1
2
3
4
5

    ---
image:
  path: /path/to/image
  alt: image alternative text
---

视频

  • 嵌入网络视频

    1

    {% include embed/{Platform}.html id='{ID}' %}

    platform 是平台名称的小写形式,id 是视频标识,例如

    PlatformID
    youtubeH-B46URT4mg
    twitch1634779211
    bilibiliBV1Q44y1B7Wf

  • 嵌入本地视频

    1

    {% include embed/video.html src='{URL}' %}

    此外,可以给视频添加属性

    • poster=`/path/tp/poster.png` - 视频下载时显示的视频海报图像
    • title=`Text` - 视频下方显示的标题
    • autoplay=true - 视频会尽快开始自动播放
    • loop=true - 视频播放完毕后循环播放
    • muted=true - 视频默认静音
    • types - 指定以 | 分隔的其他视频格式的扩展名。确保这些文件与主视频文件位于同一目录中

    视频属性的应用格式如下:

    1
2
3
4
5
6
7
8
9
10

    {%
  include embed/video.html
  src='/path/to/video.mp4'
  types='ogg|mov'
  poster='poster.png'
  title='Demo video'
  autoplay=true
  loop=true
  muted=true
%}

音频

  • 嵌入音频

    1

    {% include embed/audio.html src='{URL}' %}

  • 添加额外属性

    使用方式同视频属性

    1
2
3
4
5
6

    {%
  include embed/audio.html
  src='/path/to/audio.mp3'
  types='ogg|wav|aac'
  title='Demo audio'
%}

提示符

一共有四种类型:tip, info, warning, danger,定义一个info类型提示的例子如下 :

1
2
3
4
5
6
7
8
9
10
11

  > Example line for prompt.
  {: .prompt-tip }

  > Example line for prompt.
  {: .prompt-info }

  > Example line for prompt.
  {: .prompt-warning }

  > Example line for prompt.
  {: .prompt-danger }

效果:

Example line for prompt.

Example line for prompt.

Example line for prompt.

Example line for prompt.

帖子首页置顶

1
2
3

---
pin: true
---

一些语法

  • 文件名称高亮

    1

    `/path/to/a/file.extend`{: .filepath}

  • 代码块隐藏行号

    1
2
3
4

    ```shell
echo 'No more line numbers!'
```
{: .nolineno }

  • 代码块显示文件名字

    1
2
3
4

    ```shell
# content
```
{: file="path/to/file" }

  • 注明语言

    1
2
3

    ```yaml
key: value
```

  • Liquid Codes

    1
2
3
4
5
6
7

    {% raw %}
```liquid
{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}
```
{% endraw %}

Chirpy template更新

本地git关联

  1. 添加remote
1

git remote add chirpy https://github.com/cotes2020/chirpy-starter.git
  1. 验证

执行

1

git remote -v

如果看到

1
2

chirpy  https://github.com/cotes2020/chirpy-starter.git (fetch)
chirpy  https://github.com/cotes2020/chirpy-starter.git (push)

即成功

  1. 处理子模块（默认忽略）
1

git config submodule.assets/lib.ignore all

这样可以防止拉取子模块暂用空间

更新

  1. 拉取
1

git fetch chirpy --tags
  1. 跟最新版本进行合并
1

git merge vX.Y.Z --squash --allow-unrelated-histories

  1. 处理版本差异冲突

  2. 处理完冲突后，创建一个新提交来更新版本

1

git add . && git commit -m "chore: upgrade to X.Y.Z"
  1. 更新
1
2
3
4
5

# 本地更新
bundle update

# Github更新
git push

语法参考链接 更新参考链接

语法规则
Chirpy 发表文章
本文由作者按照 CC BY 4.0 进行授权