使用旧的 Rust 2015
0.0.7 |
|
---|---|
0.0.6 |
|
0.0.3 |
|
0.0.2 |
|
#43 在 #tera-templates
24MB
421K SLoC
古腾堡
一个由 Rust 编写的有观点的静态网站生成器。
安装
您可以通过访问发布页面来获取最新版本。或者,如果您电脑上安装了 rust 工具链,您也可以通过 Cargo 安装它:cargo install gutenberg
。
用法
创建新网站
使用 gutenberg init <目录名>
。这将创建一个具有给定名称的文件夹和古腾堡网站的基结构。
处理网站
使用 gutenberg serve
启动一个服务器,该服务器将自动重新加载内容、模板或静态文件中的任何更改。
构建网站
使用 gutenberg build
在 public/
目录中生成网站。
古腾堡术语
文档中的一些词将被重复,让我们确保它们是清晰的。
- 页面:位于
content
目录中且名称不同于_index.md
的 markdown 文件 - 部分:位于
content
目录中且在同一文件夹中有_index.md
的页面组
配置
配置使用 TOML 语言。需要两个参数:title
和 base_url
。其他选项包括:
highlight_code
:是否在 markdown 文件中突出显示所有代码块。默认为 falsehighlight_theme
:用于代码突出显示的主题。默认为 "base16-ocean-dark"language_code
:网站使用的语言。默认为 "en"generate_rss
:是否生成 RSS,默认为 falsegenerate_tags_pages
:是否生成标签和单个标签页面(如果某些页面有标签的话)。默认为 truegenerate_categories_pages
:是否生成分类和单个分类页面(如果某些页面有分类的话)。默认为 true
如果您想添加一些自己的变量,您需要将它们放在[extra]
表中,该表位于config.toml
中,否则它们将被默默忽略。
模板
模板位于templates/
目录中,文件名需要以.html
结尾。仅支持Tera模板。
每种类型的页面都有自己的变量
// TODO: 详细说明变量的模式
- index.html:获取表示索引部分的
section
以及所有sections
- page.html:获取包含该页面数据的
page
- section.html:获取包含该页面及其子页面数据的
section
- tags.html:获取
tags
- tag.html:获取
tag
和pages
- categories.html:获取
categories
- category.html:获取
category
和pages
此外,所有页面都获得一个config
变量,表示config.toml
中的数据,current_url
表示当前页面的绝对URL,以及current_path
表示当前页面URL的路径,以/
开头。如果您想查看模板内容中所有存在的数据,只需在模板中放置{{ __tera_context }}
即可,它将打印出来。
静态文件
static
文件夹中的所有内容将原样复制到输出目录。
页面
页面必须以一个包含在+++
中的front-matter开头。以下是一个最小示例
+++
title = "My page"
description = "Some meta info"
+++
A simple page with fixed url
front-matter只包含可选变量
- title
- description
- date:一个YYYY-MM-DD或RFC339格式的日期
- slug:用于URL的slug
- url:这会覆盖slug,并使此页面可通过
{config.base_url}/{url}
访问 - tags:字符串数组
- category:只允许一个类别
- draft:是否为草稿
- template:如果您想更改渲染特定页面所使用的模板
- aliases:重定向到新URL:在您更改页面URL且不希望显示404时很有用
即使您的front-matter为空,您也需要放置+++
。您还可以,像在配置中一样,在一个[extra]
表中添加自己的变量。front-matter将在模板的page.meta
字段中可用。
默认情况下,页面的URL将遵循文件系统路径。例如,如果你有一个位于 content/posts/python3.md
的页面,它将在 {config.base_url}/posts/python3/
可用。你可以通过在Front Matter中设置 slug
变量来覆盖从文件名创建的slug。
通常,一个页面将包含资产,你可能希望将它们与Markdown文件放在同一位置。Gutenberg默认支持这种模式:你可以创建一个文件夹,放入一个名为 index.md
的文件以及任何与之一起的文件(不是Markdown文件)。这些资产将在构建时复制到同一文件夹中,因此你可以使用相对路径来使用它们。
只有当你将 <!-- more -->
放在内容中时,才会定义摘要。如果存在于页面中,摘要将从开始到该标签。
章节
章节代表一组页面,例如你的网站的 tutorials
章节示例。只有当在 content
目录中找到名为 _index.md
的文件时,Gutenberg才会创建章节。
此 _index.md
文件也需要包括Front Matter,但不会包含内容。
+++
title = "Tutorials"
+++
您还可以设置 template
变量来更改用于渲染该章节的模板。
章节还会自动获取其子章节,允许您创建一些复杂的页面布局和目录。
您可以使用Front Matter中的 sort_by
键定义章节页面的排序方式。选项包括 date
、order
和 none
(默认)。目前无法排序的页面将被静默删除:最终页面将被渲染,但它不会出现在章节模板中的 pages
变量中。
特殊案例是位于 content
目录根部的 _index.md
,它代表主页。它只用于控制主页的分页和排序。
您还可以分页章节,包括索引,通过在Front Matter中设置 paginate_by
字段为整数来实现。这代表分页器每个分页器的页面数。您需要通过 paginator
对象来访问页面。(待文档化)。
目录
每个页面/章节将根据标题生成一个目录。它通过 section.toc
和 page.toc
可访问。它是一个包含 permalink
、title
和 children
的标题列表。以下是如何使用该目录的示例。
<ul>
{% for h1 in page.toc %}
<li>
<a href="{{h1.permalink}}">{{ h1.title }}</a>
{% if h1.children %}
<ul>
{% for h2 in h1.children %}
<li>
<a href="{{h2.permalink}}">{{ h2.title }}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
</li>
{% endfor %}
</ul>
虽然在该示例中标题井然有序,但你也可以创建一个看起来像 h2、h2、h1、h3 的目录,而没有任何问题。
分类法:标签和分类
仅支持具有日期的页面进行单独的标签/分类页面。
代码高亮主题
可以通过在 config.toml
中设置 highlight_code = true
来开启代码高亮。
开启后,所有在反引号之间的文本都将被高亮显示,如下面的示例所示。
let site = Site::new();
如果没有指定语言名称,则默认为纯文本高亮。
Gutenberg 使用 Sublime Text 主题进行语法高亮。它内置以下主题:
- base16-ocean-dark
- base16-ocean-light
- gruvbox-dark
- gruvbox-light
- inspired-github
- kronuz
- material-dark
- material-light
- monokai
- solarized-dark
- solarized-light
内部链接
您可以在 Markdown 中添加内部链接,在渲染时将被完整 URL 替换。为此,请使用常规 Markdown 链接语法,以 ./
开头的链接,指向要链接的 .md
文件。文件的路径从 content
目录开始。
例如,要链接到位于 content/pages/about.md
的文件,链接方式将是 [我的链接](./pages/about.md)
。
锚点
为了能够添加深链接,标题将根据其内容自动获得一个 ID。您还可以在章节级别选择是否自动在旁边插入锚点链接。默认情况下是关闭的,但可以在 _index.md
文件中将 insert_anchor = "left"
或 insert_anchor = "right"
设置为开启。 left
将在标题文本之前插入锚点链接,而 right
将在其后插入。
默认模板非常基础,需要在您的项目中调整 CSS 才能看起来更合适。您可以通过在 templates
目录中创建一个 anchor-link.html
文件来轻松覆盖它。
短代码
Gutenberg 使用 Markdown 进行内容创建,但有时您想插入一些 HTML,例如 YouTube 视频。而不是复制/粘贴 HTML,Gutenberg 支持短代码,允许您使用 Tera 定义模板,并在 Markdown 中调用这些模板。
使用短代码
短代码有两种类型:简单短代码和包含内容的短代码。所有短代码都需要前面有一个空行,否则它们将被包含在段落中。
简单短代码的调用方式如下:
{{ youtube(id="my_youtube_id") }}
具有体内容的短代码的调用方式如下:
{% quote(author="Me", link="https://google.com") %}
My quote
{% end %}
短代码的名称取自定义它们的文件,例如名为 youtube 的短代码将尝试渲染位于 templates/shortcodes/youtube.html
的模板。
内置短代码
Gutenberg 随带一些内置短代码
- YouTube:嵌入 YouTube 播放器,用于给定的 YouTube
id
。还接受一个可选的autoplay
参数,如果需要,可以设置为true
- Vimeo:嵌入 Vimeo 播放器,用于给定的 Vimeo
id
- Streamable:嵌入 Streamable 播放器,用于给定的 Streamable
id
- Gist:嵌入来自
url
的 Github gist。如果只想显示其中一个文件,还可以接受一个可选的file
参数
定义短代码
所有短代码都需要在 templates/shortcodes
文件夹中,并且它们的文件名应以 .html
结尾。短代码模板是简单的 Tera 模板,其中所有参数都可以直接在模板中访问。
如果短码有正文,正文将通过 body
变量传递。
示例网站
添加语法高亮语言和主题
添加一个语法
语法高亮依赖于子模块,因此请确保首先加载它们
$ git submodule update --init
Gutenberg 只支持 .sublime-syntax
格式的语法。如果你的语法是 .tmLanguage
格式,请打开它,在 Sublime Text 中通过点击“工具”>“开发者”>“从...新建语法”将其转换为 sublime-syntax
,并将其放置在 sublime_syntaxes
的根目录下。
你还可以将子模块添加到所需语法的存储库中
$ cd sublime_syntaxes
$ git submodule add https://github.com/elm-community/Elm.tmLanguage.git
请注意,你也可以手动复制更新的语法定义文件,但这意味着 Gutenberg 无法自动更新它。
你可以通过运行以下命令来检查当前包的任何更新
$ git submodule update --remote --merge
最后,从存储库的根目录运行以下命令
$ cargo run --example generate_sublime synpack sublime_syntaxes sublime_syntaxes/newlines.packdump sublime_syntaxes/nonewlines.packdump
添加一个主题
一个包含许多主题的画廊,请访问 https://tmtheme-editor.herokuapp.com/#!/editor/theme/Agola%20Dark。可以轻松地将更多主题添加到 Gutenberg,只需在 sublime_themes
目录中添加所需的主题,并从存储库根目录运行以下命令
$ cargo run --example generate_sublime themepack sublime_themes sublime_themes/all.themedump
你应该会看到正在添加的主题列表。
依赖关系
~18–29MB
~476K SLoC