Chirpy主题的安装与使用指南

搭建和使用本网页时找到或参考的各类指南和文档

发表于 2025/02/02 更新于 2025/12/30

作者 Roderick.Huang

7 分钟阅读

Chirpy主题的安装与使用指南

Chirpy主题的前置与安装指南

设置Github Pages和Jekyll

部署Chirpy主题

Chirpy主题的官方文档: Jekyll Theme Chirpy Wiki
官方指南 Chirpy 及其汉化版 pansong291
官方部署指南以及示例
【避坑篇】使用Github Pages搭建个人主页or博客网站【上】
【快速部署+客制化】Github Pages+Jekyll Chirpy 速搭个人主页
Jekyll博客搭建教程（上篇）（下篇）
搭建个人博客：Jekyll + Github Pages + VSCode
使用Jekyll + Github Pages搭建静态网站
如何从chirpy-starter升级为完整的jekyll-theme-chirpy: Upgrade Guide

Chirpy主题的使用与进阶

Chirpy主题的开发

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

文章的头信息(Front Matter)

文章作为.md文件存在/_posts中, 每个.md文件需要有一段头信息(frontmatter), 可参照撰写新帖子, 其中更改作者author可见Author Information. 关于更深入的内容可参照Front Matter 和 Posts.

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

  
---
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提供了一些提示(但我不一定记得用):

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

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

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

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

显示 tip 类型提示的例子。

显示 info 类型提示的例子。

显示 warning 类型提示的例子。

显示 danger 类型提示的例子。

内嵌pdf和视频图片

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

  
<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. 对于平台视频可使用如下语法:

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

其中{Platform}是平台名称(支持Youtube, Twitch和Bilibili), {ID}是视频ID.

对于一般的视频和音频可以直接用:

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

内嵌图片可使用

  
![My helpful screenshot](/assets/img/postimg/screenshot.jpg)

脚注

在正文插入脚注使用命令

正文[^footnote],正文

且可以写反向脚注(一般在正文最后)

  
[^footnote]: 这是一个脚注

添加评论功能

定制字体，默认展开所有目录

修改assets\css\jekyll-theme-chirpy.scss文件,:

  
/* ============================================================ */
/* 自定义字体样式：改善中英文混排效果 */
/* ============================================================ */

/* 优化主文本字体：中文字体和英文字体混排 */
body, html {
  /* 字体栈优先级：
     1. 系统中文字体（如有）
     2. 西方字体用于英文显示
     3. 降级字体
  */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 
               'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
               'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'WenQuanYi Zen Hei',
               sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

/* 段落文本优化 */
p {
  word-spacing: 0.05em;
  text-align: justify;
}

/* 列表文本优化 */
li {
  word-spacing: 0.05em;
}

/* 标题字体优化 */
h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
               'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
               'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei',
               sans-serif;
  line-height: 1.4;
  letter-spacing: 0.01em;
  font-weight: 600;
}

/* 代码和代码块字体保持等宽 */
code, pre, .highlight {
  font-family: 'Cascadia Code', 'Fira Code', 'Source Code Pro', 'Courier New', 
               'Courier', monospace;
  font-size: 0.95em;
  line-height: 1.5;
}

/* 内联代码 */
:not(pre) > code {
  font-size: 0.9em;
  padding: 0.2em 0.4em;
}

/* 表格文本优化 */
table td, table th {
  word-spacing: 0.02em;
}

/* 块引用文本 */
blockquote {
  font-style: italic;
  border-left: 4px solid var(--primary-color, #6c63ff);
}

/* ============================================================ */
/* 自定义样式：强制展开 TOC 所有子目录 */
/* 覆盖 tocbot 的折叠样式，使所有子目录始终展开 */
/* ============================================================ */
.toc-list .is-collapsed {
  max-height: none !important;
}

.toc-list .is-collapsible {
  max-height: none !important;
}

计算机

网站

本文由作者按照 CC BY 4.0 进行授权