用obsidian的admonition+callout联手,纯css实现瀑布流,仿经卷,康奈尔,随附admonition改造记

3月底爬论坛看到有人提到瀑布流,查了一下,绝大部分用js实现,本菜不懂编程,想做可眼高手低,只能搁浅,上礼拜ob升级最新版,支持callout,感觉结构挺适合做,又燃起一丝魔改欲望,于是试写css,用旧admonition搭配新callout,做成了瀑布流,仿经卷,康奈尔 :partying_face:
旧版admonition也做了小小改造 :laughing:
欢迎mn友友来ob论坛串门子鸭 :smiling_face_with_three_hearts:

:tada:admonition+callout联手,纯css实现瀑布流,仿经卷,康奈尔,随附admonition改造记 - 经验分享 - Obsidian 中文论坛





可以配合quickadd的capture一键创建语录 :blush:


推荐使用[picsum.photos](https://picsum.photos)作题图,或者背景图,速度快,定制灵活

长宽需取整数,每次写不同的值,如 403/329,278/462,返回的图源才不会相同重复
api图不长久存本地,每次开瀑布流的page都会整屏刷新(每次都能看一批全新的 :yum:),用流量的要适度选择是否写入题图,capture的第①第②个变量设定题图长宽,可以留空(直接点击ok,跳过),只写第三个
瀑布流防止过长,每次一页一次性载入图片太多,可以定为一月一版,capture里也设好了templater模板,可以每月自动生成


想要用图源作背景图的,也写了另外一段代码



callout竖放感觉挺像古籍,开合的动画也有点经卷舒展收合的意思,就顺道做了个ob版诵经本


仿经卷模仿自自己用word做的抄经簿模板 :rofl:

还参考了惊艳得让人咋舌的龙鳞装



嫌旧版admonition折起来还是比较占地儿,动了一下手脚,让它不展开就靠边儿站

collapse to icon size,unfold to full width


也定制了specific width的callout,宽度为40%




最后出场,是最没分量的康奈尔,应企鹅群友友做的 :face_with_peeking_eye:

最终提供分割线版,样式结构更简洁

私心多分享个龙鳞装的顶级装帧

用瀑布流还可以做百科展窗

诗行的收集

还可以吸喵吸汪吸一切非人类 :rofl:










补充一个康奈尔

Cornell

collapse to icon

1 个赞

「门体分流性脑病」用的是什么字体 好好看

b站大佬BeiCxxx出品
【新字】现代风格的屏显宋体|咒术回战

这个帖子我是没想到有人来光顾,只是借mn论坛放个备份文档而已 :rofl:

1 个赞

你好,ob论坛的链接看不到额

大佬好,那个OB中文论坛的帖子没了。。。这个实在哎漂亮了,求教程。。。

大佬好,那个OB中文论坛的帖子没了。。。这个实在哎漂亮了,求教程。。。

ob那边我让管理员下架了 :rofl:
mn这边只是做一个备份,没想到会有人纷至沓来 :crazy_face:

这个没啥意思,ob论坛那边让管理员下架帖子了
代码写得多又乱,懒得整理 :rofl:

当然,实在太漂亮了,求发教程链接或者模板链接 :grinning: :heart:

代码写得太乱了,目前懒得整理 :sweat_smile:
想要哪一种?或者过些时候私信你?
大佬您在ob企鹅群吗

大佬的经卷那个太美啦,同抄经诵经爱好者。。我读的是金刚经和地藏经,想用这种整合在OB里,好美好美呀。。。
QQ群我不在呀,我几乎不用QQ啦

有在一个企鹅群obsidian 我qq号qq23255864,可以的话私信,谢谢

要不到时把经卷的代码整理一下,打包成库给你 :grimacing:
这段时间学习忙些,得稍等等哈

最近学习有点忙,过阵子我到q群打卡再会一会大佬哈 :sweat_smile:

我都想要哈,我不是大佬,刚入门的新人 :yum:

界面设计的真漂亮,我也恳求一份代码作为学习用 :blush:,我的邮箱是30758989@qq.com