登录 注册

如何做到大纲悬浮？

每次都要在停靠栏上面点击大纲很麻烦而且不太直观，想要大纲导航能够悬浮悬浮在文档上，怎么做？

  • 思源笔记

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

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

    23007 引用 • 92542 回帖
佛山 位置
1 关注
17 回帖
6
4
2
634 230 386 5 1 10

相关帖子

17 回帖
如何做到大纲悬浮？

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • JeffreyChen • • 1
    付费者 支持者 捐赠者

    除了钉住侧栏以外，只能取消钉住侧栏。目前没有别的方式

  • linxi1 •
    订阅者

    +1，我也有类似的需求

  • coikno •
    付费者

    +1，我也有类似的需求

  • JeffreyChen • • 1 • 1 赞同
    付费者 支持者 捐赠者

    @participants 有需求的话就描述一下需求是什么，画个图示都好

    1 回复
  • mozhu •
    订阅者 付费者 支持者 捐赠者

    那就 alt o

  • lunarcream •
    订阅者 作者

    image.png参考 Microsoft word

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    这样悬浮目前还是做不到，最多就是鼠标移动到侧边栏然后悬浮出来

    2 回复
  • lunarcream •
    订阅者 作者

    像论坛的这种呢image.png

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    这种就是固定在侧边的，思源差不多就是这种

    1 回复
  • lunarcream • • 1 赞同
    订阅者 作者

    我总感觉差好多，思源的那个钉住会把编辑器缩起来，而且视觉上的感觉是占用了一大片位置，但是至少像论坛这样的悬浮（虽然不是窗口），会轻巧很多，而且向下滚动他是带有联动效果的

  • lunarcream •
    订阅者 作者

    现在取消钉住时指针停靠的时候不是会出现下面那种样式吗，把这种样式固定住，也就是说不需要停靠也能出现这种样式，不就能实现类似窗口的形式了吗（虽然不能移动，但我觉得比原来的好很多）image.png

  • MOU •
    付费者

    +1

  • wilsons • • 1
    付费者 捐赠者

    这是我简单实现的效果，但不是真正的悬浮大纲

    image.png

    我是通过下面这两个插件配合 +css 模拟的

    第一个插件

    image.png

    第二个插件

    image.png

    怎么做？

    首先，用第一个插件在目标文档中插入大纲

    然后，用第二个插件把第一个插件插入的大纲设置悬浮

    image.png

    最后，css 代码片段加入以下样式

    /* 设置大纲样式 */
div[custom-block-position="sticky"] {
    position:absolute!important;
    top: 60px!important;
    right: 0!important;
    left: auto!important;
    background-color: var(--b3-theme-background);
}
/* 设置编辑器宽度，给大纲让出位置 */
.protyle-wysiwyg{
    width:90%;
}

    注意，这个样式需根据自己情况调整。

    缺点，这种方式只能针对某一个文档，不能通用，但如果样式调整好了，后期只需在需要的文档里插入大纲，设为悬浮就好了。

    ⚠️ 警告：以上只是提供一个思路，这只是一个 demo，不是成品，肯定存在诸多问题，请根据自身情况调整。

    另外，我觉得这个大纲应该可以实现，思源已经有 api 可以获取大纲数据，只需要配合 js 和 css 输出并做好兼容应该就可以了。

    只是，不知道有没有大佬愿意去做。

    个人觉得，这样的需求会不会是小众需求，大纲放到文档里会不会太占空间，尤其是小屏幕的用户，悬浮展示不好吗？毕竟笔记不是浏览器，笔记里通常会打开侧边栏等，而浏览器通常不会。而且，有人看文章时会不停点大纲吗？一般应该只是偶尔操作下吧，如果这样的话，岂不是现有的悬浮方式更合适，没有别的意思，只是疑惑大家为什么有这个需求。

    不知道你的想法或理由是什么？

    2 回复
    1 操作
    wilsons 在 2024-08-12 09:07:18 更新了该回帖
  • lunarcream •
    订阅者 作者

    主要是思源这个悬浮显示也不是真正的悬浮，我就是小屏用得多，那样更占空间。其次这个大纲大部分人都应该经常用到吧？特别是长文档，不可能每个文档只有一段话吧？

    1 回复
  • royc1 •
    订阅者 支持者 勇士

    难道不是悬不悬浮都占用相同的空间么？我觉得自动隐藏是更好的方案。

  • lunarcream •
    订阅者 作者

    谢谢大佬指点，我已经大概能实现效果了，但是我还想知道那个大纲 toc 列表要怎么改变样式？image.png

    1 回复
  • wilsons •
    付费者 捐赠者

    在 div[custom-block-position="sticky"] 中调整就行。

    不知道你说的是要调整什么？是去除多余字符吗

    比如

    div[custom-block-position="sticky"][data-type="NodeList"][data-subtype="u"] {
    position:absolute!important;
    top: 60px!important;
    right: 10px!important;
    left: auto!important;
    background-color: var(--b3-theme-background);

    /* 去除列表多余的字符 */
    span[data-type^="a a "]:nth-child(2) {
       display:none;
    }
}

    效果

    image.png

    另外，提醒下，toc 目录也不一定非要添加到前面，可以是任何位置，只要不和其他元素冲突就行，比如你也可以添加到最后。

请输入回帖内容 ...
lunarcream
佛山
回帖
35
 帖子
19
 积分
3734

近期热议

推荐标签 标签

  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • Wide

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

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

    30 引用 • 218 回帖 • 635 关注
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    30 引用 • 96 回帖
  • 运维

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

    149 引用 • 257 回帖
  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 694 关注
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 49 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 147 关注
  • IBM

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

    17 引用 • 53 回帖 • 140 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 138 关注
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 1 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 44 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 76 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 591 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    354 引用 • 1823 回帖 • 1 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    66 引用 • 114 回帖 • 223 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 486 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖 • 2 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言，具有近二十年的发展历史，成熟且稳定。它包含了一组完善而且容易理解的标准库，能够轻松完成很多常见的任务。它的语法简捷和清晰，尽量使用无异义的英语单词，与其它大多数程序设计语言使用大括号不一样，它使用缩进来定义语句块。

    545 引用 • 672 回帖
  • GAE

    Google App Engine（GAE）是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 780 关注
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 138 关注
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 101 关注
  • 电影

    这是一个不能说的秘密。

    121 引用 • 604 回帖 • 1 关注
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖 • 1 关注

最新标签