使用旧的 Rust 2015

0.0.7 2017年6月19日
0.0.6 2017年5月24日
0.0.3 2017年4月5日
0.0.2 2017年3月24日

#43#tera-templates

MIT 许可证

24MB
421K SLoC

JavaScript 349K SLoC // 0.1% comments TypeScript 53K SLoC // 0.3% comments Python 9K SLoC // 0.2% comments Rust 4K SLoC // 0.2% comments Objective-C++ 1.5K SLoC // 0.0% comments C++ 1.5K SLoC // 0.0% comments C# 566 SLoC // 0.7% comments Scala 484 SLoC // 0.6% comments OCaml 465 SLoC // 0.1% comments ASP 291 SLoC // 0.7% comments Objective-C 266 SLoC // 0.5% comments PHP 258 SLoC // 0.7% comments Julia 215 SLoC // 0.8% comments C 199 SLoC // 0.6% comments TCL 150 SLoC // 0.2% comments D 127 SLoC // 0.3% comments Ruby 114 SLoC // 0.7% comments Handlebars 94 SLoC // 0.1% comments Batch 87 SLoC // 0.8% comments Java 84 SLoC // 0.7% comments Go 66 SLoC // 0.8% comments Shell 60 SLoC // 0.1% comments R 50 SLoC // 0.7% comments Common Lisp 45 SLoC // 0.7% comments Ruby HTML 24 SLoC PowerShell 16 SLoC // 0.2% comments Haskell 16 SLoC // 0.8% comments SQL 13 SLoC // 0.5% comments Clojure 11 SLoC // 0.9% comments Pascal 9 SLoC // 0.6% comments

古腾堡

Build Status Build status Chat

一个由 Rust 编写的有观点的静态网站生成器。

安装

您可以通过访问发布页面来获取最新版本。或者,如果您电脑上安装了 rust 工具链,您也可以通过 Cargo 安装它:cargo install gutenberg

用法

创建新网站

使用 gutenberg init <目录名>。这将创建一个具有给定名称的文件夹和古腾堡网站的基结构。

处理网站

使用 gutenberg serve 启动一个服务器,该服务器将自动重新加载内容、模板或静态文件中的任何更改。

构建网站

使用 gutenberg buildpublic/ 目录中生成网站。

古腾堡术语

文档中的一些词将被重复,让我们确保它们是清晰的。

  • 页面:位于 content 目录中且名称不同于 _index.md 的 markdown 文件
  • 部分:位于 content 目录中且在同一文件夹中有 _index.md 的页面组

配置

配置使用 TOML 语言。需要两个参数:titlebase_url。其他选项包括:

  • highlight_code:是否在 markdown 文件中突出显示所有代码块。默认为 false
  • highlight_theme:用于代码突出显示的主题。默认为 "base16-ocean-dark"
  • language_code:网站使用的语言。默认为 "en"
  • generate_rss:是否生成 RSS,默认为 false
  • generate_tags_pages:是否生成标签和单个标签页面(如果某些页面有标签的话)。默认为 true
  • generate_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:获取tagpages
  • categories.html:获取categories
  • category.html:获取categorypages

此外,所有页面都获得一个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 键定义章节页面的排序方式。选项包括 dateordernone(默认)。目前无法排序的页面将被静默删除:最终页面将被渲染,但它不会出现在章节模板中的 pages 变量中。

特殊案例是位于 content 目录根部的 _index.md,它代表主页。它只用于控制主页的分页和排序。

您还可以分页章节,包括索引,通过在Front Matter中设置 paginate_by 字段为整数来实现。这代表分页器每个分页器的页面数。您需要通过 paginator 对象来访问页面。(待文档化)。

目录

每个页面/章节将根据标题生成一个目录。它通过 section.tocpage.toc 可访问。它是一个包含 permalinktitlechildren 的标题列表。以下是如何使用该目录的示例。

<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