Jekyll 语句语法、功能的实现方法和结构介绍小手册

Jekyll 语句语法、功能的实现方法和结构介绍小手册
本文很长，建议使用侧边栏进行跳转。

本文虽然按照由浅入深的顺序介绍了 Jekyll 的语句语法和功能结构，但是主要用于快速查询一些 Jekyll 语句、功能的实现方法和结构介绍。

如果你想：
了解查看一些常用的 Jekyll 的相关命令和选项还请查看：《Jekyll 选项（options）和子命令（subcommand）小手册》。
了解 Jekyll 的原理和网站结构具体介绍还请查看：《Jekyll 的机制、转换步骤和结构介绍》。
如何使用 Jekyll 和 GitHub 搭建一个个人博客网站请移步：《如何使用Jekyll在GitHub Pages上搭建网站（个人博客）》

Jekyll 特色主要在语句和结构两个方面，由于结构多是基于语句的，所以接下来我们先了解一下 Jekyll 的语句特色，然后再细说结构部分的特色。

⚠️注意：本文使用一个基础 CSS https://stackedit.io/style.css，用来比较漂亮地展示博客。

前提

本文假设你已经设置好 GitHub Pages 的相关设置，并且已经克隆到本地了。

语句方面

 变量

在 Jekyll 中，变量需要写在最开头的---之间，如下：
```
---
my_number: 5
title: ZhongUncle 的博客主页
---
1
2
3
4
```
这部分也被称为前事项（Front Matter）。这部分是空的也没关系，可以写作下面这样：
```
---
---
1
2
```
Liquid

Jekyll 的特色是因为使用 Liquid。Liquid 是一个模板语言，主要有三个部分：
- 对象（Objects）
- 标签（Tags）
- 过滤器（Filters）
对象（Objects）

对象告诉 Liquid 将变量替代成页面上的内容再进行输出，格式如下：
```
{{ ... }}
1
```
举个例子，下面这行代码将会被替代成page.title的内容，然后输出显示：
```
{{ page.title }}
1
```
标签（Tags）

标签定义了模板的逻辑和控制流程。格式如下：
```
{% ... %}
1
```
举个例子，下面这段代码将会循环生成一个posts文件下所有博客的专栏，每条都可以点击跳转：
```
<ul>
 {% for post in site.posts %}
 <li>
 <h2><a href="{{ post.url }}">{{ post.title }}a>h2>
 {{ post.excerpt }}
 li>
 {% endfor %}
ul>
1
2
3
4
5
6
7
8
```
实际效果如下：

过滤器（Filters）

过滤器会改变内容的输出，由|分隔。格式如下：
```
{{ ... | ...}}
1
```
举个例子，下面这行代码将会大写首字母输出Hi，而不是原本的hi：
```
{{ "hi" | capitalize }}
1
```
实践

在了解了变量和 Liquid 之后，让我们来实践一下，加深理解。

将上一章中那个简单的index.html的内容修改成如下：
```
---
title: ZhongUncle 的博客主页
---
DOCTYPE html>
<html>
	<head>
	 <meta charset="utf-8">
	 <title>{{title}}title>
 	head>
 	<body>
 	<h1>{{Hello World! | downcase}}h1>
 	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
```
这时候使用jekyll build生成，或者使用jekyll server查看生成的index.html会发现如下：
```
DOCTYPE html>
<html>
	<head>
	 <meta charset="utf-8">
	 <title>ZhongUncle 的博客主页title>
 	head>
 	<body>
 	<h1>hello world!h1>
 	body>
html>
1
2
3
4
5
6
7
8
9
10
```
可以看到变量被替换了，过滤器也对内容进行修改，

结构/功能方面

接下来说一说结构方面的一些特色，例如如何创建布局模板、导航栏、博客列表等。Jekyll 在这方面的很多设计都是方便网站开发的（尤其是针对博客网站）。

如果你想了解的是项目的文件结构，那么还请移步查看我的另外一篇博客：《Jekyll 的机制、转换步骤和结构介绍》。

Layouts（布局模板）

Layouts 是 Jekyll 中有助于复用开发的设计，可以理解成一个模板。

基础使用

我们来假设一个场景，假设我们的网站有 1000 个网页，这一千个网页的格式都可以抽象为如下：
```
doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>......title>
 <link rel="stylesheet" type="text/css" href="assets/css/blogslist.css" />
 head>
 <body>
 ......
 body>
html>
1
2
3
4
5
6
7
8
9
10
11
```
可以发现这一千个网页都使用相同的设置和 CSS，唯一不同的地方就是</code>和<code><body></code>部分，如果不使用框架，那么就得每次都复制粘贴一下，也挺麻烦的。这时候要是使用 Layouts 就简单多了。 我们来试试看，也不用生成 1000 个网页，就用之前的<code>index.html</code>即可。 首先，在仓库的根目录下新建一个名为<code>_layouts</code>的文件夹，然后在其中新建一个名为<code>default.html</code>的文件。然后在其中输入以下内容： <pre data-index="11" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{{ page.title }}</title> </head> <body> {{ content }} </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> 然后，将<code>index.html</code>中的内容改成如下： <pre data-index="12" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">--- layout: default title: ZhongUncle 的博客主页 --- <h1>Hello World!</h1> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> 这时候使用<code>jekyll build</code>生成，Jekyll 将会使用之前<code>default.html</code>创建的“default”模板，然后将用<code>index.html</code>中的 HTML 代码替换模板中的<code>{{ content }}</code>部分，并且还会将对应的变量进行替换。 这时候检查生成的<code>index.html</code>即可验证，内容应该如下： <pre data-index="13" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZhongUncle 的博客主页</title> </head> <body> <h1>Hello World!</h1> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> 这样就可以大大减少开发中的重复工作。 <h5><a id="_187"></a>嵌套使用</h5> Layouts 也可以嵌套使用，这样就可以在一个 Layout 的基础上，对不同类型的网页使用不同的模板。 举个例子，如果在<code>_layouts</code>文件夹中新建一个名为<code>post.html</code>的文件，内容如下： <pre data-index="14" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">--- layout: default --- <h1>{{ page.title }}</h1> <p>{{ page.date | date_to_string }} - {{ page.author }}</p> {{ content }} <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> 这样使用<code>post</code>模板生成的网页，就会在前面<code>default</code>模板的基础上，在<code><body></code>开头加上两行关于文章标题、日期和作者的内容。 <h4><a name="t7"></a><a id="_203"></a>导航栏（眉头、脚注同理）</h4> 导航栏是很多网站的重点，除了方便用户跳转之外，还可以显示体现站点的结构。Jekyll 也提供了很方便的设计供我们使用。 导航栏使用的 CSS 内容如下： <pre data-index="15" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;">.header { background-color: #313132; height: 44px; display: flex; top: 0; left: 0; right: 0; margin: 0px; position: fixed; z-index: 999; } .headerItem { color: #f5f5f7; margin: 10px; text-decoration: none; } /* 不然导航栏会有白边 */ body { margin: 0px; } <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li></ul></pre> 首先在仓库的根目录新建一个名为<code>_data</code>的目录，然后在其中新建一个名为<code>navigation.yml</code>的配置文件。然后在其中输入： <pre data-index="16" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">- name: 主页 link: /index.html - name: 博客专栏 link: /blogs.html <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> 然后再新建一个名为<code>_includes</code>的目录，然后在其中新建一个名为<code>navigation.html</code>的 HTML 文件，来作为导航栏内容的模板。在其中输入以下内容来循环生成导航栏中的每个项目，从而生成一个导航栏： <pre data-index="17" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <div class="header"> {% for item in site.data.navigation %} <a href="{{ item.link }}" class="headerItem"> {{ item.name }} </a> {% endfor %} </div> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> 这样便可生成下面这样的内容（当然这里只是为了演示，没有说明布局文件和 CSS）： <img src="https://1000bd.com/contentImg/2024/04/22/7924ae5ae9529c8c.png" alt="请添加图片描述"> 如果我们想增加或修改导航栏的内容，只需要更改<code>_data/navigation.yml</code>的内容即可。 <h4><a name="t8"></a><a id="_256"></a>生成博客列表</h4> 作为博客网站，我们肯定希望有博客列表，这样方便用户查看。 首先，我们在根目录下新建一个名为<code>blogs.html</code>的 HTML 文件，用来展示生成的博客列表。下面这段代码将会按照“标题-大致内容”的顺序生成一个博客列表： <pre data-index="18" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">--- layout: default title: Blog --- <h1>Latest Posts</h1> <ul> {% for post in site.posts %} <li> <h2><a href="{{ post.url }}">{{ post.title }}</a></h2> {{ post.excerpt }} </li> {% endfor %} </ul> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li></ul></pre> 然后我们在根目录中新建一个名为<code>_posts</code>的目录用于存放所有的博客。博客的标题要用<code>时间-标题.后缀</code>的格式，例如<code>2018-08-20-bananas.md</code>。这样 Jekyll 会自动生成符合博客的时间的路径来存放博客，方便管理和展示。这里使用两个 Jekyll 官方的示例，我们需要在<code>posts</code>目录中创建下面两个文件。 <code>2018-08-21-apples.md</code>的内容如下： <pre data-index="19" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">--- layout: article --- An apple is a sweet, edible fruit produced by an apple tree. Apple trees are cultivated worldwide, and are the most widely grown species in the genus Malus. The tree originated in Central Asia, where its wild ancestor, Malus sieversii, is still found today. Apples have been grown for thousands of years in Asia and Europe, and were brought to North America by European colonists.s da fa f <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> <code>2018-08-20-bananas.md</code>的内容如下： <pre data-index="20" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">--- layout: article --- A banana is an edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa. In some countries, bananas used for cooking may be called "plantains", distinguishing them from dessert bananas. The fruit is variable in size, color, and firmness, but is usually elongated and curved, with soft flesh rich in starch covered with a rind, which may be green, yellow, red, purple, or brown when ripe. <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> 这时候生成站点，跳转到博客列表就可以就可以看到下面这样的内容： <img src="https://1000bd.com/contentImg/2024/04/22/8c8e15a2d34263bd.png" alt="请添加图片描述"> 这样每次写完更新一篇博客之后，Jekyll 会自动生成新的列表。 <h4><a name="t9"></a><a id="_312"></a>实现博客分栏</h4> 博客分栏分为两部分：分栏部分和每个分栏自己的列表界面。Jekyll 实现这些很简单。我们只需要先进行一些设置和内容的准备，再生产分栏界面即可。 <h5><a id="_315"></a>将分栏放在导航栏</h5> 将分栏放在导航栏是一个经典又好用的方案。所以我们只需要在导航栏中进行设置即可，也就是修改<code>navigation.yml</code>配置文件的内容，如下： <pre data-index="21" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">- name: 主页 link: /index.html - name: SwiftUI link: /swiftui.html - name: UNIX link: /unix.html <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> 这样就可以在除了主页之外，还有“SwiftUI”和“UNIX”两个专栏。 <h5><a id="_327"></a>博客准备</h5> 我们并不需要调整博客存放的位置，还放在原本的<code>posts</code>目录下即可，也可以在根目录下创建一个以下划线<code>_</code>开头的目录放在其中。不过需要在配置文件<code>_config.yml</code>中加上下面的代码： <pre data-index="22" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">collections: blogs: output: true <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> 这里的<code>blogs</code>就表示我们新建的目录<code>_blogs</code>。<code>output: true</code>表示需要对这个目录下的文件进行渲染。 因为我们还需要在主页按照发布顺序展示所有的博客，分开存放就是给自己找麻烦了。 但是需要对博客的前事项（front matter）进行修改，需要加上一个属性<code>category</code>来表示博客所属的专栏。例如下面这样表示 SwiftUI 相关： <pre data-index="23" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">--- layout: article category: SwiftUI --- <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/22/9cf8e6cd9602d03e.png" alt="请添加图片描述"> 作为演示，这里放了三个博客，两篇属于 UNIX，1 篇属于 SwiftUI，如下： <img src="https://1000bd.com/contentImg/2024/04/22/6e4b018ac68cb484.png" alt="请添加图片描述" > <h5><a id="_352"></a>生成分栏界面</h5> 接下来生成每个分栏界面。也就是在每个分栏下，只显示属于该分栏的博客。 在根目录创建<code>swiftui.html</code>文件，用于显示 SwiftUI 相关的博客。其内容如下： <pre data-index="24" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">--- layout: default title: SwiftUI --- <h1>{{ page.title }}</h1> <ul> {% for post in site.posts %} {% if post.category == "SwiftUI" %} <li> <h2><a href="{{ post.url }}">{{ post.title }}</a></h2> {{ post.excerpt }} </li> {% endif %} {% endfor %} </ul> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li></ul></pre> 可以看到在通过循环遍历<code>_posts</code>目录下的文件，并且判断博客的<code>category</code>属性，如果为<code>SwiftUI</code>，就渲染显示该文件。 然后继续在根目录下创建<code>unix.html</code>文件，用于显示 UNIX 相关的博客。内容如下（与上面相似）： <pre data-index="25" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">--- layout: default title: UNIX --- <h1>{{ page.title }}</h1> <ul> {% for post in site.unix %} {% if post.category == "UNIX" %} <li> <h2><a href="{{ post.url }}">{{ post.title }}</a></h2> {{ post.excerpt }} </li> {% endif %} {% endfor %} </ul> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li></ul></pre> 这时候就实现了分栏。运行一下<code>jekyll server</code>访问<code>http://127.0.0.1:4000</code>看看效果。如下： <img src="https://1000bd.com/contentImg/2024/04/22/7781fb34b95a5469.png" alt="请添加图片描述"> 希望能帮到有需要的人～ </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1474289">SMB over QUIC帮助实现文件服务器在公网安全共享</a> <a href="/Article/Index/982036">用Python生成Hilbert矩阵</a> <a href="/Article/Index/646737">leetcode 1423. Maximum Points You Can Obtain from Cards（从牌中能得到的最大点数和）</a> <a href="/Article/Index/1273039">借助VScode将 Docker 容器用作开发环境</a> <a href="/Article/Index/1223216">普冉PY32系列(四) PY32F002A/003/030的时钟设置</a> <a href="/Article/Index/764881">首次去中心化抢劫？近2亿美元损失：跨链桥Nomad 被攻击事件分析</a> <a href="/Article/Index/835261">一个普通码农这辈子能掌握这101道算法题就足够了</a> <a href="/Article/Index/930787">22、接口与抽象类、匿名类的介绍</a> <a href="/Article/Index/863480">注册【小程序】和注册页面</a> <a href="/Article/Index/887278">快速掌握数据分析思路</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/qq_33919450/article/details/127885825 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

前提

语句方面

变量

Liquid

对象（Objects）

标签（Tags）

过滤器（Filters）

实践

结构/功能方面

Layouts（布局模板）

基础使用