面包屑样式改进提议

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

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

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

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

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

image.png

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

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

image.png

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

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

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

1 操作
fangly 在 2022-05-23 00:25:02 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • fangly 5 评论
    订阅者 作者

    举个例子,比如下面这张图中,我框起来的这几个也可以改成缩略到 7 个字,现在全部显示意义不大,比如像图中最后两个“00000000000000000000”,我光标就在这个位置,我直接在文档正文中看就好了,面包屑上又把我光标所在的内容全部显示出来了,比较冗余,看面包屑绝大多数情况是为了看上文,当前块没必要在面包屑中完全显示

    image.png

    我大概明白了,就是该 1 个字的还是 1 个字,否则就是 7 个字?
    Vanessa
    @Vanessa 我觉得这里面 1 个字的也应该变成 7 个字,因为有滚动条,没必要缩略到 1 个字。换句话说,我建议是 2.0.12 的缩略逻辑 +2.0.13 的动态计算,超过一行了就开始缩略,从左往右逐个缩到 7 个字
    fangly
    @fangly 12 版本是固定的 7 个字,然后缩略为一个字。现在就是保持现状不变,缩略的时候变为 7 个字? Issue #5019 · siyuan-note/siyuan
    Vanessa
    @Vanessa 感觉有点说不太清楚,2.0.14 出来后再体验看看吧trollface
    fangly
    @fangly 👌
    Vanessa
  • 其他回帖
  • yjmsiyuan 1 赞同

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

    666666666666666666666(不限定)》7777777777777

    1 回复
  • fangly 1 评论
    订阅者 作者

    补充一个点,如果是只有一行横向滚动的话,还需要考虑定位的问题,也就是说面包屑要自动滚动到最右边(也不一定要是最右边,可以再研究一下),保障面包屑中能显示当前光标所在的块

    IDE 的面包屑应该都有类似这种定位逻辑(我用的 vscode 是这样的),或许可以参考一下它们的逻辑

    IDE 居然不会滚。做的时候想了一下,当时没想好,现在也没想好。
    Vanessa
  • fangly
    订阅者 作者

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

    2 操作
    fangly 在 2022-05-23 12:03:29 更新了该回帖
    fangly 在 2022-05-23 11:37:30 更新了该回帖
  • 查看全部回帖
融合块、大纲和双向链接
构建你永恒的数字花园
思源笔记是一款本地优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步

推荐标签 标签

  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    21 引用 • 7 回帖 • 343 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    138 引用 • 255 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 668 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    187 引用 • 283 回帖 • 506 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    254 引用 • 666 回帖 • 285 关注
  • 倾城之链
    18 引用 • 47 回帖 • 41 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    172 引用 • 423 回帖 • 2 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    81 引用 • 122 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 692 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    14 引用 • 7 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 3 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    239 引用 • 616 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 11 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    104 引用 • 126 回帖 • 547 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 13 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    108 引用 • 99 回帖 • 406 关注
  • 一些有用的避坑指南。

    67 引用 • 94 回帖
  • 996
    13 引用 • 200 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    4198 引用 • 19783 回帖 • 428 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    29 引用 • 88 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 602 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 90 关注
  • 国际化

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

    7 引用 • 26 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    190 引用 • 120 回帖 • 1 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    62 引用 • 785 回帖 • 390 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    16 引用 • 142 回帖
  • FlowUs

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

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

    1 引用 • 5 回帖 • 2 关注