概述

🔗Zola概览

Zola 是一个静态站点生成器 (SSG),类似于HugoPelicanJekyll(有关 SSG 的完整列表,请参阅Jamstack)。它用Rust编写并使用Tera模板引擎,类似于Jinja2Django 模板LiquidTwig

内容使用CommonMark编写,CommonMark 是一种定义明确、高度兼容的Markdown规范。Zola 使用pulldown-cmark来解析 markdown 文件。该库的目标是 100% 符合 CommonMark 规范。它添加了一些额外的功能,例如解析脚注、Github 风格的表格、Github 风格的任务列表和删除线。

SSG 使用动态模板将内容转换为静态 HTML 页面。因此,静态站点速度非常快,不需要数据库,因此易于托管。可以在此处找到静态网站和动态网站(例如 WordPress、Drupal 和 Django)之间的比较

要体验 Zola,请参阅下面的快速概述。

🔗与 Zola 的第一步

与某些 SSG 不同,Zola 不对您网站的结构做出任何假设。在本概述中,我们将制作一个简单的博客站点。

🔗初始化站点

本概述基于 Zola 0.9。

请参阅适用于您的平台的详细安装说明安装 Zola 后,让我们初始化我们的站点:

$ zola init myblog

你会被问到几个问题。

> What is the URL of your site? (https://example.com):
> Do you want to enable Sass compilation? [Y/n]:
> Do you want to enable syntax highlighting? [y/N]:
> Do you want to build a search index of the content? [y/N]:

对于我们的博客,让我们接受默认值(即,对每个问题按 Enter)。我们现在有一个myblog具有以下结构的目录:

├── config.toml
├── content
├── sass
├── static
├── templates
└── themes

作为参考,到本概述结束myblog时,我们的目录将具有以下结构:

├── config.toml
├── content/
│   └── blog/
│       ├── _index.md
│       ├── first.md
│       └── second.md
├── sass/
├── static/
├── templates/
│   ├── base.html
│   ├── blog-page.html
│   ├── blog.html
│   └── index.html
└── themes/

让我们启动 Zola 开发服务器:

$ zola serve
Building site...
-> Creating 0 pages (0 orphan), 0 sections, and processing 0 images

此命令必须在 Zola 基本目录中运行,该目录包含config.toml.

如果将 Web 浏览器指向http://127.0.0.1:1111,您应该会看到“欢迎使用 Zola”消息。

🔗主页

让我们做一个主页。为此,我们首先在目录base.html中创建一个文件templates当我们浏览此概述时,此步骤将更有意义。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>MyBlog</title>
</head>

<body>
  <section class="section">
    <div class="container">
      {% block content %} {% endblock %}
    </div>
  </section>
</body>

</html>

现在,让我们在目录index.html中创建一个文件templates

{% extends "base.html" %}

{% block content %}
<h1 class="title">
  This is my blog made with Zola.
</h1>
{% endblock content %}

这告诉 Zolaindex.html扩展我们的文件并用和标签base.html之间的文本替换名为“content”的块{% block content %}{% endblock content %}

🔗内容目录

现在让我们添加一些内容。我们将从blog在目录中创建一个子目录content_index.md在其中创建一个文件开始。这个文件告诉 Zola 这blog是一个section,这就是内容在 Zola 中的分类方式。

├── content
│   └── blog
│       └── _index.md

在文件中,我们将以TOML_index.md格式设置以下变量

+++
title = "List of blog posts"
sort_by = "date"
template = "blog.html"
page_template = "blog-page.html"
+++

请注意,虽然没有变量是强制性的,但打开和关闭+++是必需的。

  • sort_by = "date"告诉 Zola 使用日期来排序我们的部分页面(更多信息见下页)。
  • template = "blog.html"blog.html告诉 Zola在目录中使用templates作为模板列出本节中的 Markdown 文件。
  • page_template = "blog-page.html"blog-page.html告诉 Zola在目录中使用templates作为单个 Markdown 文件的模板。

有关部分变量的完整列表,请参阅部分文档。我们将在模板中使用title = "List of blog posts" (见下文)。

🔗模板

现在让我们创建更多的模板。在该templates目录中,创建一个blog.html包含以下内容的文件:

{% extends "base.html" %}

{% block content %}
<h1 class="title">
  {{ section.title }}
</h1>
<ul>
  <!-- If you are using pagination, section.pages will be empty. You need to use the paginator object -->
  {% for page in section.pages %}
  <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
  {% endfor %}
</ul>
{% endblock content %}

正如index.html, blog.htmlextends所做的那样base.html,但这次我们要列出博客文章。我们在上面的文件中设置的标题_index.md可以作为{{ section.title }}. 在标题下方的列表中,我们循环遍历我们部分(目录)中的所有页面,并分别使用blog输出页面标题和 URL 我们使用过滤器是因为永久链接不需要进行 HTML 转义(转义会导致呈现为)。{{ page.title }}{{ page.permalink | safe }}| safe/&#x2F;

如果您转到http://127.0.0.1:1111/blog/,您将看到 的部分页面blog该列表是空的,因为我们没有任何博客文章。让我们现在解决这个问题。

🔗降价内容

在该目录中,创建一个名为以下内​​容的blog文件:first.md

+++
title = "My first post"
date = 2019-11-27
+++

This is my first blog post.

标题日期将在模板中分别显示关闭下方的所有文本都将作为.blog-page.html{{ page.title }}{{ page.date }}+++{{ page.content }}

我们现在需要制作blog-page.html模板。templates目录中,使用以下内容创建此文件:

{% extends "base.html" %}

{% block content %}
<h1 class="title">
  {{ page.title }}
</h1>
<p class="subtitle"><strong>{{ page.date }}</strong></p>
{{ page.content | safe }}
{% endblock content %}

注意| safe过滤器{{ page.content }}

这看起来应该很熟悉。如果您现在返回我们的博客列表页面http://127.0.0.1:1111/blog/,您应该会看到我们孤独的帖子。让我们添加另一个。在目录中,让我们创建包含以下内容的content/blog文件:second.md

+++
title = "My second post"
date = 2019-11-28
+++

This is my second blog post.

回到http://127.0.0.1:1111/blog/,我们的第二篇文章出现在列表的顶部,因为它比第一篇文章更新,而且我们在文件中设置了sort_by = "date"_index.md作为最后一步,让我们修改我们的主页以链接到我们的博客文章。

index.html目录中的文件应该templates是:

{% extends "base.html" %}

{% block content %}
<h1 class="title">
  This is my blog made with Zola.
</h1>
<p>Click <a href="{{ get_url(path='@/blog/_index.md') }}">here</a> to see my posts.</p>
{% endblock content %}

这是对 Zola 的快速概述。您现在可以深入了解文档的其余部分。