登录 注册

如何做到大纲悬浮？

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

  • 思源笔记

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

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

    22253 引用 • 88945 回帖
佛山 位置
1 关注
17 回帖
6
4
2
511 226 278 3 1 2

相关帖子

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
 积分
2626

近期热议

推荐标签 标签

  • 单点登录

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

    9 引用 • 25 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Mobi.css

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

    1 引用 • 6 回帖 • 740 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    6 引用 • 14 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 136 关注
  • Sillot

    Insights（注意当前设置 master 为默认分支）

    汐洛彖夲肜矩阵（Sillot T☳Converbenk Matrix），致力于服务智慧新彖乄，具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架（Sillot-Gibbet）基于自思源笔记（siyuan-note），前身是思源笔记汐洛版（更早是思源笔记汐洛分支），是智慧新录乄终端（多端融合，移动端优先）。

    主仓库地址：Hi-Windom/Sillot

    文档地址：sillot.db.sc.cn

    注意事项：

    1. ⚠️ 汐洛仍在早期开发阶段，尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计，使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记，开发者尽最大努力与思源笔记保持兼容，但无法实现 100% 兼容
    29 引用 • 25 回帖 • 83 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 670 关注
  • 开源中国

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

    7 引用 • 86 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    15 引用 • 122 回帖
  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖 • 1 关注
  • Vue.js

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

    266 引用 • 665 回帖 • 2 关注
  • 设计模式

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

    200 引用 • 120 回帖
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 6 关注
  • Python

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

    541 引用 • 672 回帖
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖 • 1 关注
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 4 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 532 关注
  • sts
    2 引用 • 2 回帖 • 199 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    63 引用 • 348 回帖 • 1 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 662 关注
  • CSS

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

    197 引用 • 549 回帖
  • 资讯

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

    55 引用 • 85 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    153 引用 • 3783 回帖 • 1 关注
  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    77 引用 • 390 回帖

最新标签