回帖 - HugZephyr

[代码片段分享] 二级文档树简略版 _release_v1.0

2024-08-29 21:39

开关可以搞, 有空我加一下

非常非常想要二级文档树

2024-08-29 20:43

我已实现二级文档树简略版

疯狂戳

[代码片段分享] 二级文档树简略版 _release_v1.0

2024-08-29 20:41

点击末级文档不消失这个确实是要搞的

这是后来才发现的, 涉及到关闭和打开按钮放在哪里, 框架也不太一样, 就没改

一级树原有的功能, 我不会改, 就保留原有的效果了

[已解决] 思源笔记的搜索功能改进建议

2024-08-29 19:57

提醒一下:

如果文件内容过多, 有些内容不会渲染

没有渲染的内容不会被搜到

彻底解决思源 3.1.4 代码块选择的问题

2024-08-29 08:55

你不先看下 issue 有没有关
还好我没升级

数据历史 - 文件历史，能否调整标题的显示宽度？

2024-08-27 14:03

.history__panel>.b3-list {width:512px;}

宽度自己调

调查：大家觉得这个主题怎么样？

2024-08-27 12:11

其实吧, 笔记的主题想弄好看很难

因为笔记本身的内容太素了

一个主题只能改一些边框啊, 按钮啊, 占得地方比较少, 整体看下来, 就没啥感觉

但是修改的样式一旦多了, 就会很花里胡哨

怎么修改引用链接的颜色呢？

2024-08-27 10:57

引用是其他的 css

.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="d"]{color:red !important;}

.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="s"]{color:red !important;}

这是我用的引用的 css 片段


/* 块引用锚文本附加 ｢｣ 符号 */
:root {
    --b3-protyle-inline-blockref-d-color: var(--b3-protyle-inline-blockref-color);
    --b3-protyle-inline-blockref-s-color: var(--b3-protyle-inline-link-color);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="d"] {
    color:var(--b3-protyle-inline-blockref-d-color);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="d"]::before {
    content: "｢";
    display: inline-block;
    font-size: 100%;
    color:var(--b3-protyle-inline-blockref-d-color);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="d"]::after {
    content: "｣";
    display: inline-block;
    font-size: 100%;
    color:var(--b3-protyle-inline-blockref-d-color);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="s"] {
    color:var(--b3-protyle-inline-blockref-s-color);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="s"]::before {
    content: "｢";
    display: inline-block;
    font-size: 100%;
    color:var(--b3-protyle-inline-blockref-s-color);
    transform: scale(1, -1);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="s"]::after {
    content: "｣";
    display: inline-block;
    font-size: 100%;
    color:var(--b3-protyle-inline-blockref-s-color);
    transform: scale(1, -1);
}

about 文档树的彩虹目录

2024-08-26 19:26

或者你要的是这种

颜色的问题, 就自己调吧, 众所周知, 开发没有审美, 何况我是个后台的的开发


: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);
}


div.sy__file>div.fn__flex-1>ul:nth-of-type(1) {background-color: var(--b3-tree-node-background-1);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(2) {background-color: var(--b3-tree-node-background-2);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(3) {background-color: var(--b3-tree-node-background-3);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(4) {background-color: var(--b3-tree-node-background-4);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(5) {background-color: var(--b3-tree-node-background-5);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(6) {background-color: var(--b3-tree-node-background-6);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(7) {background-color: var(--b3-tree-node-background-7);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(8) {background-color: var(--b3-tree-node-background-1);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(9) {background-color: var(--b3-tree-node-background-2);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(10) {background-color: var(--b3-tree-node-background-3);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(11) {background-color: var(--b3-tree-node-background-4);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(12) {background-color: var(--b3-tree-node-background-5);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(13) {background-color: var(--b3-tree-node-background-6);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(14) {background-color: var(--b3-tree-node-background-7);}

about 文档树的彩虹目录

2024-08-26 19:16

我差不多是按照这个图做的, 有特殊需求, 可以自己微调一下

个人看法: 如果不会代码, 可以自己简单学习一下, 这样以后如果遇见一些简单的需求都可以自行搞定, 把思源折腾成自己想要的模样, 不是很爽么

求代码片段 | 默认全屏编辑

2024-08-26 19:02

全是抄的, 一点的技巧都木得

怎么修改引用链接的颜色呢？

2024-08-26 18:34

没用 savor 主题, 不知道是否可行

.protyle-wysiwyg [data-node-id] span[data-type="a"][data-href]{color:red !important;}

求代码片段 | 默认全屏编辑

2024-08-26 18:11



/** 获取配置里面的快捷键, 并触发
 * 
 */
function dispatchKeyEvent(functionName) {
  let keyInit = parseHotKeyStr(window.top.siyuan.config.keymap.general[functionName].custom);
  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);
}

/**
 * 
 * @param {*} hotkeyStr 思源hotkey格式 Refer: https://github.com/siyuan-note/siyuan/blob/d0f011b1a5b12e5546421f8bd442606bf0b5ad86/app/src/protyle/util/hotKey.ts#L4
 * @returns KeyboardEventInit Refer: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/KeyboardEvent
 */
function parseHotKeyStr(hotkeyStr) {
  let result = {
    ctrlKey: false,
    altKey: false,
    metaKey: false,
    shiftKey: false,
    key: 'A',
    keyCode: 0
  }
  if (hotkeyStr == "" || hotkeyStr == undefined || hotkeyStr == null) {
    console.error("解析快捷键设置失败", hotkeyStr);
    throw new Error("解析快捷键设置失败");
  }
  let onlyKey = hotkeyStr;
  if (hotkeyStr.indexOf("⌘") != -1) {
    result.ctrlKey = true;
    onlyKey = onlyKey.replace("⌘", "");
  }
  if (hotkeyStr.indexOf("⌥") != -1) {
    result.altKey = true;
    onlyKey = onlyKey.replace("⌥", "");
  }
  if (hotkeyStr.indexOf("⇧") != -1) {
    result.shiftKey = true;
    onlyKey = onlyKey.replace("⇧", "");
  }
  // 未处理 windows btn （MetaKey） 
  result.key = onlyKey;
  // 在https://github.com/siyuan-note/siyuan/commit/70acd57c4b4701b973a8ca93fadf6c003b24c789#diff-558f9f531a326d2fd53151e3fc250ac4bd545452ba782b0c7c18765a37a4e2cc
  // 更改中，思源改为使用keyCode判断快捷键按下事件，这里进行了对应的转换
  // 另请参考该提交中涉及的文件
  result.keyCode = keyCodeList[result.key];
  console.assert(result.keyCode != undefined, `keyCode转换错误,key为${result.key}`);
  switch (result.key) {
    case "→": {
      result.key = "ArrowRight";
      break;
    }
    case "←": {
      result.key = "ArrowLeft";
      break;
    }
    case "↑": {
      result.key = "ArrowUp";
      break;
    }
    case "↓": {
      result.key = "ArrowDown";
      break;
    }
    case "⌦": {
      result.key = "Delete";
      break;
    }
    case "⌫": {
      result.key = "Backspace";
      break;
    }
    case "↩": {
      result.key = "Enter";
      break;
    }
  }
  return result;
}

if (g_addSnippets) addSnippets();

const keyCodeList = {
  "⌫": 8,
  "⇥": 9,
  "↩": 13,
  "⇧": 16,
  "⌘": 91,
  "⌥": 18,
  "Pause": 19,
  "CapsLock": 20,
  "Escape": 27,
  " ": 32,
  "PageUp": 33,
  "PageDown": 34,
  "End": 35,
  "Home": 36,
  "←": 37,
  "↑": 38,
  "→": 39,
  "↓": 40,
  "PrintScreen": 44,
  "Insert": 45,
  "⌦": 46,
  "0": 48,
  "1": 49,
  "2": 50,
  "3": 51,
  "4": 52,
  "5": 53,
  "6": 54,
  "7": 55,
  "8": 56,
  "9": 57,
  "A": 65,
  "B": 66,
  "C": 67,
  "D": 68,
  "E": 69,
  "F": 70,
  "G": 71,
  "H": 72,
  "I": 73,
  "J": 74,
  "K": 75,
  "L": 76,
  "M": 77,
  "N": 78,
  "O": 79,
  "P": 80,
  "Q": 81,
  "R": 82,
  "S": 83,
  "T": 84,
  "U": 85,
  "V": 86,
  "W": 87,
  "X": 88,
  "Y": 89,
  "Z": 90,
  "ContextMenu": 93,
  "MyComputer": 182,
  "MyCalculator": 183,
  ";": 186,
  "=": 187,
  ",": 188,
  "-": 189,
  ".": 190,
  "/": 191,
  "`": 192,
  "[": 219,
  "\\": 220,
  "]": 221,
  "'": 222,
  "*": 106,
  "+": 107,
  "-": 109,
  ".": 110,
  "/": 111,
  "F1": 112,
  "F2": 113,
  "F3": 114,
  "F4": 115,
  "F5": 116,
  "F6": 117,
  "F7": 118,
  "F8": 119,
  "F9": 120,
  "F10": 121,
  "F11": 122,
  "F12": 123,
  "NumLock": 144,
  "ScrollLock": 145
};

求代码片段 | 默认全屏编辑

2024-08-26 18:11

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



    // 通过快捷键(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);
    }

求大家推荐：关于思源笔记使用教程学习的群？

2024-08-26 18:03

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

about 文档树的彩虹目录

2024-08-26 18:01

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

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

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

所以有个极其简陋的 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);}

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

求代码片段 | 默认全屏编辑

2024-08-26 17:13

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

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

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

分享笔记的分类

2024-08-26 12:39

mp.weixin.qq.com

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

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

非常非常想要二级文档树

2024-08-26 12:12

更优雅说服我了

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

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

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

非常非常想要二级文档树

2024-08-26 11:35

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

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

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

非常非常想要二级文档树

2024-08-26 10:52

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

非常非常想要二级文档树

2024-08-26 10:15

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

显示二级文档树

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

事件监听

监听一级文档树点击事件

获取点击的笔记本 id 和文档 id (可行)

通过以下 api, 获取子文档列表 (未验证)


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

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

监听二级文档树点击事件

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

如何让右键菜单跟随右键位置

2024-08-25 12:23

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

分享链滴自动签到 puppeteer 脚本

2024-08-25 09:49

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

如何让右键菜单跟随右键位置

2024-08-25 09:46

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

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

非常非常想要二级文档树

2024-08-24 18:37

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

非常非常想要二级文档树

2024-08-24 18:09

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

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

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

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

非常非常想要二级文档树

2024-08-24 18:02

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

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

找文档可以使用搜索功能, 过滤类型只勾选文档, 像这样
推荐双链功能, 有关联的都链一起
推荐一个插件, 显示子层文档的

求助 | 双链 CSS 样式修改

2024-08-24 17:49

补充

双链去掉下划线
删掉 border-bottom: 1px dashed !important;
备注的下划线不被覆盖
border-bottom: 1.5px solid #b8c898; 改成 border-bottom: 1.5px solid #b8c898 !important;
高亮样式正常
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;
}

求助 | 双链 CSS 样式修改

2024-08-24 17:18


    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;
    }