优化列表块脑图显示的一种方案

本贴最后更新于 1330 天前,其中的信息可能已经水流花落

本帖是对 思源笔记建议: 脑图模式的意义与脑图优化的建议 一贴的补充,建议先看那一贴(尤其是我的回帖)再来看本帖。

列表项的显示

列表项容器内各块以标准大纲形式组织时

定义

  • 当且仅当列表项容器属于以下两种情况时,称列表项容器内各块以标准大纲形式组织

    image.png

    1. 列表项容器内只有唯一一个块(可以是超级块)
    2. 列表项容器内有且只有两个块,且前一个块不能是列表块(可以是超级块),后一个块是列表块

如何显示?

就像任何一个大纲类笔记一样转换。具体来说:

  1. 若列表项容器(P)内只有唯一一个块 A

    • 则 P 和 A 作为一个结点显示,显示内容为 A(若 A 是超级块,则渲染)
  2. 若列表项容器(P)内有且只有两个块:非列表块 A 和列表块 B

    1. P 和 A 作为一个结点 PA 显示,显示内容为 A(若 A 是超级块,则渲染)
    2. 列表块 B 的图标不显示
    3. 列表块 B 的子块作为 PA 的子结点

image.png

理想情况:image.png

特别地,当 A 是超级块时,将 A 结点渲染出来(渲染时会稍微缩小字体):image.png

列表项容器内各块以线性形式组织时

定义

列表项容器内各块不以标准大纲形式组织,称列表项容器内各块以线性形式组织

image.png

换句话说,在幕布等大纲类笔记中实现不了的结构都一律称为线性结构。

我估计以线性形式组织(不以标准大纲形式组织)的情况占实际使用的比例不超过 20%,没有必要花大量精力去解析其逻辑结构,而且由于线性结构变换多端过于复杂想解析也是很难的,下面将介绍一种简便的显示方式。⭐️ 核心是显示时保留线性结构,放弃软件自动解析为大纲,而是让用户手动根据实际情况来构建大纲。

显示方法

将内容以线性形式组织的列表项容器渲染为一个结点(就好像这个节点是一个嵌入块),渲染时字体大小相对正常块更小,而且节点大小不能过大(高度、宽度控制在合适范围内,通过滚动条上下查看,允许用户拖拽边界修改大小)。

暂时命个名:
以这种方式显示的结点称为线性结点(内部包含多个块,各块线性组合在一起),以标准大纲形式正常显示的结点称为大纲结点

image.png

线性结点中的任何一个块都可以被提出,即放到线性结点之后作为其子结点,被提出的结点的类型为大纲结点。如果是列表块被提出,则自动展开;如果是标题块,则按照上一贴所说的方式自动展开。

image.png

再举一个例子(例子里的内容实际上放在线性结点里就行了,没有必要提出显示在脑图中,但请不要在意)
image.png

列表块图标的显示

  • 当列表块 C 的父块 P 为列表项容器,且父块 P 内各块以标准大纲形式组织时(P 中只含有两个子块:列表块 C 和非列表块 A,A 在 C 之前),列表块 C 不显示列表块图标,C 的子列表项作为 A 的子结点显示
    image.png
  • 当列表块 C 的父块 P 为标题块或者文档块,且 C 是父块 P 的唯一一个子块时,列表块 C 不显示列表块图标,C 的子列表项作为 P 的子结点显示
    image.png
  • 其它情况均需要显示列表块图标

总结

下面总结从文档块开始到标题块再到列表块内部,各块转为脑图后的显示方式

  • 满足以下任一条件的块,相邻各块整体作为一个线性结点

    • 夹在标题块之间、文档块首末和标题块之间或者文档块首末之间的内容
      (但要排除作为唯一子块的列表块)
    • 列表项容器内以线性形式组织的各个块
  • 其余的块要么不显示(如块标隐藏的列表块),要么显示为大纲结点(如所有的标题块)

  • 被渲染的超级块单结点属于大纲结点

线性结点的特点:

  • 包含块的数量:大于等于 1

  • 渲染方式

    • 类似嵌入块
    • 渲染时字体大小相对大纲结点更小,而且节点大小不能过大(高度、宽度控制在合适范围内,通过滚动条上下查看,允许用户拖拽边界修改大小)
  • 子结点的特点

    • 是从线性结点中被提出的块构成的
    • 子结点的排列顺序是根据线性笔记里固有的顺序来的,而且在脑图中不能通过移动节点来调换这个顺序,除非修改线性笔记的顺序
    • 在物理存储结构上,一个块是否提出是依据这个块的内容(重要性、与主题的相关度)决定的,所以是块的本身的属性,与它所在的线性结点无关。假如把这个块移动到另一个线性结点对应区域中,它还是会在脑图中被单独提出来(所谓“是金子在哪儿都能发光”)
  • 如果可能的话,允许直接在脑图模式修改内容(就像修改嵌入块一样)

大纲结点的特点:

  • 包含块的数量:只有 1 个

  • 渲染方式

    • v1.8 现有的样式
    • (也可以考虑把大纲结点和线性结点一样渲染出来)
  • 双击或点击按钮打开对应的悬浮窗(或者可用快捷键/按钮切换到所见即所得模式)

测试用例

  • 降水基本要素

    • 降水量

      指一定时段内降落在某一面积上的总水量,用降落在地面上相应的水层深度表示,以 mm 计。

      • 降水量一般分为 7 个等级。降水量等级表:image.png
      • 降水量可用自记雨量计等仪器进行观测,记录降雨量及降雨过程。
    • 降水持续的时间称为【降水历时】,以 min、h 或 d 计。

内容块动态查询示例:

  • 查询内容中包含 内容块 的列表项:

    !{{ i:内容块 }}
    
  • 查询内容中同时包含 内容块引用 段落块:

    !{{ p:(内容块 AND 引用) }}
    
  • 查询内容中同时包含 内容块嵌入 的标题块并按时间降序结果取前 2 条:

    !{{ SELECT * FROM blocks WHERE (content LIKE '%内容块%' AND content LIKE '%嵌入%') AND type = 'h' ORDER BY block_id DESC LIMIT 2 }}
    
  • 思源笔记

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

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

    23013 引用 • 92566 回帖
1 操作
EndlessErrors 在 2021-05-02 00:56:49 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 感谢帮忙思考,有点硬核,需要时间消化 🙏

    1 回复
  • EndlessErrors 1 赞同

    其实也没有很硬核,看似繁杂但实质很简单且符合直觉,要理解我说的方案,关键点有两个,一是理解“线性结点”和“大纲结点”两个概念,二是心里要有一个理想的脑图形式然后想办法去实现它。

    帖子写了很多啰里啰嗦的东西,都是实现起来的细节,即如何实现。我补充一下为什么要这么做。

    (时间有限,我只能直接放一个大纲在这里)

    • 引入线性结点的出发点

      • 减少块数量,使脑图兼具完整性和简洁性

        • 多个块被压缩到一个结点
      • 放弃软件自动解析线性组织的块集合,把构建脑图的任务转交给用户手动完成

        • 原因:太复杂 + 情况少见
        • 方式:“提出”功能把关键的块从线性结构中分离出去(然后软件继续自动解析展开这些关键的块)
      • 标准大纲解析模式无法完整描述文档层次结构,引入线性结点则可以

        • 标准大纲解析模式引入引入线性结点后,暂时可以称为“线性-大纲”结构解析模式,适应于“文档包围大纲”的编辑模式
    • 突破性

      • 块与结点的关系,类似砖块与房间的关系

        • 块是结构材料,脑图结点是逻辑单元
      • 脑图关注的更多是逻辑关系,所以块作为脑图基本单元是不合适的(V1.1.8 脑图不合理的根源)

      • 线性结点本质不是逻辑单元,但是“提出”功能允许用户把逻辑单元作为其子结点

    • 自然性(直觉)

      • 从属关系自然

        • 大纲结点的子结点对应的块是父结点对应的块的子块
        • 线性结点的子结点对应的块是父结点对应的块集合的一个成员
      • 脑图各个结点的顺序是和所见即所得模式的块(或块集合)顺序一致

    然后再对方案做点补充。

    对线性结点进一步优化

    如果线性结点对应的块集合只有一个块,线性结点退化为大纲结点

    脑图展开形式对面包屑的启发

    在脑图上沿文档块走到每一个块的路径就是这个块的面包屑。大纲结点和线性结点的显示略有不同。

    大纲结点在面包屑中的显示

    每一个大纲结点都显示块标(标题块或列表项块标)+ 内容

    例子:(假设列表块是文档块的唯一子块,则列表块标并不会显示)image.png

    image.png\image.pngfoo\image.pngbar\image.pngbaz1.1\image.pngbaz1.1

    线性结点在面包屑中的显示

    1. 处于标题块(和文档块首尾)之间的线性结点,不显示块标和内容;
    2. 处于列表中间的线性结点,显示块标(列表项块标)和内容。

    例子:

    image.png

    image.png\image.png示例\(这里本来有一个处于标题块之间的线性结点,不显示块标和内容)\image.png\image.png查询内容中包含内容块的列表项!{{i:内容块}} (这是处于列表中间的线性结点,显示块标和内容,内容太长的话会精简)\image.png!{{i:内容块}}

    实际效果:

    image.png \image.png示例\image.png\image.png查询内容中包含内容... \image.png!{{i:内容块}}

    (是否显示列表块图标见本帖正文)