思源笔记折腾记录 - 快速开关代码片段

本贴最后更新于 556 天前,其中的信息可能已经斗转星移

之前我们已经弄了在笔记内以文档的形式写代码片段的活儿了,但是这些代码片段还是要去设置界面才能开关,有点不大方便,所以这回来整个新的活,让它们更方便开关一点点。

首先还是要引入依赖,这回因为需要工具栏和保存代码片段,所以我们需要这两个东西

import 自定义工具栏 from "https://esm.sh/siyuan-noob/customToolbar";
import 核心api from "https://esm.sh/siyuan-noob/utilKernel/kernelApi.js";

import.meta​是 esm 中的一个特殊对象,只有被 import​引入的代码才能够获取这个东西

let url =import.meta.url
let selfID = url.split("/").pop().split(".")[0];

为了正常运行这个代码片段,你需要重新安装思源笔记折腾记录 - 运行你的笔记 - 链滴 (ld246.com)中的代码片段,之前的版本无法支持 import.meta

这里我们是为了用它来判断代码片段是不是你看的这篇文档自己编译出来的(不然它把它自己关了的话开关也就没有了)

自定义工具栏.注册工具栏按钮("#barBack", {
  图标: "#iconCode",
  提示: "开关代码片段",
  点击回调函数: async (event) => {
    const rect = event.currentTarget.getBoundingClientRect();
    let 当前代码片段 = await 核心api.getSnippet({ type: "all", enabled: 2 });
    let 旧代码片段 = JSON.parse(JSON.stringify(当前代码片段));
    当前代码片段.snippets.forEach((item) => {
      if (item.id !== selfID + "js") {
        let element = document.createElement("button");
        element.setAttribute("class", "b3-menu__item");
        let spanText;
        let id;
        let type;
  
        if (!item.id.endsWith("css") && !item.id.endsWith("js")) {
          id = item.id;
          type = item.type=='css'?'css':' js';
          spanText = `<div style="font-size:85%;color:var(--b3-theme-on-surface);width:60px;display:inline-block">${type}</div> 
         ${item.name}`;
        } else {
          if (item.id.endsWith("css")) {
            id = item.id.slice(0, item.id.length - 3);
            type = "cssInNote";
          } else {
            id = item.id.slice(0, item.id.length - 2);
            type = "jsInNote";
          }
	  let href 
	  if(window.require){
           href=`siyuan://blocks/${id}'>${item.name}`;
	  }else{
	href=`${window.location.href.split('?')[0].replace('/stage/build/app/','/stage/build/desktop/')}?id=${id}`
	  }
	            spanText = `<div style="font-size:85%;color:var(--b3-theme-on-surface);width:60px;display:inline-block">${type}</div>
          <a href='${href}'>${item.name}</a>`;

        }
  
        element.innerHTML = `
                  <div class="fn__flex-1">
<span class="fn__space"></span>
                  ${spanText}
                  </div>
                  <span class="fn__space"></span>
                      <input style="box-sizing: border-box"  class="b3-switch fn__flex-center"  type="checkbox" ${
                        item.enabled ? "checked" : ""
                      }>
                  `;
        element.setAttribute("data-type", type);
        element.setAttribute("data-id", id);
        //挂上事件,让菜单项里面的开关可以点击
	element.addEventListener(
          "click",
          (event) => {
            if (event.target.tagName !== "INPUT") {
              return;
            }
            item.enabled = !item.enabled;
            element.querySelector("input").value = item.enabled;
            element
              .querySelector("input")
              .setAttribute("checked", item.enabled);
            event.stopPropagation();
          },
          false
        );
        window.siyuan.menus.menu.append(element);
      }
    });
    //这个方法是思源自带的
    window.siyuan.menus.menu.popup({ x: rect.left, y: rect.top + rect.height });
    //啊这里就是判断要不要重载了
    let cb = async (e) => {
      let target = e.target;
      //如果不是在菜单里面的话
      if (!isMenuClicked(target)) {
        if (JSON.stringify(当前代码片段) !== JSON.stringify(旧代码片段)) {
          await 核心api.setSnippet(当前代码片段);
          window.location.reload();
        } else {
          window.removeEventListener("click", cb);
        }
      }
    };
    window.addEventListener("click", cb);
  },
});

//

这里用到了一个​isMenuClicked​的工具函数

function isMenuClicked(element) {
  if (element.parentElement) {
    if (element.parentElement !== window.siyuan.menus.menu.element) {
      return isMenuClicked(element.parentElement);
    } else {
      return true;
    }
  } else {
    return false;
  }
}

意思就是说如果点击的范围在思源的菜单里面就不管它,如果不在而且代码片段的设置不一样了的话,就重新加载主界面。

效果呢就像这样:

image

好像毛病不大的样子,有链接的那些就是在笔记里面定义的代码片段啦,这样开关起来应该能方便一丢丢


如果这玩意对你有用可以去爱发电给我买杯咖啡

leolee9086 正在创作一些简单的技术教程和小工具,以及设计方面内容 | 爱发电 (afdian.net)

  • 思源笔记

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

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

    22007 引用 • 87736 回帖 • 2 关注
1 操作
leolee 在 2023-04-29 00:10:43 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 52 关注
  • Solidity

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

    3 引用 • 18 回帖 • 383 关注
  • GAE

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

    14 引用 • 42 回帖 • 754 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 596 关注
  • NGINX

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

    311 引用 • 546 回帖
  • JVM

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

    180 引用 • 120 回帖 • 2 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    75 引用 • 1737 回帖
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 306 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    131 引用 • 1114 回帖 • 131 关注
  • Telegram

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

    5 引用 • 35 回帖
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 30 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 8 关注
  • 30Seconds

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

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

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

    8 引用 • 44 回帖 • 1 关注
  • 爬虫

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

    106 引用 • 275 回帖
  • Python

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

    541 引用 • 672 回帖 • 1 关注
  • Hprose

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

    9 引用 • 17 回帖 • 615 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 637 关注
  • 设计模式

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

    200 引用 • 120 回帖 • 1 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 63 关注
  • 架构

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

    142 引用 • 442 回帖
  • 创造

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

    176 引用 • 995 回帖 • 1 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 3 关注
  • SMTP

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

    4 引用 • 18 回帖 • 613 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖