---
title: Chirpy主题的安装与使用指南
description: 搭建和使用本网页时找到或参考的各类指南和文档
date: 2025-02-02 21:54:00 +0800
categories: [计算机]
tags: [网站]
math: true
mermaid: true
---

## Chirpy主题的前置与安装指南

### 设置Github Pages和Jekyll

1. [Github pages](https://pages.github.com/)的官方文档: [GitHub Pages 文档](https://docs.github.com/zh/pages)
2. [使用 Jekyll 设置 GitHub Pages 站点](https://docs.github.com/zh/pages/setting-up-a-github-pages-site-with-jekyllsetting-up-a-github-pages-site-with-jekyll)
3. [配置 GitHub Pages 站点的自定义域](https://docs.github.com/zh/pages/configuring-a-custom-domain-for-your-github-pages-site)

### 部署Chirpy主题

1. Chirpy主题的官方文档: [Jekyll Theme Chirpy Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki)
2. 官方指南 [Chirpy](https://chirpy.cotes.page) 及其汉化版 [pansong291](https://pansong291.github.io/chirpy-demo-zhCN)
3.  [官方部署指南](https://chirpy.cotes.page/posts/getting-started/) 以及 [示例](https://chirpy.cotes.page/posts/text-and-typography/)
4. [【避坑篇】使用Github Pages搭建个人主页or博客网站【上】](https://zhuanlan.zhihu.com/p/641525444)
5. [【快速部署+客制化】Github Pages+Jekyll Chirpy 速搭个人主页](https://zhuanlan.zhihu.com/p/695291923)
6. Jekyll博客搭建教程[（上篇）](https://ittousei.github.io/posts/build-my-blog-1/)[（下篇）](https://ittousei.github.io/posts/build-my-blog-2/)
7. [搭建个人博客：Jekyll + Github Pages + VSCode](https://zjpzhao.github.io/posts/jekyll-githubpages/)
8. [使用Jekyll + Github Pages搭建静态网站](https://www.cnblogs.com/duanguyuan/p/16126654.html)
9. 如何从`chirpy-starter`升级为完整的`jekyll-theme-chirpy`: [Upgrade Guide](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide)

### Chirpy主题的使用与进阶

1. [撰写文章](https://chirpy.cotes.page/posts/write-a-new-post/)
2. [自定义图标](https://chirpy.cotes.page/posts/customize-the-favicon/)
3. [Chirpy主题的个性化自定义](https://hintryer.github.io/posts/Chirpy%E4%B8%BB%E9%A2%98%E7%9A%84%E4%B8%AA%E6%80%A7%E5%8C%96%E8%87%AA%E5%AE%9A%E4%B9%89/)
4. [Chirpy主题的安装、编写、图标、头像](https://hintryer.github.io/posts/Chirpy%E4%B8%BB%E9%A2%98%E7%9A%84%E5%AE%89%E8%A3%85-%E7%BC%96%E5%86%99-%E5%9B%BE%E6%A0%87-%E5%A4%B4%E5%83%8F/)
5. [Chirpy主题的进阶使用](https://ittousei.github.io/posts/customize-my-blog/)
6. [对Chirpy进行简单美化](https://manalogues.com/posts/%E5%AF%B9Chirpy%E8%BF%9B%E8%A1%8C%E7%AE%80%E5%8D%95%E7%BE%8E%E5%8C%96)
7. [对于Chirpy各种奇怪bug的研究](https://manalogues.com/posts/%E5%AF%B9%E4%BA%8EChirpy%E5%90%84%E7%A7%8D%E5%A5%87%E6%80%AAbug%E7%9A%84%E7%A0%94%E7%A9%B6)

### Chirpy主题的开发

1. [Chirpy官方语法说明书](https://blandalpha.github.io/posts/Chirpy_+Official_handybook/)
2. [Development & Test Environments](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Development-&-Test-Environments)

## Chirpy主题中文章中可使用的命令

### 文章的头信息(Front Matter)

文章作为`.md`文件存在`/_posts`中, 每个`.md`文件需要有一段头信息(frontmatter), 可参照[撰写新帖子](https://pansong291.github.io/chirpy-demo-zhCN/posts/write-a-new-post/), 其中更改作者`author`可见[Author Information](https://chirpy.cotes.page/posts/write-a-new-post/#author-information). 关于更深入的内容可参照[Front Matter](https://jekyllrb.com/docs/front-matter/) 和 [Posts](https://jekyllrb.com/docs/posts/).

事实上, 在如下Front Matter中仅有`title`与`date`是必选项.

```markdown
---
layout: # 在Chirpy模板中默认为post
permalink: # 最终导向的URL
title: TITLE
description: DESCRIPTION # 可选
author: # 默认是social.name
date: YYYY-MM-DD HH:MM:SS +0800 # 时间和时区可选
categories: [TOP_CATEGORIE, SUB_CATEGORIE] 
tags: [TAG]
excerpt_separator: # 摘录段落
published: # 是否公开
toc: true # 目录
comment: true # 评论区
pin: true # 置顶
math: true # 数学模式, 由MathJax支持
mermaid: true # Markdown的一种扩展, 用于画图
cdn: url # 只能作为img的根目录,所以对我作用不大
---
```

### 类型提示

`markdown`中引文以`> `在行首出现, Chirpy提供了一些提示(但我不一定记得用):

```markdown
> 显示 `tip` 类型提示的例子。
{: .prompt-tip }

> 显示 `info` 类型提示的例子。
{: .prompt-info }

> 显示 `warning` 类型提示的例子。
{: .prompt-warning }

> 显示 `danger` 类型提示的例子。
{: .prompt-danger }
```

> 显示 `tip` 类型提示的例子。
{: .prompt-tip }

> 显示 `info` 类型提示的例子。
{: .prompt-info }

> 显示 `warning` 类型提示的例子。
{: .prompt-warning }

> 显示 `danger` 类型提示的例子。
{: .prompt-danger }

### 内嵌pdf和视频图片

我用`<iframe>`标签在网站中内嵌pdf文件,一般是如下形式：

```html
<iframe 
    src="https://cdn.jsdelivr.net/gh/user/repo@version/file/"
    frameborder="0" width="100%" height="600px">
</iframe>
```

其中用了js Delivr的CDN，也可以放其他链接。

对于内嵌视频,详见[Write a New Post](https://chirpy.cotes.page/posts/write-a-new-post/#video). 对于平台视频可使用如下语法:
{% raw %}
```liquid
{% include embed/{Platform}.html id='{ID}' %}
```
{% endraw %}
其中`{Platform}`是平台名称(支持Youtube, Twitch和Bilibili), `{ID}`是视频ID.

对于一般的视频和音频可以直接用:
{% raw %}
```liquid
{% include embed/video.html src='{URL}' %}
{% include embed/audio.html src='{URL}' %}
```
{% endraw %}

内嵌图片可使用
```markdown
![My helpful screenshot](/assets/img/postimg/screenshot.jpg)
```

### 脚注

在正文插入脚注使用命令
```markdown
正文[^footnote],正文
```
且可以写反向脚注(一般在正文最后)
```markdown
[^footnote]: 这是一个脚注
```