登录 注册

如何做到大纲悬浮？

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

  • 思源笔记

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

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

    23125 引用 • 93112 回帖 • 1 关注
佛山 位置
1 关注
17 回帖
6
4
2
653 231 400 5 1 14

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 •
    订阅者 作者

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

    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 •
    订阅者 作者

    image.png参考 Microsoft word

    1 回复
  • 查看全部回帖
lunarcream
佛山
回帖
35
 帖子
20
 积分
3935

近期热议

推荐标签 标签

  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖 • 1 关注
  • Sandbox

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

    410 引用 • 1246 回帖 • 588 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 614 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • 运维

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

    149 引用 • 257 回帖 • 3 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    313 引用 • 547 回帖
  • 心情

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

    59 引用 • 369 回帖 • 1 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 65 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 232 回帖
  • gRpc
    11 引用 • 9 回帖 • 72 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖 • 1 关注
  • CSS

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

    196 引用 • 540 回帖 • 1 关注
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • 创业

    你比 99% 的人都优秀么？

    82 引用 • 1395 回帖
  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    178 引用 • 997 回帖
  • Kafka

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

    36 引用 • 35 回帖 • 3 关注
  • flomo

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

    5 引用 • 107 回帖 • 1 关注
  • LaTeX

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

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

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    288 引用 • 4485 回帖 • 664 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 1 关注
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 2 关注
  • Scala

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

    13 引用 • 11 回帖 • 140 关注
  • LeetCode

    LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！

    209 引用 • 72 回帖 • 1 关注
  • sts
    2 引用 • 2 回帖 • 197 关注

最新标签