前端设计系统【免费下载链接】obsidian-minimalA distraction-free and highly customizable theme for Obsidian.项目地址https://gitcode.com/gh_mirrors/ob/obsidian-minimal点击查看免费下载导读Minimal Publish 是开源仓库 obsidian-minimal 为 Obsidian Publish 站点推出的精简版主题它继承 Minimal 桌面版的核心设计原则无干扰、高度可定制但针对 Web 阅读场景做了体积与加载速度的专项优化。阅读本文后你将掌握如何在 Obsidian 仓库中安装并发布publish.css、在 13 种配色方案间选择切换、用 YAML 前置属性调用卡片 / 图片网格 / 表格样式等 helper classes以及通过publish.js为发布站点构建可缩放图片画廊的完整方案。什么是 Minimal Publish为 Web 阅读而生的精简版 MinimalMinimal 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 站点只需三步从下方“配色方案下载”一节选择任一链接下载主题文件即某个配色版本对应的publish.css将publish.css文件复制到你的Obsidian 仓库根目录在 Obsidian Publish 中发布publish.css文件。发布完成后访问者打开你的站点即可加载该主题。需要特别留意的是文件位置——publish.css必须位于仓库根目录而不是某个子文件夹这与 Obsidian Publish 对自定义 CSS 的加载约定一致。本仓库的 docs/publish.css 即为官方发布版样式的完整副本可直接参考其内容结构。13 种配色方案下载Minimal Publish 提供13 种配色方案均针对 Obsidian Publish 做了加载优化对应的发布文件存放在独立的color-schemes目录中。所有配色都以同样的publish.css文件名为出口下载后替换仓库根目录中的同名文件即可切换主题风格配色方案说明Default默认方案也是官方站点自身使用的方案Atom源自 Atom 编辑器的配色AyuAyu 系列配色浅色 / 深色系CatppuccinCatppuccin 柔和配色Dracula经典 Dracula 暗色配色EverforestEverforest 森系配色FlexokiFlexoki 暖调配色GruvboxGruvbox 复古配色macOSmacOS 原生风格配色NordNord 极简冷调配色SkySky 天空系配色Rosé PineRosé Pine 蔷薇粉配色SolarizedSolarized 经典科研配色ThingsThings 任务管理工具风格配色从当前仓库源码结构看桌面版在 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 的 400H5/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高亮五组变量为核心变量组浅色模式.theme-light深色模式.theme-dark背景bg1/bg2/bg3#FFF/#F5F5F5/#E5E5E5#262626/#212121/hsla(0,0,55%,12%)界面ui1/ui2/ui3#E6E6E6/#D6D6D6/#C2C2C2#333333/#3B3B3B/#595959文本tx1/tx2/tx3#0F0F0F/#828282/#B5B5B5#D1D1D1/#999999/#595959强调ax1/ax2/ax3#6A8695/#556B77/#889EAA#889EAA/#ACBBC3/#67808E高亮hl1hsla(201,50%,40%,30%)hsla(201,70%,40%,30%)此外还定义了--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-gridimg-grid将连续排列的图片自动转为列要另起一行只需在图片之间额外插入一个空行。发布版的实现依赖 CSS:has()选择器见下方“浏览器兼容性”并在.markdown-preview-section内将相邻图片放入display:grid容器Class说明img-grid激活图片网格模式图片网格全局开关与图片宽度循环切换也可通过 Minimal Theme Settings 插件或快捷键控制详见 Image grids 文档。表格 / 图片 / iframe 的宽度控制Class说明table-100、img-100、iframe-100元素填满窗格 100% 宽度table-max、img-max、iframe-max元素填满最大行宽默认约 88%table-wide、img-wide、iframe-wide元素填满宽行宽卡片布局cardscards将 Dataview 表格转换为卡片布局可与表格宽度类组合使用。注意cards必须在场其他卡片修饰类才生效Class说明cards必需将笔记内所有 Dataview 表格设为卡片布局cards-align-bottom卡片内最后一个元素对齐到底部cards-cover图片缩放填满定义空间cards-16-9卡片图片按 16:9 比例适配cards-1-1卡片图片按 1:1 方形适配cards-2-1卡片图片按 2:1 比例适配cards-2-3卡片图片按 2:3 比例适配cards-cols-1到8强制指定 1 至 8 列卡片还支持list-cards将无序列表转为卡片。从发布版源码看卡片实现在底层复用了表格结构thead被隐藏、tbody以grid-template-columns: var(--cards-columns)排布、每行tr变为纵向 flex 容器并带圆角与悬停阴影。可参考 movie-gallery.png 了解卡片在个人电影数据库场景下的实际效果。表格与 Dataview 行 / 列样式Class说明table-nowrap表格单元格内禁用换行table-wrap表格单元格内强制换行table-numbers为表格添加行号table-tabular表格内使用等宽数字tabular figurestable-small表格使用小号字体table-tiny表格使用更小号字体table-lines为所有单元格添加边框row-lines在表格行之间添加边框col-lines在表格列之间添加边框row-alt交替行添加条纹背景col-alt交替列添加条纹背景从 docs/publish.css 的规则可以看出row-lines与col-lines通过给td设置border-bottom/border-right实现分隔线table-numbers则借助 CSS 计数器counter-increment在首列渲染行号row-alt通过--table-row-alt-background变量控制条纹色。嵌入与转译embedsClass说明embed-strict转译内容无缝融入正文文本流图片滤镜在发布版中还保留了桌面端常见的图片滤镜用法——把滤镜名追加到图片链接末尾即可例如![[image.jpeg#invert]]滤镜说明#invert深色模式下反转图片适合浅底图表与手写内容#invertW浅色模式下反转图片适合深底图表与手写内容#circle将图片裁剪为圆形#outline为图片添加轮廓边框用 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 源码可以还原图片缩放的核心调用链通过publish.registerMarkdownPostProcessor注册 Markdown 后处理钩子在每个页面渲染完成后扫描.internal-embed元素并只保留src以.jpg|jpeg|png|gif|bmp|svg结尾的本地图片为每个图片注册click事件点击时克隆当前图片节点并放入一个position:fixed、全屏铺满的lightbox容器背景使用 CSS 变量--img-zoom-background默认半透明黑注册全局keydown监听支持Escape关闭、ArrowLeft/ArrowRight在图片间切换并拦截ArrowUp/ArrowDown防止页面滚动针对触屏设备监听touchstart/touchend以 50px 的滑动阈值实现左右滑动手势翻页图片按页面路径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 文档。赞分享前端设计系统【免费下载链接】obsidian-minimalA distraction-free and highly customizable theme for Obsidian.项目地址https://gitcode.com/gh_mirrors/ob/obsidian-minimal点击查看免费下载相关推荐Obsidian Minimal与Obsidian Publish如何为发布站点定制主题Obsidian Minimal与Obsidian Publish如何为发布站点定制主题 Obsidian Minimal主题为Obsidian Publis前端设计系统Obsidian Minimal主题终极配置指南Obsidian Minimal主题终极配置指南 你是否曾经因为Obsidian默认界面的视觉疲劳而感到困扰是否想要一个既简洁又高度可定制的笔记环境Obsi前端设计系统Obsidian Minimal 主题安装和配置指南Obsidian Minimal 主题安装和配置指南 项目基础介绍和主要编程语言 Obsidian Minimal 是一个为 Obsidian 笔记应用设计的主前端设计系统上一篇Modin Batch Pipeline API 实战指南用 Ray 引擎流水线化行并行批查询下一篇best-of-ml-python 周报解读2024-04-04 更新的机器学习 Python 库趋势与质量评分机制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考