代码片段, 用于简化界面操作

本贴最后更新于 347 天前,其中的信息可能已经沧海桑田

基本上是参考 基于思源笔记默认主题的优化代码片段,做的确实有点变态 改的。

暂时定性为自用,怎么简单怎么来。

可能有一些冗余的测试代码,现在有点顾不上,看看之后是不是再调整一下

样式修改

Clip20240806192115.png

首页相关简化

/** 首页面板修改 **/ /** 顶部当前页面标题 **/ .fn__flex-1.fn__ellipsis { opacity: 0 !important; } /** 左右侧停靠栏和底部状态栏 **/ #status, #dockLeft, #dockRight { display: none !important; } /** 顶部默认按钮:前进后退、订阅、插件、搜索、外观和数据同步隐藏 **/ #toolbar #barBack, #toolbar #barForward, #toolbar #barSync, #toolbar #barMode, #toolbar #barSearch, #toolbar #barPlugins, #toolbar #toolbarVIP { display: none !important; } /** 顶部插件按钮全部隐藏 **/ #toolbar [id^=plugin] { display: none!important; } /** 文档树::已关闭的笔记本项 **/ li.b3-list-item[data-type="toggle"] { display: none !important; } /** 页签::切换和新建文档 **/ div.layout__center ul.layout-tab-bar--readonly >li > span.block__icon { display: none !important; } /** 页签::当前页签底部划线取消圆角,缩短 **/ div.layout__center ul:not(.layout-tab-bar--readonly)>li.item--focus::after { border-radius: 0; width: 91%; } /** 隐藏图标,不包含钉住文档的图标 **/ .b3-list-item__icon, li:not(.item--pin) > .item__icon { display: none !important; } /** 隐藏所有菜单项的分割线 **/ .b3-menu__separator { display: none!important; } .config__tab-container .b3-label:not(.b3-label--inner) { box-shadow: none!important; } /** 隐藏提示框 **/ #tooltip { display: none!important; } .b3-tooltips:hover::before, .b3-tooltips:hover::after { display: none!important; }

编辑相关简化

/** 面包屑仅保留锁定编辑,退出聚焦 **/ .protyle-breadcrumb > div, .protyle-breadcrumb > button:not([data-type="readonly"]):not([data-type="exit-focus"]) { display: none !important; } /** 设置滑动到面包屑才显示按钮,避免视觉中心不平衡 **/ .protyle-breadcrumb { opacity: 0; transition: opacity 0.3s ease; } .protyle-breadcrumb:hover { opacity: 1; } /** 题头区域只保留标签相关 **/ .protyle-background__img, .protyle-background__icon, .protyle-background__action > button:not([data-type="tag"]) { display: none !important; } /** 文档属性仅保留命名 **/ .protyle-attr--alias, .protyle-attr--memo, .protyle-attr--refcount { display: none !important; } /** 移除辅助滚动进度条 **/ .protyle-scroll { display: none !important; } /** 块图标仅保留展开折叠 **/ .protyle-gutters > button:not([data-type="fold"]) { opacity: 0 !important; } /** 隐藏选中工具栏 **/ .protyle-toolbar > *:not([data-type="block-ref"]):not([data-type="a"]):not([data-type="strong"]):not([data-type="em"]):not([data-type="mark"]) { display: none!important; }

脚本修改

快速将闪卡从页签右侧打开

// 用于设置打开的闪卡页面都直接在页面右侧打开 (function () { function query(selector, multiple = false) { return multiple ? document.querySelectorAll(selector) : document.querySelector(selector); } let observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === "childList" && mutation.addedNodes.length > 0) { let thisNode = mutation.addedNodes[0]; if (thisNode && thisNode.querySelector && thisNode.innerText && thisNode.innerText.includes('闪卡')) { const sticktab = query('.b3-dialog__body .card__main .block__icons>div[data-type="sticktab"]'); if (sticktab) { sticktab.click(); setTimeout(() => { let open_item = query("#commonMenu > div.b3-menu__items > button"); if (open_item) { open_item.click(); } }, 40) } } } }); }); observer.observe(document.body, { childList: true, subtree: true }); })();

简化设置菜单

Clip20240806191835.png

// 用于设置打开的闪卡页面都直接在页面右侧打开 (function () { function logNodeInfo(node) { let json = { "nodeType": node.nodeType, "nodeName": node.nodeName, "nodeValue": node.nodeValue, "textContent": node.textContent, "innerText": node.innerText, "innerHTML": node.innerHTML, "outerHTML": node.outerHTML, "className": node.className }; // 使用 console.group 创建一个分组 console.group('Node Info'); console.log('NodeType:', json.nodeType); console.log('NodeName:', json.nodeName); console.log('NodeValue:', json.nodeValue === null ? 'null' : json.nodeValue); console.log('TextContent:', json.textContent); console.log('InnerText:', json.innerText); console.log('InnerHTML:', json.innerHTML); console.log('OuterHTML:', json.outerHTML); console.log('ClassName:', json.className); // 结束分组 console.groupEnd(); } function bindObserver(options) { const { onAddedNodes, onFirstNodes, target = document.body, config = { childList: true, subtree: true } } = options; if (typeof onAddedNodes !== 'function' && typeof onFirstNodes !== 'function') { throw new Error('At least one of the callback functions must be provided.'); } const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { try { if (onFirstNodes) { onFirstNodes(mutation.addedNodes[0]); } if (onAddedNodes) { onAddedNodes(mutation.addedNodes) } } catch (error) { console.error('Error handling mutations:', error); } } }); }); observer.observe(target, config); return { stop: () => observer.disconnect(), isActive: () => !observer.disconnected }; } function handleError(e) { if (e instanceof TypeError || e.message.includes('Cannot read properties of undefined')) { // 为了避免写冗长判断,这里直接忽略这类错误 } else { console.error('An unexpected error occurred:', e); } } const config = { hiddenSettingsMenu: [ "闪卡", "导出", "AI", "资源", "搜索", "账号", "云端", "发布" ], hiddenSettingsItem: [ // 编辑器 "自适应宽度", "两侧对齐", "从右到左(RTL)", "只读模式", "是否显示书签、命名、别名、备注和引用计数", "是否显示网络图片角标", "嵌入块面包屑", "列表大纲反向缩进", "列表项圆点/数字单击聚焦", "拼写检查", "仅搜索文档", "代码块换行", "代码块连字", "代码块显示行号", "PlantUML 伺服地址", "反向链接默认展开数", "反向提及默认展开数", "历史生成间隔(分钟,设置为 0 则禁用)", "历史保留天数", "浮窗触发方式", "字体", "快速调整字号", "字号", "Tab 空格数", "KaTex 宏定义", "允许执行 HTML 块内脚本", "虚拟引用关键字包含列表", "虚拟引用关键字排除列表", "动态加载块数", "块引动态锚文本最大长度", // 文档树 "始终定位打开的文档", "在当前页签中打开", "启动时关闭所有页签", "允许创建深度大于 7 层的子文档", "删除文档时不需要确认", "使用单行保存", // 外观 "图标", "代码块主题", "语言", "恢复默认窗口", "隐藏底部状态栏", "关闭按钮设置", // 关于 "Google Analytics", "自动上传报错信息和诊断数据", "网络伺服", "数据仓库密钥", "数据仓库清理", "API token", "网络代理", "访问授权码", "在浏览器上使用", "思源笔记" // emm ], } function handleSettingSearch(node) { if (node.innerHTML.includes('config__tab-title')) { node.querySelector('.config__tab-title').style.display = "none"; node.querySelector('.b3-form__icon').style.display = "none"; node.querySelector('.config__tab-hr').style.display = "none"; } } function configureGridDisplay(options, gridOptions) { // 获取宫格容器 const gridContainer = document.getElementById('configBazaarDownloaded'); // 设置样式修改标记 if (gridContainer.getAttribute('data-modified') === '1') return; // 设置宫格容器的CSS Grid布局参数 gridContainer.style.display = 'grid'; gridContainer.style.gridTemplateColumns = gridOptions.gridColumns; // 例如 "repeat(3, 1fr)" gridContainer.style.gap = gridOptions.gap; // 例如 "16px" // 根据options控制宫格项内部元素的显示或隐藏 const cards = gridContainer.querySelectorAll('.b3-card'); cards.forEach(card => { const despElement = card.querySelector('.b3-card__desc'); const imgElement = card.querySelector('.b3-card__img'); despElement.style.display = options.desp === 1 ? '' : 'none'; imgElement.style.display = options.img === 1 ? '' : 'none'; }); if (options.enableFrist === 1) { const cardsArray = Array.from(cards); cardsArray.sort((a, b) => { const aCheckbox = a.querySelector('.b3-switch'); const bCheckbox = b.querySelector('.b3-switch'); if (aCheckbox.checked && !bCheckbox.checked) return -1; if (!aCheckbox.checked && bCheckbox.checked) return 1; return 0; }); const container = document.getElementById('configBazaarDownloaded'); while (container.firstChild) { container.removeChild(container.firstChild); } cardsArray.forEach(card => { container.appendChild(card); }); } gridContainer.setAttribute('data-modified', '1'); // 三秒后移除标记 setTimeout(() => { gridContainer.removeAttribute('data-modified'); }, 3000); } function bazaarSimplify(node) { let hideExtends = [ "主题", "图标", "模板" ] let tabBar = node.querySelectorAll(".layout-tab-bar>div"); let tabBtns = node.querySelectorAll(".config-bazaar__title>button[data-type]"); hideExtends.forEach(label => { tabBar.forEach(childNode => { let itemText = childNode.querySelector(".item__text"); if (itemText.innerText === label) { childNode.style.display = "none"; } }); tabBtns.forEach(childNode => { if (childNode.innerHTML.includes(label)) { childNode.style.display = "none"; childNode.previousElementSibling.style.display = "none"; } }); }) // 可选:使搜索占满宽度 let searchInput = node.querySelectorAll(".config-bazaar__title .b3-form__icon"); searchInput.forEach(input => input.style.width = "100%"); } const handleNode = node => { try { if (node.innerHTML.includes("config__panel")) { // 隐藏设置列表 config.hiddenSettingsMenu.forEach(label => { node.querySelectorAll("li[data-name]").forEach(childNode => { if (childNode.innerText === label) { childNode.remove(); } }); }); config.hiddenSettingsItem.forEach(item => { node.querySelectorAll(".b3-label").forEach(childNode => { if (childNode.innerHTML.includes(item)) { childNode.style.display = "none"; } }); }); // 隐藏设置搜索 handleSettingSearch(node); } if ( node.parentElement.className.includes("config__tab-container") ) { let config_items = document.querySelectorAll(".config__tab-container:not(.fn__none) .b3-label:not(.fn__none)"); config_items.forEach(childNode => { config.hiddenSettingsItem.forEach(item => { // 第一个条件用于排除移除快捷键列表 if ( !childNode.id && childNode.innerHTML.includes(item) ) { childNode.style.display = "none"; } }); }); // 集市的简化 if (node.parentElement.dataset.name === 'bazaar') { bazaarSimplify(node); } } // 已知卸载插件等状态变化后初始化的列表不会同步更新变化 if (node.innerHTML.includes("b3-card__img")) { configureGridDisplay({ title: 1, desp: 0, img: 0, enableFrist: 1}, { gridColumns: "repeat(3, 1fr)", gap: "0px" }); } } catch (e) { handleError(e); // console.log(e); } }; bindObserver({ onFirstNodes: handleNode }); })();

简化提示菜单

Clip20240806191931.png

// 用于设置打开的闪卡页面都直接在页面右侧打开 (function () { function bindObserver(options) { const { onAddedNodes, onFirstNodes, target = document.body, config = { childList: true, subtree: true, attributes: true, characterData: true } } = options; if (typeof onAddedNodes !== 'function' && typeof onFirstNodes !== 'function') { throw new Error('At least one of the callback functions must be provided.'); } const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if ((mutation.type === 'childList' && mutation.addedNodes.length > 0) || mutation.type === "characterData") { try { if (onFirstNodes) { onFirstNodes(mutation.addedNodes[0]); } if (onAddedNodes) { mutation.addedNodes.forEach(node => onAddedNodes(node)); } } catch (error) { console.error('Error handling mutations:', error); } } }); }); observer.observe(target, config); return { stop: () => observer.disconnect(), isActive: () => !observer.disconnected }; } function handleError(e) { if (e instanceof TypeError || e.message.includes('Cannot read properties of undefined')) { // 为了避免写冗长判断,这里直接忽略这类错误 } else { console.error('An unexpected error occurred:', e); } } const config = { hiddenHintMenus: [ "AI Chat", "引用","嵌入块", "数据库", "一级标题", "二级标题", "三级标题", "四级标题", "五级标题", "六级标题", "无序列表", "有序列表", "任务列表", "引述", "代码块", "表格", "分隔线", "公式块", "表情", "链接", "粗体", "斜体", "HTML", "下划线", "删除线", "标记", "上标", "下标", "标签", "行级代码", "行级公式", "插入图片或文件", "插入 IFrame 链接", "插入图片链接", "插入视频链接", "插入音频链接", "ABC", "Chart", "FlowChart", "Graphviz", "Mermaid", "信息样式", "成功样式", "警告样式", "错误样式", "清除样式", ] }; const handleFirstNode = node => { try { if (node.offsetParent.className.includes("hint--menu")) { config.hiddenHintMenus.forEach(function (item) { node.childNodes.forEach(function (childNode) { if (childNode.innerHTML.includes(item)) { childNode.remove(); } }); }); node.firstElementChild.classList.add("b3-list-item--focus"); } } catch (e) { handleError(e); // console.log(e); } }; bindObserver({ onFirstNodes: handleFirstNode }); })();

简化鼠标菜单

目前有点问题,多选块时的 外观 项移除不掉;目

简单实现了 js 片段,展开菜单项 - 链滴 (ld246.com) 中的功能,用于快速展开插件项

Clip20240806191630.png

// 用于设置打开的闪卡页面都直接在页面右侧打开 (function () { function logNodeInfo(node) { let json = { "nodeType": node.nodeType, "nodeName": node.nodeName, "nodeValue": node.nodeValue, "textContent": node.textContent, "innerText": node.innerText, "innerHTML": node.innerHTML, "outerHTML": node.outerHTML, "className": node.className }; // 使用 console.group 创建一个分组 console.group('Node Info'); console.log('NodeType:', json.nodeType); console.log('NodeName:', json.nodeName); console.log('NodeValue:', json.nodeValue === null ? 'null' : json.nodeValue); console.log('TextContent:', json.textContent); console.log('InnerText:', json.innerText); console.log('InnerHTML:', json.innerHTML); console.log('OuterHTML:', json.outerHTML); console.log('ClassName:', json.className); // 结束分组 console.groupEnd(); } function bindObserver(options) { const { onAddedNodes, onFirstNodes, target = document.body, config = { childList: true, subtree: true } } = options; if (typeof onAddedNodes !== 'function' && typeof onFirstNodes !== 'function') { throw new Error('At least one of the callback functions must be provided.'); } const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { try { if (onFirstNodes) { onFirstNodes(mutation.addedNodes[0]); } if (onAddedNodes) { mutation.addedNodes.forEach(node => onAddedNodes(node)); } } catch (error) { console.error('Error handling mutations:', error); } } }); }); observer.observe(target, config); return { stop: () => observer.disconnect(), isActive: () => !observer.disconnected }; } function handleError(e) { if (e instanceof TypeError || e.message.includes('Cannot read properties of undefined')) { // 为了避免写冗长判断,这里直接忽略这类错误 } else { console.error('An unexpected error occurred:', e); } } const config = { hiddenCommonMenus: [ // // 主菜单 "面板", "布局", "日记", "闪卡", "最近的文档", "锁屏", "用户指南", "反馈", "开发者工具", "退出应用", // 右键菜单::笔记本 "关闭", "搜索", "替换", // 右键菜单::文本 "粘贴", "粘贴为纯文本", "粘贴转义文本", "全选", "复制纯文本", "剪切", // 插件相关 "制卡", "插入写作式闪卡", "制卡并发到 daily card", "制卡并发到 daily card (无引用)", "渐进阅读(摘抄模式)", "文档与子文档闪卡优先级", "文档与子文档闪卡推迟", "恢复所有暂停的闪卡", "为闪卡设置优先级", "推迟/取消推迟", "添加图片遮挡层", // 右键菜单::操作页签 "关闭未修改的页签", "关闭左侧页签", "关闭右侧页签", "分屏", "移动到新窗口", // 右键菜单::操作文档块 "移动", "属性", "打开", // 右键菜单::复制 "复制块 Markdown 链接", "复制可读路径", "复制 文本*", "复制为副本", // 右键菜单::操作块 "人工智能", "聚焦", "聚焦到上层", "起始插入块", "末尾插入块", "跳转到父块的下一个块", "跳转到父块的上一个块", "跳转到父块", "折叠/展开", "外观", "宽度", "微信提醒", "快速制卡", "代码块", "带子标题转换", "删除 标题及下方块", // 右键菜单::转换为 "段落", "一级标题", "二级标题", "三级标题", "四级标题", "五级标题", "六级标题", "引述", // 多选右键:: "合并 超级块", "布局", "外观" ] } function expandSubMenuIfSingleTopItem() { // 获取 #commonMenu 下的所有 .b3-menu__items 容器 const menu = document.getElementById('commonMenu'); const topLevelItemsContainer = menu.querySelector('.b3-menu__items'); // 检查 .b3-menu__items 容器中除了分隔符外的菜单项数量 const topLevelItemCount = Array.from(topLevelItemsContainer.childNodes).filter( child => child.classList.contains('b3-menu__item') && !child.classList.contains('b3-menu__separator') ).length; // 检查是否只有一个顶层菜单项(除去分隔符和其他非菜单项) if (topLevelItemCount === 1) { const singleItem = topLevelItemsContainer.querySelector('.b3-menu__item:not(.b3-menu__separator)'); // 确保找到了单个菜单项并且它包含子菜单 if (singleItem && singleItem.querySelector('.b3-menu__submenu')) { const submenu = singleItem.querySelector('.b3-menu__submenu'); const submenuItems = submenu.querySelectorAll('.b3-menu__item'); // 将子菜单项移动到 #commonMenu 中,紧随singleItem之后 Array.from(submenuItems).forEach(subItem => { singleItem.parentNode.insertBefore(subItem, singleItem.nextSibling); }); // 如果需要,可以删除原始的包含子菜单的菜单项 // singleItem.remove(); } } } function hideItemByName(node, rmvLabel) { try { // 先移除子菜单项 if (node.innerHTML.includes("b3-menu__submenu")) { let subMenu = node.querySelector(".b3-menu__submenu"); let subMenuChildren = subMenu.childNodes[0].childNodes; subMenuChildren.forEach(function (childNode) { let label = childNode.querySelector(".b3-menu__label"); if (label && label.innerText && label.innerText === rmvLabel) { childNode.remove(); } if (childNode.innerHTML.includes("b3-menu__submenu")) { hideItemByName(childNode, rmvLabel); } }); // 如果子项被删完,则连当前子菜单也删除 if (subMenuChildren.length === 0) { node.remove(); } } // 移除一级菜单子项 if (node.querySelector(".b3-menu__label").innerText === rmvLabel) { node.remove(); } } catch (error) { console.log("error", error); } } const handleFirstNode = node => { try { if (node.className.includes("b3-menu__item")) { config.hiddenCommonMenus.forEach(item => { hideItemByName(node, item); }); // 看情况,用于只有一个插件子菜单时展开 expandSubMenuIfSingleTopItem(); } } catch (e) { handleError(e); } }; bindObserver({ onFirstNodes: handleFirstNode }); })();
  • 思源笔记

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

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

    26421 引用 • 109897 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • xqh042 1

    写了个很生草的脚本,简化色彩工具。(这里懒得写监听直接挂循环了,css 用来删组件,js 用来注入行内样式

    默认颜色为:当前字体颜色、渐进阅读插件在分片中改变文字后出现的黄色,链接的蓝色,引用色

    纯自用了属于是:

    Clip20240806213057.png

    /** 颜色工具 **/ .protyle-font>div:nth-Child(1), .protyle-font>div:nth-Child(2), .protyle-font>div:nth-Child(3), .protyle-font>div:nth-Child(4), .protyle-font>div:nth-Child(8), .protyle-font>div:nth-Child(12), .protyle-font>div:nth-Child(13), .protyle-font>div:nth-Child(14), .protyle-font>div:nth-Child(15), .protyle-font>div:nth-Child(16), .protyle-font>div:nth-Child(17), .protyle-font>div:nth-Child(18), .protyle-font>div:nth-Child(19), .protyle-font>div:nth-Child(20), .protyle-font>div:nth-Child(21), .protyle-font>div:nth-Child(22), .protyle-font>div:nth-Child(23), .protyle-font>div:nth-Child(24), .protyle-font>div:nth-Child(11)>button:nth-Child(5), .protyle-font>div:nth-Child(11)>button:nth-Child(6), .protyle-font>div:nth-Child(11)>button:nth-Child(7), .protyle-font>div:nth-Child(11)>button:nth-Child(8), .protyle-font>div:nth-Child(11)>button:nth-Child(9), .protyle-font>div:nth-Child(11)>button:nth-Child(10), .protyle-font>div:nth-Child(11)>button:nth-Child(11), .protyle-font>div:nth-Child(11)>button:nth-Child(12), .protyle-font>div:nth-Child(11)>button:nth-Child(13), .protyle-font>div:nth-Child(11)>button:nth-Child(14) { display: none!important; }
    (function () { setInterval(()=>{ document.querySelectorAll('.protyle-font > div:nth-child(11) > button').forEach((button, index) => { switch (index + 1) { case 1: button.style.color = 'var(--b3-theme-on-background)'; break; case 2: button.style.color = 'var(--b3-font-color7)'; break; case 3: button.style.color = 'var(--b3-protyle-inline-link-color)'; break; case 4: button.style.color = 'var(--b3-protyle-inline-blockref-color)'; button.style.opacity = '.86'; break; } }); }, 200) })();
  • Trifolium

    感谢分享 😄 ,好不容易才找到移除辅助进度条的方法 ❤️

    1. 简化提示菜单 部分,除了第三方插件增加的选项以外,思源自带的选项都可以用 CSS 隐藏
    2. 简化鼠标菜单 部分,很多选项都可以用 CSS 隐藏

    还在陆续支持中:Issue #12518 · siyuan-note/siyuan