abridge

一个快速、轻量级的 Zola 主题，使用语义化 html、轻量级 abridge.css，且无强制 JS。

作者: Jake G (jieiku)

此主题需要 Zola 版本 0.19.1 及以上

许可证: MIT

主页: https://github.com/jieiku/abridge

在线演示: https://abridge.pages.dev/

最后更新: 2026-01-21T18:04:10+08:00

Abridge Zola 主题

一个快速、轻量且现代的 Zola 主题，利用 abridge.css（一个类轻量的语义化 HTML CSS 框架）。完美的 Lighthouse、YellowLabTools 和 Observatory 评分。这里是 Zola 主题基准测试 页面。

本项目的维护由所有 贡献者 和 赞助者 共同实现。如果你想赞助这个项目并让你的头像或公司 logo 出现在下方，请 点击这里。💖

---

查看 Abridge 演示

查看 Abridge.css 演示 [abridge.css 框架]

Abridge.css 演示只是将 Abridge 主题作为子模块使用：config.toml, sass/abridge.scss

特性

• 完美的 Lighthouse、YellowLabTools 和 Observatory 评分。
• PWA 支持（渐进式 Web 应用程序）。
• 所有 JavaScript 均可 完全禁用。
• 暗色、亮色、自动和切换主题。（颜色可自定义，css 变量）
• 代码 语法高亮。（颜色可自定义，css 变量）
• 带有 行高亮 的编号代码块。
• 通过使用 PWA 或 在 config.toml 中设置 search_library = "offline" 实现完全离线站点。
• 多语言支持。
• 搜索支持。(elasticlunr, pagefind, tinysearch)
• 搜索建议导航键，/ 聚焦，arrow 移动，enter 选择，escape 关闭。
• 搜索结果页面，输入搜索查询然后按 Enter 键 或 点击 搜索按钮图标。
• SEO 支持。（搜索引擎优化）
• 分页 首页带有编号分页器。
• 文章底部的基于标题的上一篇和下一篇文章链接。
• 页面索引中的目录（可选，可点击链接）
• 最近文章块。（可选）
• 返回顶部按钮。（仅使用 css）
• 代码块复制按钮。
• 页脚中的电子邮件链接混淆。（反垃圾邮件）
• KaTeX 支持。
• 归档页面。
• 标签。
• 分类。（类似于标签，默认禁用/注释掉）
• 页脚中的社交图标链接。
• 响应式设计。（移动优先）
• 视频短代码：Youtube、Vimeo、Streamable。
• 媒体短代码：video、img、imgswap、image、gif、audio。
• 其他短代码：showdata、katex。

完整文档可在这里获得

快速开始

此主题需要 Zola 0.19.1 或更高版本

git clone https://github.com/jieiku/abridge.git
cd abridge
zola serve
# 在浏览器中打开 http://127.0.0.1:1111/

安装

快速开始展示了如何直接运行主题。接下来我们将使用 abridge 作为新站点的主题。

1: 创建一个新的 zola 站点

yes "" | zola init mysite
cd mysite

2: 安装 Abridge

将主题添加为 git 子模块：

git init  # 如果你的项目已经是 git 仓库，请忽略此命令
git submodule add https://github.com/jieiku/abridge.git themes/abridge
git submodule update --init --recursive
git submodule update --remote --merge

或者将主题克隆到你的 themes 目录：

git clone https://github.com/jieiku/abridge.git themes/abridge

3: 配置

从主题目录复制一些文件到你的项目根目录：

rsync themes/abridge/.gitignore .gitignore
rsync themes/abridge/config.toml config.toml
rsync themes/abridge/content/_index.md content/
rsync -r themes/abridge/COPY-TO-ROOT-SASS/* sass/
rsync themes/abridge/netlify.toml netlify.toml
rsync themes/abridge/package_abridge.js package_abridge.js
rsync themes/abridge/package.json package.json

• config.toml 包含所有配置值的基本配置。
• content/_index.md 设置分页所需。
• COPY-TO-ROOT-SASS/abridge.scss 覆盖以自定义 Abridge 变量。
• netlify.toml 设置以使用 netlfiy 部署你的仓库。
• package_abridge.js node 脚本用于：更新 PWA 中的缓存文件列表，压缩 js，打包 js
• package.json 以便于使用 package_abridge.js

取消注释项目根目录 config.toml 中的主题行：

sed -i 's/^#theme = "abridge"/theme = "abridge"/' config.toml

4: 添加新内容

从主题目录复制内容到你的项目或制作新帖子：

rsync -r themes/abridge/content .

5: 运行项目

只需在项目的根路径运行 zola serve：

zola serve

Zola 将启动开发 Web 服务器，默认访问地址为 http://127.0.0.1:1111。

保存的更改将在浏览器中实时重新加载。（按 ctrl+f5，或在开发时在 config.toml 中设置 pwa=false）

自定义

有关进一步的自定义，请务必 查看文档。

赞助

你喜欢这个主题吗？它对你有用吗？请给个 github star，如果你愿意捐赠，你可以通过 github sponsors 向我捐款。

贡献和理念

我们需要你的帮助！特别是修复问题或改进现有功能。

Abridge 的目标是轻量、快速，并且即使禁用了 javascript 或阻止了 javascript 也能正常工作。

唯一可能被认为是必要且依赖于 javascript 的功能是搜索。

许可证

Abridge 根据 MIT 许可证 分发。