灵感来自[[@宏沉一笑]]大佬。
慢慢更新，先抛砖引玉23333（坐等白嫖大家的代码）
已经更新如下：
admonition分栏
tasks 效果
dataview伪装卡片
query栏
Admonition部分
感谢 @提醒加油小助手阿菜 分享，以下admonition代码可以用如下方法实现，效果更好
通过百度得知了用
@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;
}
)
