面包屑样式改进提议

本贴最后更新于 792 天前,其中的信息可能已经时移世易

目前面包屑的展示样式存在一些问题,其中一个很明显的问题在 引用块悬浮窗的问题 帖子中有提到。

而且思源的面包屑在不同地方的面包屑显示逻辑也不同,有的地方会换行有的地方不会换行,我认为有必要做一下统一与改进。

思源目前面包屑的设计可以总结为:单节点缩略显示 + 面包屑完全显示 + 有时候换行有时候不换行

和其他软件的面包屑样式进行对比:

roam research 中是:单节点完全显示 + 面包屑完全显示 + 换行

image.png

roam research 这种设计的优势在于可以显示最完整的面包屑上文,缺点在于当面包屑很长时会占据顶端位置,缩减了正文页面大小

logseq 中是:单节点完全显示 + 面包屑中间缩略显示(保留文档名 + 当前聚焦点往上三个层级)+ 换行

image.png

logseq 这种设计的优势就是解决了 roam 面包屑的缺点,缺点也就是缺少了 roam 面包屑可以显示完整上文的优势。

如果要 roam research 的设计和 logseq 的设计中选一个的话,我倾向于 logseq 的设计,因为更可控,roam research 有可能导致面包屑爆炸直接占满半个屏幕。

或许还可以结合 roam research 和 logseq 两者的优点:在默认情况下和 logseq 类似,然后用户点击面包屑上面的省略号时,将展示完整的面包屑。这样能糅合两者的优点,同时避免了缺点。

  • 思源笔记

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

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

    20156 引用 • 77717 回帖
1 操作
fangly 在 2022-05-23 00:25:02 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • fangly

    这思路也不错,相当于单节点中间缩略显示(保留文档名 + 保留当前聚焦点往上 3 个层级的单节点 + 其他缩略显示)+ 面包屑完全显示 + 换行

    2 操作
    fangly 在 2022-05-23 12:03:29 更新了该回帖
    fangly 在 2022-05-23 11:37:30 更新了该回帖
  • 其他回帖
  • fangly 3 评论

    针对 2.0.13 的面包屑样式的一些建议,主要关于哪些要缩略,哪些不要缩略:

    image.png

    我觉得原先 2.0.12 的面包屑样式的逻辑就挺不错的,感觉比 2.0.13 好,也比我上面这张图上讲的逻辑要好。因为有了滚动条,不用担心 roam research 设计中可能出现的面包屑占了半个屏幕的问题,没必要让面包屑中间的这些节点都缩略到长度为 1,2.0.12 的“除了浮窗面包屑中的文档路径,其他所有节点统一最大长度为 7”这种逻辑我认为是合适的。

    我觉得可以回到类似 2.0.12 的逻辑

    同时,可以提高 面包屑鼠标悬浮文字显示 的速度,现在貌似大概要 1 秒,可以更快一点,一放上去马上显示,因为鼠标放在面包屑的非块标的地方,用户的意图要么是想悬浮文字显示完整内容,要么是想点击聚焦,一放上去马上显示 不会对用户差生干扰

    4 操作
    fangly 在 2022-05-26 01:27:04 更新了该回帖
    fangly 在 2022-05-26 01:25:56 更新了该回帖
    fangly 在 2022-05-26 01:18:27 更新了该回帖
    fangly 在 2022-05-26 01:17:07 更新了该回帖
    这个缩略是逐个计算的,如果高度大于 2 行就缩略。按照你的描述,是否把缩略的 1 个字换成 7 个字即可?
    Vanessa
    @Vanessa 不止是这个,目前面包屑中第一个节点和最后的几个节点在高度大于 2 行缩略时,会缩略到大概 40 个字,这个我觉得没啥必要,在图中我也说明了原因。所有节点在缩略时的策略应当是相同的,没有哪几个节点是有特权的(主要是要设计特权比较麻烦,logseq 和思源在面包屑设计上还是有很多不同的,直接照搬不太行, 2.0.13 这种逻辑没有太大意义)
    fangly
    @fangly 呃,没太明白。
    Vanessa
  • fangly 1 1 评论

    2.0.12 的逻辑是单节点固定 7 字符长度缩略显示 + 面包屑完全显示 + 换行 + 滚动条,目前感觉挺不错

    目前还有一个问题是,无法判断某个节点是否缩略,我觉得可以在缩略的节点后加一个点来表示缩略

    image.png

    类似于在钉住的标签页上加点:

    image.png

    还有一个问题是,当鼠标浮在面包屑非块标位置时,最好显示该位置对应的全文而不是缩略内容,不然这个悬浮就没有意义了:

    image.png

    1 操作
    fangly 在 2022-05-23 17:03:30 更新了该回帖
    感谢反馈,下个版本继续改进 Issue #4989 · siyuan-note/siyuan
    Vanessa
  • yjmsiyuan 1 赞同

    111111(限定数字,多少可选)>222222>333333>444444>555555>

    666666666666666666666(不限定)》7777777777777

    1 回复
  • 查看全部回帖

推荐标签 标签

  • 安全

    安全永远都不是一个小问题。

    191 引用 • 813 回帖 • 1 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 10 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    83 引用 • 165 回帖 • 5 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    4 引用 • 91 回帖
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    7 引用 • 26 回帖
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 613 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 8 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    164 引用 • 594 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    16 引用 • 53 回帖 • 130 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 283 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 12 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    386 引用 • 1226 回帖 • 593 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    131 引用 • 1114 回帖 • 137 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    495 引用 • 1386 回帖 • 329 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 613 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    28 引用 • 66 回帖 • 7 关注
  • 分享

    有什么新发现就分享给大家吧!

    245 引用 • 1776 回帖 • 1 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 648 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1234 回帖 • 441 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 706 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    106 引用 • 152 回帖