使用旧的 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