Jekyll使用教程笔记 三

时间  2019-11-16
标签 jekyll 使用 教程 笔记 繁體版
原文   原文链接

目录html

Front Matter

Front Matter是Jekyll开始变得很是酷的地方。任何包含YAML front matter块的文件都将由Jekyll做为特殊文件进行处理。Front Matter必须是文件中的第一个事物，而且必须采用在三条虚线之间设置的有效YAML的形式。这是一个基本的例子：web

---
layout: post
title: Blogging Like a Hacker
---
复制代码

在这些三条虚线之间，你能够设置预约义的变量（参见下面的参考），甚至能够建立本身的自定义变量。这些变量随后可供你使用Liquid标签进行访问，不管是在文件中仍是在任何布局中，或者包括所涉及的页面或帖子都依赖于这些变量。数据库

警告：UTF-8字符编码警告json

若是你使用UTF-8编码，请确保文件中不存在BOM标题字符，不然Jekyll会发生很是很是糟糕的状况。若是你在Windows上运行Jekyll，这尤为重要。浏览器

重要提示™：Front Matter变量是可选的ruby

若是你想在Front Matter中使用Liquid标签和变量，但不须要任何东西，就把它留空！三条虚线之间即便没有任何内容仍然会让Jekyll处理你的文件。（这对CSS和RSS提要等颇有用！）bash

预约义的全局变量

有许多预约义的全局变量，你能够在页面或文章的Front Matter中设置。markdown

变量 说明
layout 若是设置，则指定要使用的布局文件。使用不带文件扩展名的布局文件名。布局文件必须放置在_layouts目录中。
  • 使用null将产生一个不使用布局文件的文件。可是，若是该文件是文章/文档而且具备在Front Matter默认值中定义的布局，则这null将被覆盖重写。
  • 从版本3.5.0开始，不管Front Matter设置如何，对文章/文档中使用none将不会使用布局文件生成文件。 然而，在页面中不使用任何内容，都会致使Jekyll尝试使用名为“none”的布局。
permalink 若是你须要将处理后的博客文章网址设置为网站范围样式之外的内容（默认为/year/month/day/title.html），则能够设置此变量并将其用做最终网址。
published 若是你不想在网站生成时显示特定文章，请将这个设置为false。

重要提示™：展现标记为未发布的文章ide

要预览未发布的页面，只需使用--unpublished开关运行jekyll serve或jekyll build。Jekyll还有一个专门为博客文章量身打造的很是方便的草稿功能。布局

自定义变量

Front Matter中全部非预约义的变量都会合并到数据中，在转换期间发送到Liquid模板引擎中。例如，若是你设置了标题，则能够在布局中使用该标题来设置页面标题：

<!DOCTYPE HTML>
<html>
  <head>
    <title>{{ page.title }}</title>
  </head>
  <body>
    …
复制代码

文章的预约义变量

这些均可以在直接使用。

变量 说明
date 此处的日期会覆盖文章名称中的日期。这能够用来确保文章的正确排序。 日期以YYYY-MM-DD HH:MM:SS +/-TTTT格式指定;小时，分钟，秒和时区偏移量是可选的。
category
categories		 你能够指定文章所属的一个或多个类别，而不是将文章置于文件夹内。当网站生成后，该文章就会按照设置的这些类别分类。类别（categories）能够被指定为YAML列表或空格分隔的字符串。
tags 与类别相似，能够将一个或多个标签添加到帖子中。与类别同样，标签能够被指定为YAML列表或空格分隔的字符串。

重要提示™：不要重复本身

若是你不想重复写常用的Front Matter变量，只需定义它们的默认值，并在必要时（或根本不须要）覆盖它们。这适用于预约义和自定义变量。

写文章

Jekyll的一个最好的方面是它是“博客意识”。这到底意味着什么？好吧，简而言之，这意味着博客已经渗透到Jekyll的功能中。若是你撰写文章并在线发布，你能够简单地经过管理计算机上的文本文件夹来发布和维护博客。与配置和维护数据库以及基于Web的CMS系统的麻烦相比，这将是一个值得欢迎的改变！

文章文件夹

正如在目录结构页面上所解释的那样，_posts文件夹是你的博客文章存储的位置。 这些文件一般是Markdown或HTML，但也可使用安装了对应转换器的其余格式。全部文章都必须包含YAML Front Matter，它们将被从源格式转换为静态网站一部分的HTML页面。

建立文章文件

要建立新文章，你只需在_posts目录中建立一个文件便可。如何命名文件夹中的文件很是重要。Jekyll须要根据如下格式命名博客文章文件：

YEAR-MONTH-DAY-title.MARKUP
复制代码

YEAR是四位数字，MONTH和DAY都是两位数字，MARKUP是表示文件中使用的格式的文件扩展名。例如，下面是有效的文件名的例子：

2011-12-31-new-years-eve-is-awesome.md
2012-09-12-how-to-write-a-blog.md
复制代码

重要提示™：连接到其余文章

使用post_url标记连接到其余文章，就没必要担忧网站固定连接样式发生更改时网址会404。

内容格式

全部博客文章必须以YAML Front Matter开始。以后，这只是决定你喜欢哪一种格式的问题。Jekyll支持直接使用Markdown，而且还有其余格式的无数扩展，包括流行的Textile格式。这些格式都有本身的方式来标记文章中的不一样类型的内容，所以你应该熟悉这些格式并肯定哪种最适合你的需求。

注意：了解字符集

内容处理器能够修改某些字符，使其看起来更好。例如，Redcarpet中的smart扩展可将标准ASCII引号字符转换为Unicode字符。为了让浏览器正确显示这些字符，经过在布局的中包含来定义字符集元值。

引用图像和资源

在某些状况下，你可能但愿将图片，下载或其余数字资源与文字内容一块儿包含在内。虽然Markdown和Textile连接到这些资源的语法各不相同，但如何将这些文件存储在网站中是每一个人都将面临的问题。

在Jekyll中有不少方法能够包含数字资源。一种常见的解决方案是在项目目录的根目录中建立一个名子相似assets的文件夹，其中放置全部图像，文件或其余资源。而后，从任何文章内，它们能够连接到使用该网站的根做为资源引用的路径。一样，这将取决于你的网站（子）域和路径的配置方式，但如下是Markdown中关于如何使用文章中的absolute_url过滤器执行此操做的示例。

在文章中包含图片资源：

... which is shown in the screenshot below:
![My helpful screenshot]({{ "/assets/screenshot.jpg" | absolute_url }})
复制代码

链接到一个PDF供读者下载：

... you can [get the PDF]({{ "/assets/mydoc.pdf" | absolute_url }}) directly.
复制代码

一个典型的文章

Jekyll能够处理你可能与“文章”关联的想法的许多不一样迭代，但标准博客样式文章（包括标题，布局，发布日期和类别）可能以下所示：

---
layout: post
title:  "Welcome to Jekyll!"
date:   2015-11-17 16:16:01 -0600
categories: jekyll update
---

You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `bundle exec jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
复制代码

第一个---和第二个---之间的全部内容都是YAML Front Matter的一部分，第二个---以后的全部内容都将使用Markdown进行渲染并显示为“内容”。

显示文章的索引

在一个文件夹中有文章很正常，可是对于一个博客来讲是不够的，你还少一个文章列表。经过使用Liquid模板语言及其标签，在另外一个页面（或模板中）建立文章索引很容易。如下是如何建立博客文章连接列表的基本示例：

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>
复制代码

固然，你能够彻底控制你显示文章的方式（以及位置），以及如何组织你的网站。 若是你想了解更多信息，你应该阅读更多关于模板如何与Jekyll合做的内容。

请注意，post变量只存在于上面的for循环中。若是你想访问当前呈现的页面/文章的变量（包含for循环的文章/页面的变量），请改用page变量。

显示文章类别或标签

嘿，这很整洁，可是如何显示你的一些相互关联的文章？为此，你可使用Front Matter中定义的任何变量。在“一个典型的文章”部分中，你能够看到如何定义类别。只需将类别以yaml列表的形式添加到你的Front Matter中。

既然你的文章有一个或多个类别，你可让页面或模板显示你指定的类别中的文章。 如下是如何根据特定类别建立文章列表的基本示例。

首先，在_layouts目录中建立一个名为category.html的新文件——在该文件中至少放置如下内容：

---
layout: page
---

{% for post in site.categories[page.category] %}
    <a href="{{ post.url | absolute_url }}">
      {{ post.title }}
    </a>
{% endfor %}
复制代码

接下来，在Jekyll安装的根目录中，建立一个名为category的新文件夹，而后为要列出的每一个类别建立一个文件。例如，若是你有一个blog类别，则至少在新文件夹中建立一个名为blog.html的文件。

---
layout: category
title: Blog
category: blog
---
复制代码

在文章头部如上的状况下，列表页面能够经过{baseurl}/category/blog.html来访问。

尽管类别和标签很是类似，它们都用于对文章进行分组，但它们之间存在一些差别。类别和子类别会建立层次结构，默认状况下会反映在你网站的目录结构中。 具备如下头部的文章

---
layout: post
title: A Trip
category: [ blog, travel ]
---
复制代码

将能够经过{baseurl}/blog/travel/year/month/day/A-Trip.html访问。而另外一方面，一个有标签的文章：

---
layout: post
title: A Trip
tags: [ blog, travel ]
---
复制代码

将保存为{baseurl}/year/month/day/A-Trip.html。你能够按照上述与类别的相同方式建立{baseurl}/tag/blog.html和{baseurl}/tag/travel.html。

虽然此示例是使用标记和类别完成的，但你也能够轻松地将你的列表扩展为使用扩展建立的任何其余变量进行过滤。

文章摘录

每篇文章都会自动将第一个文本块从内容的开始处移至excerpt_separator的第一处，并将其设置在文章的数据散列中。以上面的文章索引为例。也许你想经过添加每篇文章的第一段来引入关于文章内容的一点提示：

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>
复制代码

由于Jekyll抓取了文章第一段，而且将抓取的内容放在了p标签中，因此你不须要在p标签中包含摘录。若是你不想将抓取的摘录内容放在p标签中，还可使用下面方式删除这些标签：

{{ post.excerpt | remove: '<p>' | remove: '</p>' }}
复制代码

若是你不喜欢自动抓取的文章摘录，能够经过向文章的YAML Front Matter中的excerpt赋值来显式的覆盖它。或者，你能够选择在文章的YAML Front Matter容中定义一个自定义的excerpt_separator：

---
excerpt_separator: <!--more-->
---

Excerpt
<!--more-->
Out-of-excerpt
复制代码

你也能够在你的_config.yml配置文件中全局设置excerpt_separator。

将excerpt_separator设置为""，表示彻底禁用摘录。

此外，与Liquid标签生成的任何输出同样，你能够经过传递| strip_html过滤器来删除输出中的全部html标签。若是你但愿在文章头部中输出文章摘要做为meta="description"标签，或者在其余任何有html标签而且内容不符合要求的地方，这将特别有用。

高亮代码语法

Jekyll还内置了对使用Pygments或Rouge代码片断的语法突出显示的支持，因此在任何文章中都包含代码片断很容易。只需使用专用Liquid标签，以下所示：

{% highlight ruby %}
def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end
{% endhighlight %}
复制代码

输出结果以下所示：

def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end
复制代码

重要提示™：显式行号

你能够经过在开头高亮标记的末尾添加单词linenos来使代码片断包含行号，例如：{% highlight ruby linenos %}。

这些基本知识应该足以让你开始写你的第一篇文章。当你准备好深刻了解其余可能的状况时，你可能会对自定义文章的永久连接或在本身的文章和你网站上的其余位置使用自定义变量感兴趣。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程