initial commit
This commit is contained in:
16
.gitignore
vendored
Normal file
16
.gitignore
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
# Generated files by hugo
|
||||
/public/
|
||||
/resources/_gen/
|
||||
/assets/jsconfig.json
|
||||
hugo_stats.json
|
||||
_vendor/
|
||||
|
||||
# Executable may be added to repository
|
||||
hugo.exe
|
||||
hugo.darwin
|
||||
hugo.linux
|
||||
|
||||
# Temporary lock file while building
|
||||
/.hugo_build.lock
|
||||
|
||||
.DS_Store
|
5
archetypes/default.md
Normal file
5
archetypes/default.md
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
date = '{{ .Date }}'
|
||||
draft = true
|
||||
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
|
||||
+++
|
15
config/_default/languages.toml
Normal file
15
config/_default/languages.toml
Normal file
@ -0,0 +1,15 @@
|
||||
[en]
|
||||
languageName = "English"
|
||||
languageCode = "en"
|
||||
weight = 2
|
||||
title = "Chirpy"
|
||||
[en.params]
|
||||
tagline = "A text-focused blog theme"
|
||||
|
||||
[zh-CN]
|
||||
languageName = "中文"
|
||||
languageCode = "zh-CN"
|
||||
weight = 1
|
||||
title = "Chirpy"
|
||||
[zh-CN.params]
|
||||
tagline = "一个专注于文本的博客主题"
|
23
config/_default/markup.toml
Normal file
23
config/_default/markup.toml
Normal file
@ -0,0 +1,23 @@
|
||||
[highlight]
|
||||
anchorLineNos = false
|
||||
codeFences = true
|
||||
guessSyntax = true
|
||||
hl_Lines = ''
|
||||
hl_inline = false
|
||||
lineAnchors = ''
|
||||
lineNoStart = 1
|
||||
lineNos = true
|
||||
lineNumbersInTable = true
|
||||
noClasses = false
|
||||
tabWidth = 4
|
||||
wrapperClass = 'highlight'
|
||||
|
||||
[goldmark.parser]
|
||||
wrapStandAloneImageWithinParagraph = false
|
||||
|
||||
[goldmark.parser.attribute]
|
||||
block = true
|
||||
title = true
|
||||
|
||||
[goldmark.renderer]
|
||||
unsafe = true
|
30
config/_default/params.toml
Normal file
30
config/_default/params.toml
Normal file
@ -0,0 +1,30 @@
|
||||
toc = true
|
||||
avatar = "img/commons/avatar.jpg"
|
||||
author = "yifan"
|
||||
|
||||
[assets]
|
||||
self_host = false
|
||||
|
||||
[social]
|
||||
name = "Yifan"
|
||||
url = "https://github.com/geekifan"
|
||||
|
||||
[[social.links]]
|
||||
type = "github"
|
||||
id = "yourusername"
|
||||
icon = "fab fa-github"
|
||||
|
||||
[[social.links]]
|
||||
type = "twitter"
|
||||
id = "yourhandle"
|
||||
icon = "fab fa-twitter"
|
||||
|
||||
[[social.links]]
|
||||
type = "email"
|
||||
id = "your.email@example.com"
|
||||
icon = "fas fa-envelope"
|
||||
|
||||
[[social.links]]
|
||||
type = "rss"
|
||||
icon = "fas fa-rss"
|
||||
noblank = true # will not open in new window
|
7
content/_index.en.md
Normal file
7
content/_index.en.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
menu:
|
||||
main:
|
||||
name: Home
|
||||
weight: 1
|
||||
pre: fa-house
|
||||
---
|
7
content/_index.zh-CN.md
Normal file
7
content/_index.zh-CN.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
menu:
|
||||
main:
|
||||
name: 主页
|
||||
weight: 1
|
||||
pre: fa-house
|
||||
---
|
26
content/about/index.en.md
Normal file
26
content/about/index.en.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: "About"
|
||||
date: 2023-04-20
|
||||
draft: false
|
||||
layout: page
|
||||
menu:
|
||||
main:
|
||||
name: About
|
||||
weight: 5
|
||||
pre: fa-info-circle
|
||||
---
|
||||
|
||||
[Chirpy](https://github.com/cotes2020/jekyll-theme-chirpy) is a blog theme originally based on [Jekyll](https://jekyllrb.com/). Due to Jekyll's design limitations, it does not natively support internationalization (i18n) and requires third-party plugins for i18n functionality. To enable i18n support for Chirpy without the hassle of relying on third-party plugins, the [hugo-theme-chirpy](https://github.com/geekifan/hugo-theme-chirpy) project migrated the Chirpy theme to [Hugo](https://gohugo.io/) with minimal adaptations. All features of Chirpy are available in hugo-theme-chirpy (though some functionalities may operate differently within the Hugo framework).
|
||||
|
||||
Follow the posts in the demo site to quickly set up a free personal blog!
|
||||
## Features
|
||||
|
||||
- **Dark Mode**: Enhanced readability in low-light environments.
|
||||
- **Multilingual UI:** Easily switch between different languages.
|
||||
- **Efficient Post Organization:** Use hierarchical categories, trending tags, recommended reading, and search functionalities.
|
||||
- **Optimized Layout:** Includes TOC, syntax highlighting, prompts, and more.
|
||||
- **Rich Writing Extensions:** Support for mathematical formulas, charts, flowcharts, and embedded media.
|
||||
- **Multiple Comment Systems:** Choose from various commenting options.
|
||||
- **Web Analysis Tools:** Integrated with multiple analytics tools.
|
||||
- **Modern Web Technologies:** Built for SEO and web performance.
|
||||
- **RSS Feed Support:** Keep your readers updated with RSS feeds.
|
26
content/about/index.zh-CN.md
Normal file
26
content/about/index.zh-CN.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: "关于"
|
||||
date: 2023-04-20
|
||||
draft: false
|
||||
layout: page
|
||||
menu:
|
||||
main:
|
||||
name: 关于
|
||||
weight: 5
|
||||
pre: fa-info-circle
|
||||
---
|
||||
|
||||
[Chirpy](https://github.com/cotes2020/jekyll-theme-chirpy) 是一个基于 [Jekyll](https://jekyllrb.com/) 的博客主题。由于 Jekyll 的设计限制,它本身不支持国际化(i18n),需要依赖第三方插件来实现 i18n 功能。为了让 Chirpy 在不依赖第三方插件的情况下支持 i18n,[hugo-theme-chirpy](https://github.com/geekifan/hugo-theme-chirpy) 项目将 Chirpy 主题迁移至 [Hugo](https://gohugo.io/),并进行了最小化的适配。Chirpy 的所有功能在 hugo-theme-chirpy 中均可使用(不过在 Hugo 框架下,部分功能的操作方式可能有所不同)。
|
||||
|
||||
跟随示例站点的文章,快速搭建一个免费的个人博客吧!
|
||||
## 功能特点
|
||||
|
||||
- **深色模式**:在低光环境下提升阅读体验。
|
||||
- **多语言界面**:轻松切换不同语言。
|
||||
- **高效的文章管理**:支持层级分类、热门标签、推荐阅读和搜索功能。
|
||||
- **优化的布局**:包含目录、语法高亮、提示框等。
|
||||
- **丰富的写作扩展**:支持数学公式、图表、流程图和嵌入式媒体。
|
||||
- **多种评论系统**:提供多种评论方案可选。
|
||||
- **网站分析工具**:集成多种分析工具。
|
||||
- **现代 Web 技术**:优化 SEO 和网页性能。
|
||||
- **RSS 订阅支持**:通过 RSS 让读者获取最新内容。
|
11
content/archives/index.en.html
Normal file
11
content/archives/index.en.html
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: "Archives"
|
||||
date: 2023-04-20
|
||||
draft: false
|
||||
layout: archives
|
||||
menu:
|
||||
main:
|
||||
name: Archives
|
||||
weight: 4
|
||||
pre: fa-archive
|
||||
---
|
11
content/archives/index.zh-CN.html
Normal file
11
content/archives/index.zh-CN.html
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: "归档"
|
||||
date: 2023-04-20
|
||||
draft: false
|
||||
layout: archives
|
||||
menu:
|
||||
main:
|
||||
name: 归档
|
||||
weight: 4
|
||||
pre: fa-archive
|
||||
---
|
7
content/categories/_index.en.md
Normal file
7
content/categories/_index.en.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
menu:
|
||||
main:
|
||||
name: Categories
|
||||
weight: 3
|
||||
pre: fa-stream
|
||||
---
|
7
content/categories/_index.zh-CN.md
Normal file
7
content/categories/_index.zh-CN.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
menu:
|
||||
main:
|
||||
name: 分类
|
||||
weight: 2
|
||||
pre: fa-stream
|
||||
---
|
BIN
content/post/2019-08-08-text-and-typography/devices-mockup.png
Normal file
BIN
content/post/2019-08-08-text-and-typography/devices-mockup.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 74 KiB |
BIN
content/post/2019-08-08-text-and-typography/devtools-dark.png
Normal file
BIN
content/post/2019-08-08-text-and-typography/devtools-dark.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 32 KiB |
BIN
content/post/2019-08-08-text-and-typography/devtools-light.png
Normal file
BIN
content/post/2019-08-08-text-and-typography/devtools-light.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 33 KiB |
194
content/post/2019-08-08-text-and-typography/index.en.md
Normal file
194
content/post/2019-08-08-text-and-typography/index.en.md
Normal file
@ -0,0 +1,194 @@
|
||||
---
|
||||
title: Text and Typography
|
||||
date: 2019-08-08 11:33:00 +0800
|
||||
draft: false
|
||||
description: >-
|
||||
Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.
|
||||
categories:
|
||||
- Blogging
|
||||
- Demo
|
||||
tags:
|
||||
- typography
|
||||
pin: true
|
||||
math: true
|
||||
image:
|
||||
path: devices-mockup.png
|
||||
lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
|
||||
alt: Responsive rendering of Chirpy theme on multiple devices.
|
||||
---
|
||||
|
||||
## Headings
|
||||
|
||||
<!-- markdownlint-capture -->
|
||||
<!-- markdownlint-disable -->
|
||||
# H1 — heading {data-toc-skip=true .mt-4 .mb-0 }
|
||||
|
||||
## H2 — heading {data-toc-skip=true .mt-4 .mb-0 }
|
||||
|
||||
### H3 — heading {data-toc-skip=true .mt-4 .mb-0 }
|
||||
|
||||
#### H4 — heading {data-toc-skip=true .mt-4 }
|
||||
<!-- markdownlint-restore -->
|
||||
|
||||
## Paragraph
|
||||
|
||||
Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.
|
||||
|
||||
## Lists
|
||||
|
||||
### Ordered list
|
||||
|
||||
1. Firstly
|
||||
2. Secondly
|
||||
3. Thirdly
|
||||
|
||||
### Unordered list
|
||||
|
||||
- Chapter
|
||||
- Section
|
||||
- Paragraph
|
||||
|
||||
### ToDo list
|
||||
|
||||
- [ ] Job
|
||||
- [x] Step 1
|
||||
- [x] Step 2
|
||||
- [ ] Step 3
|
||||
|
||||
### Description list
|
||||
|
||||
Sun
|
||||
: the star around which the earth orbits
|
||||
|
||||
Moon
|
||||
: the natural satellite of the earth, visible by reflected light from the sun
|
||||
|
||||
## Block Quote
|
||||
|
||||
> This line shows the _block quote_.
|
||||
|
||||
## Prompts
|
||||
|
||||
<!-- markdownlint-capture -->
|
||||
<!-- markdownlint-disable -->
|
||||
> An example showing the `tip` type prompt.
|
||||
{.prompt-tip }
|
||||
|
||||
> An example showing the `info` type prompt.
|
||||
{.prompt-info }
|
||||
|
||||
> An example showing the `warning` type prompt.
|
||||
{.prompt-warning }
|
||||
|
||||
> An example showing the `danger` type prompt.
|
||||
{.prompt-danger }
|
||||
<!-- markdownlint-restore -->
|
||||
|
||||
## Tables
|
||||
|
||||
| Company | Contact | Country |
|
||||
| :--------------------------- | :--------------- | ------: |
|
||||
| Alfreds Futterkiste | Maria Anders | Germany |
|
||||
| Island Trading | Helen Bennett | UK |
|
||||
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
|
||||
|
||||
## Links
|
||||
|
||||
<http://127.0.0.1:4000>
|
||||
|
||||
## Footnote
|
||||
|
||||
Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
|
||||
|
||||
## Inline code
|
||||
|
||||
This is an example of `Inline Code`.
|
||||
|
||||
## Filepath
|
||||
|
||||
Here is the {{< filepath src="/path/to/the/file.extend" >}}.
|
||||
|
||||
## Code blocks
|
||||
|
||||
### Common
|
||||
|
||||
```text
|
||||
This is a common code snippet, without syntax highlight and line number.
|
||||
```
|
||||
|
||||
### Specific Language
|
||||
|
||||
```bash
|
||||
if [ $? -ne 0 ]; then
|
||||
echo "The command was not successful.";
|
||||
#do the needful / exit
|
||||
fi;
|
||||
```
|
||||
|
||||
### Specific filename
|
||||
|
||||
```sass {file="_sass/jekyll-theme-chirpy.scss"}
|
||||
@import
|
||||
"colors/light-typography",
|
||||
"colors/dark-typography";
|
||||
```
|
||||
|
||||
|
||||
## Mathematics
|
||||
|
||||
The mathematics powered by [**MathJax**](https://www.mathjax.org/):
|
||||
|
||||
$$
|
||||
\begin{equation}
|
||||
\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
|
||||
\label{eq:series}
|
||||
\end{equation}
|
||||
$$
|
||||
|
||||
We can reference the equation as \eqref{eq:series}.
|
||||
|
||||
When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
|
||||
|
||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
|
||||
## Images
|
||||
|
||||
### Default (with caption)
|
||||
|
||||

|
||||
{ width="972" height="589" caption="Full screen width and center alignment"}
|
||||
|
||||
### Left aligned
|
||||
|
||||

|
||||
{ width="972" height="589" .w-75 .normal}
|
||||
|
||||
### Float to left
|
||||
|
||||

|
||||
{ width="972" height="589" .w-50 .left}
|
||||
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
|
||||
|
||||
### Float to right
|
||||
|
||||

|
||||
{ width="972" height="589" .w-50 .right}
|
||||
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
|
||||
|
||||
### Dark/Light mode & Shadow
|
||||
|
||||
The image below will toggle dark/light mode based on theme preference, notice it has shadows.
|
||||
|
||||

|
||||
{ .light .w-75 .shadow .rounded-10 w="1212" h="668" }
|
||||

|
||||
{ .dark .w-75 .shadow .rounded-10 w="1212" h="668" }
|
||||
|
||||
## Video
|
||||
|
||||
{{< embed/youtube id="Balreaj8Yqs" >}}
|
||||
|
||||
## Reverse Footnote
|
||||
|
||||
[^footnote]: The footnote source
|
||||
[^fn-nth-2]: The 2nd footnote source
|
193
content/post/2019-08-08-text-and-typography/index.zh-CN.md
Normal file
193
content/post/2019-08-08-text-and-typography/index.zh-CN.md
Normal file
@ -0,0 +1,193 @@
|
||||
---
|
||||
title: 文本和排版
|
||||
date: 2019-08-08 11:33:00 +0800
|
||||
draft: false
|
||||
description: >-
|
||||
文本、排版、数学公式、图表、流程图、图片、视频等示例。
|
||||
categories:
|
||||
- 博客
|
||||
- 演示
|
||||
tags:
|
||||
- 排版
|
||||
pin: true
|
||||
math: true
|
||||
image:
|
||||
path: devices-mockup.png
|
||||
lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
|
||||
alt: Chirpy 主题在多个设备上的响应式渲染。
|
||||
---
|
||||
|
||||
## 标题
|
||||
|
||||
<!-- markdownlint-capture -->
|
||||
<!-- markdownlint-disable -->
|
||||
# H1 — 标题 {data-toc-skip=true .mt-4 .mb-0 }
|
||||
|
||||
## H2 — 标题 {data-toc-skip=true .mt-4 .mb-0 }
|
||||
|
||||
### H3 — 标题 {data-toc-skip=true .mt-4 .mb-0 }
|
||||
|
||||
#### H4 — 标题 {data-toc-skip=true .mt-4 }
|
||||
<!-- markdownlint-restore -->
|
||||
|
||||
## 段落
|
||||
|
||||
这是一个段落示例。在这里,我们可以看到段落是如何在 Markdown 中呈现的。段落是由一个或多个连续的文本行组成,它们之间用一个或多个空行分隔。正常的段落不应该用空格或制表符缩进。这样可以保持文档的整洁和一致性。文本排版是网页设计和内容创作中的重要元素,良好的排版可以提高可读性和美观度。
|
||||
|
||||
## 列表
|
||||
|
||||
### 有序列表
|
||||
|
||||
1. 第一点
|
||||
2. 第二点
|
||||
3. 第三点
|
||||
|
||||
### 无序列表
|
||||
|
||||
- 章节
|
||||
- 节
|
||||
- 段落
|
||||
|
||||
### 待办列表
|
||||
|
||||
- [ ] 任务
|
||||
- [x] 步骤 1
|
||||
- [x] 步骤 2
|
||||
- [ ] 步骤 3
|
||||
|
||||
### 描述列表
|
||||
|
||||
太阳
|
||||
: 地球绕其运行的恒星
|
||||
|
||||
月亮
|
||||
: 地球的天然卫星,通过反射太阳光可见
|
||||
|
||||
## 引用块
|
||||
|
||||
> 这行显示 *引用块*。
|
||||
|
||||
## 提示框
|
||||
|
||||
<!-- markdownlint-capture -->
|
||||
<!-- markdownlint-disable -->
|
||||
> 这是一个显示 `tip` 类型提示的例子。
|
||||
{.prompt-tip }
|
||||
|
||||
> 这是一个显示 `info` 类型提示的例子。
|
||||
{.prompt-info }
|
||||
|
||||
> 这是一个显示 `warning` 类型提示的例子。
|
||||
{.prompt-warning }
|
||||
|
||||
> 这是一个显示 `danger` 类型提示的例子。
|
||||
{.prompt-danger }
|
||||
<!-- markdownlint-restore -->
|
||||
|
||||
## 表格
|
||||
|
||||
| 公司 | 联系人 | 国家 |
|
||||
| :--------------------------- | :--------------- | ------: |
|
||||
| Alfreds Futterkiste | Maria Anders | 德国 |
|
||||
| Island Trading | Helen Bennett | 英国 |
|
||||
| Magazzini Alimentari Riuniti | Giovanni Rovelli | 意大利 |
|
||||
|
||||
## 链接
|
||||
|
||||
<http://127.0.0.1:4000>
|
||||
|
||||
## 脚注
|
||||
|
||||
点击钩子将定位到脚注 [^footnote],这里是另一个脚注 [^fn-nth-2]。
|
||||
|
||||
## 内联代码
|
||||
|
||||
这是 `内联代码` 的一个例子。
|
||||
|
||||
## 文件路径
|
||||
|
||||
这里是 {{< filepath src="/path/to/the/file.extend" >}}。
|
||||
|
||||
## 代码块
|
||||
|
||||
### 通用
|
||||
|
||||
```text
|
||||
这是一个通用代码片段,没有语法高亮和行号。
|
||||
```
|
||||
|
||||
### 特定语言
|
||||
|
||||
```bash
|
||||
if [ $? -ne 0 ]; then
|
||||
echo "命令执行不成功。";
|
||||
#执行必要操作 / 退出
|
||||
fi;
|
||||
```
|
||||
|
||||
### 特定文件名
|
||||
|
||||
```sass {file="_sass/jekyll-theme-chirpy.scss"}
|
||||
@import
|
||||
"colors/light-typography",
|
||||
"colors/dark-typography";
|
||||
```
|
||||
|
||||
## 数学公式
|
||||
|
||||
数学公式由 [**MathJax**](https://www.mathjax.org/) 提供支持:
|
||||
|
||||
$$
|
||||
\begin{equation}
|
||||
\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
|
||||
\label{eq:series}
|
||||
\end{equation}
|
||||
$$
|
||||
|
||||
我们可以引用公式如 \eqref{eq:series}。
|
||||
|
||||
当 $a \ne 0$ 时,$ax^2 + bx + c = 0$ 有两个解,它们是
|
||||
|
||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
|
||||
## 图片
|
||||
|
||||
### 默认(带标题)
|
||||
|
||||

|
||||
{ width="972" height="589" caption="全屏宽度和居中对齐" }
|
||||
|
||||
### 左对齐
|
||||
|
||||

|
||||
{ width="972" height="589" .w-75 .normal}
|
||||
|
||||
### 向左浮动
|
||||
|
||||

|
||||
{ width="972" height="589" .w-50 .left}
|
||||
这是一段文本示例,用于演示图片向左浮动时的效果。在这种情况下,文本会环绕在图片的右侧。这对于创建更具视觉吸引力的布局很有用,特别是当您想要文本和图片并排显示时。浮动元素是网页设计中常用的技术,可以有效利用空间并增强内容的可读性。
|
||||
|
||||
### 向右浮动
|
||||
|
||||

|
||||
{ width="972" height="589" .w-50 .right}
|
||||
这是一段文本示例,用于演示图片向右浮动时的效果。在这种情况下,文本会环绕在图片的左侧。这种布局技术可以创建更加动态和有趣的页面设计。合理使用浮动可以使您的内容更加吸引人,并引导读者的视线在页面上流畅移动。记住,浮动元素需要适当的空间才能发挥最佳效果。
|
||||
|
||||
### 暗/亮模式 & 阴影
|
||||
|
||||
下面的图片将根据主题偏好切换暗/亮模式,注意它有阴影效果。
|
||||
|
||||

|
||||
{ .light .w-75 .shadow .rounded-10 w="1212" h="668" }
|
||||

|
||||
{ .dark .w-75 .shadow .rounded-10 w="1212" h="668" }
|
||||
|
||||
## 视频
|
||||
|
||||
{{< embed/youtube id="Balreaj8Yqs" >}}
|
||||
|
||||
## 反向脚注
|
||||
|
||||
[^footnote]: 脚注源
|
||||
[^fn-nth-2]: 第二个脚注源
|
BIN
content/post/2019-08-08-text-and-typography/mockup.png
Normal file
BIN
content/post/2019-08-08-text-and-typography/mockup.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
467
content/post/2019-08-08-write-a-new-post/index.en.md
Normal file
467
content/post/2019-08-08-write-a-new-post/index.en.md
Normal file
@ -0,0 +1,467 @@
|
||||
---
|
||||
title: Writing a New Post
|
||||
date: 2019-08-08 14:10:00 +0800
|
||||
categories:
|
||||
- Blogging
|
||||
- Tutorial
|
||||
tags:
|
||||
- writing
|
||||
---
|
||||
|
||||
|
||||
This tutorial will guide you how to write a post in the _Chirpy_ template, and it's worth reading even if you've used Hugo before, as many features require specific variables to be set.
|
||||
|
||||
## Naming and Path
|
||||
|
||||
Create a new file using `hugo new content/post/YYYY-MM-DD-TITLE.md`. You can change the path as you like, but note that all the posts should be placed in {{< filepath src="content/post" >}} of the root directory.
|
||||
|
||||
## Front Matter
|
||||
|
||||
Basically, you need to fill the [Front Matter](https://gohugo.io/content-management/front-matter/) as below at the top of the post:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: TITLE
|
||||
date: YYYY-MM-DD HH:MM:SS +/-TTTT
|
||||
draft: true
|
||||
---
|
||||
```
|
||||
|
||||
You can add the following fields as needed:
|
||||
```yaml
|
||||
categories: [TOP_CATEGORY, SUB_CATEGORY] # only two categories are supported
|
||||
tags: [TAG] # TAG names should always be lowercase
|
||||
pin: true # it means this post will show at the top of the home page.
|
||||
description: Hello, World! # description of this post
|
||||
```
|
||||
|
||||
> The posts' _layout_ has been set to `post` by default, so there is no need to add the variable _layout_ in the Front Matter block.
|
||||
{ .prompt-tip }
|
||||
|
||||
### Categories and Tags
|
||||
|
||||
The `categories` of each post are designed to contain up to two elements, and the number of elements in `tags` can be zero to infinity. For instance:
|
||||
|
||||
```yaml
|
||||
---
|
||||
categories: [Animal, Insect]
|
||||
tags: [bee]
|
||||
---
|
||||
```
|
||||
|
||||
### Author Information
|
||||
|
||||
The author information of the post usually does not need to be filled in the _Front Matter_ , they will be obtained from variables `social.name` and the first entry of `social.links` of the configuration file by default. But you can also override it as follows:
|
||||
|
||||
Adding author information in `data/authors.yaml` (If your website doesn't have this file, don't hesitate to create one).
|
||||
|
||||
```yaml { file="data/authors.yml" }
|
||||
<author_id>:
|
||||
name: <full name>
|
||||
url: <homepage_of_author>
|
||||
```
|
||||
|
||||
And then use `author` to specify a single entry or `authors` to specify multiple entries:
|
||||
|
||||
```yaml
|
||||
---
|
||||
author: <author_id> # for single entry
|
||||
# or
|
||||
authors: [<author1_id>, <author2_id>] # for multiple entries
|
||||
---
|
||||
```
|
||||
|
||||
If you don't want to specify the author in the frontmatter of every article, you can set a global author in {{< filepath src="config/_default/params.toml" >}}.
|
||||
|
||||
```yaml { file="config/_default/params.toml" }
|
||||
author: <author_id>
|
||||
```
|
||||
|
||||
> The author specified in each article's frontmatter will override the global author setting. So if any article has a different author than the global one, feel free to add the author directly in its frontmatter.
|
||||
{ .prompt-info }
|
||||
|
||||
To support multilingual author information on an i18n-enabled site, you can organize author data in language-specific YAML files under {{< filepath src="data/authors/" >}}. For instance:
|
||||
|
||||
- English: {{< filepath src="data/authors/en.yaml" >}}
|
||||
- Simplified Chinese: {{< filepath src="data/authors/zh-CN.yaml" >}}
|
||||
|
||||
Simply populate each file with the respective author details:
|
||||
|
||||
```yaml { file=" data/authors/en.yaml" }
|
||||
<author_id>:
|
||||
name: <author_name_en>
|
||||
url: <homepage_of_author>
|
||||
```
|
||||
|
||||
```yaml { file=" data/authors/zh-CN.yaml" }
|
||||
<author_id>:
|
||||
name: <author_name_zh_CN>
|
||||
url: <homepage_of_author>
|
||||
```
|
||||
|
||||
### Post Description
|
||||
|
||||
By default, the first words of the post are used to display on the home page for a list of posts, in the _Further Reading_ section, and in the XML of the RSS feed. If you don't want to display the auto-generated description for the post, you can customize it using the `description` field in the _Front Matter_ as follows:
|
||||
|
||||
```yaml
|
||||
---
|
||||
description: Short summary of the post.
|
||||
---
|
||||
```
|
||||
|
||||
Additionally, the `description` text will also be displayed under the post title on the post's page.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to {{< filepath src="config/_default/params.toml" >}} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://gohugo.io/content-management/front-matter/):
|
||||
|
||||
```yaml
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
```
|
||||
|
||||
## Comments
|
||||
|
||||
The global setting for comments is defined by the `comments.provider` option in the {{< filepath src="config/_default/params.toml" >}} file. Once a comment system is selected for this variable, comments will be enabled for all posts.
|
||||
|
||||
If you want to close the comment for a specific post, add the following to the **Front Matter** of the post:
|
||||
|
||||
```yaml
|
||||
---
|
||||
comments: false
|
||||
---
|
||||
```
|
||||
|
||||
## Media
|
||||
|
||||
We refer to images, audio and video as media resources in _Chirpy_.
|
||||
|
||||
### URL Prefix
|
||||
|
||||
> URL prefix is under development.
|
||||
{ .prompt-warning }
|
||||
|
||||
From time to time we have to define duplicate URL prefixes for multiple resources in a post, which is a boring task that you can avoid by setting two parameters.
|
||||
|
||||
- If you are using a CDN to host media files, you can specify the `cdn` in {{< filepath src="config/_default/params.toml" >}}. The URLs of media resources for site avatar and posts are then prefixed with the CDN domain name.
|
||||
|
||||
```yaml { file="config/_default/params.toml" }
|
||||
cdn: https://cdn.com
|
||||
```
|
||||
|
||||
|
||||
- To specify the resource path prefix for the current post/page range, set `media_subpath` in the _front matter_ of the post:
|
||||
|
||||
```yaml
|
||||
---
|
||||
media_subpath: /path/to/media/
|
||||
---
|
||||
```
|
||||
|
||||
The option `site.cdn` and `page.media_subpath` can be used individually or in combination to flexibly compose the final resource URL: `[site.cdn/][page.media_subpath/]file.ext`
|
||||
|
||||
### Images
|
||||
|
||||
#### Caption
|
||||
|
||||
Add an html attribute `caption` to the next line of an image, then it will become the caption and appear at the bottom of the image:
|
||||
|
||||
```markdown
|
||||

|
||||
{ caption="Your caption of images" }
|
||||
```
|
||||
|
||||
#### Size
|
||||
|
||||
To prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image.
|
||||
|
||||
```markdown
|
||||

|
||||
{ width="700" height="400" }
|
||||
```
|
||||
|
||||
> For an SVG, you have to at least specify its _width_, otherwise it won't be rendered.
|
||||
{ .prompt-info }
|
||||
|
||||
|
||||
#### Position
|
||||
|
||||
By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`.
|
||||
|
||||
> Once the position is specified, the image caption should not be added.
|
||||
{ .prompt-warning }
|
||||
|
||||
- **Normal position**
|
||||
|
||||
Image will be left aligned in below sample:
|
||||
|
||||
```markdown
|
||||

|
||||
{ .normal }
|
||||
```
|
||||
|
||||
- **Float to the left**
|
||||
|
||||
```markdown
|
||||

|
||||
{ .left }
|
||||
```
|
||||
|
||||
- **Float to the right**
|
||||
|
||||
```markdown
|
||||

|
||||
{ .right }
|
||||
```
|
||||
|
||||
#### Dark/Light mode
|
||||
|
||||
You can make images follow theme preferences in dark/light mode. This requires you to prepare two images, one for dark mode and one for light mode, and then assign them a specific class (`dark` or `light`):
|
||||
|
||||
```markdown
|
||||

|
||||
{ .light }
|
||||

|
||||
{ .dark }
|
||||
```
|
||||
|
||||
#### Shadow
|
||||
|
||||
The screenshots of the program window can be considered to show the shadow effect:
|
||||
|
||||
```markdown
|
||||

|
||||
{ .shadow }
|
||||
```
|
||||
|
||||
#### Preview Image
|
||||
|
||||
If you want to add an image at the top of the post, please provide an image with a resolution of `1200 x 630`. Please note that if the image aspect ratio does not meet `1.91 : 1`, the image will be scaled and cropped.
|
||||
|
||||
Knowing these prerequisites, you can start setting the image's attribute:
|
||||
|
||||
```yaml
|
||||
---
|
||||
image:
|
||||
path: /path/to/image
|
||||
alt: image alternative text
|
||||
---
|
||||
```
|
||||
|
||||
Note that the [`media_subpath`](#url-prefix) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name.
|
||||
|
||||
|
||||
### Video
|
||||
|
||||
#### Social Media Platform
|
||||
|
||||
You can embed videos from social media platforms with the following syntax:
|
||||
|
||||
```hugo
|
||||
{{</* embed/{Platform}.html id="{ID}" */>}}
|
||||
```
|
||||
|
||||
Where `Platform` is the lowercase of the platform name, and `ID` is the video ID.
|
||||
|
||||
The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.
|
||||
|
||||
| Video URL | Platform | ID |
|
||||
| -------------------------------------------------------------------------------------------------- | ---------- | :------------- |
|
||||
| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` |
|
||||
| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211) | `twitch` | `1634779211` |
|
||||
| [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` |
|
||||
|
||||
#### Video Files
|
||||
|
||||
If you want to embed a video file directly, use the following syntax:
|
||||
|
||||
```hugo
|
||||
{{</* embed/video.html src="{URL}" */>}}
|
||||
```
|
||||
|
||||
Where `URL` is a URL to a video file e.g. `/path/to/sample/video.mp4`.
|
||||
|
||||
You can also specify additional attributes for the embedded video file. Here is a full list of attributes allowed.
|
||||
|
||||
- `poster='/path/to/poster.png'` — poster image for a video that is shown while video is downloading
|
||||
- `title='Text'` — title for a video that appears below the video and looks same as for images
|
||||
- `autoplay=true` — video automatically begins to play back as soon as it can
|
||||
- `loop=true` — automatically seek back to the start upon reaching the end of the video
|
||||
- `muted=true` — audio will be initially silenced
|
||||
- `types` — specify the extensions of additional video formats separated by `|`. Ensure these files exist in the same directory as your primary video file.
|
||||
|
||||
Consider an example using all of the above:
|
||||
|
||||
```liquid
|
||||
{{</*
|
||||
embed/video.html
|
||||
src="/path/to/video.mp4"
|
||||
types="ogg|mov"
|
||||
poster="poster.png"
|
||||
title="Demo video"
|
||||
autoplay=true
|
||||
loop=true
|
||||
muted=true
|
||||
*/>}}
|
||||
```
|
||||
|
||||
### Audios
|
||||
|
||||
If you want to embed an audio file directly, use the following syntax:
|
||||
|
||||
```liquid
|
||||
{{</* embed/audio.html src="{URL}" */>}}
|
||||
```
|
||||
|
||||
Where `URL` is a URL to an audio file e.g. `/path/to/audio.mp3`.
|
||||
|
||||
You can also specify additional attributes for the embedded audio file. Here is a full list of attributes allowed.
|
||||
|
||||
- `title='Text'` — title for an audio that appears below the audio and looks same as for images
|
||||
- `types` — specify the extensions of additional audio formats separated by `|`. Ensure these files exist in the same directory as your primary audio file.
|
||||
|
||||
Consider an example using all of the above:
|
||||
|
||||
```hugo
|
||||
{{</*
|
||||
include embed/audio.html
|
||||
src='/path/to/audio.mp3'
|
||||
types='ogg|wav|aac'
|
||||
title='Demo audio'
|
||||
*/>}}
|
||||
```
|
||||
|
||||
## Pinned Posts
|
||||
|
||||
You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:
|
||||
|
||||
```yaml
|
||||
---
|
||||
pin: true
|
||||
---
|
||||
```
|
||||
|
||||
## Prompts
|
||||
|
||||
There are several types of prompts: `tip`, `info`, `warning`, and `danger`. They can be generated by adding the class `prompt-{type}` to the blockquote. For example, define a prompt of type `info` as follows:
|
||||
|
||||
```md
|
||||
> Example line for prompt.
|
||||
{ .prompt-info }
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
### Inline Code
|
||||
|
||||
```md
|
||||
`inline code part`
|
||||
```
|
||||
|
||||
### Filepath Highlight
|
||||
|
||||
```hugo
|
||||
{{</* /path/to/a/file.extend */>}}
|
||||
```
|
||||
|
||||
### Code Block
|
||||
|
||||
Markdown symbols ```` ``` ```` can easily create a code block as follows:
|
||||
|
||||
````md
|
||||
```
|
||||
This is a plaintext code snippet.
|
||||
```
|
||||
````
|
||||
|
||||
#### Specifying Language
|
||||
|
||||
Using ```` ```{language} ```` you will get a code block with syntax highlight:
|
||||
|
||||
````markdown
|
||||
```yaml
|
||||
key: value
|
||||
```
|
||||
````
|
||||
|
||||
|
||||
#### Specifying the Filename
|
||||
|
||||
You may have noticed that the code language will be displayed at the top of the code block. If you want to replace it with the file name, you can add the attribute `file` to achieve this:
|
||||
|
||||
````markdown
|
||||
```shell { file="path/to/file" }
|
||||
# content
|
||||
```
|
||||
````
|
||||
|
||||
## Mathematics
|
||||
|
||||
We use [**MathJax**][mathjax] to generate mathematics. For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
|
||||
|
||||
[mathjax]: https://www.mathjax.org/
|
||||
|
||||
```yaml
|
||||
---
|
||||
math: true
|
||||
---
|
||||
```
|
||||
|
||||
After enabling the mathematical feature, you can add math equations with the following syntax:
|
||||
|
||||
- **Block math** should be added with `$$ math $$` with **mandatory** blank lines before and after `$$`
|
||||
- **Inserting equation numbering** should be added with `$$\begin{equation} math \end{equation}$$`
|
||||
- **Referencing equation numbering** should be done with `\label{eq:label_name}` in the equation block and `\eqref{eq:label_name}` inline with text (see example below)
|
||||
- **Inline math** (in lines) should be added with `$$ math $$` without any blank line before or after `$$`
|
||||
- **Inline math** (in lists) should be added with `\$$ math $$`
|
||||
|
||||
```markdown
|
||||
<!-- Block math, keep all blank lines -->
|
||||
|
||||
$$
|
||||
LaTeX_math_expression
|
||||
$$
|
||||
|
||||
<!-- Equation numbering, keep all blank lines -->
|
||||
|
||||
$$
|
||||
\begin{equation}
|
||||
LaTeX_math_expression
|
||||
\label{eq:label_name}
|
||||
\end{equation}
|
||||
$$
|
||||
|
||||
Can be referenced as \eqref{eq:label_name}.
|
||||
|
||||
<!-- Inline math in lines, NO blank lines -->
|
||||
|
||||
"Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit."
|
||||
|
||||
<!-- Inline math in lists, escape the first `$` -->
|
||||
|
||||
1. \$$ LaTeX_math_expression $$
|
||||
2. \$$ LaTeX_math_expression $$
|
||||
3. \$$ LaTeX_math_expression $$
|
||||
```
|
||||
|
||||
[mathjax-exts]: https://docs.mathjax.org/en/latest/input/tex/extensions/index.html
|
||||
|
||||
## Mermaid
|
||||
|
||||
> Mermaid support is under development
|
||||
{ .prompt-warning }
|
||||
|
||||
[**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagram generation tool. To enable it on your post, add the following to the YAML block:
|
||||
|
||||
```yaml
|
||||
---
|
||||
mermaid: true
|
||||
---
|
||||
```
|
||||
|
||||
Then you can use it like other markdown languages: surround the graph code with ```` ```mermaid ```` and ```` ``` ````.
|
||||
|
||||
## Learn More
|
||||
|
||||
For more knowledge about writing Hugo posts, visit the [Hugo Documentation](https://gohugo.io/documentation/).
|
462
content/post/2019-08-08-write-a-new-post/index.zh-CN.md
Normal file
462
content/post/2019-08-08-write-a-new-post/index.zh-CN.md
Normal file
@ -0,0 +1,462 @@
|
||||
---
|
||||
title: 撰写新文章
|
||||
date: 2019-08-08 14:10:00 +0800
|
||||
categories:
|
||||
- 博客
|
||||
- 教程
|
||||
tags:
|
||||
- 写作
|
||||
---
|
||||
|
||||
本教程将指导您如何在 _Chirpy_ 模板中撰写文章,即使您以前使用过 Hugo,也值得阅读,因为许多功能需要设置特定变量。
|
||||
|
||||
## 命名和路径
|
||||
|
||||
创建一个新文件,使用 `hugo new content/post/YYYY-MM-DD-TITLE.md`。您可以根据自己的喜好更改路径,但请注意,所有文章都应该放在根目录的 {{< filepath src="content/post" >}} 中。
|
||||
|
||||
## 前言
|
||||
|
||||
基本上,您需要在文章顶部填写[前言](https://gohugo.io/content-management/front-matter/),如下所示:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: 标题
|
||||
date: YYYY-MM-DD HH:MM:SS +/-TTTT
|
||||
draft: true
|
||||
---
|
||||
```
|
||||
|
||||
您可以根据需要添加以下字段:
|
||||
```yaml
|
||||
categories: [主分类, 子分类] # 只支持两个分类
|
||||
tags: [标签] # 标签名称应始终为小写
|
||||
pin: true # 表示这篇文章将显示在首页顶部
|
||||
description: 文章描述 # 该文章的描述
|
||||
```
|
||||
|
||||
> 文章的_布局_默认已设置为`post`,因此无需在前言块中添加变量_layout_。
|
||||
{ .prompt-tip }
|
||||
|
||||
### 分类和标签
|
||||
|
||||
每篇文章的 `categories` 设计为最多包含两个元素,而 `tags` 中的元素数量可以从零到无穷大。例如:
|
||||
|
||||
```yaml
|
||||
---
|
||||
categories: [动物, 昆虫]
|
||||
tags: [蜜蜂]
|
||||
---
|
||||
```
|
||||
|
||||
### 作者信息
|
||||
|
||||
文章的作者信息通常不需要在 _前言_ 中填写,默认情况下,它们将从配置文件的 `social.name` 和 `social.links` 的第一个条目中获取。但您也可以按如下方式覆盖它:
|
||||
|
||||
在 `data/authors.yaml` 中添加作者信息(如果您的网站没有此文件,请创建一个)。
|
||||
|
||||
```yaml { file="data/authors.yml" }
|
||||
<作者ID>:
|
||||
name: <全名>
|
||||
url: <作者的主页>
|
||||
```
|
||||
|
||||
然后使用 `author` 指定单个条目或 `authors` 指定多个条目:
|
||||
|
||||
```yaml
|
||||
---
|
||||
author: <作者ID> # 单个条目
|
||||
# 或
|
||||
authors: [<作者1ID>, <作者2ID>] # 多个条目
|
||||
---
|
||||
```
|
||||
|
||||
如果您不想在每篇文章的前言中指定作者,可以在 {{< filepath src="config/_default/params.toml" >}} 中设置全局作者。
|
||||
|
||||
```yaml { file="config/_default/params.toml" }
|
||||
author: <作者ID>
|
||||
```
|
||||
|
||||
> 在每篇文章前言中指定的作者将覆盖全局作者设置。因此,如果任何文章的作者与全局作者不同,可以直接在其前言中添加作者。
|
||||
{ .prompt-info }
|
||||
|
||||
要在启用 i18n 的站点上支持多语言作者信息,您可以在 {{< filepath src="data/authors/" >}} 下组织特定语言的 YAML 文件中的作者数据。例如:
|
||||
|
||||
- 英语:{{< filepath src="data/authors/en.yaml" >}}
|
||||
- 简体中文:{{< filepath src="data/authors/zh-CN.yaml" >}}
|
||||
|
||||
只需用相应的作者详细信息填充每个文件:
|
||||
|
||||
```yaml { file="data/authors/en.yaml" }
|
||||
<作者ID>:
|
||||
name: <作者英文名>
|
||||
url: <作者的主页>
|
||||
```
|
||||
|
||||
```yaml { file="data/authors/zh-CN.yaml" }
|
||||
<作者ID>:
|
||||
name: <作者中文名>
|
||||
url: <作者的主页>
|
||||
```
|
||||
|
||||
### 文章描述
|
||||
|
||||
默认情况下,文章的第一句话用于在首页的文章列表、_进一步阅读_ 部分以及RSS源的XML中显示。如果您不想为文章显示自动生成的描述,可以使用 _前言_ 中的 `description` 字段自定义它,如下所示:
|
||||
|
||||
```yaml
|
||||
---
|
||||
description: 文章的简短摘要。
|
||||
---
|
||||
```
|
||||
|
||||
此外,`description` 文本也将显示在文章页面的文章标题下方。
|
||||
|
||||
## 目录
|
||||
|
||||
默认情况下,目录(TOC)显示在文章的右侧面板上。如果您想全局关闭它,请转到 {{< filepath src="config/_default/params.toml" >}} 并将变量 `toc` 的值设置为 `false`。如果您想为特定文章关闭TOC,请将以下内容添加到文章的[前言](https://gohugo.io/content-management/front-matter/)中:
|
||||
|
||||
```yaml
|
||||
---
|
||||
toc: false
|
||||
---
|
||||
```
|
||||
|
||||
## 评论
|
||||
|
||||
评论的全局设置由 {{< filepath src="config/_default/params.toml" >}} 文件中的 `comments.provider` 选项定义。一旦为此变量选择了评论系统,所有文章将启用评论。
|
||||
|
||||
如果您想关闭特定文章的评论,请将以下内容添加到文章的**前言**中:
|
||||
|
||||
```yaml
|
||||
---
|
||||
comments: false
|
||||
---
|
||||
```
|
||||
|
||||
## 媒体
|
||||
|
||||
在 _Chirpy_ 中,我们将图片、音频和视频称为媒体资源。
|
||||
|
||||
### URL前缀
|
||||
|
||||
> URL 前缀功能正在开发中。
|
||||
{ .prompt-warning }
|
||||
|
||||
有时,我们必须为一篇文章中的多个资源定义重复的URL前缀,这是一项可以通过设置两个参数来避免的繁琐任务。
|
||||
|
||||
- 如果您使用CDN托管媒体文件,可以在 {{< filepath src="config/_default/params.toml" >}} 中指定 `cdn`。然后,站点头像和文章的媒体资源的URL将以CDN域名为前缀。
|
||||
|
||||
```yaml { file="config/_default/params.toml" }
|
||||
cdn: https://cdn.com
|
||||
```
|
||||
|
||||
- 要为当前文章/页面范围指定资源路径前缀,请在文章的 _前言_ 中设置 `media_subpath`:
|
||||
|
||||
```yaml
|
||||
---
|
||||
media_subpath: /path/to/media/
|
||||
---
|
||||
```
|
||||
|
||||
选项 `site.cdn` 和 `page.media_subpath` 可以单独使用或组合使用,以灵活组合最终的资源URL:`[site.cdn/][page.media_subpath/]file.ext`
|
||||
|
||||
### 图片
|
||||
|
||||
#### 标题
|
||||
|
||||
在图片的下一行添加 HTML 属性 `caption`,然后它将作为标题显示在图片底部:
|
||||
|
||||
```markdown
|
||||

|
||||
{ caption="图片的标题" }
|
||||
```
|
||||
|
||||
#### 尺寸
|
||||
|
||||
为防止图片加载时页面内容布局发生偏移,我们应该为每张图片设置宽度和高度。
|
||||
|
||||
```markdown
|
||||

|
||||
{ width="700" height="400" }
|
||||
```
|
||||
|
||||
> 对于SVG,您至少必须指定其 _宽度_,否则它不会被渲染。
|
||||
{ .prompt-info }
|
||||
|
||||
#### 位置
|
||||
|
||||
默认情况下,图片居中,但您可以使用 `normal`、`left` 和 `right` 类之一指定位置。
|
||||
|
||||
> 一旦指定了位置,就不应添加图片标题。
|
||||
{ .prompt-warning }
|
||||
|
||||
- **普通位置**
|
||||
|
||||
在下面的示例中,图片将左对齐:
|
||||
|
||||
```markdown
|
||||

|
||||
{ .normal }
|
||||
```
|
||||
|
||||
- **向左浮动**
|
||||
|
||||
```markdown
|
||||

|
||||
{ .left }
|
||||
```
|
||||
|
||||
- **向右浮动**
|
||||
|
||||
```markdown
|
||||

|
||||
{ .right }
|
||||
```
|
||||
|
||||
#### 暗/亮模式
|
||||
|
||||
您可以使图片跟随暗/亮模式的主题偏好。这需要您准备两张图片,一张用于暗模式,一张用于亮模式,然后为它们分配特定的类(`dark` 或 `light`):
|
||||
|
||||
```markdown
|
||||

|
||||
{ .light }
|
||||

|
||||
{ .dark }
|
||||
```
|
||||
|
||||
#### 阴影
|
||||
|
||||
程序窗口的截图可以考虑显示阴影效果:
|
||||
|
||||
```markdown
|
||||

|
||||
{ .shadow }
|
||||
```
|
||||
|
||||
#### 预览图片
|
||||
|
||||
如果您想在文章顶部添加图片,请提供分辨率为 `1200 x 630` 的图片。请注意,如果图片的宽高比不符合 `1.91 : 1`,图片将被缩放和裁剪。
|
||||
|
||||
了解这些先决条件后,您可以开始设置图片的属性:
|
||||
|
||||
```yaml
|
||||
---
|
||||
image:
|
||||
path: /path/to/image
|
||||
alt: 图片替代文本
|
||||
---
|
||||
```
|
||||
|
||||
请注意,[`media_subpath`](#url前缀) 也可以传递给预览图片,也就是说,当它已经设置好时,属性 `path` 只需要图片文件名。
|
||||
|
||||
### 视频
|
||||
|
||||
#### 社交媒体平台
|
||||
|
||||
您可以使用以下语法嵌入来自社交媒体平台的视频:
|
||||
|
||||
```hugo
|
||||
{{</* embed/{Platform}.html id="{ID}" */>}}
|
||||
```
|
||||
|
||||
其中 `Platform` 是平台名称的小写形式,`ID` 是视频 ID。
|
||||
|
||||
下表显示了如何从给定的视频 URL 中获取我们需要的两个参数,您还可以了解当前支持的视频平台。
|
||||
|
||||
| 视频 URL | 平台 | ID |
|
||||
| -------------------------------------------------------------------------------------------------- | ---------- | :------------- |
|
||||
| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` |
|
||||
| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211) | `twitch` | `1634779211` |
|
||||
| [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` |
|
||||
|
||||
#### 视频文件
|
||||
|
||||
如果您想直接嵌入视频文件,请使用以下语法:
|
||||
|
||||
```hugo
|
||||
{{</* embed/video.html src="{URL}" */>}}
|
||||
```
|
||||
|
||||
其中 `URL` 是指向视频文件的 URL,例如 `/path/to/sample/video.mp4`。
|
||||
|
||||
您还可以为嵌入的视频文件指定其他属性。以下是允许的属性的完整列表。
|
||||
|
||||
- `poster='/path/to/poster.png'` — 视频的海报图片,在视频下载时显示
|
||||
- `title='文本'` — 显示在视频下方的标题,外观与图片标题相同
|
||||
- `autoplay=true` — 视频在准备好后自动开始播放
|
||||
- `loop=true` — 在视频播放结束时自动回到起点
|
||||
- `muted=true` — 音频最初将被静音
|
||||
- `types` — 指定其他视频格式的扩展名,用 `|` 分隔。确保这些文件与您的主视频文件存在于同一目录中。
|
||||
|
||||
考虑使用上述所有内容的示例:
|
||||
|
||||
```liquid
|
||||
{{</*
|
||||
embed/video.html
|
||||
src="/path/to/video.mp4"
|
||||
types="ogg|mov"
|
||||
poster="poster.png"
|
||||
title="演示视频"
|
||||
autoplay=true
|
||||
loop=true
|
||||
muted=true
|
||||
*/>}}
|
||||
```
|
||||
|
||||
### 音频
|
||||
|
||||
如果您想直接嵌入音频文件,请使用以下语法:
|
||||
|
||||
```liquid
|
||||
{{</* embed/audio.html src="{URL}" */>}}
|
||||
```
|
||||
|
||||
其中 `URL` 是指向音频文件的 URL,例如 `/path/to/audio.mp3`。
|
||||
|
||||
您还可以为嵌入的音频文件指定其他属性。以下是允许的属性的完整列表。
|
||||
|
||||
- `title='文本'` — 显示在音频下方的标题,外观与图片标题相同
|
||||
- `types` — 指定其他音频格式的扩展名,用 `|` 分隔。确保这些文件与您的主音频文件存在于同一目录中。
|
||||
|
||||
考虑使用上述所有内容的示例:
|
||||
|
||||
```hugo
|
||||
{{</*
|
||||
include embed/audio.html
|
||||
src='/path/to/audio.mp3'
|
||||
types='ogg|wav|aac'
|
||||
title='演示音频'
|
||||
*/>}}
|
||||
```
|
||||
|
||||
## 置顶文章
|
||||
|
||||
您可以将一篇或多篇文章置顶到首页顶部,置顶的文章按照它们的发布日期以倒序排序。通过以下方式启用:
|
||||
|
||||
```yaml
|
||||
---
|
||||
pin: true
|
||||
---
|
||||
```
|
||||
|
||||
## 提示框
|
||||
|
||||
有几种类型的提示框:`tip`、`info`、`warning` 和 `danger`。它们可以通过向引用块添加类 `prompt-{type}` 来生成。例如,按如下方式定义 `info` 类型的提示框:
|
||||
|
||||
```md
|
||||
> 提示框示例文本。
|
||||
{ .prompt-info }
|
||||
```
|
||||
|
||||
## 语法
|
||||
|
||||
### 内联代码
|
||||
|
||||
```md
|
||||
`内联代码部分`
|
||||
```
|
||||
|
||||
### 文件路径高亮
|
||||
|
||||
```hugo
|
||||
{{</* filepath src="/path/to/a/file.extend" */>}}
|
||||
```
|
||||
|
||||
### 代码块
|
||||
|
||||
Markdown 符号 ```` ``` ```` 可以轻松创建代码块,如下所示:
|
||||
|
||||
````md
|
||||
```
|
||||
这是一个纯文本代码片段。
|
||||
```
|
||||
````
|
||||
|
||||
#### 指定语言
|
||||
|
||||
使用 ```` ```{language} ```` 您将获得带有语法高亮的代码块:
|
||||
|
||||
````markdown
|
||||
```yaml
|
||||
key: value
|
||||
```
|
||||
````
|
||||
|
||||
#### 指定文件名
|
||||
|
||||
您可能已经注意到代码语言将显示在代码块的顶部。如果您想用文件名替换它,可以添加 `file` 属性来实现:
|
||||
|
||||
````markdown
|
||||
```shell { file="path/to/file" }
|
||||
# content
|
||||
```
|
||||
````
|
||||
|
||||
## 数学公式
|
||||
|
||||
我们使用 [**MathJax**][mathjax] 来生成数学公式。出于网站性能的原因,默认情况下不会加载数学功能。但可以通过以下方式启用:
|
||||
|
||||
[mathjax]: https://www.mathjax.org/
|
||||
|
||||
```yaml
|
||||
---
|
||||
math: true
|
||||
---
|
||||
```
|
||||
|
||||
启用数学功能后,您可以使用以下语法添加数学公式:
|
||||
|
||||
- **块级数学公式** 应该使用 `$$ math $$` 添加,**必须** 在 `$$` 之前和之后留有空行
|
||||
- **插入方程编号** 应该使用 `$$\begin{equation} math \end{equation}$$` 添加
|
||||
- **引用方程编号** 应该在方程块中使用 `\label{eq:label_name}` 和在文本中使用 `\eqref{eq:label_name}` 内联引用(见下面的示例)
|
||||
- **内联数学公式**(在行中)应该使用 `$$ math $$` 添加,在 `$$` 之前或之后不要有任何空行
|
||||
- **内联数学公式**(在列表中)应该使用 `\$$ math $$` 添加
|
||||
|
||||
```markdown
|
||||
<!-- 块级数学公式,保留所有空行 -->
|
||||
|
||||
$$
|
||||
LaTeX_数学表达式
|
||||
$$
|
||||
|
||||
<!-- 方程编号,保留所有空行 -->
|
||||
|
||||
$$
|
||||
\begin{equation}
|
||||
LaTeX_数学表达式
|
||||
\label{eq:label_name}
|
||||
\end{equation}
|
||||
$$
|
||||
|
||||
可以引用为 \eqref{eq:label_name}。
|
||||
|
||||
<!-- 行内数学公式,不要有空行 -->
|
||||
|
||||
"Lorem ipsum dolor sit amet, $$ LaTeX_数学表达式 $$ consectetur adipiscing elit."
|
||||
|
||||
<!-- 列表中的内联数学公式,第一个 `$` 需要转义 -->
|
||||
|
||||
1. \$$ LaTeX_数学表达式 $$
|
||||
2. \$$ LaTeX_数学表达式 $$
|
||||
3. \$$ LaTeX_数学表达式 $$
|
||||
```
|
||||
|
||||
[mathjax-exts]: https://docs.mathjax.org/en/latest/input/tex/extensions/index.html
|
||||
|
||||
## Mermaid
|
||||
|
||||
> Mermaid 支持正在开发中
|
||||
{ .prompt-warning }
|
||||
|
||||
[**Mermaid**](https://github.com/mermaid-js/mermaid) 是一个很棒的图表生成工具。要在您的文章中启用它,请将以下内容添加到 YAML 块中:
|
||||
|
||||
```yaml
|
||||
---
|
||||
mermaid: true
|
||||
---
|
||||
```
|
||||
|
||||
然后您可以像其他 markdown 语言一样使用它:将图表代码用 ```` ```mermaid ```` 和 ```` ``` ```` 包围起来。
|
||||
|
||||
## 了解更多
|
||||
|
||||
要了解更多关于撰写 Hugo 文章的知识,请访问 [Hugo 文档](https://gohugo.io/documentation/)。
|
157
content/post/2019-08-09-getting-started/index.en.md
Normal file
157
content/post/2019-08-09-getting-started/index.en.md
Normal file
@ -0,0 +1,157 @@
|
||||
---
|
||||
title: Getting Started
|
||||
date: 2019-08-09 20:55:00 +0800
|
||||
draft: false
|
||||
description: >-
|
||||
Get started with Chirpy basics in this comprehensive overview.
|
||||
You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.
|
||||
categories:
|
||||
- Blogging
|
||||
- Tutorial
|
||||
tags:
|
||||
- getting started
|
||||
pin: true
|
||||
---
|
||||
|
||||
> **NOTE:** This tutorial is not fully migrated from the Jekyll version -- please reference with caution.
|
||||
{ .prompt-warning }
|
||||
|
||||
## Creating a Site Repository
|
||||
|
||||
When creating your site repository, you have two options depending on your needs:
|
||||
|
||||
### Option 1. Using the Starter (Recommended)
|
||||
|
||||
This approach simplifies upgrades, isolates unnecessary files, and is perfect for users who want to focus on writing with minimal configuration.
|
||||
|
||||
1. Sign in to GitHub and navigate to the [**starter**][starter].
|
||||
2. Click the <kbd>Use this template</kbd> button and then select <kbd>Create a new repository</kbd>.
|
||||
3. Name the new repository `<username>.github.io`, replacing `username` with your lowercase GitHub username.
|
||||
|
||||
### Option 2. Forking the Theme
|
||||
|
||||
This approach is convenient for modifying features or UI design, but presents challenges during upgrades. So don't try this unless you are familiar with Jekyll and plan to heavily modify this theme.
|
||||
|
||||
1. Sign in to GitHub.
|
||||
2. [Fork the theme repository](https://github.com/geekifan/jekyll-theme-chirpy/fork).
|
||||
3. Name the new repository `<username>.github.io`, replacing `username` with your lowercase GitHub username.
|
||||
|
||||
## Setting up the Environment
|
||||
|
||||
Once your repository is created, it's time to set up your development environment. There are two primary methods:
|
||||
|
||||
### Using Dev Containers (Recommended for Windows)
|
||||
|
||||
Dev Containers offer an isolated environment using Docker, which prevents conflicts with your system and ensures all dependencies are managed within the container.
|
||||
|
||||
**Steps**:
|
||||
|
||||
1. Install Docker:
|
||||
- On Windows/macOS, install [Docker Desktop][docker-desktop].
|
||||
- On Linux, install [Docker Engine][docker-engine].
|
||||
2. Install [VS Code][vscode] and the [Dev Containers extension][dev-containers].
|
||||
3. Clone your repository:
|
||||
- For Docker Desktop: Start VS Code and [clone your repo in a container volume][dc-clone-in-vol].
|
||||
- For Docker Engine: Clone your repo locally, then [open it in a container][dc-open-in-container] via VS Code.
|
||||
4. Wait for the Dev Containers setup to complete.
|
||||
|
||||
### Setting up Natively (Recommended for Unix-like OS)
|
||||
|
||||
For Unix-like systems, you can set up the environment natively for optimal performance, though you can also use Dev Containers as an alternative.
|
||||
|
||||
**Steps**:
|
||||
|
||||
1. Follow the [Hugo installation guide](https://gohugo.io/installation/) to install Hugo and ensure [Git](https://git-scm.com/) is installed.
|
||||
2. Clone your repository to your local machine.
|
||||
3. Run command `hugo mod get` to install the dependencies.
|
||||
|
||||
## Usage
|
||||
|
||||
### Start the Jekyll Server
|
||||
|
||||
To run the site locally, use the following command:
|
||||
|
||||
```terminal
|
||||
hugo serve
|
||||
```
|
||||
|
||||
> If you are using Dev Containers, you must run that command in the **VS Code** Terminal.
|
||||
{ .prompt-info }
|
||||
|
||||
After a few seconds, the local server will be available at <http://127.0.0.1:1313>.
|
||||
|
||||
### Configuration
|
||||
|
||||
Update the variables in {{< filepath src="_config.yml">}} as needed. Some typical options include:
|
||||
|
||||
- `url`
|
||||
- `avatar`
|
||||
- `timezone`
|
||||
- `lang`
|
||||
|
||||
### Social Contact Options
|
||||
|
||||
Social contact options are displayed at the bottom of the sidebar. You can enable or disable specific contacts in the {{< filepath src="_data/contact.yml">}} file.
|
||||
|
||||
### Customizing the Stylesheet
|
||||
|
||||
To customize the stylesheet, copy the theme's {{< filepath src="assets/css/jekyll-theme-chirpy.scss">}} file to the same path in your Jekyll site, and add your custom styles at the end of the file.
|
||||
|
||||
### Customizing Static Assets
|
||||
|
||||
Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined in {{< filepath src="_data/origin/cors.ymll">}}. You can replace some of them based on the network conditions in the region where your website is published.
|
||||
|
||||
If you prefer to self-host the static assets, modify {{< filepath src="config/_default/params.toml">}} and turn `self_host` on. The static files are from [geekifan/chirpy-static-assets](https://github.com/geekifan/chirpy-static-assets#readme) which is a fork of [cotes2020/chirpy-static-assets](https://github.com/cotes2020/chirpy-static-assets#readme) with minimal changes to make it work with hugo.
|
||||
|
||||
## Deployment
|
||||
|
||||
Before deploying, check the {{< filepath src="_config.yml">}} file and ensure the `url` is configured correctly. If you prefer a [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or if you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to set the `baseurl` to your project name, starting with a slash, e.g., `/project-name`.
|
||||
|
||||
Now you can choose _ONE_ of the following methods to deploy your Jekyll site.
|
||||
|
||||
### Deploy Using Github Actions
|
||||
|
||||
Prepare the following:
|
||||
|
||||
- If you're on the GitHub Free plan, keep your site repository public.
|
||||
- If you have committed {{< filepath src="Gemfile.lockl">}} to the repository, and your local machine is not running Linux, update the platform list of the lock file:
|
||||
|
||||
```console
|
||||
$ bundle lock --add-platform x86_64-linux
|
||||
```
|
||||
|
||||
Next, configure the _Pages_ service:
|
||||
|
||||
1. Go to your repository on GitHub. Select the _Settings_ tab, then click _Pages_ in the left navigation bar. In the **Source** section (under _Build and deployment_), select [**GitHub Actions**][pages-workflow-src] from the dropdown menu.
|
||||
|
||||

|
||||
{ .light .border .normal width="375" height="140" }
|
||||
|
||||

|
||||
{ .dark .normal width="375" height="140" }
|
||||
|
||||
2. Push any commits to GitHub to trigger the _Actions_ workflow. In the _Actions_ tab of your repository, you should see the workflow _Build and Deploy_ running. Once the build is complete and successful, the site will be deployed automatically.
|
||||
|
||||
You can now visit the URL provided by GitHub to access your site.
|
||||
|
||||
### Manual Build and Deployment
|
||||
|
||||
For self-hosted servers, you will need to build the site on your local machine and then upload the site files to the server.
|
||||
|
||||
Navigate to the root of the source project, and build your site with the following command:
|
||||
|
||||
```console
|
||||
$ JEKYLL_ENV=production bundle exec jekyll b
|
||||
```
|
||||
|
||||
Unless you specified the output path, the generated site files will be placed in the {{< filepath src="_site" >}}folder of the project's root directory. Upload these files to your target server.
|
||||
|
||||
[nodejs]: https://nodejs.org/
|
||||
[starter]: https://github.com/geekifan/chirpy-starter
|
||||
[pages-workflow-src]: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow
|
||||
[docker-desktop]: https://www.docker.com/products/docker-desktop/
|
||||
[docker-engine]: https://docs.docker.com/engine/install/
|
||||
[vscode]: https://code.visualstudio.com/
|
||||
[dev-containers]: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
|
||||
[dc-clone-in-vol]: https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-a-git-repository-or-github-pr-in-an-isolated-container-volume
|
||||
[dc-open-in-container]: https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-an-existing-folder-in-a-container
|
158
content/post/2019-08-09-getting-started/index.zh-CN.md
Normal file
158
content/post/2019-08-09-getting-started/index.zh-CN.md
Normal file
@ -0,0 +1,158 @@
|
||||
---
|
||||
title: 开始使用
|
||||
date: 2019-08-09 20:55:00 +0800
|
||||
draft: false
|
||||
description: >-
|
||||
通过这个全面概述开始学习Chirpy的基础知识。
|
||||
您将学习如何安装、配置和使用您的第一个基于Chirpy的网站,以及如何将其部署到网络服务器。
|
||||
categories:
|
||||
- 博客
|
||||
- 教程
|
||||
tags:
|
||||
- 入门指南
|
||||
pin: true
|
||||
---
|
||||
|
||||
> **NOTE:** 该教程还没有完成从 Jekyll 版本的迁移,请谨慎参考。
|
||||
{ .prompt-warning }
|
||||
|
||||
## 创建站点仓库
|
||||
|
||||
创建站点仓库时,根据您的需求有两种选择:
|
||||
|
||||
### 选项1. 使用起始模板(推荐)
|
||||
|
||||
这种方法简化了升级过程,隔离了不必要的文件,非常适合那些想专注于写作而不需要太多配置的用户。
|
||||
|
||||
1. 登录GitHub并导航到[**起始模板**][starter]。
|
||||
2. 点击<kbd>Use this template</kbd>按钮,然后选择<kbd>Create a new repository</kbd>。
|
||||
3. 将新仓库命名为`<username>.github.io`,其中`username`替换为您的小写GitHub用户名。
|
||||
|
||||
### 选项2. 复刻主题
|
||||
|
||||
这种方法便于修改功能或UI设计,但在升级时会遇到挑战。除非您熟悉Jekyll并计划对此主题进行大量修改,否则不要尝试这种方法。
|
||||
|
||||
1. 登录GitHub。
|
||||
2. [复刻主题仓库](https://github.com/cotes2020/jekyll-theme-chirpy/fork)。
|
||||
3. 将新仓库命名为`<username>.github.io`,其中`username`替换为您的小写GitHub用户名。
|
||||
|
||||
## 设置环境
|
||||
|
||||
创建仓库后,是时候设置您的开发环境了。主要有两种方法:
|
||||
|
||||
### 使用开发容器(Windows系统推荐)
|
||||
|
||||
开发容器使用Docker提供隔离环境,这可以防止与您的系统冲突,并确保所有依赖项都在容器内管理。
|
||||
|
||||
**步骤**:
|
||||
|
||||
1. 安装Docker:
|
||||
- 在Windows/macOS上,安装[Docker Desktop][docker-desktop]。
|
||||
- 在Linux上,安装[Docker Engine][docker-engine]。
|
||||
2. 安装[VS Code][vscode]和[Dev Containers扩展][dev-containers]。
|
||||
3. 克隆您的仓库:
|
||||
- 对于Docker Desktop:启动VS Code并[在容器卷中克隆您的仓库][dc-clone-in-vol]。
|
||||
- 对于Docker Engine:在本地克隆您的仓库,然后通过VS Code[在容器中打开它][dc-open-in-container]。
|
||||
4. 等待开发容器设置完成。
|
||||
|
||||
### 本地设置(类Unix操作系统推荐)
|
||||
|
||||
对于类Unix系统,您可以本地设置环境以获得最佳性能,不过您也可以使用开发容器作为替代方案。
|
||||
|
||||
**步骤**:
|
||||
|
||||
1. 按照[Jekyll安装指南](https://jekyllrb.com/docs/installation/)安装Jekyll,并确保已安装[Git](https://git-scm.com/)。
|
||||
2. 将您的仓库克隆到本地机器。
|
||||
3. 如果您复刻了主题,安装[Node.js][nodejs]并在根目录中运行`bash tools/init.sh`来初始化仓库。
|
||||
4. 在仓库根目录中运行命令`bundle`来安装依赖项。
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 启动Jekyll服务器
|
||||
|
||||
要在本地运行站点,请使用以下命令:
|
||||
|
||||
```terminal
|
||||
$ bundle exec jekyll serve
|
||||
```
|
||||
|
||||
> 如果您使用的是开发容器,必须在**VS Code**终端中运行该命令。
|
||||
{: .prompt-info }
|
||||
|
||||
几秒钟后,本地服务器将在<http://127.0.0.1:4000>上可用。
|
||||
|
||||
### 配置
|
||||
|
||||
根据需要更新`_config.yml`{: .filepath}中的变量。一些典型选项包括:
|
||||
|
||||
- `url`
|
||||
- `avatar`
|
||||
- `timezone`
|
||||
- `lang`
|
||||
|
||||
### 社交联系选项
|
||||
|
||||
社交联系选项显示在侧边栏底部。您可以在`_data/contact.yml`{: .filepath}文件中启用或禁用特定联系方式。
|
||||
|
||||
### 自定义样式表
|
||||
|
||||
要自定义样式表,请将主题的`assets/css/jekyll-theme-chirpy.scss`{: .filepath}文件复制到Jekyll站点的相同路径中,并在文件末尾添加您的自定义样式。
|
||||
|
||||
### 自定义静态资源
|
||||
|
||||
静态资源配置在版本`5.1.0`中引入。静态资源的CDN在`_data/origin/cors.yml`{: .filepath}中定义。您可以根据您的网站发布地区的网络状况替换其中一些。
|
||||
|
||||
如果您更喜欢自托管静态资源,请参考[_chirpy-static-assets_](https://github.com/cotes2020/chirpy-static-assets#readme)仓库。
|
||||
|
||||
## 部署
|
||||
|
||||
部署前,检查`_config.yml`{: .filepath}文件并确保正确配置了`url`。如果您更喜欢[**项目站点**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites)且不使用自定义域名,或者您想通过GitHub Pages以外的Web服务器上的基本URL访问您的网站,请记得将`baseurl`设置为项目名称,以斜杠开头,例如`/project-name`。
|
||||
|
||||
现在您可以选择以下方法之一来部署您的Jekyll站点。
|
||||
|
||||
### 使用Github Actions部署
|
||||
|
||||
准备以下内容:
|
||||
|
||||
- 如果您使用的是GitHub免费计划,请保持站点仓库公开。
|
||||
- 如果您已将`Gemfile.lock`{: .filepath}提交到仓库,并且您的本地机器不是运行Linux,请更新锁定文件的平台列表:
|
||||
|
||||
```console
|
||||
$ bundle lock --add-platform x86_64-linux
|
||||
```
|
||||
|
||||
接下来,配置_Pages_服务:
|
||||
|
||||
1. 在GitHub上进入您的仓库。选择_Settings_标签,然后点击左侧导航栏中的_Pages_。在**Source**部分(_Build and deployment_下),从下拉菜单中选择[**GitHub Actions**][pages-workflow-src]。
|
||||
|
||||

|
||||
{ .light .border .normal width="375" height="140" }
|
||||
|
||||

|
||||
{ .dark .normal width="375" height="140" }
|
||||
|
||||
2. 将任何提交推送到GitHub以触发_Actions_工作流。在仓库的_Actions_标签中,您应该看到正在运行的_Build and Deploy_工作流。一旦构建完成并成功,站点将自动部署。
|
||||
|
||||
现在您可以访问GitHub提供的URL来访问您的站点。
|
||||
|
||||
### 手动构建和部署
|
||||
|
||||
对于自托管服务器,您需要在本地机器上构建站点,然后将站点文件上传到服务器。
|
||||
|
||||
导航到源项目的根目录,并使用以下命令构建您的站点:
|
||||
|
||||
```console
|
||||
$ JEKYLL_ENV=production bundle exec jekyll b
|
||||
```
|
||||
|
||||
除非您指定了输出路径,否则生成的站点文件将放置在项目根目录的`_site`{: .filepath}文件夹中。将这些文件上传到您的目标服务器。
|
||||
|
||||
[nodejs]: https://nodejs.org/
|
||||
[starter]: https://github.com/cotes2020/chirpy-starter
|
||||
[pages-workflow-src]: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow
|
||||
[docker-desktop]: https://www.docker.com/products/docker-desktop/
|
||||
[docker-engine]: https://docs.docker.com/engine/install/
|
||||
[vscode]: https://code.visualstudio.com/
|
||||
[dev-containers]: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
|
||||
[dc-clone-in-vol]: https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-a-git-repository-or-github-pr-in-an-isolated-container-volume
|
||||
[dc-open-in-container]: https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-an-existing-folder-in-a-container
|
BIN
content/post/2019-08-09-getting-started/pages-source-dark.png
Normal file
BIN
content/post/2019-08-09-getting-started/pages-source-dark.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.6 KiB |
BIN
content/post/2019-08-09-getting-started/pages-source-light.png
Normal file
BIN
content/post/2019-08-09-getting-started/pages-source-light.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.9 KiB |
42
content/post/2019-08-11-customize-the-favicon/index.en.md
Normal file
42
content/post/2019-08-11-customize-the-favicon/index.en.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Customize the Favicon
|
||||
date: 2019-08-11 00:34:00 +0800
|
||||
description: >-
|
||||
Get started with Chirpy basics in this comprehensive overview.
|
||||
You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.
|
||||
categories:
|
||||
- Blogging
|
||||
- Tutorial
|
||||
tags:
|
||||
- favicon
|
||||
---
|
||||
|
||||
The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory {{< filepath src="assets/img/favicons/" >}}. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.
|
||||
|
||||
## Generate the favicon
|
||||
|
||||
Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool [**Real Favicon Generator**](https://realfavicongenerator.net/) and click the button <kbd>Select your Favicon image</kbd> to upload your image file.
|
||||
|
||||
In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button <kbd>Generate your Favicons and HTML code</kbd> to generate the favicon.
|
||||
|
||||
## Download & Replace
|
||||
|
||||
Download the generated package, unzip and delete the following two from the extracted files:
|
||||
|
||||
- {{< filepath src="browserconfig.xml" >}}
|
||||
- {{< filepath src="site.webmanifest" >}}
|
||||
|
||||
And then copy the remaining image files ({{< filepath src=".PNG" >}} and {{< filepath src=".ICO" >}}) to cover the original files in the directory {{< filepath src="assets/img/favicons/" >}} of your Hugo site. If your Hugo site doesn't have this directory yet, just create one.
|
||||
|
||||
The following table will help you understand the changes to the favicon files:
|
||||
|
||||
| File(s) | From Online Tool | From Chirpy |
|
||||
|---------------------|:---------------------------------:|:-----------:|
|
||||
| `*.PNG` | ✓ | ✗ |
|
||||
| `*.ICO` | ✓ | ✗ |
|
||||
|
||||
<!-- markdownlint-disable-next-line -->
|
||||
> ✓ means keep, ✗ means delete.
|
||||
{ .prompt-info }
|
||||
|
||||
The next time you build the site, the favicon will be replaced with a customized edition.
|
42
content/post/2019-08-11-customize-the-favicon/index.zh-CN.md
Normal file
42
content/post/2019-08-11-customize-the-favicon/index.zh-CN.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: 自定义网站图标
|
||||
date: 2019-08-11 00:34:00 +0800
|
||||
description: >-
|
||||
通过这个全面概述开始学习 Chirpy 的基础知识。
|
||||
您将学习如何安装、配置和使用您的第一个基于 Chirpy 的网站,以及如何将其部署到网络服务器。
|
||||
categories:
|
||||
- 博客
|
||||
- 教程
|
||||
tags:
|
||||
- 网站图标
|
||||
---
|
||||
|
||||
[**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) 的[网站图标](https://www.favicon-generator.org/about/)放置在 {{< filepath src="assets/img/favicons/" >}} 目录中。您可能想用自己的图标替换它们。以下部分将指导您创建和替换默认网站图标。
|
||||
|
||||
## 生成网站图标
|
||||
|
||||
准备一张尺寸为 512x512 或更大的正方形图像(PNG、JPG 或 SVG),然后前往在线工具 [**Real Favicon Generator**](https://realfavicongenerator.net/),点击 <kbd>Select your Favicon image</kbd> 按钮上传您的图像文件。
|
||||
|
||||
在下一步中,网页将显示所有使用场景。您可以保留默认选项,滚动到页面底部,点击 <kbd>Generate your Favicons and HTML code</kbd> 按钮生成网站图标。
|
||||
|
||||
## 下载与替换
|
||||
|
||||
下载生成的包,解压并从提取的文件中删除以下两个文件:
|
||||
|
||||
- {{< filepath src="browserconfig.xml" >}}
|
||||
- {{< filepath src="site.webmanifest" >}}
|
||||
|
||||
然后将剩余的图像文件({{< filepath src=".PNG" >}} 和 {{< filepath src=".ICO" >}})复制到您的 Hugo 站点的 {{< filepath src="assets/img/favicons/" >}} 目录中,覆盖原始文件。如果您的 Hugo 站点还没有这个目录,只需创建一个。
|
||||
|
||||
下表将帮助您理解网站图标文件的变化:
|
||||
|
||||
| 文件 | 来自在线工具 | 来自 Chirpy |
|
||||
|---------------------|:---------------------------------:|:-----------:|
|
||||
| `*.PNG` | ✓ | ✗ |
|
||||
| `*.ICO` | ✓ | ✗ |
|
||||
|
||||
<!-- markdownlint-disable-next-line -->
|
||||
> ✓ 表示保留,✗ 表示删除。
|
||||
{ .prompt-info }
|
||||
|
||||
下次构建站点时,网站图标将被自定义版本替换。
|
7
content/tags/_index.en.md
Normal file
7
content/tags/_index.en.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
menu:
|
||||
main:
|
||||
name: Tags
|
||||
weight: 3
|
||||
pre: fa-tags
|
||||
---
|
7
content/tags/_index.zh-CN.md
Normal file
7
content/tags/_index.zh-CN.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
menu:
|
||||
main:
|
||||
name: 标签
|
||||
weight: 3
|
||||
pre: fa-tags
|
||||
---
|
3
data/authors/en.yaml
Normal file
3
data/authors/en.yaml
Normal file
@ -0,0 +1,3 @@
|
||||
yifan:
|
||||
name: Yifan
|
||||
url: https://github.com/geekifan
|
3
data/authors/zh-CN.yaml
Normal file
3
data/authors/zh-CN.yaml
Normal file
@ -0,0 +1,3 @@
|
||||
yifan:
|
||||
name: 一凡
|
||||
url: https://github.com/geekifan
|
10
go.mod
Normal file
10
go.mod
Normal file
@ -0,0 +1,10 @@
|
||||
module github.com/geekifan/hugo-theme-chirpy-starter
|
||||
|
||||
go 1.24.2
|
||||
|
||||
require (
|
||||
github.com/geekifan/hugo-theme-chirpy v0.0.0-20250511032544-3b12c922ac08 // indirect
|
||||
github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.20300.20400 // indirect
|
||||
github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000 // indirect
|
||||
github.com/twbs/bootstrap v5.3.5+incompatible // indirect
|
||||
)
|
8
go.sum
Normal file
8
go.sum
Normal file
@ -0,0 +1,8 @@
|
||||
github.com/geekifan/hugo-theme-chirpy v0.0.0-20250511032544-3b12c922ac08 h1:1sp2SyT3gHoWZ8RagYVPepslpfY+gXUEo40LTnTqAnE=
|
||||
github.com/geekifan/hugo-theme-chirpy v0.0.0-20250511032544-3b12c922ac08/go.mod h1:5MymPX4BS13v2WUQ71cN1/TJicU7hudpj4dZJHu1kLc=
|
||||
github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.20300.20400 h1:L6+F22i76xmeWWwrtijAhUbf3BiRLmpO5j34bgl1ggU=
|
||||
github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.20300.20400/go.mod h1:uekq1D4ebeXgduLj8VIZy8TgfTjrLdSl6nPtVczso78=
|
||||
github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000 h1:GZxx4Hc+yb0/t3/rau1j8XlAxLE4CyXns2fqQbyqWfs=
|
||||
github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000/go.mod h1:mFberT6ZtcchrsDtfvJM7aAH2bDKLdOnruUHl0hlapI=
|
||||
github.com/twbs/bootstrap v5.3.5+incompatible h1:6XrrFNMsiTTFcVTBf2886FO2XUNtwSE+QPv1os0uAA4=
|
||||
github.com/twbs/bootstrap v5.3.5+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
|
15
hugo.toml
Normal file
15
hugo.toml
Normal file
@ -0,0 +1,15 @@
|
||||
title = 'Chirpy'
|
||||
enableGitInfo = false
|
||||
|
||||
defaultContentLanguage = "en"
|
||||
defaultContentLanguageInSubdir = false
|
||||
|
||||
[pagination]
|
||||
pagerSize = 5
|
||||
|
||||
[outputs]
|
||||
home = ["HTML", "RSS", "JSON"]
|
||||
|
||||
[module]
|
||||
[[module.imports]]
|
||||
path = "github.com/geekifan/hugo-theme-chirpy"
|
Reference in New Issue
Block a user