obsidian使用技巧
Obsidian 主页制作小教程
2024-01-23 00:26
分类:
obsidian使用技巧
余月鱼鸽
分享
余月鱼鸽
于
2024-01-23 00:26
发布
分享
分类专栏：
obsidian使用技巧
文章标签：
#Obsidian
#Obsidian插件
复制成功，开始分享吧
插件ID：obsidian-%E4%B8%BB%E9%A1%B5%E5%88%B6%E4%BD%9C%E5%B0%8F%E6%95%99%E7%A8%8B
%E4%B8%BB%E9%A1%B5%E5%88%B6%E4%BD%9C%E5%B0%8F%E6%95%99%E7%A8%8B
%E4%B8%BB%E9%A1%B5%E5%88%B6%E4%BD%9C%E5%B0%8F%E6%95%99%E7%A8%8B：Obsidian 主页制作小教程
Obsidian 主页制作小教程
Obsidian 主页简介
@熊猫别熬夜 发现了：
Obsidian样式-调整图片不同布局样式
Obsidian样式-minimal主题Cards卡片布局
这两个 css 的搭配的妙用：
经过一小段时间的折腾后，我搭配出了一个 moc 主页，具体效果可见下方：
浅色模式：
深色模式：
制作教程
Obsidian 主页的制作方法，大致为以下 4 个步骤：
配置头图
制作标题栏
制作 moc 卡片
微调界面细节
1.配置头图
这个步骤使用的是 Obsidian Banners 插件，该插件可以将库内图片，甚至是外部图片链接变为笔记中的头图。
具体使用方法：在 YAML 区添加 banner 相关的参数即可：
这样切换到阅读模式，我们就能收获到一个有头图的文件：
Tip ：
除使用库内图片，也可以使用 bing 的每日一图，将 https://api.dujin.org/bing/1366.php 作为图片路径，每天重登 obsidian 即可收获不一样的头图
更新 1.4.x 之后，很多人因为使用了 banner 插件，还有 properties 新核心插件而出现了高度问题，会出现莫名的留白，这个文档提供了解决方案：Obsidian 样式：修复 banner 和 Properties 高度冲突以及多余留白改善
更多的 banner 插件使用小技巧可以见： Obsidian 插件：Obsidian Banners 为你的笔记添加头图
2. 制作标题栏
标题栏的部分主要用到两个插件：
button 插件，主要用来添加快捷打开的 project 的按钮，网站上的文章：Obsidian 插件：Buttons 美化必备的按钮插件 解释得挺详细的，此处就不展开了
本主页主要用 dataview 插件，统计本文本库的文件、标签数量。安装 dataview 插件后，直接将这段 dataviewjs 代码区域中复制到文件中即可。
dataviewjs 代码：
```dataviewjs
let ftMd = dv.pages("").file.sort(t => t.cday)[0]
let total = parseInt([new Date() - ftMd.ctime] / (60*60*24*1000))
let totalDays = " 您已使用 *Obsidian* "+total+" 天，"
let nofold = '!"misc/templates"'
let allFile = dv.pages(nofold).file
let totalMd = "共创建 "+
allFile.length+" 篇笔记"
let totalTag = allFile.etags.distinct().length+" 个标签"
dv.paragraph(
totalDays+totalMd+"、"+totalTag+""
)
```
Tip ：本段代码摘抄自 bt 示例库。
稍微加上一些文字、以及分割符做装饰，我们的主页已经进化到以下效果：
3. 制作 moc 卡片
3.1 将 css 片段导入文库内
Tip ：第一次接触 css 的新手可以看一下这个文章：Obsidian 的 CSS 代码片段
本步骤主要使用 3 种 css 片段，分别为：
Obsidian样式-调整图片不同布局样式
Obsidian样式-minimal主题Cards卡片布局
界面全宽显示，来源是 @熊猫别熬夜 ，在网站上没搜到对应的文章，具体 css 代码可以直接在下方复制：
/* !关闭显示标题栏：colse_show_title */
.colse_show_title.markdown-preview-view .mod-header .inline-title {
display: none;
line-height: 0px;
}
.view-content .colse_show_title .inline-title {
display: none;
}
/* !设定界面宽度全宽：full_width_page*/
.full_width_page.markdown-source-view.mod-cm6.is-readable-line-width,
.full_width_page.markdown-preview-view {
--file-line-width: 100% !important;
}
/* 设定字体大小 */
.full_width_page.markdown-preview-view {
font-size: 22px !important;
line-height: 150%;
}
3.2 制作 moc 卡片
3.2.1 在文件属性区域的【 cssclasses 】添加 list-cards 以及 colse_show_title 两个参数：
list-cards ：这个参考可以让文件中的无序列表变为卡片视图
full_width_page：让界面进入全宽模式
colse_show_title：如果设置了显示页内标题，则该 CSS 可以关闭显示
3.2.2 开始配置
在文件中添加一组无序列表，具体格式为：
其中，图片部分的格式为 "!" + "[[" + "图片名" + "#L" + "|" + "图片大小" + "]]" ， 意思是将图片变为 200 x 135 大小后，放在这个无序列表的左边。同理，若想将图片放在右边，将上述格式的 "#L" 变更为 "#R" 即可。
Tip ：建议使用背景透明的 png 图，在这类图片能比较好地兼容浅色模式与深色模式；
成功实现一组无序列表后，按同样的方式复现几组，即可得到一个接近于完工的界面啦~
Tip ：一般推荐一行放 4 个以内的无序列表，文本太长，或者显示器的分比率不高的情况下，很可能出现侧边栏出现时，会有字体换行的情况：
4. 微调界面细节
4.1 添加装饰图片
目前主页的效果已经比较接近于示例图了，相比之下，少了以下几个小图标：
图片部分的格式依旧为： "!" + "[[" + "图片名" + "#L" + "|" + "图片大小" + "]]" ，其中两个比较小的图案设置为: 30 ，比较大的图案设置为 200x135。
至此，主页制作的效果层面的内容基本已经完成。
4.2 设置启动 Obsidian 时，自动打开主页
此步骤属于锦上添花系列，大家可以根据自己的实际需求设置。 Obsidian 的 Homepage 插件，可以让我们在启动软件时，就默认打开我们设计好的软件（不用在文件夹中捞半天）
以下是我的插件设置，大家可以参考一下：
讨论
若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。
#Obsidian
#Obsidian插件
余月鱼鸽12篇文章
分享
反馈交流
AI 客服
QQ群
微信群
其他渠道
版权声明
版权声明：所有 PKMer 文章如果需要转载，请附上原文出处链接。
本文链接：https://pkmer.cn/show/20240115155129