Modular CSS Layout for Obsidian 技术文档

最新推荐文章于 2024-10-18 12:35:35 发布

原创最新推荐文章于 2024-10-18 12:35:35 发布 · 1.1k 阅读

17 ·

CC 4.0 BY-SA版权

Modular CSS Layout for Obsidian 技术文档

安装指南

下载与启用

本项目实际上是一个CSS代码片段的集合，因此不需要安装，只需下载并启用即可。推荐使用Mara Li的Snippet Downloader插件进行下载，因为作者计划定期更新这些代码片段。

启用步骤

下载Snippet Downloader插件并安装。
使用该插件下载Modular CSS Layout的CSS代码片段。
在Obsidian中启用下载的CSS代码片段。

项目使用说明

宽视图（Wide Views）

宽视图代码片段允许用户在页面或笔记中指定自定义的CSS类，以实现全宽页面或块（如dataview、表格和反向链接）。用户可以通过在YAML前言中指定cssClass来实现这一功能。

示例

---
cssClass: wide-page
---

<笔记内容>

多列布局（Multi Column）

多列布局代码片段提供了多种布局方式，包括使用Callout的多列布局、使用列表的多列布局以及浮动Callout。

多列Callout示例

> [!multi-column]
>
>> [!note]+ 使用案例
>> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>> ##### 用户案例背景
>> Vitae nunc sed velit dignissim sodales. In cursus turpis massa tincidunt dui ut ornare lectus.
>
>> [!warning]+ 资源
>> #### 需求
>> - Lorem ipsum dolor sit amet
>> - Vitae nunc sed velit dignissim sodales.
>> - In cursus turpis massa tincidunt dui ut ornare lectus.
>
>> [!todo]+
>> - [x] 定义使用案例
>> - [ ] 编写用户故事
>> - [ ] 开发草图

画廊卡片（Gallery Cards）

画廊卡片代码片段提供了图像画廊、浮动图像和Mermaid图表控制等功能。

浮动图像示例

![[image.jpg|float-right-medium]]

项目API使用文档

宽视图API

cssClass: 在YAML前言中指定，用于控制页面或块的宽度。
- wide-page: 全宽页面
- wide-dataview: 全宽dataview
- wide-table: 全宽表格
- wide-callout: 全宽Callout
- wide-backlinks: 全宽反向链接

多列布局API

Callout: 使用> [!multi-column]创建多列布局。
列表: 使用#mcl/list-column等标签或Markdown Attributes插件创建多列列表。

画廊卡片API

Callout: 使用> [!NOTE|gallery]创建图像画廊。
YAML前言: 使用cssClass: image-gallery创建图像画廊。
图像alt-text: 使用[[path/to/image.jpg|alt-text]]或[alt-text](path/to/image.jpg)创建浮动图像。