From 88d3f27ec3d4854d8826242f00c0335f76e212f1 Mon Sep 17 00:00:00 2001 From: Xingyu Wang Date: Tue, 12 Oct 2021 14:54:19 +0800 Subject: [PATCH 1/2] PRF --- ...20210923 Build your website with Jekyll.md | 60 +++++++++---------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/translated/tech/20210923 Build your website with Jekyll.md b/translated/tech/20210923 Build your website with Jekyll.md index b46e6f1a6f..93fe195959 100644 --- a/translated/tech/20210923 Build your website with Jekyll.md +++ b/translated/tech/20210923 Build your website with Jekyll.md @@ -3,44 +3,45 @@ [#]: author: "Ayush Sharma https://opensource.com/users/ayushsharma" [#]: collector: "lujun9972" [#]: translator: "perfiffer" -[#]: reviewer: " " +[#]: reviewer: "wxy" [#]: publisher: " " [#]: url: " " 使用 Jekyll 构建你的网站 ====== -Jekyll 是一个开源的静态的网站生成器。你可以使用 Markdown 编写内容，使用 HTML/CSS 来构建和展示，Jekyll 会将其编译为静态的 HTML。 -![Person using a laptop][1] -静态网站生成器和 JAMStack 近年来开始流行。而且理由很充分。不需要复杂的后端，只需要静态的 HTML、CSS 和 Javascript。没有后端意味着更好的安全性、更低的运营开销和更便宜的托管。双赢！ +> Jekyll 是一个开源的静态网站生成器。你可以使用 Markdown 编写内容，使用 HTML/CSS 来构建和展示，Jekyll 会将其编译为静态的 HTML。 -在本文中，我将讨论 Jekyll。在撰写本文时，[我的个人网站使用 Jekyll][2]。Jekyll 使用 Ruby 引擎将用 Markdown 编写的文章转换成 HTML。[Sass][3] 可以将复杂的 CSS 规则应用到平面文件中。[Liquid][4] 允许对静态内容进行编程控制。 +![](https://img.linux.net.cn/data/attachment/album/202110/12/145349rblj459naj74j5nr.jpg) + +近年来开始流行静态网站生成器和 JAMStack，而且理由很充分，它们不需要复杂的后端，只需要静态的 HTML、CSS 和 Javascript。没有后端意味着更好的安全性、更低的运营开销和更便宜的托管。双赢！ + +在本文中，我将讨论 Jekyll。在撰写本文时，[我的个人网站使用的是 Jekyll][2]。Jekyll 使用 Ruby 引擎将用 Markdown 编写的文章转换成 HTML。[Sass][3] 可以将复杂的 CSS 规则应用到普通文本文件中。[Liquid][4] 允许对静态内容进行编程控制。 ### 安装 Jekyll -[Jekyll 网站][5] 提供 Linux、MacOS 和 Windows 安装说明。安装完成之后，[快速引导][6] 将会安装一个基础的 Hello-World 项目。 +[Jekyll 网站][5] 提供了 Linux、MacOS 和 Windows 安装说明。安装完成之后，[快速引导][6] 将会安装一个基础的 Hello-World 项目。 -现在在你的浏览器访问 `http://localhost:4000`。你可以看到一个默认的很棒的博客。 +现在在你的浏览器访问 `http://localhost:4000`，你可以看到你的默认“真棒”博客。 ![Default "awesome" blog][7] ### 目录结构 -站点默认包含以下的文件和文件夹： +这个默认站点包含以下的文件和文件夹： - * `_posts`: 你的博客条目。 - * `_site`: 最终编译的静态网站文件。 - * `about.markdown`: 关于页面内容。 - * `index.markdown`: 主页页面内容。 - * `404.html`: 404 页面内容。 + * `_posts`: 你的博客文章。 + * `_site`: 最终编译成的静态网站文件。 + * `about.markdown`: “关于页”的内容。 + * `index.markdown`: “主页”的内容。 + * `404.html`: “404 页”的内容。 * `_config.yml`: Jekyll 的全站配置文件。 - -### 创建新的博客条目 +### 创建新的博客帖子 创建帖子很简单。你需要做的就是在 `_post` 目录下使用正确的格式和扩展名创建一个新文件，这样就完成了。 -有效的文件名像 `2021-08-29-welcome-to-jekyll.markdown`这样。一个博客文件必须包含 Jekyll 所称的 YAML 前置。它是包含元数据的文件开头的一个特殊部分。如果你看到默认的帖子，你可以看到以下内容： +有效的文件名像 `2021-08-29-welcome-to-jekyll.markdown` 这样。一个博客文件必须包含 Jekyll 所谓的 YAML 卷首块Front Matter。它是文件开头的一个包含元数据的特殊部分。如果你查看默认的帖子，你可以看到以下内容： ``` --- @@ -51,7 +52,7 @@ categories: jekyll update --- ``` -Jekyll 使用上面的元数据，你可以自定义 `key: value` 键值对。如果你需要一些灵感，[请查看我的网站前置内容][9]。除了前面的问题，你还可以[使用内置的 Jekyll 变量][10] 来自定义你的网站。 +Jekyll 会使用上面的元数据，你也可以自定义 `key: value` 键值对。如果你需要一些提示，[请查看我的网站的卷首][9]。除了前面的问题，你还可以 [使用内置的 Jekyll 变量][10] 来自定义你的网站。 让我们创建一个新的帖子。在 `_posts` 文件夹下创建 `2021-08-29-ayushsharma.markdown`。内容如下： @@ -73,11 +74,11 @@ This is a [link]() This is my category: ``` -如果 `jekyll serve` 命令仍在运行，刷新页面，你将看到下面的新条目。 +如果 `jekyll serve` 命令仍在运行，刷新页面，你将看到下面的新帖子。 ![New blog entry][11] -恭喜你创建了你的第一篇文章！这个过程看起来很简单，但是你可以通过 Jekyll 做很多事情。使用简单的 Markdown，你可以归档博客、代码片段的高亮显示以及帖子的分类管理。 +恭喜你创建了你的第一篇帖子！这个过程看起来很简单，但是你可以通过 Jekyll 做很多事情。使用简单的 Markdown，你可以归档博客、高亮显示代码片段以及分类管理帖子。 ### 草稿 @@ -85,17 +86,17 @@ This is my category: ### 布局和包含 -请注意 `_post` 文件夹中两篇文章的前面内容，你将在前置内容中看到 `layout: post`。`_layout` 文件夹中包含所有布局。你不会在源代码中找到它们，因为 Jekyll 默认加载它们。Jekyll 使用的默认源代码在[这里][12]。如果你点击链接，你可以看到博客布局使用默认布局。默认布局包含 `{{ content }}` 注入内容的代码。布局文件还将包含 `include` 指令。它们从[包含文件夹][14]加载文件并允许使用不同的组件组成页面。 +请注意 `_post` 文件夹中两篇文章的卷首块，你将在其中看到 `layout: post`。`_layout` 文件夹中包含所有布局。你不会在源代码中找到它们，因为 Jekyll 默认加载它们。Jekyll 使用的默认源代码在 [这里][12]。如果你点击该链接，你可以看到 `post` 的布局使用了默认（`default`）布局。默认布局包含的代码 `{{ content }}` 是注入内容的地方。布局文件还将包含 `include` 指令。它们从 [`include` 文件夹][14] 加载文件，并使用不同的组件组成页面。 -总的来说，这就是布局的工作方式-你在最前面定义它们并将你的内容注入其中。Includes 提供页面的其它部分以组成整个页面。这是一种标准的网页设计技术--定义页眉、页脚、旁白和内容元素，然后在其中注入内容。这就是静态站点生成器的真正威力--完全以编程的方式控制将你的网站组装起来并最终编译成静态的 HTML。 +总的来说，这就是布局的工作方式：你在卷首块定义它们并将你的内容注入其中。而包含则提供了页面的其它部分以组成整个页面。这是一种标准的网页设计技术：定义页眉、页脚、旁白和内容元素，然后在其中注入内容。这就是静态站点生成器的真正威力，完全以编程的方式控制，将你的网站组装起来并最终编译成静态的 HTML。 ### 页面 -你网站上的所有内容并不都是文章或博客。你将需要关于页面、联系页面、项目页面或投资组合页面。这就是 Pages 的用武之地。它们的工作方式与 Posts 完全一样，这意味着它们是带有前置块的 Markdown 文件。但它们不会进入 `_posts` 目录。它们要么保留在你的项目根目录中，要么保留在它们自己的文件夹中。对于布局和包含，你可以使用与帖子相同的布局或创建新帖子。 Jekyll 非常灵活，你可以随心所欲地发挥你的创意！你的默认博客已经有 `index.markdown` 和 `about.markdown`。随意自定义它们。 +你网站上的所有内容并不都是文章或博客。你需要“关于”页面、“联系”页面、“项目”页面或“作品”页面。这就是“页面”的用武之地。它们的工作方式与“帖子”完全一样，这意味着它们是带有卷首块的 Markdown 文件。但它们不会放到 `_posts` 目录。它们要么保留在你的项目根目录中，要么保留在它们自己的文件夹中。对于布局和包含，你可以使用与帖子相同的布局或创建新帖子。 Jekyll 非常灵活，你可以随心所欲地发挥你的创意！你的默认博客已经有 `index.markdown` 和 `about.markdown`。请随意自定义它们。 ### 数据文件 -数据文件位于 `_data` 目录中，可以是 `.yml`，`.json`，`.csv` 格式文件。例如，一个 `_data/members.yml` 文件可能包含： +数据文件位于 `_data` 目录中，可以是 `.yml`、`.json`、`.csv` 等格式的文件。例如，一个 `_data/members.yml` 文件可能包含： ``` - name: A @@ -110,7 +111,6 @@ This is my category: Jekyll 在网站生成的时候读取这些内容。你可以通过 `site.data.members` 访问它们。 - ```