企业官网建设流程全解析

• 前端
• 设计系统

导读

Minimal Publish 是开源仓库 obsidian-minimal 为 Obsidian Publish 站点推出的精简版主题：它继承 Minimal 桌面版的核心设计原则（无干扰、高度可定制），但针对 Web 阅读场景做了体积与加载速度的专项优化。阅读本文后，你将掌握如何在 Obsidian 仓库中安装并发布publish.css、在 13 种配色方案间选择切换、用 YAML 前置属性调用卡片 / 图片网格 / 表格样式等 helper classes，以及通过publish.js为发布站点构建可缩放图片画廊的完整方案。

什么是 Minimal Publish：为 Web 阅读而生的精简版 Minimal

Minimal Publish 是 Minimal 主题面向 Obsidian Publish 的剥离精简版本。它在设计上与桌面版保持一致——同样是去装饰、可高度自定义的观感——但实现目标是面向所有访问者快速加载：

• 严格遵循 Obsidian 官方针对 Publish 主题的最佳实践；
• 文件体积大幅缩减：发布版约16KB，而桌面应用版约247KB，下载更快、首屏渲染负担更小；
• 支持多种配色方案，可独立为浅色 / 深色模式选择；
• 兼容helper classes，包括卡片布局、图片网格、图片缩放 与表格样式；
• 支持构建可缩放的图片画廊。

需要说明的是，Obsidian 桌面端与移动端使用的完整主题代码位于 theme.css（压缩分发版）与 Minimal.css（未压缩副本），而 Publish 专用的精简版样式则独立维护为 docs/publish.css。两者共享同一套设计语言，但发布版只保留对 Web 渲染必要的能力。

安装与发布：三步让站点用上 Minimal Publish

按照官方文档，将 Minimal Publish 部署到你的 Obsidian Publish 站点只需三步：

1. 从下方“配色方案下载”一节选择任一链接下载主题文件（即某个配色版本对应的publish.css）；
2. 将publish.css文件复制到你的Obsidian 仓库根目录；
3. 在 Obsidian Publish 中发布publish.css文件。

发布完成后，访问者打开你的站点即可加载该主题。需要特别留意的是文件位置——publish.css必须位于仓库根目录，而不是某个子文件夹，这与 Obsidian Publish 对自定义 CSS 的加载约定一致。本仓库的 docs/publish.css 即为官方发布版样式的完整副本，可直接参考其内容结构。

13 种配色方案下载

Minimal Publish 提供13 种配色方案，均针对 Obsidian Publish 做了加载优化，对应的发布文件存放在独立的color-schemes目录中。所有配色都以同样的publish.css文件名为出口，下载后替换仓库根目录中的同名文件即可切换主题风格：

从当前仓库源码结构看，桌面版在 src/scss/color-schemes/ 目录下还额外维护了一个eink.scss（电子墨水屏模式，官方文档标记为 beta），因此桌面端配色共 14 种，而 Publish 下载清单仅包含上面 13 种，eink方案暂未纳入发布版下载。桌面端各配色均可参照 Nord 配色源码 的结构进行学习与自定义。

源码级解读：publish.css 的结构与默认变量

仓库中的 docs/publish.css 是理解 Minimal Publish 工作机制的最佳入口。整个文件分为三大部分：顶部 CSS 变量定义、移动端媒体查询、浅色 / 深色默认配色。

排版与字号变量

文件开头通过body选择器定义了一整套字体与标题变量，直接控制发布站点的正文观感：

body { /* Font sizes */ --font-text-size: 16px; --font-small: 13px; --font-smaller: 11px; --font-smallest: 10px; --font-inputs: 13px; /* Font weights */ --normal-weight: 400; --bold-weight: 600; --link-weight: inherit; /* Headings */ --page-title-weight: 500; --page-title-line-height: 1.1; --h1: 1.25em; --h2: 1.1em; --h3: 1.05em; --h4: 1em; --h5: 0.85em; --h6: 0.85em; ... }

从源码可见，正文默认字号 16px，小号 / 更小号 / 最小号依次为 13px、11px、10px；标题字号采用相对单位em（随正文缩放），从 H1 的1.25em递减到 H5/H6 的0.85em；标题字重从 H1–H3 的 600 递减到 H6 的 400；H5/H6 还启用了small-caps（小型大写字母）字形变体。这些变量均遵循 Obsidian 官方 CSS 变量参考，便于你在此基础上做进一步微调。

卡片与图片相关变量

发布版内置了对卡片布局与图片能力的变量支持，这也是它与桌面版共享设计原则的直接体现：

/* Cards */ --cards-min-width: 180px; --cards-max-width: 1fr; --cards-mobile-width: 180px; --cards-image-height: 400px; --cards-padding: 1.2em; --cards-image-fit: contain; --cards-background: transparent; --cards-border-width: 1px; --cards-aspect-ratio: auto; --cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), var(--cards-max-width))); /* Images */ --image-radius: 8px; --img-grid-fit: cover; --img-grid-background: transparent; --img-grid-gap: 0.5rem; --img-zoom-background: rgba(0,0,0,0.6); --img-zoom-max-width: 96%; --img-zoom-max-height: 90vh; --img-zoom-in-cursor: zoom-in; --img-zoom-out-cursor: zoom-out;

解读要点：

• 卡片（Cards）：默认最小宽度 180px、最大宽度1fr（等分剩余空间）、图片高度上限 400px、内边距 1.2em、图片按contain缩放。--cards-columns使用repeat(auto-fit, minmax(...))自动排布列数，移动端宽度单独由--cards-mobile-width控制；
• 图片网格（Image grids）：--img-grid-fit默认cover表示裁剪填满网格单元，--img-grid-gap为单元间距（桌面 0.5rem，移动端收紧到 0.25rem）；
• 图片缩放（Image zoom）：放大层背景默认半透明黑（rgba(0,0,0,0.6)），放大图片最大宽 96%、最大高 90vh，光标在进入与退出时分别切换为zoom-in/zoom-out。

移动端适配

publish.css通过媒体查询对窄屏做了专门处理：

/* Mobile */ @media (max-width:400pt) { body { --cards-min-width:var(--cards-mobile-width); --img-grid-gap: 0.25rem; } }

当视口宽度小于 400pt 时，卡片最小宽度切换为移动端专用值（180px），图片网格间距减半至 0.25rem，保证小屏上的阅读密度。

默认配色变量的浅色 / 深色取值

文件后半部分定义了主题的默认色彩系统，以bg（背景）、ui（界面元素）、tx（文本）、ax（强调色）、hl（高亮）五组变量为核心：

此外还定义了--red、--yellow、--green、--orange、--cyan、--blue、--purple、--pink等语义色。后续的大量规则将这些基础变量映射到 Obsidian Publish 的官方 CSS 变量上（如--background-primary、--text-normal、--interactive-accent等），从而实现整套 UI 的换肤。

兼容的 Helper Classes：按笔记粒度定制布局

Minimal Publish 与桌面版共享 helper classes 体系。你可以通过在笔记的 YAML 前置属性中声明cssclasses来按文件启用功能，类名可组合使用。完整语法如下：

--- cssclasses: - img-grid - img-zoom ---

例如，加入cards即可让笔记中的 Dataview 表格全部以卡片布局呈现（详见 Cards 文档）：

--- cssclasses: - cards - cards-1-1 ---

发布版实际生效的类名，在 docs/publish.css 中均有对应 CSS 规则，主要分类如下。

图片网格（img-grid）

img-grid将连续排列的图片自动转为列；要另起一行，只需在图片之间额外插入一个空行。发布版的实现依赖 CSS:has()选择器（见下方“浏览器兼容性”），并在.markdown-preview-section内将相邻图片放入display:grid容器：

图片网格全局开关与图片宽度循环切换也可通过 Minimal Theme Settings 插件或快捷键控制，详见 Image grids 文档。

表格 / 图片 / iframe 的宽度控制

卡片布局（cards）

cards将 Dataview 表格转换为卡片布局，可与表格宽度类组合使用。注意cards必须在场，其他卡片修饰类才生效：

卡片还支持list-cards（将无序列表转为卡片）。从发布版源码看，卡片实现在底层复用了表格结构：thead被隐藏、tbody以grid-template-columns: var(--cards-columns)排布、每行tr变为纵向 flex 容器并带圆角与悬停阴影。可参考 movie-gallery.png 了解卡片在个人电影数据库场景下的实际效果。

表格与 Dataview 行 / 列样式

从 docs/publish.css 的规则可以看出，row-lines与col-lines通过给td设置border-bottom/border-right实现分隔线，table-numbers则借助 CSS 计数器counter-increment在首列渲染行号，row-alt通过--table-row-alt-background变量控制条纹色。

嵌入与转译（embeds）

图片滤镜

在发布版中还保留了桌面端常见的图片滤镜用法——把滤镜名追加到图片链接末尾即可，例如![[image.jpeg#invert]]：

用 publish.js 构建可缩放图片画廊

Minimal Publish 的图片缩放能力由配套的 docs/publish.js 脚本驱动，它并非 Obsidian 内置功能。官方在 Create an image gallery for Obsidian Publish 指南 中给出了完整的落地步骤，这里整理为四条核心要点：

1. 前置条件：自定义域名

Obsidian Publish 要求在站点启用自定义域名后才能加载publish.js这类自定义脚本。这是使用图片缩放功能的前提条件。

2. 将主题与脚本放入仓库

• 下载Minimal for Obsidian Publish 1.1+版本的publish.css，放入仓库根目录；
• 下载含图片缩放代码的publish.js（即本仓库 docs/publish.js 的副本），同样放入仓库根目录。

3. 在笔记中启用 helper classes

在需要支持缩放的笔记前置属性中声明img-zoom；若同时想启用并排网格，再叠加img-grid：

--- cssclasses: - img-grid - img-zoom ---

之后按 Image grids 文档 的方式排列图片即可。注意：当前publish.js的缩放代码只支持本地图片嵌入，不支持远程图片资源（从源码el.querySelectorAll('.internal-embed')的筛选逻辑可以确认，它只处理内部嵌入的图片元素）。

4. 发布资源并刷新

最后发布以下资源：

• 你的publish.js文件；
• 你的publish.css文件；
• 你的笔记与图片本体。

发布完成后刷新站点即可看到画廊效果；由于缓存原因，可能需要进行硬刷新（CMD + Shift + R）或等待几分钟让缓存失效。

publish.js 的缩放实现原理

从 docs/publish.js 源码可以还原图片缩放的核心调用链：

1. 通过publish.registerMarkdownPostProcessor注册 Markdown 后处理钩子，在每个页面渲染完成后扫描.internal-embed元素，并只保留src以.jpg|jpeg|png|gif|bmp|svg结尾的本地图片；
2. 为每个图片注册click事件：点击时克隆当前图片节点并放入一个position:fixed、全屏铺满的lightbox容器（背景使用 CSS 变量--img-zoom-background，默认半透明黑）；
3. 注册全局keydown监听，支持Escape关闭、ArrowLeft/ArrowRight在图片间切换，并拦截ArrowUp/ArrowDown防止页面滚动；
4. 针对触屏设备，监听touchstart/touchend，以 50px 的滑动阈值实现左右滑动手势翻页；
5. 图片按页面路径（publish.currentFilepath）分组缓存在imagesByPath对象中，同一页面的图片构成一个轮播组，超过末尾时取模循环。

这套代码是独立于主题的，官方指南也建议其他 Publish 主题可以直接借鉴此 CSS 与 JS 逻辑，将其适配到自己的主题中。

浏览器兼容性提示

图片网格与卡片布局等能力在发布版中依赖较新的 CSS 特性：

• :has()选择器：Image grids 文档 明确说明，图片网格与 Publish 版兼容，但它使用了较新的 CSS:has()选择器，在旧浏览器上不可用。部署前应对目标访客群体的浏览器版本做评估；
• 图片网格仅在阅读视图生效：在桌面应用中，图片网格只出现在阅读视图，Live Preview 与 PDF 导出不支持，建议通过源码模式编辑网格布局。该限制同样适用于发布站点中对应的渲染行为。

限制与注意事项

• 文件位置敏感：publish.css必须放在仓库根目录并随站点发布，否则主题不会生效；
• 图片缩放依赖本地资源：publish.js的灯箱代码仅处理本地图片嵌入（.internal-embed），远程图片链接不会被缩放处理；
• 主题维护成本：与桌面版一致，Minimal Publish 会修改 Obsidian 界面的大量样式，可能随 Obsidian 更新或与其他自定义 CSS 产生冲突；本主题面向 macOS 上的个人使用场景开发，官方并未承诺覆盖所有操作系统与使用场景。

总结

Minimal Publish 用约 16KB 的publish.css将 Minimal 的设计语言完整迁移到 Obsidian Publish 站点：13 种配色方案开箱即用，cssclasses前置属性让卡片、图片网格、表格样式等能力可以按笔记粒度组合启用，而publish.js则为图片画廊提供了点击放大、键盘与手势翻页的完整交互。无论是搭建个人知识库站点、作品集还是图片画廊，这套轻量方案都能在保持快速加载的同时，提供接近桌面端体验的阅读效果。若需进一步了解配色自定义与样式细节，可继续阅读仓库中的 Color schemes 文档、Helper classes 文档 与 Style Settings 文档。

• 前端
• 设计系统