如何在 Jekyll 中控制 URL 和链接
介绍
Jekyll 是一个静态网站生成器,它提供了内容管理系统 (CMS) 的一些优点,同时避免了此类数据库驱动网站带来的性能和安全问题。它具有“博客感知”功能,具有处理按日期组织的内容的特殊功能,尽管它的用途不仅限于博客网站。Jekyll 非常适合需要离线工作、喜欢使用轻量级编辑器而不是 Web 表单来维护内容以及希望使用版本控制来跟踪其网站更改的人。
在本教程中,我们将重点介绍 Jekyll 如何处理 URL 和链接,因为更改 URL 会破坏其他人与我们页面的链接,以及我们自己网站内容中的链接。URL 对于人们如何查找和使用网站至关重要,在首次发布网站之前值得考虑。
我们将了解 Jekyll 默认如何创建 URL,并展示如何更改单个文件或整个网站的模式。然后,我们将了解如何链接到内容中的页面。最后,我们将对网站进行测试。
先决条件
要学习本教程,您需要完成之前的指南:
完成这些之后,您就可以开始了。
静态站点的文件结构
在本系列的第 2 部分中,我们使用jekyll new
命令创建了脚手架,并重点介绍了生成的网站在 Web 浏览器中的显示效果。现在,让我们看一下 Jekyll 创建静态网站时创建的文件结构。
注意:如果您按照本系列第 2 部分的步骤操作,则应该有额外的资产目录和联系页面。如果没有,或者您尝试添加更多页面,则您的结构可能看起来会有所不同。
该_site
目录及其下的所有内容(如下所示)构成了静态站点。
.
├── 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 也直接来自文档根目录:。如果我们将其放在一个或多个子目录中,这些子目录也将成为 URL 的一部分。例如,如果我们将页面放在名为 的目录中,URL 将变为。http://203.0.113.0:4000/contact.html
contact.md
main
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 的一部分。
可以通过两种方式覆盖页面和帖子的默认值。
永久链接
在单个页面的 Front Matter 中定义永久链接将覆盖页面和帖子的默认设置,这样我们就可以精确指定每个文件的链接。这是在“关于”页面的默认内容中设置的,其中永久链接值/about/
导致 URL反过来在磁盘上存在为http://203.0.113.0:4000/about/
about/index.html
永久链接模式
Jekyll 允许您重新定义整个默认模式,_config.yml
这将影响页面和帖子,但有一个重要区别:帖子可以访问 Front Matter 中的类别和日期和时间元素,而页面则不能。页面 URL 将遵循该模式,优雅地省略任何特定于帖子的元素。
为了看到永久链接模式覆盖的实际效果,我们将创建一个模式,该模式保留帖子的类别,省略日期元素,并以帖子或页面标题结尾:
nano ~/www/_config.yml
将以下值添加到文件底部:
. . .
permalink: /:categories/:title/
要查看编辑配置文件带来的更改,我们需要使用 停止 Web 服务器CTRL-C
,然后重新启动它:
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/
因为其永久链接从一开始就设置在单个文件上。“联系”页面已从 更改为/contact.html
,/contact/
而“链接测试”帖子现在为 ,因为整个站点的永久链接模式都发生了变化。您可以在Jekyll Permalinks/jekyll/update/welcome-to-jekyll/
文档中了解有关可用于构建 URL 的令牌的更多信息。
为帖子创建可靠的链接
现在我们知道如何控制页面所在的地址,在链接到这些地址时需要考虑一些事项。
如果我们在完全静态网站的页面主体中创建链接,我们将使用其中一种格式来使用我们想要链接到的页面的 URL。
- 绝对链接:
[Link Text]([http://203.0.113.0:4000/post-name)
这是站外链接的正确格式,但不适合我们的网站,因为在基本 URL 上保留端口号会破坏生产中的链接,而省略端口号会破坏开发网站上的链接。 - 根目录相对链接:
[Link Text(/[post-name)
根目录相对链接仅适用于本地链接,并且由于初始斜杠 ,它们遵循从 Web 根目录开始的服务器上的目录结构/
。 - 相对链接:
[Link Text](post-name)
相对链接也适用于本地链接,并从与包含链接的页面相同的目录开始遵循路径。
这两种相对链接都有类似的问题。如果我们更改链接格式,我们需要在内容中找到指向旧 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”,告诉您哪个文件包含错误链接以及哪个链接存在问题。例如,如果我们在第三个链接上错误地输入了错误的文件名:
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
位于的 Nginx 文档根目录,/var/www/html
我们将使用以下命令-a
进行递归同步并保留大部分内容,并可选-v
提供详细输出:
sudo rsync -av ~/www/_site/ /var/www/html/
一旦 rsync 完成,我们就可以访问由 Nginx 提供服务的网站,无需端口号,并确保在测试之前已退出开发 Web 服务器。http://203.0.113.0
测试网站
在部署到新位置后进行测试有助于我们确保读者获得我们想要的体验。自动链接检查可以帮助将此过程变成一个简单且常规的部分,但现在,我们将手动检查。
新的博客文章会自动出现在主页上,最新的文章排在最上面。
当我们访问“链接测试”帖子时,我们会看到绝对链接和根相对链接都中断了,因为我们部署到的环境不使用端口 4000,而 Jekyll post_url 链接在两个位置都可以正常工作。
我们已经完成测试,因此我们将关闭nginx
端口 80,因为我们不打算为该网站提供服务:
sudo systemctl stop nginx
sudo ufw delete allow http
CTRL+C
我们已经完成了对链接和 URL 的探索,因此我们也将退出开发服务器。
如果我们将精心挑选的稳定页面名称与使用标签链接到帖子相结合post_url
,那么在链接到我们自己的页面时我们就不必太担心了。在部署到生产环境之前在新位置进行测试对于发现我们自己的错误仍然很有价值,对于查找外部网站的损坏链接更是如此。
##结论 在本系列中,我们安装并配置了一个开发站点。在本教程中,我们研究了如何控制我们站点上的页面和帖子的网址、覆盖默认模式、创建指向我们内容中帖子的可靠链接以及部署站点进行测试。您可能有兴趣了解如何自定义站点的模板和主题,或者如何将站点部署到其生产位置。