一种简单的文档树 UI 加密，基于 CSS

本文分割线以上是最初的内容，只能对文档内容 UI 加密，不能对文档树产生影响。分割线以下才是对文档树 UI 加密。

首先给文档添加一条约定好的属性，比如"lock"。然后增加如下 CSS 片段并生效。

div[custom-lock]{
    display: none;
}
​

如果要显示内容的话，就通过 F12 开发者工具，找到对应位置，增加一条 style，display: block; 即可。

如何恢复隐藏？刷新或关闭文档即可。

刚刚捣鼓出来了，左侧文档树也可以进行 UI 加密，需要用到 block ID。

① 笔记本加密

CSS 片段形如：

ul[data-url="20231101234567-abcdefg"]{
    display: none;
}
​

想要在文档树中显示笔记本，还是通过 F12 开发者工具，找到对应位置，增加一条 style，display: block; 即可

如何恢复隐藏？只需关闭笔记本即可。

② 文档加密

CSS 片段形如：

li[data-node-id="20230301234567-abcdefg"]{
    display: none;
}
​

想要在文档树中显示该文档，同样通过 F12 开发者工具，找到对应位置，增加一条 style，display: flex; 即可，这里和前面不太一样，需要注意下。

另一种打开文档树中已加密文档的方法是，ctrl+f 搜索

如何恢复隐藏？只需折叠笔记本即可。