如何在Jekyll中控制URL和链接
介绍
Jekyll 是一个静态站点生成器，它提供了内容管理系统 (CMS) 的一些好处，同时避免了此类数据库驱动站点引入的性能和安全问题。 它是“博客感知”的，具有处理按日期组织的内容的特殊功能，尽管它的用处不仅限于博客网站。 Jekyll 非常适合需要离线工作、喜欢使用轻量级编辑器而不是 Web 表单来维护内容以及希望使用版本控制来跟踪其网站更改的人。
在本教程中，我们将关注 Jekyll 如何处理 URL 和链接，因为更改 URL 会破坏其他人到我们页面的链接，以及我们自己网站内容中的链接。 URL 对于人们如何查找和使用网站至关重要，并且在首次发布网站之前值得考虑。
我们将了解 Jekyll 如何默认创建 URL，并展示如何更改单个文件或整个站点的模式。 然后我们将看看如何链接到我们内容中的页面。 最后，我们将准备站点进行测试。
先决条件
要学习本教程，您需要完成前面的指南：
完成这些后，您就可以开始了。
静态站点的文件结构
在本系列的 第 2 部分 中，我们使用 jekyll new 命令创建了脚手架，并专注于生成的站点在 Web 浏览器中的外观。 现在，让我们看一下 Jekyll 创建静态站点时创建的文件结构。
注意： 如果您跟随本系列的第 2 部分，您应该有额外的资产目录和联系页面。 如果您不这样做，或者您尝试添加更多页面，您的结构可能看起来有些不同。
_site 目录和它下面的所有内容（在下面突出显示）构成了静态站点。
第 2 部分之后 ~/www 的内容
.
├── 404.html
├── about.md
├── assets
│ └── postcard.jpg
├── _config.yml
├── contact.md
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│ └── 2017-09-04-welcome-to-jekyll.markdown
└── _site
├── 404.html
├── about
│ └── index.html
├── assets
│ ├── main.css
│ └── postcard.jpg
├── contact.html
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2017
└── 09
└── 04
└── welcome-to-jekyll.html
与数据库驱动的网站不同，静态网站的 URL 是磁盘上目录结构的文字表示。 Jekyll 将帖子的类别转换为目录并将日期分解为文件结构，这是许多博客常见的模式，因此该帖子的最终 URL 模式是 /category1/category2/YYYY/MM/DD/words-in-title.html，因此字面 URL 是 http://203.0.113.0:4000/jekyll/update/2017/09/04/welcome-to-jekyll.html。
脚手架不为这些目录提供动态索引页面，因此如果用户删除部分 URL 以尝试查找特定类别、年、月或日的所有帖子，则会发生两种情况之一。 如果 Web 服务器允许自动目录索引，他们将看到文件和目录信息：
在第二种情况下，如果生产站点的管理员禁用了服务器上的目录列表，用户将被拒绝访问：
基于类别和日期的结构是博客 URL 的常见模式，但您决定如何构建 URL 将取决于特定站点的需求。
如果你想改变默认值，Jekyll 让构建 URL 变得相当简单。 在首次发布网站之前考虑一下这一点很有用，因为 URL 模式的更改会影响人们使用搜索引擎找到内容的效率，并影响其他人对网站的链接。
了解如何控制 URL
Jekyll 创建 URL 的系统既灵活又强大。 它们可能会受到您命名和存储源文件的位置和方式的影响，也可能会受到特定值或更通用模式的动态覆盖。
页面默认值
当我们在站点的根目录中创建一个页面时，就像我们为联系页面所做的那样，文件名 contact.md 被转换为 contact.html，生成的 URL 就在文档根目录之外，太：http://203.0.113.0:4000/contact.html。 如果我们将它放在一个或多个子目录中，这些子目录也将成为 URL 的一部分。 例如，如果我们将页面 contact.md 放在名为 main 的目录中，则 URL 将变为 http://203.0.113.0:4000/main/contact.html。
发布默认值
帖子的工作方式与页面不同。 首先，它们被允许有类别，这些类别成为静态站点上的目录以及 URL 的一部分。 默认的帖子模式是其 Front Matter 的串联：
title: "Welcome to Jekyll!" date: 2017-09-04 03:36:31 +0000 categories: jekyll update
在 _site 目录中，子目录将是 jekyll/update/2017/09/04/welcome-to-jekyll.html，遵循模式 /:categories/:year/:month/:day/:title 并产生 URL http://203.0.113.0:4000/jekyll/update/2017/09/04/welcome-to-jekyll.html。
如果我们从 Front Matter 中删除一个类别，则目录结构将在下次生成站点时更改，并且不再是 URL 的一部分。
可以通过两种方式覆盖页面和帖子默认值。
Permalinks 在单个页面的 Front Matter 中定义一个 Permalink 将覆盖页面和帖子的默认值，允许我们在每个文件的基础上准确指定我们希望链接的内容。 这是在“关于”页面的默认内容中设置的，其中永久链接值 /about/ 导致 URL http://203.0.113.0:4000/about/ 反过来作为 about/index.html 存在于磁盘上
Permalink Patterns Jekyll 允许您重新定义 _config.yml 中的整个默认模式这将影响页面和帖子，但有一个重要区别：帖子可以访问类别以及来自前端的日期和时间元素重要，而页面不重要。 页面 URL 将遵循该模式，优雅地省略任何特定于帖子的元素。
要查看永久链接模式覆盖的实际效果，我们将创建一个保留帖子类别、省略日期元素并以帖子或页面标题结尾的模式：
nano ~/www/_config.yml
将以下值添加到文件底部：
~/www/_config.yml
. . . permalink: /:categories/:title/
要查看编辑配置文件的更改，我们需要使用 CTRL-C 停止 Web 服务器，然后重新启动它：
jekyll serve --host=203.0.113.0
在磁盘上，文件结构发生了变化：
├── about.md
├── assets
│ └── postcard.jpg
├── _config.yml
├── contact.md
├── css
│ └── main.scss
├── feed.xml
├── Gemfile
├── Gemfile.lock
├── index.html
├── _posts
│ ├── 2017-09-04-welcome-to-jekyll.markdown
│ └── 2017-09-04-link-test.md
└── _site
├── about
│ └── index.html
├── assets
│ └── postcard.jpg
├── contact # originally `contact.html`
│ └── index.html
├── css
│ └── main.css
├── feed.xml
├── Gemfile
├── Gemfile.lock
└── index.html
└── jekyll
└── update
└── welcome-to-jekyll
└── index.html
文件结构的这些变化转化为 URL 的变化。 About 页面仍然位于 /about/，因为它的永久链接从一开始就设置在单个文件上。 联系页面已从 /contact.html 更改为 /contact/，链接测试帖子现在位于 /jekyll/update/welcome-to-jekyll/，因为站点范围内更改了永久链接模式。 您可以在 Jekyll Permalinks 文档中了解有关可用于构建 URL 的令牌的更多信息。
建立强大的帖子链接
既然我们知道如何控制页面所在的地址，那么在链接到这些地址时需要考虑的事情很少。
如果我们在页面正文中为一个完全静态的站点创建链接，我们将使用我们希望以几种格式之一链接到的页面的 URL。
- 绝对链接：
[Link Text]([http://203.0.113.0:4000/post-name)This is the right format for an off-site link, but inappropriate for our site since keeping the port number on the base URL would break our links in production and omitting it would break them on our development site. - 根相对链接：
[Link Text(/[post-name)Root-relative links only work for local links, and they follow the directory structure on the server starting from the web root because of the initial slash,/. - 相对链接：
[Link Text](post-name)The relative link is also for local links and starts following the path from the same directory as the page that contains the link.
两个相对链接都有类似的问题。 如果我们更改链接格式，我们需要在我们的内容中找到所有指向旧 URL 的链接并更新它们。 Jekyll 的 Liquid 模板提供了一种更灵活的链接到帖子的方法。 您可以使用带有文件名的 post_url 变量来代替使用文字链接，而不是像这样链接：
[Link Text](/jekyll/update/2016/09/08/welcome-to-jekyll.html)
我们会这样链接：
[Link Text]({% post_url 2010-09-08-welcome-to-jekyll %})
我们只需要包含文件名，不需要包含_posts目录或文件扩展名。 以这种方式创建的帖子链接将继续适用于您配置的任何永久链接设置。
注意： 目前，此动态链接功能可用于帖子，但不适用于页面，尽管页面计划正在制定中。
创建一个新帖子
我们将创建一个新帖子来应用我们所学到的关于制作链接的知识。 在编辑器中打开一个新文件，根据需要在文件名中设置日期。：
nano ~/www/_posts/2017-09-04-link-test.md
我们将像示例帖子一样设置 Front Matter，确保此处的日期与上一步中的文件名匹配。 请务必替换 您的 站点的 IP 地址或域名以及链接测试文件名称中的日期。
---
layout: post
date: 2017-09-04 07:00
title: Link Test
---
Welcome to my Jekyll Blog. I’m exploring how Jekyll handles links:
* [An absolute link](http://203.0.113.0:4000/about/)
* [A root relative link](/jekyll/update/welcome-to-jekyll/)
* [A Jekyll post_url link]({% post_url 2017-09-04-link-test %})
保存并退出。 当您重新访问主页时，新帖子应该会自动出现：
按照新帖子的主页链接，尝试每一个。 这三个都应该在我们的开发网站上工作：
绝对链接可以在我们的开发站点上使用，但是当我们部署到具有不同 URL 或没有端口号的站点时，它会中断。 只要永久链接方案保持不变，根相对链接将在新位置工作。 但是，如果进行了更改，则此链接将不会更新，并且会在任何站点上中断。 Jekyll post_url 链接将在解析站点时创建一个相对于根的链接。 它不仅可以在任何地方工作，而且 Jekyll 还将确保您链接到的帖子在解析站点时确实存在。 如果帖子没有，它将抛出“液体异常”，告诉您哪个文件包含错误链接以及哪个链接是问题所在。 例如，如果我们在第三个链接上错误地输入了文件名：
Liquid Exception: Could not find post
"broken-name-welcome-to-jekyll" in tag 'post_url'.
Make sure the post exists and the name is correct.
in /home/sammy/www/_posts/2017-09-04-link-test.md
ERROR: YOUR SITE COULD NOT BE BUILT:
------------------------------------
这是对网站内容的最后一次更改。 在下一步中，我们会将我们的站点复制到一个新位置，以便我们可以测试我们的工作。
在暂存站点上测试链接
Jekyll 的 部署方法 页面涵盖了根据您的需要将内容移动到其生产位置的多种方法。 这包括从 FTP 到复杂的自动化方法的任何东西。 现在，我们将在同一台机器上设置一个临时站点来说明链接的行为方式。
创建测试站点
我们将安装 Nginx，以便在将其部署到生产环境之前测试我们的链接是如何工作的：
sudo apt-get install nginx
安装完成后，我们将允许 HTTP 流量。
sudo ufw allow http
当我们访问开发机的地址时，应该会看到：
由于我们在同一个文件系统上，我们将使用基本的 rsync 命令移动站点。
要将 _site 的内容放入位于 /var/www/html 的 Nginx 文档根目录，我们将使用以下命令与 -a 递归同步并保留大部分内容和可选的 [ X198X] 提供详细输出：
sudo rsync -av ~/www/_site/ /var/www/html/
rsync 完成后，我们可以访问由 Nginx 提供服务的站点，无需端口号 http://203.0.113.0，并确保您在测试之前已退出开发 Web 服务器。
测试网站
部署到新位置后进行测试有助于我们确保读者获得我们想要的体验。 自动链接检查可以帮助使其成为流程中简单且常规的部分，但现在，我们将手动查看它。
新的博客文章自动出现在主页上，最新的在顶部。
当我们访问“链接测试”帖子时，我们会看到绝对链接和根相对链接都中断了，因为我们部署到的环境不使用端口 4000，而 Jekyll post_url 链接在这两个位置都有效。
我们已经完成了测试，因此我们将关闭 nginx 并关闭端口 80，因为我们不打算为该站点提供服务：
sudo systemctl stop nginx sudo ufw delete allow http
我们已经完成了对链接和 URL 的探索，所以我们也将使用 CTRL+C 退出开发服务器。
如果我们将精心挑选的、稳定的页面名称与使用 post_url 标记的帖子链接结合起来，那么在链接到我们自己的页面时就不必担心太多。 在部署到生产之前在新位置进行测试对于发现我们自己的错误仍然很有价值，对于查找到外部站点的断开链接更是如此。
- Conclusion 在本系列中，我们已经安装并配置了一个开发站点。 在本教程中，我们研究了如何控制我们网站上的页面和帖子的网址、覆盖默认模式、在我们的内容中创建指向帖子的可靠链接以及部署网站以进行测试。 您可能有兴趣了解如何自定义站点的 模板 和 主题 或如何 将站点部署到其生产位置 。
