HTML杂志资讯博客

broadside — HTML 杂志资讯模板

作者 nsrosenqvist

报纸风格排版优先的 Zola 主题，适合长文技术写作，含生成式社交卡片与 Mermaid 图表构建时渲染。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

目前只有 1 张可用预览，尚未找到可用演示站，暂无法补充内页和手机端截图。

仓库预览 1

查看源码在新标签页打开

作者提供的预览

来自项目仓库的原始界面图片。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

排版优先，报纸风格，衬线标题与易读正文

构建时生成社交卡片与 Mermaid 图表，无客户端 JS

内置 AI 透明度标签，支持文本与图片来源标注

支持分类、标签、系列文章，以及按分类的 RSS 订阅

自动暗色模式，跟随系统偏好

提供完整的 GitHub Actions 部署工作流示例

模板详细介绍

Broadside 是一款以排版为核心的 Zola 主题，灵感来自高品质的宽幅报纸。它采用高对比度的衬线标题和易读的正文，首页采用三级索引布局：一篇精选文章、两栏网格和纯文本列表，结构清晰，适合杂志或博客类内容。主题内置首字下沉、响应式设计、自动暗色模式（跟随系统）、CSS 自定义属性、RSS 订阅（支持按分类输出）、分类与标签体系（分类作为文章标题上方的眉题）、系列文章支持、Mermaid 图表构建时渲染为内联 SVG（无需客户端 JavaScript）、上一篇/下一篇导航、OpenGraph 与 Schema.org SEO 支持，以及 AI 透明度标签（可标记文本和图片的 AI 参与程度）。

该主题特别适合注重阅读体验的长篇技术写作或个人博客。它通过 Node 脚本扩展 Zola 构建流程，在 `zola build` 之后自动生成社交分享卡片和图表，这些功能无需额外前端依赖，但需要 Chromium 环境。主题的依赖会在首次构建时自动安装，也支持手动预装以实现可重复构建。配置灵活，支持自定义导航链接、作者信息、社交验证链接等。

需要注意的是，Broadside 的构建脚本不是标准的 `zola build`，而是通过 `node themes/broadside/scripts/broadside.mjs build` 调用，这会增加一定的使用门槛。部署到 GitHub Pages 时，需要正确配置 submodule 和缓存策略。此外，主题目前处于早期阶段（star 数较少），其生产就绪程度和长期维护性有待观察。建议在正式使用前，仔细阅读 README 中的配置说明，并在本地完整测试构建流程。

HTML杂志资讯博客

适合你的项目吗？

适用场景

长篇技术博客或文章集
需要高质量社交分享卡片的个人网站
注重内容来源透明度的 AI 辅助写作发布
偏好静态站点生成器（Zola）的开发者

适合人群

技术写作者
个人博客维护者
内容出版者
Zola 用户

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
安装需将主题作为 Git submodule 添加到 Zola 站点，并在 config.toml 中设置主题。
2
构建需使用提供的 Node 脚本，首次运行会自动安装依赖（mermaid、playwright-core、Chromium），也可手动预装并设置 BROADSIDE_NO_BOOTSTRAP=1 以实现离线构建。
3
部署到 GitHub Pages 时，需在 Actions 中启用 submodules 并配置缓存。

查看仓库使用说明