登录 注册

基于思源笔记默认主题的优化代码片段，做的确实有点变态...

前言

对于思源笔记，我只需要用到写作工具，AI、闪卡啥的我还是用不到...对于笔记的排版，我也有严重强迫症（比如块与块之间的间隙要一致等等等。。。）

故：

基于默认的主题做了适量的修改，保证基本块与块（目前就做了段落、图片、代码块、列表、引述）之间的间隙是一致的。

基于默认的主题，隐藏了一部分用不到的功能的图标，隐藏了一部分用不到的功能的按钮，界面清爽些了。。

记录此文，以备后续使用。代码临时写的，写的很烂，但整体性能我觉得能接受，影响不大。

不建议乱搞，否则可能会产生不必要的冲突，除非你能看懂代码。

iShot2024072710.18.07.png

iShot2024072710.17.53.png

iShot2024072710.17.37.png

块等高

这里引用了两个自定义字体，一个是 Courier New，一个是思源宋体，emoji 字体是 Twemoji Mozilla。

配合自定义字体插件，基础字体和编辑器字体为 SourceHanSerifSC+Twemoji Mozilla，代码字体为 Courier New+SourceHanSerifSC

CSS：

/** 自定义字体 **/
@font-face {
    font-family: "Courier New";
    src: url("plugins/custom-fonts/static/fonts/Courier New/Courier New.ttf");
}
@font-face {
    font-family: "SourceHanSerifSC";
    src: url("plugins/custom-fonts/static/fonts/SourceHanSerifSC/SourceHanSerifSC-Regular.otf");
}

/** 笔记名称 **/
.protyle-title {
    margin-top: 50px!important;
}

/** 标题 **/
div[data-type=NodeHeading].h2 {
    margin-top: 28px!important;
    font-size: 24px!important;
    line-height: 1.625!important;
}
div[data-type=NodeHeading].h3 {
    margin-top: 18px!important;
    font-size: 20px!important;
    line-height: 1.625!important;
}

/** 分割线 **/
div[data-type=NodeThematicBreak] {
    margin: 2px 0!important;
    padding: 0 4px!important;
}
div[data-type=NodeThematicBreak].hr>div {
    height: 22px!important;
}
div[data-type=NodeThematicBreak].hr>div:after {
    top: 11px!important;
    height: 0!important;
    background-color: transparent!important;
    border-bottom: 1px dashed #e9ebec!important;
}
html[data-theme-mode=dark] div[data-type=NodeThematicBreak].hr>div:after {
    border-bottom: 1px dashed #2f302b!important;
}

/** 代码块 **/
html[data-theme-mode=dark] {
    --zhi-code-tab-bg: var(--b3-theme-surface)!important;
}
div[data-type=NodeCodeBlock] {
    margin: 12px 4px 10px 4px!important;
}
#preview .protyle-action__language {
    display: none!important;
}
div[data-type=NodeCodeBlock] .protyle-action__language {
    color: transparent!important;
    right: .2rem !important;
    top: 0rem!important;
    line-height: 24px!important;
    min-width: 30px!important;
    min-height: 24px!important;
}
div[data-type=NodeCodeBlock] .protyle-action__language:hover {
    color: var(--b3-theme-on-surface)!important;
}
div[data-type=NodeCodeBlock] .protyle-action__language:after {
    content: ''!important;
}
div[data-type=NodeCodeBlock] .protyle-icon {
    display: none!important;
}

/** 表格 **/
div[data-type=NodeTable] {
    margin: 8px 0px!important;
}
div[data-type=NodeTable]>div:first-child {
    line-height: 0!important;
}
div[data-type=NodeTable] table {
    line-height: 1.625!important;
    border-radius: 5px!important;
}
div[data-type=NodeTable] table thead th {
    font-weight: normal!important;
}
div[data-type=NodeTable] table tbody td {
    background-color: transparent!important;
}
.protyle-wysiwyg table th {
    background-color: var(--b3-theme-surface)!important;
}

/** 图片 **/
span[data-type=img] {
    display: initial!important;
    height: 100%!important;
}
span[data-type=img]>span:first-of-type {
    display: none!important;
}
span[data-type=img]>span:last-of-type {
    display: none!important;
}
span[data-type=img]>span:nth-of-type(2) {
    margin: 6px 0!important;
    max-width: 100%!important;
}
span[data-type=img]>span:nth-of-type(2) img {
    border: 1px solid var(--b3-theme-surface-lighter)!important;
    padding: 6px!important;
    border-radius: 5px!important;
    box-sizing: border-box!important;
}

/** 引述 **/
div[data-type=NodeBlockquote] {
    margin: 12px 4px!important;
}

/** 列表 **/
div[data-type=NodeList] {
    margin: 0px!important;
    padding: 0px!important;
}
div[data-type=NodeListItem] {
    margin: 2px 0!important;
}
div[data-type=NodeList] svg {
    color: var(--b3-theme-on-background)!important;
}
div[data-type=NodeList] .protyle-action {
    width: 20px!important;
}
div[data-type=NodeList]>[data-node-id].li>[data-node-id] {
    margin-left: 20px!important;
}
div[data-type=NodeListItem]::before {
    border: none!important;
}
div[data-type=NodeListItem]>div[data-type=NodeList]>div[data-type=NodeListItem] {
    margin-left: 10px!important;
}
.protyle .protyle-wysiwyg .li[data-subtype=u]>.protyle-action:hover:after {
    background-color: transparent!important;
}

/** 段落 **/
div[data-type=NodeParagraph][style*=background-color] {
    margin: 12px 4px!important;
    padding: 4px 8px!important;
}
div[data-type=NodeParagraph]>div {
    word-break: break-all!important;
}

隐藏按钮

可以隐藏菜单按钮、编辑区 / 快捷键中的菜单，也可以隐藏设置中的设置项。

这个不建议瞎搞，除非看得懂代码

CSS：

/** 隐藏提示框 **/
#tooltip {
    display: none!important;
}
.b3-tooltips:hover::before,
.b3-tooltips:hover::after {
    display: none!important;
}

/** 隐藏首页的用户指南按钮 **/
.layout-tab-container #editorEmptyHelp {
    display: none!important;
}

/** 隐藏左侧边栏的取消钉住按钮 **/
#dockLeft .dock__item--pin {
    display: none!important;
}
/** 隐藏左侧边栏的收集箱按钮 **/
#dockLeft span[data-type='inbox'] {
    display: none!important;
}
/** 隐藏左侧边栏的书签按钮 **/
#dockLeft span[data-type='bookmark'] {
    display: none!important;
}
/** 隐藏左侧边栏的标签按钮 **/
#dockLeft span[data-type='tag'] {
    display: none!important;
}

/** 隐藏右侧边栏 **/
#dockRight {
    display: none!important;
}

/** 隐藏底部边栏的帮助按钮 **/
#status #statusHelp {
    display: none!important;
}

/** 隐藏顶部边栏的数据同步按钮 **/
#toolbar #barSync {
    display: none!important;
}
/** 隐藏顶部边栏的后退按钮 **/
#toolbar #barBack {
    display: none!important;
}
/** 隐藏顶部边栏的前进按钮 **/
#toolbar #barForward {
    display: none!important;
}
/** 隐藏顶部边栏的订阅图标按钮 **/
#toolbar #toolbarVIP {
    display: none!important;
}
/** 隐藏顶部边栏的插件按钮 **/
#toolbar #barPlugins {
    display: none!important;
}
/** 隐藏顶部边栏的命令按钮 **/
#toolbar #barCommand {
    display: none!important;
}
/** 隐藏顶部边栏的退出按钮 **/
#toolbar #barExit {
    display: none!important;
}
/** 隐藏顶部边栏的更多按钮 **/
#toolbar #barMore {
    display: none!important;
}

/** 隐藏标签栏的加号按钮 **/
.layout__center ul.layout-tab-bar:last-of-type li {
    display: none!important;
}

/** 隐藏编辑区的面包屑 **/
.protyle-breadcrumb .protyle-breadcrumb__bar {
    display: none!important;
}
/** 隐藏编辑区的顶部背景按钮 **/
.protyle-background {
    display: none!important;
}
/** 隐藏编辑区的展开折叠按钮 **/
.protyle-content .button[aria-label='折叠/展开'] {
    display: none!important;
}

/** 隐藏所有菜单项的分割线 **/
.b3-menu__separator {
    display: none!important;
}

/** 隐藏最近的文档的左侧导航 **/
div[data-key=dialog-recentdocs] ul.b3-list--background:first-of-type {
    display: none!important;
}

/** 隐藏搜索框的列出引用失效的块按钮 **/
div[data-key=dialog-globalsearch] #searchUnRef {
    display: none!important;
}
/** 隐藏搜索框的搜索资源文件内容按钮 **/
div[data-key=dialog-globalsearch] #searchAsset {
    display: none!important;
}
/** 隐藏搜索框的搜索类型按钮 **/
div[data-key=dialog-globalsearch] #searchFilter {
    display: none!important;
}

/** 隐藏设置面板设置项的下划线 **/
.config__tab-container .b3-label:not(.b3-label--inner) {
    box-shadow: none!important;
}
/** 隐藏设置面板的搜索框 **/
.config__tab-container .b3-label:not(.b3-label--inner) {
    box-shadow: none!important;
}
.config__tab-title {
    margin-bottom: 0!important;
}
.config__tab-title+.b3-form__icon {
    display: none!important;
}
.config__tab-title~.config__tab-hr {
    margin-top: 8px!important;
}

/** 隐藏数据历史的数据快照 **/
div[data-key=dialog-history] div[data-type=repo] {
    display: none!important;
}

/** 修复显示插件配置项 **/
div[id^=plugin] .b3-label {
    display: block!important;
}

JS：

const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if ((mutation.type === "childList" && mutation.addedNodes.length > 0) || mutation.type === "characterData") {
            let thisNode = mutation.addedNodes[0];

            // 删除指定菜单项
            let hiddenCommonMenus = [
                "模式切换", "插入图片或文件", "开始录音", "网络图片转换为本地图片", "网络资源文件转换本地",
                "上传资源文件到图床", "分享到社区", "自适应宽度", "字符数", "复制为块引用", "复制为嵌入块",
                "复制块超链接", "复制块 Markdown 链接", "复制可读路径", "反向链接", "关系图", "属性",
                "微信提醒", "闪卡", "更新于", "添加到数据库", "导出预览", "转移引用", "面板", "布局", "日记",
                "用户指南", "反馈", "人工智能", "聚焦到上层", "聚焦", "跳转到父块的下一个块", "跳转到父块的上一个块",
                "跳转到父块", "折叠/展开", "快速制卡"
            ]
            // 删除指定斜杠快捷菜单项
            let hiddenHintMenus = [
                "AI Chat", "资源", "引用", "嵌入块", "数据库", "插入图片或文件"
            ]
            // 隐藏指定设置项
            let hiddenSettingsMenu = [
                "闪卡", "AI", "资源", "搜索", "快捷键", "账号", "云端", "发布"
            ]
            let hiddenSettingsItem = [
                "从右到左（RTL）", "是否显示书签、命名、别名、备注和引用计数",
                "是否显示网络图片角标", "嵌入块面包屑", "列表大纲反向缩进", "列表项圆点/数字单击聚焦",
                "拼写检查", "仅搜索文档", "虚拟引用", "虚拟引用关键字包含列表", "虚拟引用关键字排除列表",
                "PlantUML 伺服地址", "反向链接默认展开数", "反向提及默认展开数", "浮窗触发方式", "字体",
                "快速调整字号", "字号", "Tab 空格数",
                "块引新建文档存放位置", "使用单行保存", "新建文档存放位置", "删除文档时不需要确认",
                "导出时关于块引用内容的处理方式", "导出时关于嵌入块内容的处理方式", "导出时关于 PDF 标注引出处锚文本的处理方式",
                "选择外观的显示语言", "重置后窗口布局将恢复初始化状态", "隐藏底部状态栏", "关闭按钮设置",
                "Google Analytics", "自动上传报错信息和诊断数据", "网络伺服", "数据仓库密钥", "数据仓库清理",
                "API token", "网络代理"
            ]

            try {
                if(thisNode.className.includes("b3-menu__item")) {
                    hiddenCommonMenus.forEach(function(item) {
                        if(thisNode.innerHTML.includes("b3-menu__submenu") && thisNode.lastElementChild.lastElementChild.childNodes.length > 0) {
                            thisNode.lastElementChild.lastElementChild.childNodes.forEach(function(childNode) {
                                if(childNode.querySelector(".b3-menu__label") && childNode.querySelector(".b3-menu__label").innerHTML.includes(item)) {
                                    childNode.remove();
                                }
                            })
                        }
                        if(thisNode.querySelector(".b3-menu__label") && thisNode.querySelector(".b3-menu__label").innerHTML.includes(item)) {
                            thisNode.remove();
                        }
                    });

                    return;
                }
            } catch (error) {
                return;
            }

            try {
                if(thisNode.offsetParent.className.includes("hint--menu")) {
                    hiddenHintMenus.forEach(function(item) {
                        thisNode.childNodes.forEach(function(childNode) {
                            if(childNode.innerHTML.includes(item)) {
                                childNode.remove();
                            }
                        })
                    });
                    thisNode.firstElementChild.classList.add("b3-list-item--focus");

                    return;
                }
            } catch (error) {
                return;
            }

            try {
                if(thisNode.innerHTML.includes("config__panel")) {
                    hiddenSettingsMenu.forEach(function(item) {
                        thisNode.querySelectorAll("li[data-name]").forEach(function(childNode) {
                            if(childNode.innerHTML.includes(item)) {
                                childNode.remove();
                            }
                        });
                    });
                    hiddenSettingsItem.forEach(function(item) {
                        thisNode.querySelectorAll(".b3-label").forEach(function(childNode) {
                            if(childNode.innerHTML.includes(item)) {
                                childNode.style.display = "none";
                            }
                        });
                    })
                } else if(thisNode.parentElement.className.includes("config__tab-container") || thisNode.offsetParent.className.includes("config__panel")) {
                    mutation.addedNodes.forEach(function(childNode) {
                        hiddenSettingsItem.forEach(function(item) {
                            if(childNode.className && childNode.className.includes("b3-label") && !childNode.className.includes("fn__none") && childNode.innerHTML.includes(item)) {
                                childNode.style.display = "none";
                            }
                        })
                    })
                }

                return;
            } catch (error) {
                return;
            }
        }
    });
});

observer.observe(document.body, {
    attributes: true,
    characterData: true,
    childList: true,
    subtree: true
});
  • 思源笔记

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

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

    20648 引用 • 80710 回帖
1 引用
代码片段, 用于简化界面操作 • xqh042
三门峡 位置
3 感谢
2 收藏
1 引用
3 回帖
301 277 22 1 1

相关帖子

3 回帖
基于思源笔记默认主题的优化代码片段，做的确实有点变态...

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
visduo
三门峡
回帖
23
 帖子
7
 积分
2145