Tags 过滤器
All of the standard Liquid tags are supported. Jekyll has a few built in tags to help you build your site. You can also create your own tags using plugins.
Includes
If you have page snippets that you use repeatedly across your site, an include is the perfect way to make this more maintainable.
Code snippet highlighting
Jekyll has built in support for syntax highlighting of over 100 languages thanks to Rouge. Rouge is the default highlighter in Jekyll 3 and above.
Using Pygments has been deprecated and is not supported in
Jekyll 4; the configuration setting highlighter: pygments
now automatically falls back to using Rouge which is written in Ruby
and 100% compatible with stylesheets for Pygments.
To render a code block with syntax highlighting, surround your code as follows:
{% highlight ruby %}
def foo
puts 'foo'
end
{% endhighlight %}
The argument to the highlight
tag (ruby
in the example above) is the
language identifier. To find the appropriate identifier to use for the language
you want to highlight, look for the “short name” on the Rouge
wiki.
Jekyll processes all Liquid filters in code blocks
If you are using a language that contains curly braces, you
will likely need to place {% raw %}
and
{% endraw %}
tags around your code.
Since Jekyll 4.0
, you can add render_with_liquid: false
in your front matter to disable Liquid entirely for a particular document.
Line numbers
There is a second argument to highlight
called linenos
that is optional.
Including the linenos
argument will force the highlighted code to include line
numbers. For instance, the following code block would include line numbers next
to each line:
{% highlight ruby linenos %}
def foo
puts 'foo'
end
{% endhighlight %}
Marking specific lines4.4.0
You can mark specific lines in a code snippet by using the optional
argument mark_lines
. This argument takes a space-separated list of
line numbers which must be wrapped in double quotes. For example, the
following code block will mark lines 1 and 2 but not line 3:
{% highlight ruby mark_lines="1 2" %}
def foo
puts 'foo'
end
{% endhighlight %}
A default class name of hll
will be applied to the marked lines.
Stylesheets for syntax highlighting
In order for the highlighting to show up, you’ll need to include a highlighting stylesheet. For Pygments or Rouge you can use a stylesheet for Pygments, you can find an example gallery here or from its repository.
Copy the CSS file (native.css
for example) into your css directory and import
the syntax highlighter styles into your main.css
:
@import "native.css";
Links
Since Jekyll 4.0
, you don’t need to prepend link
and post_url
tags with site.baseurl
.
Linking to pages
To link to a post, a page, collection item, or file, the link
tag will generate the correct permalink URL for the path you specify. For example, if you use the link
tag to link to mypage.html
, even if you change your permalink style to include the file extension or omit it, the URL formed by the link
tag will always be valid.
You must include the file’s original extension when using the link
tag. Here are some examples:
{% link _collection/name-of-document.md %}
{% link _posts/2016-07-26-name-of-post.md %}
{% link news/index.html %}
{% link /assets/files/doc.pdf %}
You can also use the link
tag to create a link in Markdown as follows:
[Link to a document]({% link _collection/name-of-document.md %})
[Link to a post]({% link _posts/2016-07-26-name-of-post.md %})
[Link to a page]({% link news/index.html %})
[Link to a file]({% link /assets/files/doc.pdf %})
The path to the post, page, or collection is defined as the path relative to the root directory (where your config file is) to the file, not the path from your existing page to the other page.
For example, suppose you’re creating a link in page_a.md
(stored in pages/folder1/folder2
) to page_b.md
(stored in pages/folder1
). Your path in the link would not be ../page_b.html
. Instead, it would be /pages/folder1/page_b.md
.
If you’re unsure of the path, add {{ page.path }}
to the page and it will display the path.
One major benefit of using the link
or post_url
tag is link validation. If the link doesn’t exist, Jekyll won’t build your site. This is a good thing, as it will alert you to a broken link so you can fix it (rather than allowing you to build and deploy a site with broken links).
Note you cannot add filters to link
tags. For example, you cannot append a string using Liquid filters, such as {% link mypage.html | append: "#section1" %}
. To link to sections on a page, you will need to use regular HTML or Markdown linking techniques.
The name of the file you want to link can be specified as a variable instead of an actual file name. For example, suppose you defined a variable in your page’s front matter like this:
---
title: My page
my_variable: footer_company_a.html
---
You could then reference that variable in your link:
{% link {{ page.my_variable }} %}
In this example, the link
tag would render a link to the file footer_company_a.html
.
Linking to posts
If you want to include a link to a post on your site, the post_url
tag will generate the correct permalink URL for the post you specify.
{% post_url 2010-07-21-name-of-post %}
If you organize your posts in subdirectories, you need to include subdirectory path to the post:
{% post_url /subdir/2010-07-21-name-of-post %}
There is no need to include the file extension when using the post_url
tag.
You can also use this tag to create a link to a post in Markdown as follows:
[Name of Link]({% post_url 2010-07-21-name-of-post %})