探索Jekyll的默认内容
介绍
Jekyll 是一个静态站点生成器，它提供了内容管理系统 (CMS) 的一些好处，同时避免了此类数据库驱动站点引入的性能和安全问题。 它是“博客感知”的，具有处理按日期组织的内容的特殊功能。 Jekyll 非常适合需要离线工作、喜欢使用轻量级编辑器而不是 Web 表单来维护内容以及希望使用版本控制来跟踪其网站更改的人。
在本系列的 第一部分 中，我们在 Ubuntu 16.04 服务器上安装了 Jekyll 及其依赖项，在我们的主目录中创建了一个开发站点，并确保防火墙允许访问该站点的流量。
在本教程中，我们将使用上一篇指南中自动生成的内容来探索 Jekyll 如何将源文件转换为静态内容，从而更轻松地创建和维护内容。
先决条件
要学习本教程，您需要完成前面的指南，如何在 Ubuntu 16.04 上设置 Jekyll 开发站点。 我们建立在我们在该教程中所做的工作的基础上，没有完成它，示例不会匹配。
完成第 1 部分后，您就可以开始了。
主页
让我们在主页上开始我们的探索，它由四个不同的源文件组合而成。 我们将逐个浏览这些文件，看看它们如何协同工作以生成静态主页。
如果您在完成第一个教程后退出了开发 Web 服务器，请立即重新启动它：
cd ~/www jekyll serve --host=203.0.113.0
然后，在网络浏览器中访问您的网站。 下面的主页截图已被修改，以突出显示配置和信息源。
配置设置：_config.yml
Jekyll 的大部分功能来自于在单个源文件 _config.yml 中设置将在静态网站的许多地方重复的信息的能力
通过运行 jekyll new 创建的默认 _config.yml 包含五个在主页上可见的设置：
title: 你很棒的标题 email: your-e-mail@domain.com description: 为你的新网站写一个很棒的描述这里… twitter_username: jekyll github_username: jekyllrb
此信息会自动包含在我们创建的所有其他页面和帖子中。 当我们需要更新其中一项设置时，我们可以在此文件中进行更改，它将随处更新。 为了观察这一点，我们将更改这些值。
在新终端中打开文件：
nano ~/www/_config.yml
我们将设置更改为以下值：
title: Sammy's Blog email: sammy@digitalocean.com description: > Welcome to my blog! github_username: DigitalOcean twitter_username: DigitalOcean
在开发过程中，我们将不理会 url 和 baseurl，并在需要部署我们的站点时进行任何调整。
要查看配置文件中所做的更改，我们需要使用 CTRL-C 停止 Web 服务器，然后重新启动它：
jekyll serve --host=203.0.113.0
注意： 确保 description 中的每一行至少缩进一个空格，否则你会遇到错误：“在扫描一个简单的键时找不到预期的 ':' 19 栏 1`。
完成后，保存并退出编辑器。 然后，在您的网络浏览器中重新加载该页面。 根据您的网络浏览器的本地缓存设置，您可能需要 Shfit+Reload 才能看到更改，这些更改应显示在下面突出显示的两个区域中：
在 _config.yml 文件中可以进行更多自定义，但现在我们将继续下一个源文件，并注意我们所做的更改如何在站点的其余部分可见。
页数：about.md
点击右上角的 About 链接。 我们在配置文件中所做的更改在此处可见，位于“关于”页面的主要内容上方和下方。
该中心内容和标题中的链接文本存储在包含四种内容的 about.md 文件中：
1. 杰基尔前线顶部的块about.md以三个破折号开头和结尾的文件是 Jekyll 的 Front Matter。 它必须是文件中的第一件事，当它出现时，它会向 Jekyll 发出信号，表明应该解析文件。 它通常在行之间包含有效的 YAML 以利用预定义的变量，但它也可以是空白的。 空白的 Front Matter 块有时对 CSS 文件或您不需要设置任何值但想要访问变量的其他地方很有用。
“关于”页面在其 Front Matter 中设置了三个值：
--- layout: page title: About permalink: /about/ ---
布局： 布局消除了页眉、页脚和菜单等重复内容，使网站更易于维护。 Jekyll 提供了三种布局：default、page 和 post。 每一个都有特殊的特点。 在这种情况下，标题值的菜单链接“关于”出现在标题导航中，因为布局设置为“页面”。
Title： 除了作为页眉导航中的链接文本外，还作为可见的页面标题，用Heading 1标签格式化，作为页面的<title>，这是出现在浏览器栏上的文本以及页面被添加书签时的文本。
Permalink: Jekyll 自动从这些确定页面 URL 的源文件生成目录和 HTML 文件。 永久链接允许您覆盖默认行为。 在这里，它导致页面 URL 为 http://203.0.113.0:4000/about/ 而不是 http://203.0.113.0 :4000/about.html。
2. 可见文本页面内容在 Front Matter 之后开始。 这里的文字出现在页面上，例如“This is the base Jekyll 3. 主题。”
3. 降价 Markdown 是主页面内容的一部分，控制着内容的格式。 它将被解析为静态站点的 HTML。 内容编写者通常比 HTML 更喜欢 Markdown，因为它被设计为更易于阅读和编写。
4. 液体模板指令 Jekyll 使用 Liquid 作为其模板引擎以包含动态元素。 Liquid 指令出现在大括号之间，例如 {% include icon-github.html username="jekyll" %}。
让我们对此页面进行一些更改，看看该网站是如何受到影响的。
更改标题
我们将做一个小改动，将页面称为“关于我”而不是“关于”：
nano ~/www/about.md
~/www/about.md
--- . . . title: "About me" . . . ---
完成后，保存并退出文件。
更改将出现在三个位置，并且菜单链接将在所有站点页面上更新：
添加新页面
接下来，我们将向站点添加一个“联系”页面，并使用一些降价来包含图像。
我们将首先创建一个 assets 目录来保存我们的图像：
mkdir ~/www/assets
然后我们将使用 wget 将图像传输到我们的机器。 -O 标志会将其定向到我们创建的目录。 该标志要求我们还指定文件名，因此我们将：
wget -O ~/www/assets/postcard.jpg https://assets.digitalocean.com/articles/jekyll-1604/postcard.jpg
一旦图像在本地就位，我们将创建新页面：
nano ~/www/contact.md
~/www/contact.md
--- layout: page title: "Send me a postcard!" --- DigitalOcean\\ Attn: Sammy Shark\\ 101 Avenue of the Americas\\ New York, NY 10013 
让我们仔细看看降价。 首先，每行末尾的双斜杠 \\ 强制返回而不增加额外的空格。 其次，用这个markdown![]()显示图片。 感叹号表示后面的链接是图像。 如果未加载图像或访问者正在使用屏幕阅读器，则括号包含要使用的替代文本。 括号包含指向图像文件的链接。 您可以在 kramdown 网站 上了解更多关于 Jekyll 的默认降价样式。
保存并退出文件，然后重新加载页面。 将出现新链接，并根据文件名按字母顺序排列。
有了新文件，我们文件结构的顶部现在看起来像这样：
├── about.md ├── assets │ └── postcard.jpg ├── _config.yml ├── contact.md
实际的网页页面如下所示：
单击站点标题以返回主页，您应该在其中找到标题导航中包含的新链接。
注意： 在联系页面上有一个交互式网络表单是很常见的。 Jekyll 不提供任何内置的表单处理 ，但您可以使用基于云的服务，例如 Disqus、Formspree 或 FormKeep，或托管您自己的。
帖子：_posts/YYYY-MM-DD-welcome-to-jekyll.markdown
点击“Welcome to Jekyll”链接查看提供的示例博客文章。
_posts 目录包含特殊命名的文件，格式为 YYYY-MM-DD-Words-in-Title。 如果您的帖子未以这种格式命名，则不会被解析。 如果文件名有一个将来设置的日期，则不会为静态站点解析页面。 使用未来日期 命名文件是否 允许将命名方案与 cron 或其他自动化策略结合使用，以在特定日期和时间之后发布帖子。 安装自定义 转换器 时，发布文件可以以 .markdown、.md、.html 或其他扩展名结尾。
帖子以 Front Matter 开头。 每个帖子文件都需要 Front Matter，因为它包含对网站创建至关重要的日期等值。
~/www/_posts/2016-08-31-welcome-to-jekyll.markdown
--- layout: post title: "Welcome to Jekyll!" date: 2016-08-31 17:35:19 +0000 categories: jekyll update ---
布局： 虽然布局可能完全不同，但帖子的布局与默认布局非常相似。 HTML <head> ... </head> 部分的页面内容不同，<div class="wrapper"> ... </div> 标签之间的内容不同，但其余部分相同。 页面本身唯一可见的区别是标题下方自动包含 Front Matter 的日期值。
标题： 标题在博客文章本身上显示为标题 1，在索引页面上显示为标题 2。
日期： 此处设置的日期将决定主页和帖子本身显示的日期。 正是这个日期也将决定帖子的 URL，我们稍后会更详细地探讨。
注意： Front Matter 中的日期与文件名的开始日期没有直接关系。 文件名必须以正确格式的日期开头才能被解析。 如果它以将来的日期命名，则在该日期之后的下一个站点构建过程之前不会对其进行解析。 同时Front Matter date决定了文件为解析后的目录结构，作为首页和帖子显示的值。
- Categories： 类别是特定于帖子的，用于按主题对内容进行分组。 默认情况下，它们在页面上不可见，但可以将它们添加到自定义模板中。
剩余文件
到目前为止，我们已经仔细查看了三个文件，即 _config.yml、about.md 和 _posts/YYYY-MM-DD-welcome-to-jekyll.markdown。 以下是对浏览器不太直接可见的文件的简要概述：
main.scss：Jekyll 使用了超棒的语法样式表 (Sass)，每次重建网站时它都会将其编译成常规的 CSS。 .sass 文件位于 css 目录中。
feed.xml：Jekyll 提供一个 RSS 提要，每次重建静态站点时也会构建，以允许站点聚合帖子并为用户提供订阅方式。
Gemfile 和 Gemfile.lock：Gemfile 列出了使用 bundle 命令安装的 Jekyll 插件。 安装它们时，会生成 Gemfile.lock 文件以跟踪已安装插件的特定版本。
在这四个文件中，只有 CSS 会影响内容的呈现。 如果你对 Jekyll 和 Sass 特别感兴趣，可以从 Jekyll 的 Sass 集成示例站点。
结论
在本教程中，我们探索了 Jekyll 在创建新站点时提供的样板内容，并进行了一些更改以演示源文件如何在网页上组合在一起。 通过在一个地方设置值，可以通过一次编辑来更新它们，而不必更改每个文件，从而使站点更易于维护。 它还允许帖子动态包含在主页上，因此您不必担心手动更新另一个页面以显示新帖子。
在 第 3 部分 中，我们将研究静态站点的文件结构，该结构如何默认反映在我们的页面和帖子的 URL 中，以及如何覆盖默认行为。
