【代码片段分享】思源笔记用到现在积累的所有代码片段

本贴最后更新于 240 天前,其中的信息可能已经时移世异

方法

自制 CSS 片段的一种方法:标题字形的加粗和字号怎么修改?

片段

在用:

去除图片后的多余空行 CSS 片段

链滴:代码片段解决图片插入后默认新增一行以输入文字的问题

/* 去除图片后的多余空行 CSS片段 */
.b3-typography .img:not([style]), .protyle-wysiwyg .img:not([style]) {
   display:inline-block;
}
类似 logseq 的层次子弹线 CSS 片段

链滴:有没有大佬能写一个类似 logseq 的层次子弹线 css 片段

配套:类似 logseq 的层次子弹线 JS 片段

/* 类似 logseq 的层次子弹线 CSS片段 */
/* REF https://github.com/svchord/Rem-Craft */
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action{
    color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action svg{
    margin:0;
    width:16px;
    height:16px;
    padding:0px 0px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li::after{
    content:"";
    display:block;
    position:absolute;
    pointer-events:none;
    width:34px;
    left:-18px;
    top:-20px;
    border-style:solid;
    border-color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:not(:has(.block-focus))::after{
    bottom:-2px;
    border-width:0 0 0 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{
    height:38px;
    border-radius:0 0 0 8px;
    border-width:0 0 2px 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)~.li:not(:has(.block-focus))::after{
    border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=o]::after{
    width:24px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=t]::after{
    width:28px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]::after{
    content:"";
    display:block;
    position:absolute;
    pointer-events:none;
    width:34px;
    left:-18px;
    top:-20px;
    border-style:solid;
    border-color:rgb(70, 110, 220);
    top:20px;
    height:calc(100% + 4px);
    border-width:0 0 0 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]:has(+.list)::after{
    height:auto;
    bottom:0
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id][data-type=NodeHeading]::after{
    top:0;
    height:185%
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)~[data-node-id]::after{
    border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[fold="1"]>[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus):has(>.block-focus)>[data-node-id]::after{
    border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li::after{
    top:-10px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{
    height:28px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action{
    color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action svg{
    margin:0;
    width:14px;
    height:14px;
    padding:0px 0px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li::after{
    top:-14px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{
    height:32px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus).protyle-task--done>.list:has(.block-focus)>.li::after{
    border-color:rgba(139, 139, 139)
}
类似 logseq 的层次子弹线 JS 片段

链滴:有没有大佬能写一个类似 logseq 的层次子弹线 css 片段

配套:类似 logseq 的层次子弹线 CSS 片段

/* 类似 logseq 的层次子弹线 JS片段 */
/**
 * 获得指定块位于的编辑区
 * @params {HTMLElement}
 * @return {HTMLElement} 光标所在块位于的编辑区
 * @return {null} 光标不在块内
 */
function getTargetEditor(block) {
    while (block != null && !block.classList.contains('protyle-wysiwyg')) block = block.parentElement;
    return block;
}

/**
 * 获得焦点所在的块
 * @return {HTMLElement} 光标所在块
 * @return {null} 光标不在块内
 */
function getFocusedBlock() {
    if (document.activeElement.classList.contains('protyle-wysiwyg')) {
        let block = window.getSelection()?.focusNode?.parentElement; // 当前光标
        while (block != null && block.dataset.nodeId == null) block = block.parentElement;
        return block;
    }
}

function focusHandler() {
    /* 获取当前编辑区 */
    let block = getFocusedBlock(); // 当前光标所在块
    /* 当前块已经设置焦点 */
    if (block?.classList.contains(`block-focus`)) return;

    /* 当前块未设置焦点 */
    const editor = getTargetEditor(block); // 当前光标所在块位于的编辑区
    if (editor) {
        editor.querySelectorAll(`.block-focus`).forEach((element) => element.classList.remove(`block-focus`));
        block.classList.add(`block-focus`);
        // setSelector(block);
    }
}

function bulletMain() {
    // 跟踪当前所在块
    window.addEventListener('mouseup', focusHandler, true);
    window.addEventListener('keyup', focusHandler, true);
}

(async () => {
    bulletMain();
    console.log('加载子弹线成功')
})();
文件树缩进线&笔记本区隔 CSS 片段

链滴:【求代码片段】如何为文件树添加缩进线

链滴:[分享] 文件树缩进线(Cliff-Dark 主题中的部分 CSS 片段)

/* 文件树缩进线&笔记本区隔 CSS片段*/
.sy__file .b3-list-item__toggle {
   padding-left:8px !important;
   padding-right:1px;
   color:#899fad; 
}

.sy__file .b3-list-item__icon {
margin-left:0px;
margin-right:0px;
padding:0px 0px;
transform:scale(0.7);
}

.sy__file .b3-list.b3-list--background ul>ul {
   border-left:1px dotted #c5d2db;
   margin:0px 0px 0px 16.5px;
}

.sy__file .fn__flex-1 {
   margin:0px;
   padding-right:5px;
}
.layout--float .file-tree {
   margin-right:5px;
}
.fn__flex-1.fn__flex-column.file-tree.sy__file .b3-list-item {
   margin-left:0px !important;
}

/* 笔记本 区隔 */
.sy__file ul.b3-list.b3-list--background {
    border-radius: 0.3em;
    margin: 6px 10px 6px 12px;
    outline: 1.5px double #5f7a8c;
    overflow: hidden;
}
调整文档树字体大小 CSS 片段

链滴:建议新增功能:文档树字体大小可单独设置,正文可滚动缩放大小

/* 调整文档树字体大小 CSS片段 */
.file-tree {
    font-size: 12px; /* 设置合适的字体大小,可以根据需要调整 */
}
多彩层级大纲 CSS 片段

链滴:【CSS 片段】多彩大纲层级

/* 多彩层级大纲 CSS片段 */
/* 相关代码来自于dark+主题作者zuoqiu-yingyi和starDust主题作者,特别感谢notion主题作者Roy,灵感来源于"思源群友" */
div.sy__outline ul {
    background-color: var(--b3-font-background1);
}

div.sy__outline ul>ul {
    background-color: var(--b3-font-background2);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul {
    background-color: var(--b3-font-background3);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul {
    background-color: var(--b3-font-background4);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background5);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background6);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background7);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background8);
    margin-left: 10px;
}

目前在用(暗黑模式):

/* 多彩层级大纲 CSS片段 */
/* 相关代码来自于dark+主题作者zuoqiu-yingyi和starDust主题作者,特别感谢notion主题作者Roy,灵感来源于"思源群友" */
div.sy__outline ul {
    background-color: #051214;
}

div.sy__outline ul>ul {
    background-color: #0d2d33;
    margin-left: 10px;
}

div.sy__outline ul>ul>ul {
    background-color: #174d57;
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul {
    background-color: #206875;
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: #278696;
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: #56878f;
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: #69878c;
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul>ul {
    background-color: #87999c;
    margin-left: 10px;
}
浮动显示大纲块标记(H1、H2…) CSS 片段

链滴:【 代码片段】啊哈哈哈代码来咯 ~~ 那你们先吃我就不打扰了哈 ~~

链滴:请问大纲中的「H2」有没有办法隐藏掉呢?

跟 隐藏大纲块标记(H1、H2…) CSS 片段 二选一

/* 浮动显示大纲块标记(H1、H2…) CSS片段 */
/* 大纲块标隐藏样式 */
/* 为大纲块标和折叠按钮调整位置 */
ul.b3-list.b3-list--background [data-subtype="h1"] .b3-list-item__toggle,
ul.b3-list.b3-list--background [data-subtype="h2"] .b3-list-item__toggle,
ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__toggle,
ul.b3-list.b3-list--background [data-subtype="h4"] .b3-list-item__toggle,
ul.b3-list.b3-list--background [data-subtype="h5"] .b3-list-item__toggle,
ul.b3-list.b3-list--background [data-subtype="h6"] .b3-list-item__toggle {
position: relative;
left: 20px;
}
ul.b3-list.b3-list--background [data-subtype="h1"] svg.b3-list-item__graphic,
ul.b3-list.b3-list--background [data-subtype="h2"] svg.b3-list-item__graphic,
ul.b3-list.b3-list--background [data-subtype="h3"] svg.b3-list-item__graphic,
ul.b3-list.b3-list--background [data-subtype="h4"] svg.b3-list-item__graphic,
ul.b3-list.b3-list--background [data-subtype="h5"] svg.b3-list-item__graphic,
ul.b3-list.b3-list--background [data-subtype="h6"] svg.b3-list-item__graphic {
opacity: 0;
position: relative;
left: -20px;
margin: 0 0 0 4px;
transition: all 300ms ease-out;
}
/*----------------------*/
/* 为大纲块标添加悬停显示效果 */
.b3-list--background .b3-list-item:hover .b3-list-item__graphic.popover__block {
opacity: 1 !important;
}
ul.b3-list.b3-list--background [data-subtype="h1"] svg.b3-list-item__graphic:hover,
ul.b3-list.b3-list--background [data-subtype="h2"] svg.b3-list-item__graphic:hover,
ul.b3-list.b3-list--background [data-subtype="h3"] svg.b3-list-item__graphic:hover,
ul.b3-list.b3-list--background [data-subtype="h4"] svg.b3-list-item__graphic:hover,
ul.b3-list.b3-list--background [data-subtype="h5"] svg.b3-list-item__graphic:hover,
ul.b3-list.b3-list--background [data-subtype="h6"] svg.b3-list-item__graphic:hover {
color: red;
}
/*----------------------*/
/* 为大纲标题项添加背景过渡效果 */
.b3-list--background .b3-list-item {
transition: all 300ms ease-out;
}
自定义标记颜色 CSS 片段

链滴:请问在思源笔记中,如何自定义 "标记" 功能的字体颜色?

链滴:标记功能怎么改外观啊

颜色在这里选:图片取色器/拾色器 - 菜鸟工具 可以调节透明度

image.png

透明的淡蓝色:#5E8CD35C

透明的淡黄色:#F9FC093B

==透明颜色的字母要大写 ↑==

/* 自定义标记颜色 CSS片段 */
:root{
--b3-protyle-inline-mark-background: #F9FC093B;
}
自定义随机头图 JS 片段

链滴:【教程】把随机题头图换成自己的图片,让思源笔记更加赏心悦目

/* 自定义随机头图 JS片段 */
(() => {
    async function 生成随机背景链接() {
        let 请求响应 = await fetch('/snippets/assets/backgrounds/')
        let 临时dom = new DOMParser().parseFromString(await 请求响应.text(), "text/html")
        let 图片链接数组 = 临时dom.querySelectorAll('a')
        let 随机链接 = 图片链接数组[Math.floor(Math.random() * 图片链接数组.length)].getAttribute("href")
        随机链接 = "/snippets/assets/backgrounds/" + 随机链接
        return 随机链接
    }
    document.addEventListener('contextmenu', 更换随机背景图)
    async function 更换随机背景图(event, 元素) {
        let 触发目标 = event.target
        if (元素) {
            触发目标 = 元素
        }
        if (触发目标.tagName == 'svg' || 触发目标.tagName == 'use') {
            更换随机背景图(event, 触发目标.parentElement)
            return
        }
        if (触发目标.classList.value == "protyle-icon b3-tooltips b3-tooltips__sw") {
            let 随机链接 = await 生成随机背景链接()
               触发目标.parentElement.parentElement.querySelector('img').setAttribute("style", '')
               触发目标.parentElement.parentElement.querySelector('img').setAttribute("src", 随机链接)
            fetch('/api/attr/setBlockAttrs',
                {
                    method: 'post',
                    body: JSON.stringify({
                        id: 触发目标.parentElement.parentElement.parentElement.getAttribute("data-node-id"),
                        attrs: { 'title-img': `background-image:url(${随机链接})` }
                    })
                }
            )
        }
    }
})()
左右移动标题位置 CSS 片段

链滴:【代码片段】突出标题

/* 左右移动标题位置 CSS片段 */
.b3-typography>.h1,
.protyle-wysiwyg>.h1 {
    margin-left: -35px; /* 负值可以根据需要进行调整 */
}

.b3-typography>.h2,
.b3-typography>.h3,
.b3-typography>.h4,
.b3-typography>.h5,
.b3-typography>.h6,
.protyle-wysiwyg>.h2,
.protyle-wysiwyg>.h3,
.protyle-wysiwyg>.h4,
.protyle-wysiwyg>.h5,
.protyle-wysiwyg>.h6 {
    margin-left: -20px; /* 负值可以根据需要进行调整 */
}
Savor 主题的多行搜索展示 CSS 片段

链滴:吹爆 savor 主题

GitHub:notion-theme/style/custom/ctrlp.css

/* Savor 主题的多行搜索展示 CSS片段 */
#searchList{
	background-color: var(--b3-theme-background);
}
.search__layout--row {
    border-top: none;
}
.search__layout{
	border-bottom: 1px solid var(--b3-theme-surface-lighter);
}
.fn__flex-column #searchList>.b3-list-item[data-type='search-item']{
	padding-bottom:20px;
	margin: 6px;
}

.fn__flex-column #searchList .b3-list-item[data-type='search-item']>.b3-list-item__meta{
	color:var(--b3-list-item--meta);
	background-color: var(--b3-list-background);
	font-size: .7rem;
	line-height: 20px;
	border-radius:4px;
	padding:0 4px;
	bottom:8px;
	right:8px;
	max-width:34vw;
	position:absolute;
	white-space:nowrap;
	overflow:hidden !important;
	text-overflow: ellipsis;
}
.fn__flex-column #searchList .b3-list-item--focus[data-type='search-item']>.b3-list-item__meta{
	background-color: var(--b3-theme-background);
}
.fn__flex-column #searchList .b3-list-item[data-type='search-item']>.b3-list-item__meta::before{
    font-size: 1em;
    line-height: 1;
	margin-right:2px;
	content: "📄";
}
.fn__flex-column #searchList>.b3-list-item+div [data-type='search-item'] .b3-list-item__graphic{
	height: 10px;
    width: 10px;
    padding: 4px;
    border-radius: 3px;
    background-color: var(--b3-list-background);
}

.fn__flex-column #searchList>.b3-list-item:not([data-type='search-item']):not([data-type="search-new"]){
	border-radius: 4px 4px 0 0;
	margin: 6px 6px 0px 6px;
	box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
	padding-left:0px;
	background-color: var(--b3-dockright-background);
}
.fn__flex-column #searchList>.b3-list-item:not([data-type='search-item']):has(+div.fn__none){
	box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
	border-radius: 4px ;
}

.fn__flex-column #searchList>.b3-list-item:not([data-type='search-item'])+div [data-type='search-item']{
	margin: 0 6px;
	border-radius: 0;
	box-shadow: rgba(15, 15, 15, 0.1) 1px 0px 0px 0px , rgba(15, 15, 15, 0.1) -1px 0px 0px 0px;
	padding-left: 30px!important;
	height:32px;
}
.fn__flex-column #searchList>.b3-list-item:not([data-type='search-item'])+div [data-type='search-item']:last-child{
	border-radius: 0 0 4px 4px;
	box-shadow: rgba(15, 15, 15, 0.1) 1px 0px 0px 0px , rgba(15, 15, 15, 0.1) -1px 0px 0px 0px, rgba(15, 15, 15, 0.1) 0px 1px 0px 0px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
}

/*.fn__flex-column #searchList>.b3-list-item:not([data-type='search-item'])+div [data-type='search-item']>.b3-list-item__text{
    margin-left: 20px;
    max-height: 89px ;
    padding:6px 0px 5px 5px;
    overflow-y: auto !important;
    text-overflow: ellipsis !important;
    line-height: 1.3;
    -webkit-box-orient: inherit;
}*/

#searchList>[data-type="search-item"]{
    display: block;
	padding-right:0px;
}


#searchList>[data-type="search-item"]>.b3-list-item__graphic{
    position: absolute;
    margin-top: 4px;
}

#searchList>[data-type="search-item"]>.b3-list-item__graphic+.b3-list-item__graphic{
    position: absolute;
    margin-top: 4px;
	margin-left: 20px;
}
#searchList>[data-type="search-item"]>.b3-list-item__graphic+.b3-list-item__graphic+.b3-list-item__text{
	margin-left: 40px;
}



#searchList>[data-type="search-item"]>.b3-list-item__text{
    margin-left: 20px;
    padding:6px 6px 5px 5px;
    overflow-y: auto !important;
    text-overflow: ellipsis !important;
    line-height: 1.3;
    display: inline-block;
}



.search__list{
	padding-top:0;
}



.b3-list-item[data-type="search-new"]{
	border-radius: 4px;
	height:40px;
	margin: 6px 6px 0px 6px;
	padding:0 16px 0 10px;
	background-color: var(--b3-bq-background13)!important;
    box-shadow: 0 0 0 2px var(--b3-font-background13) inset!important;
}
.b3-list-item[data-type="search-new"] kbd{
	font-family: sans-serif;
}

#criteria .b3-chips .b3-chip{
	margin-top: 3px;
}

#criteria .b3-button--small{
	padding: 2px 8px;
	font-size: 14px;
}
#criteria+.block__icons{
	padding: 0 4px;
	min-height: 36px;
	margin:0 6px;
	border-radius:6px;
	background-color: var(--b3-list-hover);
}
.b3-dialog__body>.fn__flex-column:not(.switch-doc){
	background-color: var(--b3-theme-background);
}
.search__tip{
	height:30px;
	color:var(-b3-)
}


.protyle-wysiwyg *[custom-f="dt"] .li[data-subtype="u"]>.protyle-action svg{
	color:unset;
}

.search__tip{
	color:var(--b3-theme-on-background)
}
.search__tip kbd{
	box-shadow:none;
	border:none;
	padding: 3px 5px;
	background-color: var(--b3-list-background-focus);
}
更改分割线样式 CSS 片段

链滴:【代码片段分享】改一下分割线,拯救你的眼睛(颜色、粗细)

/* 更改分割线样式 CSS片段 */
.hr {
  border: none;
  position: relative;
}

.hr::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px; /* 粗细 */
  background-color: yellow; /* 颜色 */
  transform: translateY(-50%);
}
中键点击展开文档树 JS 片段

链滴:可以通过 JS 代码实现鼠标中键展开文档吗?

跟 文档树点击文档自动展开下级 JS 片段 有冲突,不能同时启用

/* 中键点击展开文档树 JS片段 */
(function(){
    let g_reset = setInterval(main, 2000);

    function main() {
        if (document.querySelector('.sy__file')) {
            clearInterval(g_reset);
        }else{
            return false;
        }
        document.querySelector('.sy__file').addEventListener('mousedown', event => {
            if (event.button != 1) return;
            let notTitleFlag = false;
            if (!event.target.classList.contains('b3-list-item__text')) notTitleFlag = true;
            let target = event.target.parentNode;
            let temp = event.target;
            console.log("0426",event);
            for (let i = 0; i < 4 && temp; i++) {
                if (temp?.getAttribute("data-type") == "navigation-file"
                    || temp?.getAttribute("data-type") == "navigation-root") {
                    target = temp;
                    break;
                }
                temp = temp?.parentNode;
            }
            console.log("0426target", target);
            if (target?.getAttribute("data-type") == "navigation-file"
              || target?.getAttribute("data-type") == "navigation-root") {
                const b3ListItemToggle = target.querySelector('.b3-list-item__toggle');
                const title = target.querySelector('.b3-list-item__text');
                if (b3ListItemToggle.classList.contains('fn__hidden')) return;
                event.preventDefault();
                b3ListItemToggle.click();
                if (event.ctrlKey) {
                    title.click();
                }
            }
        }, true);
    }
})();
钉住的同时显示 icon 和标题 CSS 片段

链滴:求助求助 钉住效果如何同时显示 icon 和标题

/* 钉住的同时显示 icon 和标题 CSS片段 */
.layout-tab-bar .item.item--pin .item__text {
    width: auto;
    max-width: none;
    display: flex !important;
}
图片透明通道添加背景色 CSS 片段

链滴:[功能建议] 图片区域增加可选底色

/* 图片透明通道添加背景色 CSS片段 */
.img img {
  background-color: #f0f0f0; /* 设置背景色,可以根据需要修改颜色值 */
}


// .protyle-wysiwyg [data-node-id].li { margin: -5px 0px -5px 0px; }
禁用浮窗过渡动画 CSS 片段

链滴:浮窗动画

/* 禁用浮窗过渡动画 CSS片段 */
:root{
    --b3-transition: none !important;
    --b3-width-transition: none !important;
}
.protyle-wysiwyg,
.protyle-background\_\_iconw,
.protyle-content--transition .protyle-wysiwyg,
.protyle-title {
	transition: none;
}
闪卡的标记转挖空 CSS 片段

链滴:希望支持单个挖空答案显示

关联:标记转挖空 CSS 片段

/* 闪卡的标记转挖空 CSS片段 */
.card__block .b3-typography [data-type~="mark"],
.card__block .protyle-wysiwyg [data-type~="mark"] {
    color: transparent !important;
    padding: 0px 5px 0px 5px;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 0.1em solid var(--b3-theme-on-background) !important;
    transition: all 300ms;
}

.card__block .b3-typography [data-type~="mark"]:hover,
.card__block .protyle-wysiwyg [data-type~="mark"]:hover,
.card__block .p.block-focus [data-type~="mark"] {
    color: var(--b3-theme-on-background) !important;
    transition: all 300ms;
    padding: 0px 5px 0px 5px;
}
图片居中 CSS 片段

链滴:我希望拷贝图片到思源中时,默认都是居中的,有什么方式处理吗?

/* 图片居中 CSS片段 */
.p:has(span.img) { 
text-align:center;
}
反链&提及面板固定文档名称 CSS 片段

链滴:代码片段 | 反链 & 提及面板,固定文档名称

/* 反链&提及面板固定文档名称 CSS片段 */
.backlinkMList .b3-list-item,
.backlinkList .b3-list-item {
    --b3-theme-primary-lightest: rgba(53, 115, 240, 1);
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--b3-list-hover, #363636);
}
滚动条样式 CSS 片段

链滴:建议 [滚动条] 静默时隐藏,滚动时再出现

/* 滚动条样式 CSS片段 */
::-webkit-scrollbar
 {
   width: 10px; /* 粗细 */
 }

::-webkit-scrollbar-thumb {
     border: 1px solid #8080804a; /* 边框颜色 */
     background-color: #696969; /* 颜色 */
     box-sizing: content-box;
 	border-radius: 10px !important; /* 粗细 */
 }

/* 在鼠标悬停时的样式 */
::-webkit-scrollbar-thumb:hover{
     background-color: #B5B5B5; /* 颜色 */
 }


偶尔用:

文档树和大纲自动换行 CSS 片段

链滴:建议 - 大纲标题隔行展示

/* 文档树和大纲自动换行 CSS片段 */
.b3-list-item__text {
   overflow:visible !important;
-webkit-line-clamp: unset;
}
.sy__outline .b3-list-item {
   height:fit-content !important;
}
标记转挖空 CSS 片段

链滴:分享常用的思源笔记插件

关联:闪卡的标记转挖空 CSS 片段

/* 标记转挖空 CSS片段 */
.b3-typography [data-type~="mark"], 
.protyle-wysiwyg [data-type~="mark"]{
    color: transparent !important;
    padding: 0px 5px 0px 5px;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 0.1em solid var(--b3-theme-on-background) !important;
	transition: all 300ms;
}
.b3-typography [data-type~="mark"]:hover, 
.protyle-wysiwyg [data-type~="mark"]:hover, 
.p.block-focus [data-type~="mark"]{
    color: var(--b3-theme-on-background) !important;
	transition: all 300ms;
    padding: 0px 5px 0px 5px;
}
在任务列表前带有序号 JS 片段

链滴:思源笔记折腾记录 - 任务列表的序号

任务列表多一点就会导致思源卡死,慎用

/* 在任务列表前带有序号 JS片段 */
生成任务列表序号()
setTimeout(生成任务列表序号,1000)
document.head.insertAdjacentHTML(
    "beforeEnd",
    `<style>
    .protyle-wysiwyg [data-node-id].li[data-subtype="t"] .protyle-action.protyle-action--task:before {
        content:var(--custom-index) ;  
    }
    </style>`
  );
  
async function 生成任务列表序号(){
    let 任务列表元素数组 = document.querySelectorAll('.protyle-wysiwyg [data-type="NodeList"]:has([data-subtype="t"])')
    任务列表元素数组.forEach(
        (任务列表元素)=>{
            同步生成序号(任务列表元素)
        }
    )
    let 聚焦任务列表项元素数组 = document.querySelectorAll('.protyle-wysiwyg [data-subtype="t"]:not(.list .li)')
    聚焦任务列表项元素数组.forEach(
        任务列表项元素=>{
            异步生成序号(任务列表项元素)
        }
    ) 
    setTimeout(生成任务列表序号,1000)

}
function 同步生成序号(任务列表元素){
    let 元素id= 任务列表元素.getAttribute('data-node-id')

    let 任务选框数组 = 任务列表元素.querySelectorAll(`[data-node-id="${元素id}"]>div>.protyle-action.protyle-action--task`)
    任务选框数组.forEach(
        (任务选框,下标)=>{
            任务选框.setAttribute("style", `--custom-index :"${下标+1}."`)
        }
    )
}
async function 异步生成序号(任务列表项元素){
    let 元素id= 任务列表项元素.getAttribute('data-node-id')
    let 响应 = await fetch('/api/query/sql',{
        method:'post',
        body:JSON.stringify({
            stmt:`select * from blocks where id = (select parent_id from blocks where id ='${元素id}') `
        })
    })
    let data = await 响应.json()
    let 父块内容 = await(await fetch('/api/filetree/getDoc',{
        method:'post',
        body:JSON.stringify({
            id:data.data[0].id,
            size:102400
        })
    })).json()
    let div = document.createElement('div')
    div.innerHTML=父块内容.data.content
    div.querySelectorAll('.li').forEach(
        (元素,下标)=>{
            if(元素.getAttribute('data-node-id')===元素id){
                任务列表项元素.querySelector('.protyle-action.protyle-action--task').setAttribute("style", `--custom-index :"${下标+1}."`)
            }
        }
    )
}
多行页签 CSS 片段

链滴:一个多行页签的 css

/* 多行页签 CSS片段 */
.layout-tab-bar.fn__flex, ul.fn__flex.layout-tab-bar {
    flex-wrap: wrap;
}
.fn__flex-column.fn__flex.fn__flex-1 .fn__flex:has(.fn__flex.layout-tab-bar){
	max-height: 100%;
}
.layout-tab-bar .item[data-type="tab-header"] {
    border: solid 0.1px var(--b3-list-icon-hover);
    margin: 1px;
}


不在用:

调整行距 CSS 片段(选择性使用)

链滴:行间距调试问题

/* 调整行距(选择性使用) CSS片段 */

.protyle-wysiwyg>.p {
 	line-height: 0.8;  /* 普通文本块的行间距 */
	margin: 0.5;  /* 段间距 */
 }

.protyle-wysiwyg [data-node-id].li { margin: -5px 0px -5px 0px; }  /* 列表块的间距 */

.protyle-wysiwyg [data-node-id] { margin: -5px 0px -5px 0px; }  /* 各种块的间距 */

链滴:怎么设置段间距

/* 普通文本块的行间距 */
.protyle-wysiwyg>.p {
	margin: 1px 0px !important; 
        padding: 1px !important;
}
超级块边框 CSS 片段

链滴:【 代码片段】啊哈哈哈代码来咯 ~~ 那你们先吃我就不打扰了哈 ~~

/* 超级块边框 CSS片段 */
/* 为超级块的添加边框 */
.protyle-wysiwyg [data-node-id].sb {
    box-shadow: 0 0 0 1px var(--b3-theme-background-light); 
}
/* 调整超级块的子块 */
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"] .sb, .protyle-wysiwyg [data-node-id].sb[data-sb-layout="row"] .sb {
    /* box-shadow: none; */ /* 如果觉得子块线条太多可以加入这个声明 */
    margin: 4px; /* 调整子块间距 */
}
/* 调整圆角 */
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"],
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="row"],
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"]>div,
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="row"]>div{
    border-radius: 4px;
}
/* 超级块悬停显示边框 */
.protyle-wysiwyg [data-node-id].sb:hover {
    outline: 1px dashed var(--b3-theme-on-surface);
}
/* 为超级块拖拽调整显眼的颜色 */
.protyle-wysiwyg .dragover__top {
    box-shadow: 0 -5px 3px -1px var(--b3-font-color8);
}
.protyle-wysiwyg .dragover__bottom {
    box-shadow: 0 5px 3px -1px var(--b3-font-color8);
}
.protyle-wysiwyg .dragover__left {
    box-shadow: -5px 0 3px -1px var(--b3-font-color9);
}
.protyle-wysiwyg .dragover__right {
    box-shadow: 5px 0 3px -1px var(--b3-font-color9);
}
.protyle-wysiwyg .dragover__top, .protyle-wysiwyg .dragover__bottom, .protyle-wysiwyg .dragover__left, .protyle-wysiwyg .dragover__right {
    transition: none !important;
}
文档标题居中显示 CSS 片段

链滴:文档标题置中是可能的吗?

/* 文档标题居中显示 CSS片段 */
.protyle-title__input {
    text-align: center;
}
隐藏大纲块标记(H1、H2…) CSS 片段

链滴:文档树和大纲,1)宽度缩进自由问题,2) 简洁显示问题

跟 浮动显示大纲块标记(H1、H2…) CSS 片段 二选一

/* 隐藏大纲块标记(H1、H2…) CSS片段 */
.sy__outline .b3-list-item__graphic {
display: none;
}
渐变色的标记 CSS 片段
/* 渐变色的标记 CSS片段 */
.b3-typography mark, .b3-typography span[data-type~=mark], .protyle-wysiwyg mark, .protyle-wysiwyg span[data-type~=mark] {
background-color: inherit;
background-image: linear-gradient(to bottom, transparent 20%, #fff29d1a 30%, #fff29d);
}
文档树点击文档自动展开下级 JS 片段

链滴:代码片段:文件树点击标题自动展开

链滴:一个小建议:能否在打开页面的同时,自动展开该页面的子页面

跟 中键点击展开文档树 JS 片段 有冲突,不能同时启用

/* 文档树点击文档自动展开下级 JS片段 */
console.log("加载代码片段:自动展开文件树");
document.querySelector('.sy__file').addEventListener('mousedown', event => {
  if (!event.target.classList.contains('b3-list-item__text')) return;
  if (event.target.parentNode.getAttribute("data-type") !== "navigation-file") return;
  const b3ListItemToggle = event.target.parentNode.querySelector('.b3-list-item__toggle');
  if (b3ListItemToggle.classList.contains('fn__hidden')) return;
  b3ListItemToggle.click();
});
调整块间距 CSS 片段

链滴:如何调整快间距

/* 调整块间距 CSS片段 */
/*  正文字体占比  */
.b3-typography p,
.b3-typography [data-node-id],
.protyle-wysiwyg [data-node-id].p,
.protyle-wysiwyg p {
  line-height: 1.7em;  /* 调整行高 */
  padding: 2.3px 2px 1.5px 2px; /* 调整内边距 */
  margin-top: .3em; /* 调整上外边距 */
  margin-bottom: .3em;  /* 调整下外边距 */
}

/* h1~6标题间距 */
.protyle-wysiwyg .h1,.protyle-wysiwyg .h2,
.protyle-wysiwyg .h3,.protyle-wysiwyg .h4,
.protyle-wysiwyg .h5,.protyle-wysiwyg .h6{
	font-weight:700; /* 标题字体粗细 */
	margin-top: .8em; /* 标题上间距 */
    margin-bottom: .4em; /* 标题下间距 */
}
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    20135 引用 • 77625 回帖
  • 分享

    有什么新发现就分享给大家吧!

    245 引用 • 1776 回帖
  • 代码
    460 引用 • 591 回帖 • 8 关注
4 操作
JeffreyChen 在 2023-11-24 14:24:42 置顶了该帖
JeffreyChen 在 2023-11-23 22:12:01 更新了该帖
JeffreyChen 在 2023-11-23 19:38:22 更新了该帖
JeffreyChen 在 2023-11-21 15:40:29 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 31061650 1 评论

    点个赞。真好人也

    不过想问一下大佬,这些代码片段存在了那个目录呢?

    1 回复
    工作空间/data/snippets/conf.json
    shuoying 1
  • 都写这么多了,不如开个主题trollface

    1 回复
  • 感谢!原来 css 已经有 has 伪类了!

  • 没有精力维护,只能让大家自取trollface

  • 我也不知道存在本地的哪个目录,我都是直接在设置里填的

    image.png

  • 点进每个标题下的外链,大概能看出代码片段具体实现什么效果

  • @88250 D 大,考虑开发 CSS 集市吗

    1 回复
  • 88250 1 赞同

    不考虑了,代码片段粒度太细,集市安装容易冲突,普通用户难以定位问题。

  • mark-j

    子弹线 js 和 css 都用了,,没有生效啊?默认主题

    1 回复
  • 先确认两个代码片段都是开启状态,然后试试重启思源

    1 回复
  • mark-j 1 评论

    docker 失效

    这样的话我也解决不了
    JeffreyChen
  • Juexe 1 1 评论

    不错的合集。不过“文件树点击标题自动展开”最初来源应该是 https://ld246.com/article/1680874816476,因为当时我也是搜了论坛没人写,所以才写了分享出来。

    感谢 p.s.每次更新帖子,积分真是花得飞快
    JeffreyChen
  • 回帖加一个,后续再更新到帖子里:

    隐藏面板面包屑最后一块 CSS 片段

    链滴:反向链接为什么有重复内容?

    /* 隐藏面板面包屑最后一块 CSS片段 */
    .protyle-breadcrumb__bar>span:last-child {
    opacity: 0;
    }
    .protyle-breadcrumb__bar>span:last-child:hover {
    opacity: 1;
    }
    
  • wax

    感谢分享已经收藏,目前试用了第一个,感觉不错

  • 回帖加一个,后续再更新到帖子里:

    多行页签 2 CSS 片段

    链滴:一个多行页签的 css

    /* 多行页签2 CSS片段 */
    .layout-tab-bar {
    padding: 0 0 0 8px;
    height: auto;
    flex-wrap: wrap;
    }
    .layout-tab-bar .item[data-type="tab-header"] {
    border: solid 0.1px var(--b3-list-icon-hover);
    margin: 1px;
    }
    
    多行页签 3(适配 Savor 主题) CSS 片段

    链滴:一个多行页签的 css

    /* 多行页签3(适配Savor主题) CSS片段 */
    .layout-tab-bar.fn__flex, ul.fn__flex.layout-tab-bar {
        flex-wrap: wrap;
    }
    .fn__flex-column.fn__flex.fn__flex-1 .fn__flex:has(.fn__flex.layout-tab-bar){
    	max-height: 100%;
    }
    
    /* 取消Savor主题的页签高度限制 */
    .layout-tab-bar{
    height: unset;
    }
    
    1 回复
    1 操作
    JeffreyChen 在 2023-12-08 11:18:42 更新了该回帖
  • 加一个:

    外观菜单的字体变粗更容易看 CSS 片段

    链滴:字体颜色能加粗下吗,不是很能看清

    /* 外观菜单的字体变粗更容易看 CSS片段 */
    .protyle-util .color__square[data-type="color"]{font-weight:bold}
    
  • 修改:

    去除图片后的多余空行 CSS 片段

    链滴:代码片段解决图片插入后默认新增一行以输入文字的问题

    /* 去除图片后的多余空行 CSS片段 */
    .b3-typography .img:not([style]), .protyle-wysiwyg .img:not([style]) {
       display:inline-block !important;
    }
    
  • JeffreyChen 1 评论

    增加一个方法:

    选择性启用 CSS 片段:给文档加一个属性,例如 fromtype:ShuXing,然后在 css 选择器前面加上 [custom-fromtype=ShuXing]

    链滴:css 可以只争对某一篇文档吗?

    .protyle-wysiwyg[custom-fromtype=zhihu] [data-node-id].h1 {
    color: red;
    }
    
    good!
    player
  • 补充一个多行标签页 CSS,增加了限制标签页的最小宽度功能

    .layout-tab-bar {
    padding: 0 0 0 8px;
    height: auto;
    flex-wrap: wrap;
    }
    
    .layout-tab-bar .item[data-type="tab-header"] {
    border: solid 0.1px var(--b3-list-icon-hover);
    margin: 0.2px;
    }
    
    .layout-tab-bar .item--focus:after {
        bottom: -1px;
    }
    
    .layout-tab-bar .item__text {
        min-width: 50px;
    }
    
  • 加一个:

    逐层自定义有序列表样式 CSS 片段

    链滴:有序列表层级嵌套建议

    CSS 实现有序列表编号

    /* 逐层自定义有序列表样式 CSS片段 */
    /* 可以从下面参数更改有序列表,8层级后默认为第一层级样式1.,2. */
    div[data-subtype="o"].list {
        --o1-style: counter(o1, decimal)".";
        --o2-style: counter(o2, decimal)")";
        --o3-style: counter(o3, upper-latin)".";
        --o4-style: counter(o4, lower-latin)".";
        --o5-style: counter(o5, lower-roman)".";
    }
    
    .protyle-wysiwyg [data-subtype="o"].li>.protyle-action:after {
        margin: -12px 0 0 -12px !important;
        line-height: 20px;
    }
    
    .list[data-subtype="o"]>.li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action {
        color: transparent !important;
    }
    
    .li[data-subtype="o"] .li[data-subtype="o"] .protyle-action::after {
    mix-blend-mode: unset !important;
        color: var(--b3-theme-on-surface) !important;
    }
    
    /*.li[data-subtype="o"][fold="1"] .protyle-action--order,
    .li[data-subtype="o"][fold="1"] .protyle-action:after {
        color: #7C505Dbb !important;
    }*/
    
    .li[data-subtype="o"]>.protyle-action::after {
        padding: 3px 2px;
        width: 24px;
        display: flex;
        justify-content: center;
    }
    
    .list[data-subtype="o"] {
        counter-reset: o1 0 o2 0 o3 0 o4 0 o5 0;
    }
    
    /* 第1层级 */
    /* 保持默认,这样可以从任意序号开始编号 */
    
    /* 第2层级 */
    
    .list[data-subtype="o"]>.li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action::after {
        counter-increment: o2;
        content: var(--o2-style);
        position: absolute;
    }
    
    /* 第3层级 */
    .list[data-subtype="o"]>.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action::after {
        counter-increment: o3;
        content: var(--o3-style);
        position: absolute;
    }
    
    /* 第4层级 */
    .list[data-subtype="o"]>.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action::after {
        counter-increment: o4;
        content: var(--o4-style);
        position: absolute;
    }
    
    /* 第5层级 */
    .list[data-subtype="o"]>.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action::after {
        counter-increment: o5;
        content: var(--o5-style);
        position: absolute;
    }
    
    /* 第6层级 */
    .list[data-subtype="o"]>.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action::after {
        counter-increment: o1;
        content: var(--o1-style);
        position: absolute;
    }
    
    /* 第7层级 */
    .list[data-subtype="o"]>.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action::after {
        counter-increment: o2;
        content: var(--o2-style);
        position: absolute;
    }
    
    /* 第8层级 */
    .list[data-subtype="o"]>.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action::after {
        counter-increment: o3;
        content: var(--o3-style);
        position: absolute;
    }
    
  • 这个帖子现在超级乱,有空再整理一下

请输入回帖内容 ...