[js] 快速隐藏 / 呼出侧栏代码片段分享

首先感谢 wilsons,此 js 是是基于该代码实现的
功能:如图所示,在面包屑右边增加一个按钮,用于快速隐藏当前展开的侧栏/重新打开上次隐藏的侧栏(或者按 Alt+Z 快捷键)

image.png

实际上这个功能已经内置在 QYL 主题,但考虑到很多小伙伴用的默认主题或者其他主题,因此把这个功能分享出来,适用于所有主题

使用方法:
1.粘贴 https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E6%A8%A1%E6%8B%9F%E8%BF%9E%E7%BB%AD%E7%82%B9%E5%87%BBopenAny.js 的代码,放在思源 js 代码片段
2.粘贴如下代码,放在刚才的代码后面

(() => {
    const dockManager = new OpenAny();
    let lastDockTypes = [];
    const toggleDockItems = async () => {
        const activeDocks = document.querySelectorAll('.dock__item--active');
  
        if (activeDocks.length > 0) {
            lastDockTypes = Array.from(activeDocks).map(dock => `[data-type="${dock.dataset.type}"]`);
            await new OpenAny().clicks(lastDockTypes);
        } else if (lastDockTypes.length > 0) {
            await new OpenAny().clicks(lastDockTypes);
        }
    };
    dockManager.setKeymap('alt+z', async e => {
        e.preventDefault();
        await toggleDockItems();
    });
    dockManager.invoke(({ onProtyleLoad }) => {
        onProtyleLoad(protyle => {
            const targetElement = protyle.querySelector('.layout__center .protyle-breadcrumb');
            if (!targetElement || targetElement.querySelector('[data-type="toggle-dock"]')) return;

            const btnHTML = `<button class="block__icon fn__flex-center ariaLabel" aria-label="快速隐藏/呼出侧栏" data-type="toggle-dock"><svg><use xlink:href="#iconDock"></use></svg></button>`;
            targetElement.insertAdjacentHTML('beforeend', btnHTML);
    
            targetElement.querySelector('[data-type="toggle-dock"]').addEventListener('click', () => {
                toggleDockItems().catch(() => {});
            });
        });
    });
})();
  • 思源笔记

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

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

    25645 引用 • 106060 回帖
  • 代码片段

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

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

    173 引用 • 1183 回帖
1 操作
queguaiya 在 2025-04-20 21:34:05 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • tiyu 5 评论

    我用 qyl 主体会有点卡卡的感觉诶,还有老哥有能单独关闭右边的侧栏的按钮吗

    如果感觉卡,大概率是开了顶栏融合,并且在调整编辑器大小?这个没法避免,因为需要动态计算顶栏页签的位置,除此之外,应该不会导致卡顿
    queguaiya
    非默认主题加某些插件也比较容易引起性能下降,比如自定义块样式插件的看板视图、各种底部反链等等
    Imuvux
    @queguaiya 主题里怎么取消了这个功能?
    windbyside
    @windbyside 可自行通过代码片段实现,放主题的话可能很多人用不上
    queguaiya
    @queguaiya 好吧,我是不了解是不是会拖慢主题?否则,用不上也不影响功能吧。我也是主题功能取消后,搜索到这里的,好在现在又代码实现了。
    windbyside
  • 其他回帖

推荐标签 标签

  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 749 回帖
  • OnlyOffice
    4 引用 • 23 关注
  • 正则表达式

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

    31 引用 • 94 回帖
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖
  • 资讯

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

    56 引用 • 85 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 2 关注
  • ActiveMQ

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

    19 引用 • 13 回帖 • 675 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    64 引用 • 134 回帖 • 734 关注
  • 链滴

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

    记录生活,连接点滴

    176 引用 • 3860 回帖
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 432 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 650 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 9 关注
  • 外包

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

    26 引用 • 233 回帖
  • React

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

    214 引用 • 291 回帖 • 371 关注
  • Word
    13 引用 • 41 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 762 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖 • 1 关注
  • SMTP

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

    4 引用 • 18 回帖 • 633 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 157 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 1 关注
  • Netty

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

    49 引用 • 33 回帖 • 33 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    97 引用 • 903 回帖
  • 脑图

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

    32 引用 • 99 回帖
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 634 关注
  • 思源笔记

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

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

    25645 引用 • 106060 回帖
  • OneDrive
    2 引用 • 1 关注