Admonition插件分栏&伪卡片Dataview表格CSS 分享

灵感来自[[@宏沉一笑]]大佬。

慢慢更新,先抛砖引玉23333(坐等白嫖大家的代码)
已经更新如下:
admonition分栏
tasks 效果
dataview伪装卡片
query栏

Admonition部分

感谢 @提醒加油小助手阿菜 分享,以下admonition代码可以用如下方法实现,效果更好:arrow_down::arrow_down::arrow_down:

通过百度得知了用 @import 可以在css中导入另一个css
于是我在插件根目录下创建了一个adStyles.css 并将二分栏中的代码复制过去
然后在styles.css中 添加了一行@import "adStyles.css";
并且也复制了一份二分栏的代码,并且删掉了styles.css中所有的.adStyles
效果好像没啥区别,并且可以在编辑模式预览。

文字 + 空行 自动分栏

纯文字的片段实现效果如下,只需要通过空行分栏。
优点:方便
缺点:行宽需要另外设置,不然默认下宽度是跟着文字走的。

我是放进css代码片段里,也可以修改admonition目录下的style.css文件。

admonition css片段设置如下:

.admonition-自定义的名字 .admonition-content {
  display: flex;
  justify-content: space-between;

}
.admonition-自定义的名字 .admonition-content p{
  margin: 8px;
}

一个ad实现1-4栏均匀分栏

更新了一下 一个ad实现1-4栏均匀分栏的设置。
优点:分栏可控,可以自定义每一栏的范围
缺点:需要手敲 <div> </div> 。麻烦一丢丢。

使用说明:
把需要分栏的内容写在 <div> </div> 里,如图所示


css片段如下:

.admonition-自定义的名字 .admonition-content {
  width: 100%;
  margin: 0px;
	
  /*分栏*/
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  
}

.admonition-自定义的名字 .admonition-content div:nth-child(1){
  margin: 0px 4px 0px 4px;
  flex:1;
}

.admonition-自定义的名字 .admonition-content div:nth-child(2){
  margin: 0px 4px 0px 4px;
  flex:1;

}

.admonition-自定义的名字 .admonition-content div:nth-child(3){
  margin: 0px 4px 0px 4px;
  flex: 1;

}

.admonition-自定义的名字 .admonition-content div:nth-child(4){
  margin: 0px 4px 0px 4px;
  flex: 1;

}

每列间距可根据自己的需求修改 margin 属性的值。

我自己的主页用到的css片段

B站视频:OBSIDIAN主页分享,dataview+admonition+excalidraw真香_哔哩哔哩_bilibili
因为没弄明白怎么覆盖 .admonition 本身的css片段,目前使用YAML中添加 cssclass: 的方法,只用在预览模式生效
打包了一个演示库,有疑问的部分可以直接查看 链接: https://pan.baidu.com/s/1b9MRbt3-1fDp3bYJ9SZ1hw 密码: 0gfk

(慢慢脱水更新ing)
将css片段命名为 adStyles (或者自己改名字,记得代码里跟的是自己设置的名字),在Yaml里添加如下信息:

---
cssclass: adStyles
---

二分栏板块部分

/*---------------------*/
/*---自用的2分栏主页-----*/
/*---------------------*/

/*---去除背景---*/
.adStyles .admonition-column {
  background-color: unset;  
  box-shadow: unset;
}
  
.adStyles .admonition-column .admonition-content{
  margin: 0;
  height: auto;
  
  display: flex;
  justify-content: space-between;
}
  
/*---模仿我的notion标题色彩---*/
.adStyles .admonition-column h1,
.adStyles .admonition-column h2,
.adStyles .admonition-column h3,
.adStyles .admonition-column h4,
.adStyles .admonition-column h5,
.adStyles .admonition-column h6{
  color: #37352F;
  background-color: #ECF3ED;
  margin: 2px 0px 2px 0px;
  padding: 2px 2px 2px 4px;

}

  
  
/*---Flexbox设置---*/
  
/*---第一栏---*/
.adStyles .admonition-column .admonition-content div:nth-child(1){
  flex: 1 2;
  margin-right: 6px;
}
.adStyles .admonition-column .admonition-content div:nth-child(1) p{
  margin: 0;
}

/*---第二栏---*/
.adStyles .admonition-column .admonition-content div:nth-child(2){
  flex: 3 1;
}
  
 

/* --- 导航链接效果 --- */
.adStyles .admonition-column .admonition-content >div:nth-child(1) a:link, a:visited {
  color: #37352F;
  background-color: #f7f7f7;
  width: 100%;
  font-weight: bolder;
  font-size: 1em;
  margin: 1px 0px 1px 0px;
  padding: 4px 4px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
}
  

.adStyles .admonition-column .admonition-content >div:nth-child(1) a:hover {
  color: rgb(93, 64, 151);
  background-color: #f6faf6;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .15);
  transform: translate(0,-2px);
  transition-delay: 0s !important;
}

任务板块部分

由admonition配合tasks插件使用
由于我添加了隐藏 tag 的代码,希望在特定页面不显示tasks中的tag,所以tasks我也用 cssclass 单独添加
在Yaml里添加如下信息:

---
cssclass: adStyles, tasksGlass
---

tasks部分css如下

/*---添加玻璃效果*/
.tasksGlass .block-language-tasks{
  width: auto;
  color: #1c2220;
  background-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .1);
  padding: 0px 0px 10px 0px;
  border-radius: 4px;
  overflow-y: auto;

}

/*---排版微调---*/
.tasksGlass .plugin-tasks-query-result  {
  padding: 0px 4px 4px 24px;
  margin-bottom: 4px;
  margin-left: 0px;
  padding-bottom: 8px;
  border-radius: 4px;
  
}

.tasksGlass .task-list-item-checkbox {
  position: relative;
  margin: 0px;
}

/*---隐藏tag---*/
.tasksGlass a.tag{
  display: none;
}

admonition部分css如下,我在admonition里单独又改了一部分tasks的效果,在有限空间里排版更紧凑,如果不需要可以删除这部分。

.adStyles .admonition-自定义的名字 .admonition-content-holder{
  margin: 0;
}
.adStyles .admonition-自定义的名字 .admonition-content {
  /*背景自定义*/
	background-image: url(https://tscdn.lanhuapp.com/pro/image/83231c2f-906d-4f98-bf38-d5a39b32668b.png);
	background-size: cover; 
	padding: 8px;
	margin: 0px;
	height: 280px;

  overflow: hidden; /*溢出隐藏*/
  /*分栏*/
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

/*---标题文字颜色---*/
.adStyles .admonition-自定义的名字 h1,
.adStyles .admonition-自定义的名字 h2,
.adStyles .admonition-自定义的名字 h3,
.adStyles .admonition-自定义的名字 h4,
.adStyles .admonition-自定义的名字 h5,
.adStyles .admonition-自定义的名字 h6{
  margin: 4px;
  color: rgb(150, 92, 18);
}
  

/*---Flexbox 三栏平分设置 flex:1 ---*/
.adStyles .admonition-自定义的名字 .admonition-content  div:nth-child(1){
  margin: 4px;
  flex:1;
}

.adStyles .admonition-自定义的名字 .admonition-content >div:nth-child(2){
  margin: 4px;
  flex:1;
}

/*---第三列自用右下角文字---*/
.adStyles .admonition-自定义的名字 .admonition-content > div:nth-child(3){
  margin: 4px;
  flex:1;
  text-align: right;
  align-self: flex-end;
}

/*隐藏标题和copy设置*/
.adStyles .admonition-自定义的名字 .admonition-title,
.adStyles .admonition-自定义的名字 .admonition-title-copy{
	display: none;
}


/*---ad里的tasks部分---*/
/*--高度---*/
.adStyles .admonition-自定义的名字 .block-language-tasks{
  height: 230px;
}

/*---让ad里的tasks看起来更紧凑---*/
.adStyles .admonition-自定义的名字 .plugin-tasks-query-result{
  margin: 0px;
  
}

dataview 部分的css

实现效果如图

为了不影响其他表格,还是用 cssclass 单独添加

---
cssclass: dvTable
---

css如下:


/* --------------------------------------------   */
/*                    dvTable                     */
/* --------------------------------------------   */

/*---table整体属性---*/
.dvTable .table-view-table{
    display: block;
	white-space: nowrap;
	/*横向溢出*/
	overflow:auto;
	overflow-y: hidden;
	overflow-x: scroll;
	white-space: nowrap;

    font-size: 0.8em;
}


/*---隐藏标题栏---*/
.dvTable .table-view-table thead{
    display: none;
}


/*横向显示表格 */
.dvTable .table-view-table tr{
    display: inline-block;
}

.dvTable .table-view-table td{
	display: block;
	
}

/* ---table 伪装表格的边框--- */
.dvTable .table-view-table td {
    border-style: none solid none solid;
    border-color: #d8d8d8;
    border-width: 0.2px;
    height: 20px;
    width: 180px;
    background-color: rgb(255, 255, 255);
    text-align: center;
    padding: 0px 10px 0px 10px;
    margin: 0px 8px 0px 8px;
    

    /*文字溢出省略*/
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* ---首行--- */
.dvTable .table-view-table td:first-child{
	border-style: solid ;
	border-color: #d8d8d8;
	border-width: 0.2px;
	height: 166px; /*高度自定义*/
	border-radius: 4px 4px 0px 0px;
	padding: 10px;
	
}

/* ---尾行--- */
.dvTable .table-view-table td:last-child{
	border-style: none solid solid solid ;
	border-color: #d8d8d8;
	border-width: 0.2px;
	height: 40px; /*高度自定义*/
	border-radius: 0px 0px 4px 4px;
	padding-bottom: 10px;
	
}

/* ---- 末尾button覆盖居中 ----*/
.dvTable .table-view-table td:last-child button {
    color: var(--text-normal);
    background-color: var(--interactive-normal);
    border-radius: 4px;
    border: none;
    padding: 6px 20px;
    cursor: pointer;
    margin-right: 0px;
    font-family: 'Inter', sans-serif;
    outline: none;
    user-select: none;
}

/* --- 链接部分效果 ---*/
.dvTable .table-view-table a:link,
.dvTable .table-view-table a:visited {
  color: #2a103f;
  font-weight: bolder;
  font-size: 1em;
  margin: 0;
  padding: 4px 4px;
  text-align: left; 
  text-decoration: none;
  display: inline-block;
  text-overflow: ellipsis;
}

.dvTable .table-view-table a:hover{
	color: #7552c5;
	font-weight: bolder;
	font-size: 1em;
	margin: 0;
	padding: 4px 4px;
	text-align: left; 
	text-decoration: none;
	display: inline-block;
	text-overflow: ellipsis;

}
  
8 个赞

插件:react component
优点:高度定制化,所有自定义选项都可在代码中控制,或者在使用的时候传入。且易白嫖(分享 :stuck_out_tongue_closed_eyes:)
缺点:排除不会写代码,没有缺点。

源码+使用时的代码框

源码+效果

4 个赞

从b站来的,催更催更

请问通过flex实现是什么意思呢,我在snippet中添加了这个片段,但是还是没有分栏效果,请问是有一些前置的设置我没有注意吗

请问,自己定义的名字需要每个都不一样吗,还是每个都一样。
定义的这个名字需要和css的名称同样吗,还是需要和在admonition中设置的ad-xxx一样呢

一套ad下面是一样的,根据你在admonition里设置的名字来。
例如你ad设置完,平时是输入 ad-笔记 ,css里就是 admonition-笔记

您好,我的分栏设置如下,好像有地方不对,导致分栏失败了,您能帮忙看一下吗:
笔记页面preview:

笔记页面:


css文件夹命名:
image
css文件内容:

Admonition中的设置:

通过百度得知了用 @import 可以在css中导入另一个css
于是我在插件根目录下创建了一个adStyles.css 并将二分栏中的代码复制过去
然后在styles.css中 添加了一行@import "adStyles.css";
并且也复制了一份二分栏的代码,并且删掉了styles.css中所有的.adStyles
效果好像没啥区别,并且可以在编辑模式预览。 :grinning:

至于那两个css中哪些能删我就不清楚了,有没有什么bug也不清楚。。只是运气试了下 :grinning:

1 个赞

好棒,我也试一下~~~

upup,能否放出相应的代码呢,或者是页面的preview

我也在想要不放一个演示库。。。研究一下怎么弄

2 个赞

十分期待,非常期待:)

裂了的图我先补在这里,这是正文dataview效果的示例:

没看明白,这些代码放在哪里

感谢分享,可是我用了之后还是不显示图片,可能是我图片链接的格式不对,请问您能分享一下书籍本身页面的preview吗

从设置进入是在 外观>CSS代码片段里
具体文件夹位置在库目录隐藏文件.obsidian/snippets 里

多谢回复,不过还是没搞明白 :joy:

额,已经说的很清楚了
文件层级如下
你的笔记库

  • .obsidian(这个是配置文件夹)
    |- themes(这个是主题文件夹,下载的社区主题也在这里)
    |- snippts(这个是css片段文件夹)
    你的其他笔记.md

上面两个文件夹themes和snippts里面都是.css做后缀的文件,即主题文件。可以用记事本打开。
楼主上面给出的代码就是css代码,复制下来粘贴到一个txt文件中,更改后缀名为css。
把这个css文件放到snippts文件夹中。在设置/外观中即可启用该css片段

是按这个操作的,还是没有成功,不知道问题出哪里了,还是等啥时候有大佬放个演示版出来,再看吧,多谢各位指导

你好, 请问如何去除admonition代码块在编辑模式下的这个空白, 能帮忙看一下吗, 自己折腾好久没能实现.
图片
我自己尝试了如下css代码, 但是下padding设成负的反倒加大了空白, 不知为何, 设成0已经是最小空白了.

.cm-preview-code-block.cm-embed-block.admonition-parent.admonition-note-parent {
  padding: 0px 4px 0px; /*上 左右 下*/
}