没啥好的, 我从其他地方抄的

    // 通过快捷键(alt + p), 打开配置页面
    function openSettingPage() {
        let keyInit = {
            ctrlKey: false,
            altKey: true,
            metaKey: false,
            shiftKey: false,
            key: 'P',
            keyCode: 80
        }
        keyInit["bubbles"] = true;
        let keydownEvent = new KeyboardEvent('keydown', keyInit);
        document.getElementsByTagName("body")[0].dispatchEvent(keydownEvent);
        let keyUpEvent = new KeyboardEvent('keyup', keyInit);
        document.getElementsByTagName("body")[0].dispatchEvent(keyUpEvent);
    }

我也求, 虽然我加了一个思源折腾群, 但是我想进内部开发群 😂

你竟然贴我的图, 哈哈哈 😂

看了一下你的需求, 听起来好像是这样的

1. 不同的文档有不同的颜色
2. 固定的第一个子节点是一个颜色, 第二个子节点是一个颜色, 依次类推

所以有个极其简陋的 css 方案

效果如下

备注: 如果有更多的子文档, 需要自己增加代码

div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(12) {background-color: var(--b3-font-background12);}

/* 可修改 - 背景颜色 *//* 可修改 - 背景颜色 */
:root {
  /* 可修改 - 背景颜色 */
  --b3-tree-node-background-1: var(--b3-font-background1);
  --b3-tree-node-background-2: var(--b3-font-background2);
  --b3-tree-node-background-3: var(--b3-font-background3);
  --b3-tree-node-background-4: var(--b3-font-background4);
  --b3-tree-node-background-5: var(--b3-font-background5);
  --b3-tree-node-background-6: var(--b3-font-background6);
  --b3-tree-node-background-7: var(--b3-font-background7);
  --b3-tree-node-background-8: var(--b3-font-background8);
  --b3-tree-node-background-9: var(--b3-font-background9);
  --b3-tree-node-background-10: var(--b3-font-background10);
  --b3-tree-node-background-11: var(--b3-font-background11);
  --b3-tree-node-background-12: var(--b3-font-background12);
}



div.sy__file>div.fn__flex-1 ul:nth-of-type(1)>li {background-color: var(--b3-font-background1);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(2)>li {background-color: var(--b3-font-background2);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(3)>li {background-color: var(--b3-font-background3);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(4)>li {background-color: var(--b3-font-background4);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(5)>li {background-color: var(--b3-font-background5);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(6)>li {background-color: var(--b3-font-background6);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(7)>li {background-color: var(--b3-font-background7);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(8)>li {background-color: var(--b3-font-background8);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(9)>li {background-color: var(--b3-font-background9);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(10)>li {background-color: var(--b3-font-background10);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(11)>li {background-color: var(--b3-font-background11);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(12)>li {background-color: var(--b3-font-background12);}

div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(1) {background-color: var(--b3-font-background1);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(2) {background-color: var(--b3-font-background2);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(3) {background-color: var(--b3-font-background3);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(4) {background-color: var(--b3-font-background4);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(5) {background-color: var(--b3-font-background5);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(6) {background-color: var(--b3-font-background6);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(7) {background-color: var(--b3-font-background7);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(8) {background-color: var(--b3-font-background8);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(9) {background-color: var(--b3-font-background9);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(10) {background-color: var(--b3-font-background10);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(11) {background-color: var(--b3-font-background11);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(12) {background-color: var(--b3-font-background12);}

不过话说, 我感觉你想要的这种效果很奇怪, 文档树加了颜色之后, 看起来非常非常乱, 就像这样, 不过每个人都有自己的习惯, 反正我是接受不了哈哈哈

实现是可以实现的: 加载页面的时候, 判断没有某个元素(比如文档树/大纲), 触发快捷键 alt+y

不过我比较好奇: 你会经常关闭软件么, 软件一直挂着不行么

我个人一般都不关软件的, 除非是电脑要关机

如何打造高效的个人笔记系统（五） 系列五：笔记的标签系统 微信公众平台 - mp.weixin.qq.com

推一篇之前在公众号上看到的 笔记分类规则, 虽然说是标签的分类, 但是用在文档树上, 也没啥问题, 感觉还挺有用的

我现在就是按照这个规则, 整理文档的

更优雅说服我了

我想搞插件唯一的原因就是, 配置可视化

现在想想, 管他黑猫白猫, 有用的才是好猫

非专业的去搞插件, 肯定要花好多时间, 有这些时间, 不如多搞几个 js 代码片段

况且中国人没有老外那闲功夫。

这个深有同感, 每天加班累成狗, 平时根本不想动

话说, 本来我准备去研究插件来着, 总感觉直接上 js 代码不优雅

话说, 我一个后台菜狗, 感觉得做好久 😂

我简单想了一下代码逻辑, 覆盖的场景肯定不全, 不过感觉有搞头

显示二级文档树

在一级文档树旁边插入一列, 用来显示二级文档树, 大概类似于这样

事件监听

监听一级文档树点击事件

1. 获取点击的笔记本 id 和文档 id (可行)
2. 通过以下 api, 获取子文档列表 (未验证)

   http://127.0.0.1:59401/api/filetree/listDocsByPath
   {
       "notebook": "20240309142729-wq6qzz8",
       "path": "/20240403091024-c8fa15f.sy"
   }
   

3. 在二级文档树里显示文档列表 (未验证)

监听二级文档树点击事件

1. 获取点击的 笔记本 id, 文档父节点 id, 文档 id (可行)
2. 在一级文档树里找到文档父节点 (可行)
3. 点击折叠按钮, 让文档父节点展开 (可行)
4. 点击文档节点 (可行)

你之前说同步, 异步的时候, 大概能猜到一点, 哈哈哈

该说不说, 我非常需要这个, 但是合不合法就不知道了 😂

我已经改成 domnodeinserted, 现在是正常的

相比之下, 告警日志影响要小一点, 感谢

我刚刚试了下, 在显示二级文档树的前提下, 再显示大纲, 主文档确实有点窄

左侧文件夹一旦变多, 不管是点击查看, 但是翻阅都非常麻烦

这句话深有同感, 我也经常会遇到一直滑动鼠标, 鼠标滑冒烟的情况

所以, 我想到了另一种交互: 上层目录自动冻结, 就是 excel 里面的那种冻结
这种效果在 vscode 里面有, 像这样

往下滑, 冻结就变成三层目录了

没体验过 onenote, 不过我也好奇一点, 你想要的第二级的文档树跟大纲有什么区别

针对楼主的需求, 有几个不成熟的小建议

1. 找文档可以使用搜索功能, 过滤类型只勾选文档, 像这样

2. 推荐双链功能, 有关联的都链一起

3. 推荐一个插件, 显示子层文档的

   

   

补充

1. 双链去掉下划线
   删掉 border-bottom: 1px dashed !important;
2. 备注的下划线不被覆盖
   border-bottom: 1.5px solid #b8c898; 改成 border-bottom: 1.5px solid #b8c898 !important;
3. 高亮样式正常
   color: black !important; 改成 color: black;
color: black !important; 改成 color: black;

备注: 本人菜狗, 不一定真的可以

最终

.protyle-wysiwyg [data-node-id] span[data-type~="block-ref"] {
    color: black;
    border-image: none !important;
    background-color:transparent;
    }


.b3-typography span[data-type~=inline-memo], .protyle-wysiwyg span[data-type~=inline-memo] {
    background-color: transparent;
    border-bottom: 1.5px solid #b8c898 !important;
}

    border-bottom: 1px dashed !important;

这个是下划线, 把它删掉就没有了

.protyle-wysiwyg [data-node-id] span[data-type~="block-ref"] {
    color: black !important;
    border-image: none !important;
    background-color:transparent!important;
    }

我用的不是 remove, 是 display none

人工智能,聚焦,聚焦到上层, 微信提醒, 快速制卡,添加到数据库, 跳转到父块的下一个块, 跳转到父块的上一个块, 跳转到父块, 宽度, 闪卡, 开始录音, 网络图片转换为本地图片, 网络资源文件转换本地, 上传资源文件到图床, 分享到社区,优化排版, 全屏切换, 面板, 布局, 锁屏

我发现原因了, 插件默认是第一个 DOMNodeInserted, 但是我平时调试 js 会看到 warn 日志, 所以我就改成了第二个, 第二个就会有这种问题, 第一个就没有

我的笔记都没有超过 5000 的

三四千我都感觉很长, 不好找, 直接分成多个文档

是不是用了什么插件或者主题?

前两个应该是特性, 不是 bug

• 一个代码块是一个块(你那个四行代码属于一个块)
• 在跨块选择的时候, 会自动选择一整个块

所以你选到下方边缘或者出块的时候, 会自动选择整个代码块

要不你试下这种插入时间的方式?

有没有快速引用今天日期的方法？ - EmberSky 的回帖

有个规避的方法

1. 先聚焦
2. 然后使用插件搜索
   

顺便说下, 边距不建议比 66 小, 因为左边会显示多个按钮, 如果太小, 会变成竖的, 看着不爽

这是我现在用的

/* 修改 文档内容->页面边距(66) */
div.protyle-wysiwyg.protyle-wysiwyg--attr {padding:16px 66px 282px!important;}

完全赞同, 我转思源的很大原因就是因为他有插件, 有代码片段, 而代码片段可以解决我 90% 的额外需求

我现在就是有需求直接自己搞, 哪怕用最蠢的代码, 只要能解决我的需求, 就可以接受

帖主的 个签好眼熟, 哈哈哈哈

奇怪, ctrl + 点击 不是多选么, 怎么选择单个文档, 我这里默认就会选中一个文档, ctrl + 点击 就会选中两个, 类似与这样

快捷键显示不显示的问题, 是因为 我最开始没找到怎么通过快捷键复制副本, 所以才有那个疑惑, 后来发现可以, 就忘记删掉了

我简单写了一个 js 片段, 不知道能否符合你的要求

// 增加按钮&快捷键实现: 插入图片或文件
// 修改有标记的配置 "[可修改]"

(async () => {

/*******************************自定义配置**************************************/
    // 按钮id
    const btn_e = {
        /***********左上角**********/
        // 返回按钮(左箭头)
        barBack : "barBack",
        // 前进按钮(右箭头)
        barForward : "barForward",
        // 同步按钮
        barSync : "barSync",
        // 皇冠图标
        toolbarVIP : "toolbarVIP",
        // 日历热力图插件
        heatmap : "plugin_Calendar-heatmap_0",
        /***********右上角**********/
        // 搜索按钮
        barSearch : "barSearch",
        // 插件按钮
        barPlugins : "barPlugins",
        // 命令面板按钮
        barCommand : "barCommand",
        /***********左下角**********/
        // 底栏中的隐藏侧栏按钮
        barDock : "barDock",
        /***********右下角**********/
        // 底栏帮助按钮
        statusHelp : "statusHelp",
    }

    // 插入位置
    const position_e = {
        // 插入位置: 目标元素前面
        before : "beforebegin",
        // 插入位置: 目标元素后面
        after : "afterend",
    }

    // [可修改] 触发快捷键
    const hotkey = "ctrl+alt+g"
    // [可修改] 按钮 插入的位置 跟 哪个元素 有关
    const btn_basic_id = btn_e.barForward
    // [可修改] 按钮 插入到 元素 的前面还是后面
    const btn_post = position_e.after
    // [可修改] 按钮 的悬浮显示内容
    const btn_tips = "插入图片或文件"



/*******************************代码分割线**************************************/

    const icon_e = {
        // 设置
        setting : "iconSettings",
        // 代码
        code : "iconCode",
        // 刷新
        refresh : "iconRefresh",
        // 调试
        debug : "iconBug",
        // 下方
        after : "iconAfter",
        // 下载
        download : "iconDownload",
    }

    // 快捷键监听
    document.addEventListener('keydown', event => {
        console.log("hotkey")
        if (checkShortcut(hotkey, event)) {
            // 阻止默认行为，比如浏览器的保存网页操作
            // event.preventDefault();
            quickInsertImgFunc()
        }
    });

    /* 重新加载会有延时, 所以需要等待1s之后再添加按钮 */
    setTimeout(() => {
        // 目标元素id, 插入位置, 新元素id, 显示内容, 图标, 点击回调
        addElement(btn_basic_id, btn_post, "custom_quick_inser_img", btn_tips, icon_e.download, quickInsertImgFunc);
    }, 1000);

    function checkShortcut(hostkey, event) {
        const keys = hostkey.split("+");
        const key = event.key.toLowerCase();
        const isCtrl = event.ctrlKey ? "ctrl+" : "";
        const isAlt = event.altKey ? "alt+" : "";
        const isShift = event.shiftKey ? "shift+" : "";

        const combination = isAlt + isCtrl + isShift + key;
        // console.log(keys.sort().join("+"))
        // console.log(combination)
        return keys.sort().join("+") === combination;
    }

    // 目标元素id, 插入位置, 新元素id, 显示内容, 图标, 点击回调
    function addElement(targetId, position, newElementId, displayContent, icon, clickCallback) {
        let barMode = document.getElementById(targetId);
        if (barMode === null) {
            return ""
        }
        barMode.insertAdjacentHTML(
            position,
            `<div id="${newElementId}" class="toolbar__item ariaLabel" aria-label="${displayContent}"></div>`
        );
        let newBtn = document.getElementById(newElementId);
        if (newBtn === null) {
            return ""
        }
        newBtn.innerHTML = `<svg><use xlink:href="#${icon}"></use></svg>`;
        newBtn.addEventListener("click", clickCallback);
        return newElementId
    }


    function quickInsertImgFunc() {
        const more_btn = document.querySelector('.layout__center [data-type="more"]:not([data-menu]');
        if (more_btn) {
            more_btn.click();
            setTimeout(() => {
                const insert_btn = document.querySelector('#commonMenu > div.b3-menu__items > button:nth-child(1) > span > input');
                if (insert_btn) {
                    insert_btn.click();
                }
            }, 200);

        }
    }
})()