能否提供更多样的页签展示方式

在大部分的软件(如浏览器,wps,notion 等)中,每个页签的宽度是相同的,个人更习惯这种操作方式
(下图位 edge 浏览器的页签)
QQ 截图 20240310205417.png

(下面为 notion 的页签)
QQ 截图 20240310205747.png

而思源的页签宽度会根据标题的长度调整,有些标题短的文章页签很窄,不容易点到。
(下图是思源的页签)
QQ 截图 20240310205947.png

我按照论坛中之前的方法(页签的宽度能否自定义 (通过代码块、或修改配置文件) 手工调整宽度? - 链滴 (ld246.com))添加了 css 后,实现了固定宽度,但是"页签切换"的按钮发生了错乱。
能否添加一个选项,能够以相同的宽度展示页签,方便操作?

  • 思源笔记

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

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

    20648 引用 • 80710 回帖 • 2 关注
1 操作
viayuu 在 2024-03-10 21:17:13 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 我又搞了一个让页签叉号始终显示的 CSS 代码片段,体验更接近浏览器了:

    image.png

    /*始终显示页签叉号*/
    .layout-tab-bar .item:hover .item__close svg, .layout-tab-bar .item .item__close svg {
        opacity: .68;
    }
    
  • 其他回帖
  • 赞同,页签很窄的时候我很容易点到叉号关闭页签

    @Vanessa

    自定义 CSS 应该是可以用的。这个显示器不一样宽度不好定。
    Vanessa
  • JeffreyChen 1 1 评论

    我刚刚写了一个 Savor 主题 专用的(其他主题需要稍微调整一下):

    image.png

    /*自定义页签最小宽度 CSS片段 (Savor主题自用)*/
    .layout-tab-bar .item:not(.item--pin):not(.item--readonly)[data-type="tab-header"] {
        min-width: 105px; /*调整页签的最小宽度,只改这个值就可以了,其他代码不需要动*/
    }
    
     /*调整叉号位置*/
    .layout-tab-bar .item:not(.item--pin):not(.item--readonly)[data-type="tab-header"] .item__text {
        padding-right: 28px; /*调整叉号与标题文本间的最小距离*/
        max-width: calc(100% - 61px); /*使叉号不与标题文本重叠*/
    }
    .layout-tab-bar .item:not(.item--pin):not(.item--readonly)[data-type="tab-header"] .item__close {
        position: absolute; /*让叉号靠右*/
        right: 0px;
        padding-left: 6px; /*扩大叉号点击范围*/
    }
    

    另外再给一个添加背景色的 CSS 片段(颜色未必好看,可以自己改):

    /*给页签添加背景色*/
    .layout-tab-bar .item:not(.item--pin):not(.item--readonly)[data-type="tab-header"] {
        background-color: var(--b3-card-error-background);
    }
    
    1 操作
    JeffreyChen 在 2024-03-12 01:19:36 更新了该回帖
    感谢,解决了
    viayuu
  • viayuu
    作者

    这个是修复"x"号位置错乱的问题的。"页签切换"的位置还是不对

    1 回复
  • 查看全部回帖

推荐标签 标签

  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    54 引用 • 85 回帖 • 1 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    138 引用 • 268 回帖 • 102 关注
  • ZooKeeper

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

    59 引用 • 29 回帖 • 1 关注
  • 设计模式

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

    198 引用 • 120 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    546 引用 • 3531 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 166 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    189 引用 • 1056 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 613 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 908 回帖 • 221 关注
  • 博客

    记录并分享人生的经历。

    272 引用 • 2386 回帖
  • webpack

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

    41 引用 • 130 回帖 • 274 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 21 关注
  • 思源笔记

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

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

    20648 引用 • 80709 回帖 • 2 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 1 关注
  • C++

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

    106 引用 • 152 回帖 • 3 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 351 关注
  • 创业

    你比 99% 的人都优秀么?

    83 引用 • 1398 回帖
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 468 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 48 关注
  • Electron

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

    15 引用 • 136 回帖 • 10 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 614 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 11 关注
  • flomo

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

    5 引用 • 103 回帖
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖 • 2 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 334 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    942 引用 • 1459 回帖 • 96 关注