PKMer | 您所在的位置:网站首页 › 修改主页照片 › PKMer |
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 示例库。 稍微加上一些文字、以及分割符做装饰,我们的主页已经进化到以下效果: 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 两个参数: 3.2.2 开始配置 在文件中添加一组无序列表,具体格式为: 其中,图片部分的格式为 "!" + "[[" + "图片名" + "#L" + "|" + "图片大小" + "]]" , 意思是将图片变为 200 x 135 大小后,放在这个无序列表的左边。同理,若想将图片放在右边,将上述格式的 "#L" 变更为 "#R" 即可。 Tip :建议使用背景透明的 png 图,在这类图片能比较好地兼容浅色模式与深色模式; 成功实现一组无序列表后,按同样的方式复现几组,即可得到一个接近于完工的界面啦~ Tip :一般推荐一行放 4 个以内的无序列表,文本太长,或者显示器的分比率不高的情况下,很可能出现侧边栏出现时,会有字体换行的情况: 目前主页的效果已经比较接近于示例图了,相比之下,少了以下几个小图标: 图片部分的格式依旧为: "!" + "[[" + "图片名" + "#L" + "|" + "图片大小" + "]]" ,其中两个比较小的图案设置为: 30 ,比较大的图案设置为 200x135。 至此,主页制作的效果层面的内容基本已经完成。 4.2 设置启动 Obsidian 时,自动打开主页此步骤属于锦上添花系列,大家可以根据自己的实际需求设置。 Obsidian 的 Homepage 插件,可以让我们在启动软件时,就默认打开我们设计好的软件(不用在文件夹中捞半天) 以下是我的插件设置,大家可以参考一下: 讨论 若阁下有独到的见解或新颖的想法,诚邀您在文章下方留言,与大家共同探讨。 #Obsidian #Obsidian插件![]() ![]() 余月鱼鸽11篇文章 分享 反馈交流AI 客服 QQ群
微信群
版权声明:所有 PKMer 文章如果需要转载,请附上原文出处链接。 本文链接:https://pkmer.cn/show/20240115155129 |
CopyRight 2018-2019 实验室设备网 版权所有 |