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

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

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

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

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)

  • 思源笔记

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

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

    22337 引用 • 89379 回帖
1 操作
leolee 在 2023-04-29 00:10:43 更新了该帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖 • 1 关注
  • Telegram

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

    5 引用 • 35 回帖 • 1 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 175 关注
  • Git

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

    209 引用 • 358 回帖
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    6 引用 • 38 回帖
  • 书籍

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

    77 引用 • 390 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 19 关注
  • 小说

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

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

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

    75 引用 • 1737 回帖 • 5 关注
  • Kafka

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

    36 引用 • 35 回帖
  • sts
    2 引用 • 2 回帖 • 196 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 62 关注
  • JetBrains

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

    18 引用 • 54 回帖
  • GAE

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

    14 引用 • 42 回帖 • 764 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • RESTful

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

    30 引用 • 114 回帖 • 2 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 411 关注
  • WebClipper

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

    3 引用 • 9 回帖
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 241 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1327 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • GraphQL

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

    4 引用 • 3 回帖 • 9 关注