掌握 tabi 设置:全面指南(转译)

  • 更新于 9 7月 2024

这旨在成为关于 tabi 中每个设置的全面指南。如果您有任何问题,请随时在 GitHub 上开启一个问题发起一个讨论

目录

设置层级结构

tabi 有一个层级结构,允许您在不同的级别自定义您的站点。层级结构(从低到高优先级)如下:

  1. 全局设置:这些设置适用于您的整个站点。它们在 config.toml 中设置。
  2. 部分设置:这些设置适用于您网站的某个部分(例如 /blog/projects)。它们设置在该部分的 _index.md 文件的前面。
  3. 页面设置:这些设置适用于单个页面。它们在页面的前置部分进行设置。

在所有情况下,tabi 的设置都在 [extra] 部分进行设置。

对于遵循此层级结构的设置,页面上设置的值将覆盖部分的值,该值又覆盖全局值。简而言之:设置越具体,其优先级越高,或 page > section > config.toml


页面部分config.toml遵循层级结构需要 JavaScript

tabi 支持使用 Elasticlunr 进行可访问的、本地多语言搜索。要启用它,你需要:

  1. config.toml 中设置一个 default_language
  2. 设置 build_search_index = true
  3. 可选地, 配置 [search]

这是一个示例配置:

base_url = "https://example.com"
default_language = "en"
build_search_index = true

[search]
index_format = "elasticlunr_json" # Or the less efficient "elasticlunr_javascript".
include_title = true
include_description = true
include_path = true
include_content = true

注意:要支持中文/日文搜索,您需要使用自定义的 Zola 构建

考虑 Zola 0.17.X 用户的因素

Zola 0.17.X 不提供对 search.index_format 变量的访问(错误报告)。在使用 tabi 时,此变量默认为更高效的 JSON 索引。然而,由于在 0.18.0 中修复了另一个错误,多语言网站的 JSON 索引未能正确生成。

想在 0.18.0 版本之前的 Zola 中使用 JavaScript 索引的用户需要在两个地方设置 index_format 变量:

[search]
index_format = "elasticlunr_javascript"

[extra]
index_format = "elasticlunr_javascript"

这确保了 tabi 加载正确的文件。我们建议升级到 Zola 0.18.0 或更高版本以获得最佳功能。

实现细节

关于 tabi 中搜索实现的技术细节,包括索引加载时间、可访问性功能和其他具体信息,请参阅 Pull Request #250


多语言支持

tabi 为您提供全面的多语言支持,从设置默认语言到添加任意数量的语言,适用于您的 Zola 网站。更多信息请参考多语言常见问题解答


外观

首页

此演示的主页包含一个带有图像、标题和描述的头部:

Main page headerMain page header

标题

要设置图片和标题,你可以在该部分的 _index.md 文件的前言中使用 header 变量。例如:

[extra]
header = {title = "Hello! I'm pzy~", img = "img/avatar.webp", img_alt = "彭志勇, the site's owner" }

描述是常规的 Markdown 内容,设置在前言之外。

列出最新文章

如果您想在主页上显示文章,首先需要决定它们的路径是 / 还是类似于 /blog

如果您想从 / 提供文章,您需要在 _index.md 文件的前置元数据中设置 paginate_by = 5注意:这不在 [extra] 部分,而是在主前置元数据中。示例:

sort_by = "date"
template = "section.html"
paginate_by = 5

[extra]
header = {title = "Hello! I'm pzy~", img = "img/avatar.webp", img_alt = "彭志勇, the site's owner" }

如果您更愿意从 /blog 服务文章,您可以在 [extra] 部分设置 section_path = "/blog" 。这是此演示的设置:

title = "Latest posts"
sort_by = "date"
template = "section.html"

[extra]
header = {title = "Hello! I'm pzy~", img = "img/avatar.webp", img_alt = "彭志勇, the site's owner" }
section_path = "blog/_index.md"
max_posts = 4

请注意,如果您设置了 section_path,就不需要设置 paginate_by。您可以通过设置 max_posts 来确定想要在主页上显示的文章数量。

title 是出现在文章上方的主标题。

显示列表中文章的日期

默认情况下,在列出文章时,会显示文章的创建日期。您可以使用 post_listing_date 选项来配置显示哪个日期。可用的设置有:

  • date: 仅显示文章的原始日期(默认).
  • updated: 仅显示文章的最后更新日期。
  • both: 显示原始日期和最后更新日期。

列出项目

您可以在主页上展示一些项目选择。为此,您需要先设置 projects 目录。

一旦完成,您需要在 _index.md 文件的 [extra] 部分配置到项目的路径:

[extra]
projects_path = "projects/_index.md"

默认情况下,这将显示优先级最高(权重最小;与项目页面的排序相同)的3个项目。要显示更多或更少的项目,你可以在 [extra] 部分设置 max_projects 值。

默认情况下,精选项目将在文章后显示。如果您想在文章前显示项目,请设置 show_projects_first = true

明亮与暗黑模式切换器

页面部分config.toml遵循层级结构需要 JavaScript

通过在 config.toml 中设置 theme_switcher = true,可以启用浅色和深色模式切换器(右上角的月亮/太阳图标)。

默认(浅色/深色)模式

页面部分config.toml遵循层级结构需要 JavaScript

可以通过 default_theme 变量指定默认主题,该变量接受 "dark""light" 。如果您不设置,则默认主题将是用户浏览器中设置的主题。

定制皮肤

页面部分config.toml遵循层级结构需要 JavaScript

tabi 的皮肤可以改变网站的主色调。你可以在 config.toml 中设置外观为 skin = "skin_name" 。例如,skin = "lavender" 看起来像这样(点击可在浅色模式和深色模式之间切换):

探索可用的皮肤并阅读文档了解如何创建自己的皮肤。

无衬线字体

页面部分config.toml遵循层级结构需要 JavaScript

tabi 在文章段落中使用衬线字体(你现在看到的就是)。你可以在整个网站切换到无衬线字体(标题/菜单上使用的),通过在你的 config.toml 中设置 override_serif_with_sans = true

点击下面的图片比较两种外观:

定制 CSS

页面部分config.toml遵循层级结构需要 JavaScript

您可以使用 stylesheets 为整个站点或特定页面加载自定义 CSS,它接受 CSS 文件路径的列表。例如:

stylesheets = ["css/custom.css", "css/another.css"]

浏览器主题颜色

页面部分config.toml遵循层级结构需要 JavaScript

浏览器主题颜色是出现在浏览器标签栏的颜色:

tabi with a coloured browser themetabi with a coloured browser theme

您可以在 config.toml 中设置为 browser_theme_color = "#087e96" 。如果您希望深色/浅色模式下使用不同的颜色,可以使用 browser_theme_color = ["#ffffff", "#000000"] 设置一个颜色数组。第一个颜色将用于浅色模式,第二个颜色将用于深色模式。

该变量接受任何有效的 CSS 颜色,因此您可以使用关键词(例如 blue)、十六进制代码(例如 #087e96)或 RGB/HSL 值(例如 rgb(8, 126, 150))。

紧凑标签

页面部分config.toml遵循层级结构需要 JavaScript

默认情况下,标签页显示标签为:

标签名 — n 篇文章

设置 compact_tags = true 将它们显示为:

标签名 n

标签排序

页面部分config.toml遵循层级结构需要 JavaScript

默认情况下,标签页会按照字母顺序对标签进行排序,鉴于默认设置是 tag_sorting = "name"

设置 tag_sorting = "frequency" 将按发帖数量(降序)排序。


Git 仓库集成

页面部分config.toml遵循层级结构需要 JavaScript

❓: show_remote_source 遵循层级结构,可以在页面、部分或全局设置。其余的设置只能在 config.toml 中设置。

这些设置允许您将您的 tabi 网站与 GitHub、GitLab、Gitea 或 Codeberg 中的公共 Git 仓库关联。示例设置:

remote_repository_url = "https://github.com/welpo/tabi"
remote_repository_git_platform = "auto"
remote_repository_branch = "main"
show_remote_changes = true
show_remote_source = true

这启用了两个功能:

  1. show_remote_source = true 在页脚添加了对您网站源代码(您的 remote_repository_url )的链接,将会显示在页脚处:
Page footer, showing a 'Site source' linkPage footer, showing a 'Site source' link
  1. show_remote_changes = true 在更新文章的提交历史中添加了一个“查看更改 ↗”链接,位于最后更新日期[1]旁边:
Post title and metadata, showing a 'See changes' linkPost title and metadata, showing a 'See changes' link

点击这个链接将会带您到帖子的提交历史,在那里您可以查看对其所做的更改:

Commit history of a postCommit history of a post

页面

项目

tabi 内置了项目模板。要启用它,你可以在 content/projects/ 中创建一个目录。在那里,你可以使用以下前置内容创建一个 _index.md 文件:

title = "Projects"
sort_by = "weight"
template = "cards.html"
insert_anchor_links = "left"

[extra]
show_reading_time = false
quick_navigation_buttons = true
  • title 是页面标题。
  • sort_by 决定了项目如何排序。您可以按“日期”、“更新日期”、“标题”、“标题字节”、“权重”、“别名”或“无”排序。
  • template = "cards.html" 设置模板以渲染项目页面。
  • insert_anchor_links = "left" 为标题添加锚链接。
  • show_reading_time = false 隐藏阅读时间
  • quick_navigation_buttons = true 显示 快速导航按钮

_index.md 文件并行,你可以为每个项目创建一个文件。例如,这是 tabi 项目页面前的内容:

title = "tabi"
description = "A fast, lightweight, and modern Zola theme with multi-language support."
weight = 1

[extra]
local_image = "img/tabi.webp"
  • title 是项目的标题。
  • description 是项目描述。
  • weight 决定了项目显示的顺序。权重越低,项目显示的位置越高。
  • local_image 是项目图片的路径。这张图片显示在项目页面上。

当用户点击项目的图片或标题时,他们将进入项目的页面。如果您希望用户访问外部链接,可以在项目 .md 文件的 [extra] 部分设置 link_to = "https://example.com"

除非您设置其他模板,否则个人项目的页面将使用默认模板,例如 template = "info-page.html"

归档

添加存档页面与添加项目页面类似。你可以在 content/archive/ 中创建一个目录。在那里,你可以使用以下前置元数据创建一个 _index.md 文件:

title = "Archive"
template = "archive.html"

默认情况下,归档将列出位于 blog/ 的文章。要自定义此设置,您可以修改 _index.md 文件中的 [extra] 部分:

  • 对于单个源路径:将 section_path = "your-path/" 设置为列出特定目录中的帖子。请确保包含末尾的斜杠。

  • 对于多个源路径:如果您想要从不同的目录汇总帖子,可以将 section_path 指定为路径列表。例如:

    [extra]
    section_path = ["blog/", "notes/", "path-three/"]
    

注意:

  • 归档页面只会列出在其前言中有日期的帖子。
  • 归档部分的内容排序由您存档的区域的 sort_by 变量决定。此演示使用了在 blog/_index.md 中设置的 sort_by = "date"

标签

tabi 内置了对标签的支持。要启用它们,只需将分类(taxonomy)添加到您的 config.toml

taxonomies = [{name = "tags", feed = true}]

然后,您可以通过在文章的前置元数据中将它们添加到 tags 数组中来为您的帖子添加标签。例如:

title = "Bears, Beets, Battlestar Galactica: The Dwight Schrute Guide to Life"
date = 2007-04-26
description = "Lessons learned from beet farming and paper sales."

[taxonomies]
tags = ["personal", "beets"]

关于页面

如果您想要为一个“关于”部分、一个“联系”或“版权”页面等创建一个非文章页面,您可以使用 info-page.html 模板。

首先,在 content/ 内创建一个您喜欢的任何名称的目录。例如, content/pages/。然后,在该目录内创建一个 _index.md 文件。该文件应如下所示:

+++
render = false
insert_anchor_links = "left"
+++
  • render = false 告诉 Zola 不要渲染这一部分。
  • insert_anchor_links = "left" 为标题添加锚链接。这是可选的。

在目录内部,您可以创建任意数量的 .md 文件。

在这个演示中,关于页面使用了 info-page.html 模板。前置内容如下:

title = "About"
template = "info-page.html"
path = "about"

注意 path 是如何设置为 about 的。Zola 将会把页面放置在 $base_url/about/ 。如果你想将页面设置为在 /contact/ 可用,你应该设置 path = "contact"


SEO

tabi 为您处理大部分搜索引擎优化(SEO)工作(如开放图表协议标签、描述、配色方案等),但还有一些事情您可以自定义。

网站图标(Favicon)

页面部分config.toml遵循层级结构需要 JavaScript

图标是浏览器标签页中显示的小图标。你可以在 config.toml 中用 favicon = "img/favicon.png" 设置它。

表情符号图标(Emoji Favicon)

页面部分config.toml遵循层级结构需要 JavaScript

您还可以使用 favicon_emoji 将表情符号设置为您的网站图标。例如, favicon_emoji = "👾"

注意:一些浏览器不支持表情符号图标。请查看 caniuse 中的兼容性表格。

规范 URL

页面部分config.toml遵循层级结构需要 JavaScript

规范 URL 是一种向搜索引擎指示您的网站内容的首选 URL 的方法。这对于 SEO 和避免内容重复问题非常有用。

默认情况下,规范 URL 是您当前所在页面的 URL。但是,您可以通过在页面或章节的前置元数据中设置 canonical_url 来覆盖这一点。

如果您有一个结构与内容完全相同的网站,可以在您的 config.toml 中设置 base_canonical_url。通过将当前 URL 的 $base_url 替换为您设置的 $base_canonical_url,将构建规范化的 URL。

例如,如果您设置 base_canonical_url = "https://example.com",该页面的规范 URL $base_url/blog/post1 将是 https://example.com/blog/post1。如果您有一个有多个域名共享相同内容的站点,这很有用。

注意:为确保规范 URL 正确,最好为每个页面单独设置 canonical_url

社交媒体卡片

页面部分config.toml遵循层级结构需要 JavaScript

社交媒体卡片是在您在社交媒体上分享链接时显示的图片。

A screenshot of WhatsApp showing a link with a social media card

您可以使用 social_media_card = "img/social_media_card.png" 设置社交媒体图片。

您可以指定相对路径和绝对路径。

  • 相对路径:将图片放置在与博客文章相同的文件夹中,并指定其名称。例如,social_media_card = "relative_image.png"

  • 绝对路径:将图像放置在特定文件夹中,并从根目录指定路径。例如,social_media_card = "/img/absolute_image.png"

如果相对路径和绝对路径都有效,则优先使用相对路径。

既然遵循层次结构,如果未在页面设置,而是在区域设置,将使用该区域的图片。如果未在页面或区域设置,而是在 config.toml 中设置,将使用全局图片。

专业提示:使用脚本自动化创建:从害羞到社交达人:为 Zola 网站自动生成链接预览


导航

导航条

页面部分config.toml遵循层级结构需要 JavaScript

导航栏是页面顶部的条,其中包含网站标题和导航菜单。您可以通过在 config.toml 中设置 menu 来自定义显示哪些项。例如:

menu = [
    { name = "blog", url = "blog", trailing_slash = true },
    { name = "archive", url = "archive", trailing_slash = true },
    { name = "tags", url = "tags", trailing_slash = true },
    { name = "projects", url = "projects", trailing_slash = true },
    { name = "about", url = "about", trailing_slash = true },
]

快速导航按钮

页面部分config.toml遵循层级结构需要 JavaScript

快速导航按钮是出现在屏幕右下角的按钮。如果你不是在移动设备上,你应该能在这一页看到它们。它们看起来像这样:

Quick navigation buttonsQuick navigation buttons

按钮使您能够快速浏览可扩展的小型目录,到评论部分(如果启用),以及页面的顶部。

启用它们,设置 quick_navigation_buttons = true

目录

页面部分config.toml遵循层级结构需要 JavaScript

在文章标题和元数据下方启用目录,使用 toc = true

阅读有关目录及其如何定制的更多内容,请查阅文档

上一篇和下一篇链接

页面部分config.toml遵循层级结构需要 JavaScript

在文章底部显示前一篇和后一篇文章的链接。它看起来像这样:

Previous and next article linksPrevious and next article links

要激活此功能,设置 show_previous_next_article_links = true

默认情况下,下一篇文章将位于页面左侧,上一篇文章将位于页面右侧。要反转顺序(下一篇文章在右侧,上一篇文章在左侧),设置 invert_previous_next_article_links = true

默认情况下,此导航部分将具有站点完整的宽度(与顶部的导航栏相同)。为了使其变窄,以匹配文章宽度,请设置 previous_next_article_links_full_width = false

所有这些设置都遵循层次结构。

脚注反向链接

弃用警告

Zola v0.19.0 及更高版本可以原生支持这项功能。在配置文件的 [markdown] 部分设置 bottom_footnotes = true

页面部分config.toml遵循层级结构需要 JavaScript

设置 footnote_backlinks = true 将在您的文章脚注中添加回链,如下所示:

Footnote backlinksFootnote backlinks

当您点击一个回链(箭头 ↩),它将带您返回到引用脚注的文本位置。


可用性

代码块上的复制按钮

页面部分config.toml遵循层级结构需要 JavaScript

设置 copy_button = true 将在代码块的右上角添加一个小型的复制按钮,如下所示:

Copy button on code blocksCopy button on code blocks

代码块中的源/路径

页面部分config.toml遵循层级结构需要 JavaScript

设置 add_src_to_code_block = true 允许使用 add_src_to_code_block 短码.

KaTeX 支持

页面部分config.toml遵循层级结构需要 JavaScript

KaTeX 是一个快速、易于使用的 JavaScript 库,用于网页上的 TeX 数学渲染。您可以通过 katex = true 来启用它。在这里看看它的样子。

自定义字体子集

页面部分config.toml遵循层级结构需要 JavaScript

自定义字体导致 Firefox 中的文本闪烁。为了解决这个问题,tabi 加载了头部所用字形的子集。由于这(略微)增加了初始加载时间,尝试最小化这个子集的大小是一个好主意。

您可以创建一个自定义的子集以适应您的网站,将其保存为 static/custom_subset.css,并通过 custom_subset = true 加载它。

有关如何创建自定义子集的说明,请参阅文档以获取更多信息。

Feed 中的完整内容

页面部分config.toml遵循层级结构需要 JavaScript

默认情况下,Atom 订阅只包含您文章的摘要/描述。您可以通过在 config.toml 中设置 full_content_in_feed = true 来包含整篇文章的内容。

从 Feed 中隐藏内容

页面部分config.toml遵循层级结构需要 JavaScript

您可以通过设置 hide_from_feed = true 来隐藏特定页面或整个部分。

评论

页面部分config.toml遵循层级结构需要 JavaScript

要在单个页面上启用评论,请在前置设置您想要启用的系统的名称为 true。例如, utterances = true.

要在全局范围内(所有页面上)启用系统,请在您的 config.toml 中的正确部分设置 enabled_for_all_posts = true (例如,在 [extra.giscus] 内部)。

如果您已经在全局范围内启用了某个评论系统,但希望在特定页面禁用它,请在该页面的前置元数据中将系统名称设置为 false。例如,utterances = false

阅读 文档 以获取有关可用系统及其设置的更多信息。

分析

页面部分config.toml遵循层级结构需要 JavaScript

tabi 支持三种隐私友好的分析系统:PlausibleGoatCounterUmami

您可以在您的 config.toml[extra.analytics] 部分设置它们。

  • service: 指定要使用的分析服务。支持的选项有 "goatcounter""umami""plausible"

  • id: 您的分析服务的唯一标识符。这个标识符根据服务而有所不同:

    • 对于 GoatCounter,这是在注册时选择的代码。自托管实例不需要此字段。
    • 对于 Umami,这是网站 ID。
    • 对于 Plausible,这是域名。
  • self_hosted_url: 可选。使用此字段指定您选择的统计分析服务的自托管实例的 URL。基本 URL 根据您的具体设置而有所不同。以下是一些示例:

    • 对于 GoatCounter: "https://stats.example.com"
    • 对于 Umami: "https://umami.example.com"
    • 对于 Plausible: "https://plausible.example.com"

非自托管 GoatCounter 的示例配置将如下所示:

[extra.analytics]
service = "goatcounter"
id = "tabi"
self_hosted_url = ""

页脚

社交媒体图标

页面部分config.toml遵循层级结构需要 JavaScript

您可以使用 socials 在页脚添加社交媒体图标,它接受一个社交媒体对象列表。例如:

socials = [
    { name = "github", url = "https://github.com/welpo/", icon = "github" },
    { name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" },
    { name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" },
    { name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" },
    { name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" },
]

查看所有内置图标的列表,请查看 GitHub 上的 static/social_icons 目录

缺失了一个图标?如果你认为它对 tabi 来说是一个好的补充,请随时打开一个问题或提交一个拉取请求(示例)。

要使用自定义图标,您可以将其添加到您站点的 static/social_icons 目录中。例如,如果您添加了 custom.svg,您可以像这样引用它:

{ name = "custom", url = "https://example.com", icon = "custom" }

订阅图标

页面部分config.toml遵循层级结构需要 JavaScript

您可以将指向 RSS/Atom 源的链接添加到页脚中,feed_icon = true

针对 Zola 0.19.X 用户的说明:当 feed_filenames 中有两个文件名时,页脚中只会链接第一个文件。

页脚菜单

页面部分config.toml遵循层级结构需要 JavaScript

您可以使用 footer_menu 在页脚添加一个菜单,它接受一个菜单项列表。例如:

footer_menu = [
    {url = "about", name = "about", trailing_slash = true},
    {url = "privacy", name = "privacy", trailing_slash = true},
    {url = "sitemap.xml", name = "sitemap", trailing_slash = false},
    {url = "https://example.com", name = "external link", trailing_slash = true},
]
页面部分config.toml遵循层级结构需要 JavaScript

要在您的网站上添加版权声明,请设置 copyright:

copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the content in this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) license."

您可以使用以下变量:

  • $TITLE 将由在 config.toml 中设置的 title 变量替换
  • $CURRENT_YEAR 将被替换为当前年份
  • $AUTHOR 将由 author 变量替换
  • $SEPARATOR 将由 separator 变量替换

Markdown 将被渲染。上面的例子:

Copyright sectionCopyright section

如果您拥有一个多语言网站,并且希望为不同的语言设置不同的版权声明,您可以针对希望支持每种语言添加相应的翻译到 copyright_translations.{language_code} 中。语言代码必须与 tabi 的语言代码相匹配。例如,对于西班牙语:

copyright_translations.es = "© $CURRENT_YEAR $AUTHOR $SEPARATOR A menos que se indique lo contrario, el contenido de esta web está disponible bajo la licencia [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)."

元数据

显示作者

页面部分config.toml遵循层级结构需要 JavaScript

在文章标题下方显示作者,设置 show_author = true

这将显示在文章前置中设置的作者 authors = []。如果不可用,它将回退到 config.toml 中的 author = ""

阅读时间

页面部分config.toml遵循层级结构需要 JavaScript

您可以通过 show_reading_time 来启用或隐藏文章的阅读时间。如果将其设置为 true,它将显示在文章的元数据中,如下所示:

Post title and metadata, showing a 'See changes' linkPost title and metadata, showing a 'See changes' link

由于它遵循层次结构,您可以针对特定页面或部分启用或隐藏它。例如,此演示在项目部分的 _index.md 中设置了 show_reading_time = false,因此它们的单个帖子不显示阅读时间。

显示日期

页面部分config.toml遵循层级结构需要 JavaScript

默认情况下,日期显示在文章标题下方。您可以使用 show_date = false 将其隐藏。此设置遵循层次结构

日期格式

页面部分config.toml遵循层级结构需要 JavaScript

tabi 有两个日期格式: long_date_formatshort_date_format。短格式用于文章的元数据中,而长格式用于列出文章时(例如在博客部分主页上)。

默认情况下,英文格式的日期为“6th July 2049”。对于其他语言,长格式默认为 "%d %B %Y",短格式默认为 "%-d %b %Y"

在 Zola 中,时间格式语法受到 strftime 的启发。完整的参考资料可以在 chrono 文档中找到。

自定义分隔符

页面部分config.toml遵循层级结构需要 JavaScript

分隔符出现在各种地方:在标题标签中,在文章元数据之间…

默认分隔符是项目符号(),但您可以通过设置为类似 separator = "|" 的内容来更改。

标题标签顺序

页面部分config.toml遵循层级结构需要 JavaScript

标题标签是出现在浏览器标签中的文本。默认情况下,它是由站点标题和页面标题组成。例如,博客部分的标题标签是“pzy.io • 博客”。

通过设置 invert_title_order = true,您可以在浏览器标签中反转站点标题和页面标题的顺序。例如,博客部分的标题标签将变为“博客 • pzy.io”。


安全

编码电子邮件

页面部分config.toml遵循层级结构需要 JavaScript

为了保护您的电子邮件地址免受垃圾邮件机器人的侵扰,您可以在页脚中对它进行编码。您可以通过将 email 设置为您的电子邮件地址[2] 的 base64 编码版本来实现这一点。例如, email = "bWFpbEBleGFtcGxlLmNvbQ==" 是“[email protected]”的 base64 编码版本。

如果您不想自己编码电子邮件,可以通过设置 encode_plaintext_email = true 让 tabi 为您编码。这允许您在配置中设置明文电子邮件。请注意,这仅能在您的网站上保护您的电子邮件地址,而在公共仓库中则不行。

如果电子邮件被编码(无论是您还是 tabi 进行的操作),那么禁用 JavaScript 的用户将无法看到电子邮件图标。

内容安全策略(CSP)

页面部分config.toml遵循层级结构需要 JavaScript

内容安全策略(CSP - Content Security Policy)是帮助检测和减轻包括跨站脚本(XSS)和数据注入攻击在内的一些攻击类型的安全附加层。这些攻击被用于从数据盗窃到网站篡改,再到恶意软件的传播等各种行为。

tabi 有一个默认的 CSP,允许远程图片和视频,以及 YouTube 和 Vimeo 的嵌入。您可以使用 allowed_domains 进行自定义,它接受一系列 CSP 指令。这是默认的 CSP:

allowed_domains = [
    { directive = "font-src", domains = ["'self'", "data:"] },
    { directive = "img-src", domains = ["'self'", "https://*", "data:"] },
    { directive = "script-src", domains = ["'self'"] },
    { directive = "style-src", domains = ["'self'"] },
    { directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
]

此功能默认启用。要禁用它(并允许所有连接),请在页面、部分或全局设置 enable_csp = falseenable_csp 设置遵循层次结构

查看 CSP 文档页面以获取更多信息。


  1. 如果您使用的是远程 Git 仓库,您可能想要自动化更新 updated 字段的过程。以下是相关指南:Zola Git 预提交钩子:更新文章日期

  2. 要将您的电子邮件编码为 base64,您可以使用在线工具,或者在终端运行: printf '[email protected]' | base64