求助能否将“优化排版”按钮从折叠菜单中放到外面来

image.png

  • 思源笔记

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

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

    25232 引用 • 104066 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9645 引用 • 43859 回帖 • 93 关注

相关帖子

被采纳的回答
  • wilsons 2 2 赞同

    最完美的方式,当如是也

    image.png

    // 把优化排版菜单移动到文档导航条 { const main = (protyle)=>{ // 发布服务下不显示 if(window.siyuan.config.readonly) return; if(protyle?.querySelector('.protyle-breadcrumb [data-type="optimizeTypography"]')) return; const exitFocusBtn = protyle.querySelector('.protyle-breadcrumb [data-type="exit-focus"]'); if(!exitFocusBtn) return; const optimizeHtml = `<button class="block__icon fn__flex-center ariaLabel" aria-label="优化排版" data-type="optimizeTypography"><svg><use xlink:href="#iconFormat"></use></svg></button>`; exitFocusBtn.insertAdjacentHTML('afterend', optimizeHtml); const optimizeBtn = protyle.querySelector('.protyle-breadcrumb [data-type="optimizeTypography"]'); if(!optimizeBtn) return; optimizeBtn.addEventListener('click', () => { // 锁定状态下不可修改 const icon = protyle?.querySelector('button[data-type="readonly"] use')?.getAttributeNS('http://www.w3.org/1999/xlink', 'href'); if(icon === '#iconLock') { showMessage('锁定状态不可用'); return } // 优化排版 // see https://github.com/siyuan-note/siyuan/blob/a01523dc98799590396ffcabdc90b2dc6efe8474/app/src/protyle/breadcrumb/index.ts#L415 requestApi("/api/format/autoSpace", { id: protyle?.querySelector('.protyle-title')?.dataset?.nodeId }); }); }; // 监听protyle加载 whenElementExist('.protyle:not(.fn__none)').then(main); observeProtyleLoad(main); function showMessage(message, isError = false, delay = 7000) { return fetch('/api/notification/' + (isError ? 'pushErrMsg' : 'pushMsg'), { "method": "POST", "body": JSON.stringify({"msg": message, "timeout": delay}) }); } async function requestApi(url, data, method = 'POST') { return await (await fetch(url, {method: method, body: JSON.stringify(data||{})})).json(); } function whenElementExist(selector, node) { return new Promise(resolve => { const check = () => { const el = typeof selector==='function'?selector():(node||document).querySelector(selector); if (el) resolve(el); else requestAnimationFrame(check); }; check(); }); } function observeProtyleLoad(callback, parentElement) { // 如果 parentElement 是字符串,则将其转换为 DOM 元素 if (typeof parentElement === 'string') { parentElement = document.querySelector(parentElement); } // 创建一个 MutationObserver 实例 const observer = new MutationObserver((mutationsList) => { mutationsList.forEach((mutation) => { // 检查是否是属性变化并且变化的属性是 class if (mutation.type === 'attributes' && mutation.attributeName === 'class') { const targetElement = mutation.target; // 发生变化的目标元素 // 判断目标元素是否匹配指定选择器 .protyle:not(.fn__none) if (targetElement.matches('.protyle:not(.fn__none)')) { // 触发回调 callback(targetElement); } } }); }); // 配置观察选项 const config = { attributes: true, // 监听属性变化 attributeFilter: ['class'], // 仅监听 class 属性 subtree: true, // 监听父容器及其所有后代元素 }; // 启动观察,默认监听 document.body 或指定的父容器 observer.observe(parentElement || document.body, config); } }

    类似文章推荐 https://pipe.b3log.org/blogs/wilsons/articles/2025/04/15/1744703423359

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 倒是不难,但 JS 容易出 BUG,我推荐你给优化排版设置一个快捷键

  • Muu 1
    1. 前置插件图片.png
    2. 设置快捷键图片.png
    3. 设置插件图片.png
    4. 效果图片.png
  • EmptyLight 1

    我记得优化排版可以通过快捷键设置分配快捷键

  • wilsons 2 2 赞同 3 评论

    最完美的方式,当如是也

    image.png

    // 把优化排版菜单移动到文档导航条 { const main = (protyle)=>{ // 发布服务下不显示 if(window.siyuan.config.readonly) return; if(protyle?.querySelector('.protyle-breadcrumb [data-type="optimizeTypography"]')) return; const exitFocusBtn = protyle.querySelector('.protyle-breadcrumb [data-type="exit-focus"]'); if(!exitFocusBtn) return; const optimizeHtml = `<button class="block__icon fn__flex-center ariaLabel" aria-label="优化排版" data-type="optimizeTypography"><svg><use xlink:href="#iconFormat"></use></svg></button>`; exitFocusBtn.insertAdjacentHTML('afterend', optimizeHtml); const optimizeBtn = protyle.querySelector('.protyle-breadcrumb [data-type="optimizeTypography"]'); if(!optimizeBtn) return; optimizeBtn.addEventListener('click', () => { // 锁定状态下不可修改 const icon = protyle?.querySelector('button[data-type="readonly"] use')?.getAttributeNS('http://www.w3.org/1999/xlink', 'href'); if(icon === '#iconLock') { showMessage('锁定状态不可用'); return } // 优化排版 // see https://github.com/siyuan-note/siyuan/blob/a01523dc98799590396ffcabdc90b2dc6efe8474/app/src/protyle/breadcrumb/index.ts#L415 requestApi("/api/format/autoSpace", { id: protyle?.querySelector('.protyle-title')?.dataset?.nodeId }); }); }; // 监听protyle加载 whenElementExist('.protyle:not(.fn__none)').then(main); observeProtyleLoad(main); function showMessage(message, isError = false, delay = 7000) { return fetch('/api/notification/' + (isError ? 'pushErrMsg' : 'pushMsg'), { "method": "POST", "body": JSON.stringify({"msg": message, "timeout": delay}) }); } async function requestApi(url, data, method = 'POST') { return await (await fetch(url, {method: method, body: JSON.stringify(data||{})})).json(); } function whenElementExist(selector, node) { return new Promise(resolve => { const check = () => { const el = typeof selector==='function'?selector():(node||document).querySelector(selector); if (el) resolve(el); else requestAnimationFrame(check); }; check(); }); } function observeProtyleLoad(callback, parentElement) { // 如果 parentElement 是字符串,则将其转换为 DOM 元素 if (typeof parentElement === 'string') { parentElement = document.querySelector(parentElement); } // 创建一个 MutationObserver 实例 const observer = new MutationObserver((mutationsList) => { mutationsList.forEach((mutation) => { // 检查是否是属性变化并且变化的属性是 class if (mutation.type === 'attributes' && mutation.attributeName === 'class') { const targetElement = mutation.target; // 发生变化的目标元素 // 判断目标元素是否匹配指定选择器 .protyle:not(.fn__none) if (targetElement.matches('.protyle:not(.fn__none)')) { // 触发回调 callback(targetElement); } } }); }); // 配置观察选项 const config = { attributes: true, // 监听属性变化 attributeFilter: ['class'], // 仅监听 class 属性 subtree: true, // 监听父容器及其所有后代元素 }; // 启动观察,默认监听 document.body 或指定的父容器 observer.observe(parentElement || document.body, config); } }

    类似文章推荐 https://pipe.b3log.org/blogs/wilsons/articles/2025/04/15/1744703423359

    1 回复
    4 操作
    wilsons 在 2025-04-16 09:29:39 更新了该回帖
    wilsons 在 2025-04-15 22:09:54 更新了该回帖
    wilsons 在 2025-04-15 15:53:51 更新了该回帖
    wilsons 在 2025-04-15 13:28:24 更新了该回帖
    真不错,还顺便学会了用 pipe
    ACai 1
    @ACai 感谢打赏!我最近写了个思源文档直接发布到 pipe 的,目前仅单文档发布,后续可能增加批量和自动发布,如果有兴趣,好了 @ 你下。
    wilsons
    @wilsons 可以可以
    ACai
  • lichlaughing via macOS

    厉害厉害,还有个问题就是,文档锁定的状态下该按钮也能发挥作用。能否让该排版按钮在锁定状态下隐藏(解锁文章显示)或者锁定状下失效(不可以点击)解锁状态下可以点击 😄

    1 回复
  • 已修改

    锁定状态下点击会提示不可用

    发布服务下不显示

请输入回帖内容 ...

推荐标签 标签

  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    498 引用 • 1395 回帖 • 249 关注
  • CongSec

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

    1 引用 • 1 回帖 • 29 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    952 引用 • 944 回帖
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • SQLite

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

    5 引用 • 7 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 593 关注
  • 钉钉

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

    15 引用 • 67 回帖 • 286 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 507 关注
  • V2Ray
    1 引用 • 15 回帖 • 2 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 183 关注
  • 禅道

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

    6 引用 • 15 回帖 • 24 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 547 关注
  • Gzip

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

    9 引用 • 12 回帖 • 165 关注
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖
  • 创造

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

    184 引用 • 1015 回帖
  • CAP

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

    12 引用 • 5 回帖 • 635 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    116 引用 • 54 回帖
  • 深度学习

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

    54 引用 • 41 回帖
  • 导航

    各种网址链接、内容导航。

    43 引用 • 177 回帖
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1794 回帖 • 2 关注
  • Word
    13 引用 • 40 回帖
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 23 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 178 关注
  • uTools

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

    7 引用 • 27 回帖