你应该有其他的样式和主题, 所以不确定这个你能不能用

自己调一下 90

/*只修改标题上的标签*/
div[data-type="NodeHeading"]>div>span[data-type="tag"] {font-size:calc(90%);}
/*修改文档里所有标签*/
.layout__center span[data-type="tag"] {font-size:calc(90%);}

在这些 h3 前面 加一个 h2

然后右键 h2, 选择 带子标题转换

我平时文档的一级标题都是用的 h2, 进可攻, 退可守

1000 自己调

.layout__center textarea{width:1000px!important;}

这方法好, 先掏钱, 再干活

文档树肯定是非常必要的功能, 没有文档树我会直接弃

我的意思是, 可以先考虑需求, 再考虑效果, 所有的效果都是为了解决需求

个人建议在讨论思路之前, 可以先明确一下自己的需求: 文档树这种形式可以对自己有什么帮助, 然后再考虑交互效果

最近我发现, 我一般都是在需要归档(有新笔记)的时候, 才会用到文档树, 而归档其实对文档树的要求不高

笔记我更多的是拿来检索, 平时检索的时候, 一般都是直接搜索文档名的, 很少用到文档树

因为我感觉文档多了之后, 不管文档树是什么效果, 用起来都比较繁琐

在脱离思源的基础上, 我还没想到一个好的交互, 可以通过文档树, 让检索变得简单

我调的时候, 一般也是重新加载, 我还特意在顶栏加了重新加载的按钮

文档树自定义 插件可以在鼠标悬停的时候, 换行

1. css 是可以隐藏文档树图案, 但是隐藏之后, 是文字左移, 而不是折叠按钮右移

   /* 隐藏: 文档树->文档->图标 */
   div.sy__file>div.fn__flex-1 ul>li>span.b3-list-item__icon {display: none!important;}
   

2. 你用的这个插件应该是文档树自定义, 它里面有个文档树压缩, 可以研究一下
3. 另外, 推荐一个 js 片段, 单击折叠/展开文档树, 也可以试下效果

   /* 文档树点击文档自动展开下级 JS片段 */
   setTimeout(() => {
       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();
       });
   }, 200);
   
   

css 可以调整高度, 不过这是统一调整的,

.protyle-background__img:not(.fn__none)>img {height:30px;}

有个规避方案, 将文档内容复制出来, 然后将 ## 替换成 ###

然后再粘到文档内里

夸奖我就收下了, 但是声明一下, 这插件不是我做的, 哈哈哈

呃, 别骂了, 别骂了, 这不是我做的插件, 我也是今天逛集市的时候无意中看到的

@Floria233 二级文档树有插件了, 我这边之后就不会再更新 js 代码了
这个插件已经实现了大部分功能

确实, 虽然我只有一个空间, 但是感觉这个功能很好用

我觉得可以参考下 ediary 的效果

1. 正常进入之后, 默认是选择工作空间页面, 而不是默认进入某个空间 (如果能做成配置, 那更好了)
2. 右键任务栏图标, 选择空间, 还能设置置顶什么呢, 比较方便, 其实这个功能好多软件都有, 盲猜算是成熟的技术

那就是因为: 文档树加载的时候有延时导致的, 所以 js 代码也加一个延时就行了, 一般 200 就够了, 如果还不行, 就自己调高一点, 单位是毫秒

/* 文档树点击文档自动展开下级 JS片段 */
setTimeout(() => {
    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();
    });
}, 200);

误人子弟了, 之前说的代码有问题, 应该是这样

.layout-tab-container div.b3-tooltips__w {opacity:1; color:red;}
.layout-tab-container div.b3-tooltips__w.protyle-scroll__up {top:calc(10%);}
.layout-tab-container div.b3-tooltips__w.protyle-scroll__down {bottom:calc(20%);}

倒也不是不行

小声说, 理论上这个片段是不太严谨的

他在监听到 shift+f5 的时候, 就会被触发

也就是说, 如果是 ctrl+shift+f5 或者 alt+shift+f5 等 包含 shift+f5 都会触发

这玩意我也是跟 ai 聊天的时候发现的, 如果遇到类似的问题, 可以参考下面的写法

// 要监听的快捷键
const hot_key = "ctrl+n";
// 判断按下的快捷键, 是否与hostkey相同
// event: 事件
// hostkey: 要比较的快捷键
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;
    return keys.sort().join("+") === combination;
}
// 监听键盘按下事件
document.addEventListener('keydown', event => {
    if (checkShortcut(hot_key, event)) {
        // 快捷键触发
    }
});

放到最上面的工具栏, 应该做不了, 要用到 js 代码, css 只能调整这个按钮的上下位置,你可以自己调下

.layout-tab-container > div:nth-child(3) div.b3-tooltips__w.protyle-scroll__up {top:calc(20%);}
.layout-tab-container > div:nth-child(3) div.b3-tooltips__w.protyle-scroll__down {bottom:calc(20%);}

这段代码, 我之前好像见过, 从逻辑上讲, 它是有一点小 bug 的

新建个 js 片段,把这个代码粘贴进去, 看下还能用不, 如果不能用, 就应该是环境的问题而不是代码的问题

我感觉 ctrl+home 和 ctrl+end 还挺好用的, 哈哈

放到工具栏比较麻烦, 可以将这两个按钮设置为一直显示, 如果还不显眼, 可以改写颜色什么的

.layout-tab-container > div:nth-child(3) div.b3-tooltips__w {opacity:1; color:red;}

效果如下

喜大普奔, d 大终于要动文档树了

可以在灯的基础上扩展

有一排 10 个灯, 每个灯有自己的开关

全部折叠/全部展开 类比于 按钮

保持展开的功能开关 类比于 开关

J 佬, 你这说法, 也说服不了我, 哈哈

1. 用户使用
   从使用上看, 插件和代码片段感觉没啥区别
   插件对于 用户: 配置可视化, 很友好
   代码片段对于 不会技术的用户: 一些代码完全可以拿来就用的, 不需要修改啥配置, 也没啥不方便的
2. 用户发现 bug
   插件: 用户也不能直接修改插件, 他只能反馈问题, 等待作者更新, 事实上: 插件只有作者在维护
   代码片段: 修改起来更方便, 会点技术都可以改的, 就算是小白, 也可以在 ai 的帮助下进行改动, 而且, 因为修改的门槛低, 维护的人会更多
3. 关于开发者维护
   插件有人在更新, 我觉得 也肯定有人已经失联不更新了(暂无实证)
   那代码片段为什么就不会有开发者在更新呢, 代码片段也可以做更新功能

粗浅的对代码片段进行下分类

1. 非常简单, 拿来即用
2. 复杂一点, 需要通过自行修改代码来修改配置的

对于第一种, 感觉各方面和插件完全一样

对于第二种, 这种本身就是双向选择的, 开发者为了节省时间, 实现的时候,省略了一些东西(gui 配置); 用户如果要用到这个代码, 那你就要付出的时间, 去研究, 去解决 bug

为什么要用这种代码, 因为没有更好的选择了啊, 他虽然比不上插件那么好用, 但是他至少有用

臣附议

就是微信这傻缺

你提到大型软件, 我脑子里只有一个软件, 我心目中交互设计的 唯一真神

我理解的 始终展开 是一个开关; 全部展开/折叠 是一个动作

始终展开 可以是个单独的开关, 这个没啥问题

全部展开/折叠 都是动作, 所以可以合并到一起(不过是否合并都是见仁见智的, 各有好处吧)

我想反馈的是 开关和动作 应该从效果上做出区分

这个事情我还真想过, 半开的状态, 优先折叠, 如果像点开需要点两下

一个按钮的好处是节省空间