掌握 tabi 设置:全面指南(转译)
这旨在成为关于 tabi 中每个设置的全面指南。如果您有任何问题,请随时在 GitHub 上开启一个问题或发起一个讨论。
设置层级结构
tabi 有一个层级结构,允许您在不同的级别自定义您的站点。层级结构(从低到高优先级)如下:
- 全局设置:这些设置适用于您的整个站点。它们在
config.toml
中设置。 - 部分设置:这些设置适用于您网站的某个部分(例如
/blog
或/projects
)。它们设置在该部分的_index.md
文件的前面。 - 页面设置:这些设置适用于单个页面。它们在页面的前置部分进行设置。
在所有情况下,tabi 的设置都在 [extra]
部分进行设置。
对于遵循此层级结构的设置,页面上设置的值将覆盖部分的值,该值又覆盖全局值。简而言之:设置越具体,其优先级越高,或 page > section > config.toml
。
搜索
页面 | 部分 | config.toml | 遵循层级结构 | 需要 JavaScript |
---|---|---|---|---|
❌ | ❌ | ✅ | ❌ | ✅ |
tabi 支持使用 Elasticlunr 进行可访问的、本地多语言搜索。要启用它,你需要:
- 在
config.toml
中设置一个default_language
。 - 设置
build_search_index = true
。 - 可选地, 配置
[search]
。
这是一个示例配置:
= "https://example.com"
= "en"
= true
[]
= "elasticlunr_json" # Or the less efficient "elasticlunr_javascript".
= true
= true
= true
= 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
变量:
[]
= "elasticlunr_javascript"
[]
= "elasticlunr_javascript"
这确保了 tabi 加载正确的文件。我们建议升级到 Zola 0.18.0 或更高版本以获得最佳功能。
实现细节
关于 tabi 中搜索实现的技术细节,包括索引加载时间、可访问性功能和其他具体信息,请参阅 Pull Request #250。
多语言支持
tabi 为您提供全面的多语言支持,从设置默认语言到添加任意数量的语言,适用于您的 Zola 网站。更多信息请参考多语言常见问题解答。
外观
首页
此演示的主页包含一个带有图像、标题和描述的头部:
标题
要设置图片和标题,你可以在该部分的 _index.md
文件的前言中使用 header
变量。例如:
[]
= { = "Hello! I'm pzy~", = "img/avatar.webp", = "彭志勇, the site's owner" }
描述是常规的 Markdown 内容,设置在前言之外。
列出最新文章
如果您想在主页上显示文章,首先需要决定它们的路径是 /
还是类似于 /blog
。
如果您想从 /
提供文章,您需要在 _index.md
文件的前置元数据中设置 paginate_by = 5
。注意:这不在 [extra]
部分,而是在主前置元数据中。示例:
= "date"
= "section.html"
= 5
[]
= { = "Hello! I'm pzy~", = "img/avatar.webp", = "彭志勇, the site's owner" }
如果您更愿意从 /blog
服务文章,您可以在 [extra]
部分设置 section_path = "/blog"
。这是此演示的设置:
= "Latest posts"
= "date"
= "section.html"
[]
= { = "Hello! I'm pzy~", = "img/avatar.webp", = "彭志勇, the site's owner" }
= "blog/_index.md"
= 4
请注意,如果您设置了 section_path
,就不需要设置 paginate_by
。您可以通过设置 max_posts
来确定想要在主页上显示的文章数量。
title
是出现在文章上方的主标题。
显示列表中文章的日期
默认情况下,在列出文章时,会显示文章的创建日期。您可以使用 post_listing_date
选项来配置显示哪个日期。可用的设置有:
date
: 仅显示文章的原始日期(默认).updated
: 仅显示文章的最后更新日期。both
: 显示原始日期和最后更新日期。
列出项目
您可以在主页上展示一些项目选择。为此,您需要先设置 projects
目录。
一旦完成,您需要在 _index.md
文件的 [extra]
部分配置到项目的路径:
[]
= "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 文件路径的列表。例如:
= ["css/custom.css", "css/another.css"]
浏览器主题颜色
页面 | 部分 | config.toml | 遵循层级结构 | 需要 JavaScript |
---|---|---|---|---|
❌ | ❌ | ✅ | ❌ | ❌ |
浏览器主题颜色是出现在浏览器标签栏的颜色:
您可以在 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 仓库关联。示例设置:
= "https://github.com/welpo/tabi"
= "auto"
= "main"
= true
= true
这启用了两个功能:
show_remote_source = true
在页脚添加了对您网站源代码(您的remote_repository_url
)的链接,将会显示在页脚处:
show_remote_changes = true
在更新文章的提交历史中添加了一个“查看更改 ↗”链接,位于最后更新日期[1]旁边:
点击这个链接将会带您到帖子的提交历史,在那里您可以查看对其所做的更改:
页面
项目
tabi 内置了项目模板。要启用它,你可以在 content/projects/
中创建一个目录。在那里,你可以使用以下前置内容创建一个 _index.md
文件:
= "Projects"
= "weight"
= "cards.html"
= "left"
[]
= false
= true
title
是页面标题。sort_by
决定了项目如何排序。您可以按“日期”、“更新日期”、“标题”、“标题字节”、“权重”、“别名”或“无”排序。template = "cards.html"
设置模板以渲染项目页面。insert_anchor_links = "left"
为标题添加锚链接。show_reading_time = false
隐藏阅读时间。quick_navigation_buttons = true
显示 快速导航按钮。
与 _index.md
文件并行,你可以为每个项目创建一个文件。例如,这是 tabi 项目页面前的内容:
= "tabi"
= "A fast, lightweight, and modern Zola theme with multi-language support."
= 1
[]
= "img/tabi.webp"
title
是项目的标题。description
是项目描述。weight
决定了项目显示的顺序。权重越低,项目显示的位置越高。local_image
是项目图片的路径。这张图片显示在项目页面上。
当用户点击项目的图片或标题时,他们将进入项目的页面。如果您希望用户访问外部链接,可以在项目 .md
文件的 [extra]
部分设置 link_to = "https://example.com"
。
除非您设置其他模板,否则个人项目的页面将使用默认模板,例如 template = "info-page.html"
。
归档
添加存档页面与添加项目页面类似。你可以在 content/archive/
中创建一个目录。在那里,你可以使用以下前置元数据创建一个 _index.md
文件:
= "Archive"
= "archive.html"
默认情况下,归档将列出位于 blog/
的文章。要自定义此设置,您可以修改 _index.md
文件中的 [extra]
部分:
对于单个源路径:将
section_path = "your-path/"
设置为列出特定目录中的帖子。请确保包含末尾的斜杠。对于多个源路径:如果您想要从不同的目录汇总帖子,可以将
section_path
指定为路径列表。例如:[] = ["blog/", "notes/", "path-three/"]
注意:
- 归档页面只会列出在其前言中有日期的帖子。
- 归档部分的内容排序由您存档的区域的
sort_by
变量决定。此演示使用了在blog/_index.md
中设置的sort_by = "date"
。
标签
tabi 内置了对标签的支持。要启用它们,只需将分类(taxonomy)添加到您的 config.toml
中
= [{ = "tags", = true}]
然后,您可以通过在文章的前置元数据中将它们添加到 tags
数组中来为您的帖子添加标签。例如:
= "Bears, Beets, Battlestar Galactica: The Dwight Schrute Guide to Life"
= 2007-04-26
= "Lessons learned from beet farming and paper sales."
[]
= ["personal", "beets"]
关于页面
如果您想要为一个“关于”部分、一个“联系”或“版权”页面等创建一个非文章页面,您可以使用 info-page.html
模板。
首先,在 content/
内创建一个您喜欢的任何名称的目录。例如, content/pages/
。然后,在该目录内创建一个 _index.md
文件。该文件应如下所示:
render = false
告诉 Zola 不要渲染这一部分。insert_anchor_links = "left"
为标题添加锚链接。这是可选的。
在目录内部,您可以创建任意数量的 .md
文件。
在这个演示中,关于页面使用了 info-page.html
模板。前置内容如下:
= "About"
= "info-page.html"
= "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 |
---|---|---|---|---|
✅ | ✅ | ✅ | ✅ | ❌ |
社交媒体卡片是在您在社交媒体上分享链接时显示的图片。
您可以使用 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
来自定义显示哪些项。例如:
= [
{ = "blog", = "blog", = true },
{ = "archive", = "archive", = true },
{ = "tags", = "tags", = true },
{ = "projects", = "projects", = true },
{ = "about", = "about", = true },
]
快速导航按钮
页面 | 部分 | config.toml | 遵循层级结构 | 需要 JavaScript |
---|---|---|---|---|
✅ | ✅ | ✅ | ✅ | ❌ |
快速导航按钮是出现在屏幕右下角的按钮。如果你不是在移动设备上,你应该能在这一页看到它们。它们看起来像这样:
按钮使您能够快速浏览可扩展的小型目录,到评论部分(如果启用),以及页面的顶部。
启用它们,设置 quick_navigation_buttons = true
。
目录
页面 | 部分 | config.toml | 遵循层级结构 | 需要 JavaScript |
---|---|---|---|---|
✅ | ✅ | ✅ | ✅ | ❌ |
在文章标题和元数据下方启用目录,使用 toc = true
。
阅读有关目录及其如何定制的更多内容,请查阅文档。
上一篇和下一篇链接
页面 | 部分 | config.toml | 遵循层级结构 | 需要 JavaScript |
---|---|---|---|---|
✅ | ✅ | ✅ | ✅ | ❌ |
在文章底部显示前一篇和后一篇文章的链接。它看起来像这样:
要激活此功能,设置 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
将在您的文章脚注中添加回链,如下所示:
当您点击一个回链(箭头 ↩),它将带您返回到引用脚注的文本位置。
可用性
代码块上的复制按钮
页面 | 部分 | config.toml | 遵循层级结构 | 需要 JavaScript |
---|---|---|---|---|
✅ | ✅ | ✅ | ✅ | ✅ |
设置 copy_button = true
将在代码块的右上角添加一个小型的复制按钮,如下所示:
代码块中的源/路径
页面 | 部分 | 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 支持三种隐私友好的分析系统:Plausible、GoatCounter 和 Umami。
您可以在您的 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:
非自托管 GoatCounter 的示例配置将如下所示:
[]
= "goatcounter"
= "tabi"
= ""
页脚
社交媒体图标
页面 | 部分 | config.toml | 遵循层级结构 | 需要 JavaScript |
---|---|---|---|---|
❌ | ❌ | ✅ | ❌ | ❌ |
您可以使用 socials
在页脚添加社交媒体图标,它接受一个社交媒体对象列表。例如:
= [
{ = "github", = "https://github.com/welpo/", = "github" },
{ = "soundcloud", = "https://soundcloud.com/oskerwyld", = "soundcloud" },
{ = "instagram", = "https://instagram.com/oskerwyld", = "instagram" },
{ = "youtube", = "https://youtube.com/@oskerwyld", = "youtube" },
{ = "spotify", = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", = "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
在页脚添加一个菜单,它接受一个菜单项列表。例如:
= [
{ = "about", = "about", = true},
{ = "privacy", = "privacy", = true},
{ = "sitemap.xml", = "sitemap", = false},
{ = "https://example.com", = "external link", = true},
]
版权
页面 | 部分 | config.toml | 遵循层级结构 | 需要 JavaScript |
---|---|---|---|---|
❌ | ❌ | ✅ | ❌ | ❌ |
要在您的网站上添加版权声明,请设置 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_translations.{language_code}
中。语言代码必须与 tabi 的语言代码相匹配。例如,对于西班牙语:
= "© $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
,它将显示在文章的元数据中,如下所示:
由于它遵循层次结构,您可以针对特定页面或部分启用或隐藏它。例如,此演示在项目部分的 _index.md
中设置了 show_reading_time = false
,因此它们的单个帖子不显示阅读时间。
显示日期
页面 | 部分 | config.toml | 遵循层级结构 | 需要 JavaScript |
---|---|---|---|---|
✅ | ✅ | ✅ | ✅ | ❌ |
默认情况下,日期显示在文章标题下方。您可以使用 show_date = false
将其隐藏。此设置遵循层次结构。
日期格式
页面 | 部分 | config.toml | 遵循层级结构 | 需要 JavaScript |
---|---|---|---|---|
❌ | ❌ | ✅ | ❌ | ❌ |
tabi 有两个日期格式: long_date_format
和 short_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:
= [
{ = "font-src", = ["'self'", "data:"] },
{ = "img-src", = ["'self'", "https://*", "data:"] },
{ = "script-src", = ["'self'"] },
{ = "style-src", = ["'self'"] },
{ = "frame-src", = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
]
此功能默认启用。要禁用它(并允许所有连接),请在页面、部分或全局设置 enable_csp = false
。 enable_csp
设置遵循层次结构。
查看 CSP 文档页面以获取更多信息。
如果您使用的是远程 Git 仓库,您可能想要自动化更新
updated
字段的过程。以下是相关指南:Zola Git 预提交钩子:更新文章日期。 ↩要将您的电子邮件编码为 base64,您可以使用在线工具,或者在终端运行:
printf '[email protected]' | base64
。 ↩