分享两个好用的代码片段

写在前面

这两个片段都是从其他地方抄过来, 改一改的, 如果你是作者, 且比较介意, 请联系我删帖

js 片段-增加按钮

增加三个按钮

快捷打开 js 代码片段
快捷打开 css 代码片段
重新加载页面

// js片段
// 通过快捷键(alt + p), 打开配置页面
function openSettingPage() {
  let keyInit = {
    ctrlKey: false,
    altKey: true,
    metaKey: false,
    shiftKey: false,
    key: 'P',
    keyCode: 80
  }
  keyInit["bubbles"] = true;
  let keydownEvent = new KeyboardEvent('keydown', keyInit);
  document.getElementsByTagName("body")[0].dispatchEvent(keydownEvent);
  let keyUpEvent = new KeyboardEvent('keyup', keyInit);
  document.getElementsByTagName("body")[0].dispatchEvent(keyUpEvent);
}


// 添加按钮, 并设置点击事件
// 添加 js代码片段
function addBtnJsSnippets(perv_btn) {
  let barMode = document.getElementById(perv_btn);
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="js_barSnippets_simulate_btn" class="toolbar__item ariaLabel" aria-label="JS代码片段"></div>'
  );
  let settingBtn = document.getElementById("js_barSnippets_simulate_btn");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`;

  settingBtn.addEventListener(
    "click",
    function (e) {
      // 打开设置
      openSettingPage();
      // 点击外观
      // 找到包含 data-name="appearance" 的 <li> 元素
      var btn = document.querySelector('li[data-name="appearance"]');
      btn.click();
      // 点击 设置
      // 获取按钮元素
      btn = document.getElementById('codeSnippet');
      btn.click();
      // 点击 js
      // 获取按钮元素
      setTimeout(() => {
        btn = document.querySelector('[data-type="js"]');
        btn.click();
      }, 200);
    }
  );
  return "js_barSnippets_simulate_btn"
}
// 添加按钮, 并设置点击事件
// 添加 css代码片段
function addBtnCssSnippets(perv_btn) {
  let barMode = document.getElementById(perv_btn);
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="css_barSnippets_simulate_btn" class="toolbar__item ariaLabel" aria-label="css代码片段"></div>'
  );
  let settingBtn = document.getElementById("css_barSnippets_simulate_btn");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`;

  settingBtn.addEventListener(
    "click",
    function (e) {
      // 打开设置
      openSettingPage();
      // 点击外观
      // 找到包含 data-name="appearance" 的 <li> 元素
      var btn = document.querySelector('li[data-name="appearance"]');
      btn.click();
      // 点击 设置
      // 获取按钮元素
      btn = document.getElementById('codeSnippet');
      btn.click();
    }
  );
  return "css_barSnippets_simulate_btn"
}

// 添加按钮, 并设置点击事件
// 添加 重新加载按钮
function addBtnRefresh(perv_btn) {
  let barMode = document.getElementById(perv_btn);
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="reload_page_btn" class="toolbar__item ariaLabel" aria-label="重新加载"></div>'
  );
  let settingBtn = document.getElementById("reload_page_btn");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconRefresh"></use></svg>`;

  settingBtn.addEventListener(
    "click",
    function (e) {
      // 打开设置
      openSettingPage();
      // 点击外观
      // 找到包含 data-name="appearance" 的 <li> 元素
      var btn = document.querySelector('li[data-name="keymap"]');
      btn.click();
      // 点击 设置
      // 获取按钮元素
      btn = document.getElementById('keymapRefreshBtn');
      btn.click();
    }
  );
  return "reload_page_btn"
}
/* 重新加载会有延时, 所以需要等待300ms之后再添加按钮 */
setTimeout(() => {
  js_btn_str = addBtnJsSnippets("plugin_Calendar-heatmap_0");
  addBtnCssSnippets(js_btn_str);
  addBtnRefresh("barDock");
}, 300);

css 片段多彩显示文档树层级关系

缩进需要按照自己的设置进行微调

支持 7 层

与其他的不同的是, 这个代码只是背景颜色缩进, 并不修改按钮的缩进

div.layout__dockl ul>ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-0)),
    var(--b3-font-background1) calc(var(--level-spacing-0)));
}
div.layout__dockl ul>ul>ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-0)),
    var(--b3-font-background1) calc(var(--level-spacing-0)), 
    var(--b3-font-background1) calc(var(--level-spacing-0) + var(--level-spacing-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1)));
}
div.layout__dockl ul>ul>ul>ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-0)),
    var(--b3-font-background1) calc(var(--level-spacing-0)), 
    var(--b3-font-background1) calc(var(--level-spacing-0) + var(--level-spacing-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2)));
}
div.layout__dockl ul>ul>ul>ul>ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-0)),
    var(--b3-font-background1) calc(var(--level-spacing-0)), 
    var(--b3-font-background1) calc(var(--level-spacing-0) + var(--level-spacing-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3)), 
    var(--b3-font-background4) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3)));
}
div.layout__dockl ul>ul>ul>ul>ul>ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-0)),
    var(--b3-font-background1) calc(var(--level-spacing-0)), 
    var(--b3-font-background1) calc(var(--level-spacing-0) + var(--level-spacing-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3)), 
    var(--b3-font-background4) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3)), 
    var(--b3-font-background4) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3) + var(--level-spacing-4)), 
    var(--b3-font-background1) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3) + var(--level-spacing-4)));
}
div.layout__dockl ul>ul>ul>ul>ul>ul>ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-0)),
    var(--b3-font-background1) calc(var(--level-spacing-0)), 
    var(--b3-font-background1) calc(var(--level-spacing-0) + var(--level-spacing-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3)), 
    var(--b3-font-background4) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3)), 
    var(--b3-font-background4) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3) + var(--level-spacing-4)), 
    var(--b3-font-background1) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3) + var(--level-spacing-4)), 
    var(--b3-font-background1) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3) + var(--level-spacing-4) + var(--level-spacing-5)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3) + var(--level-spacing-4) + var(--level-spacing-5)));
}
div.layout__dockl ul>ul>ul>ul>ul>ul>ul>ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-0)),
    var(--b3-font-background1) calc(var(--level-spacing-0)), 
    var(--b3-font-background1) calc(var(--level-spacing-0) + var(--level-spacing-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3)), 
    var(--b3-font-background4) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3)), 
    var(--b3-font-background4) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3) + var(--level-spacing-4)), 
    var(--b3-font-background1) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3) + var(--level-spacing-4)), 
    var(--b3-font-background1) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3) + var(--level-spacing-4) + var(--level-spacing-5)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3) + var(--level-spacing-4) + var(--level-spacing-5)), 
    var(--b3-font-background2) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3) + var(--level-spacing-4) + var(--level-spacing-5) + var(--level-spacing-6)), 
    var(--b3-font-background3) calc(var(--level-spacing-0) + var(--level-spacing-1) + var(--level-spacing-2) + var(--level-spacing-3) + var(--level-spacing-4) + var(--level-spacing-5) + var(--level-spacing-6)));
}

css 片段多彩显示大纲层级关系

同多彩文档树, 支持 6 层


:root {
    /* 大纲缩进 */
    --level-spacing-outline-0: 10px;
    --level-spacing-outline-1: 9px;
    --level-spacing-outline-2: 9px;
    --level-spacing-outline-3: 8px;
    --level-spacing-outline-4: 8px;
    --level-spacing-outline-5: 8px;
}

/* 多彩层级文档树 CSS片段 */
div.sy__outline ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-outline-0)),
    var(--b3-font-background1) calc(var(--level-spacing-outline-0)));
}
div.sy__outline ul>ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-outline-0)),
    var(--b3-font-background1) calc(var(--level-spacing-outline-0)), 
    var(--b3-font-background1) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1)));
}
div.sy__outline ul>ul>ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-outline-0)),
    var(--b3-font-background1) calc(var(--level-spacing-outline-0)), 
    var(--b3-font-background1) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2)));
}
div.sy__outline ul>ul>ul>ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-outline-0)),
    var(--b3-font-background1) calc(var(--level-spacing-outline-0)), 
    var(--b3-font-background1) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2) + var(--level-spacing-outline-3)), 
    var(--b3-font-background4) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2) + var(--level-spacing-outline-3)));
}
div.sy__outline ul>ul>ul>ul>ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-outline-0)),
    var(--b3-font-background1) calc(var(--level-spacing-outline-0)), 
    var(--b3-font-background1) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2) + var(--level-spacing-outline-3)), 
    var(--b3-font-background4) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2) + var(--level-spacing-outline-3)), 
    var(--b3-font-background4) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2) + var(--level-spacing-outline-3) + var(--level-spacing-outline-4)), 
    var(--b3-font-background1) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2) + var(--level-spacing-outline-3) + var(--level-spacing-outline-4)));
}
div.sy__outline ul>ul>ul>ul>ul>ul {
    background-image: linear-gradient(to right, 
    var(--b3-theme-surface) 0, 
    var(--b3-theme-surface) calc(var(--level-spacing-outline-0)),
    var(--b3-font-background1) calc(var(--level-spacing-outline-0)), 
    var(--b3-font-background1) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1)), 
    var(--b3-font-background2) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2)), 
    var(--b3-font-background3) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2) + var(--level-spacing-outline-3)), 
    var(--b3-font-background4) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2) + var(--level-spacing-outline-3)), 
    var(--b3-font-background4) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2) + var(--level-spacing-outline-3) + var(--level-spacing-outline-4)), 
    var(--b3-font-background1) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2) + var(--level-spacing-outline-3) + var(--level-spacing-outline-4)), 
    var(--b3-font-background1) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2) + var(--level-spacing-outline-3) + var(--level-spacing-outline-4) + var(--level-spacing-outline-5)), 
    var(--b3-font-background2) calc(var(--level-spacing-outline-0) + var(--level-spacing-outline-1) + var(--level-spacing-outline-2) + var(--level-spacing-outline-3) + var(--level-spacing-outline-4) + var(--level-spacing-outline-5)));
}

10 回帖

分享两个好用的代码片段

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

QMike • 3 个月前
订阅者付费者捐赠者

请问 重新加载页面 的 JS 片段添加后为啥没有效果呢？

已整体复制这部分代码，并且我的顶栏是有热力图这个插件的图标的：

1 回复
其他回帖
EmberSky • 3 个月前
付费者作者

重新加载在左下角 😂

1 回复
EmberSky • 3 个月前
付费者作者

为什么你的左下角和我的左下角长得不太一样啊, 代码是放到这个按钮后面的

改下代码, 把它放在左上角 css 片段后面试试

addBtnCssSnippets(js_btn_str); addBtnRefresh("barDock");

改成

js_btn_str = addBtnCssSnippets(js_btn_str); addBtnRefresh(js_btn_str);
QMike • 3 个月前
订阅者付费者捐赠者

啊这，为啥我这边左下角也没找见 重新加载 这个按钮：

JS 和 CSS 这两个按钮是正常显示出来的：

1 回复
查看全部回帖

写在前面

js 片段-增加按钮

css 片段多彩显示文档树层级关系

css 片段多彩显示大纲层级关系

相关帖子

存储空间的路径可以如何自定义

思源能实现 word+zotero 联动引用文章的排版效果吗

如何使用 sql 汇总所有的 mermaid 代码块？

如何使用 query 筛选特定文档

笔记编辑器优化参考

购买了功能特性激活码在哪？

块引用中图片显示错误，显示为无意义的文字

欢迎来到这里！

分享两个好用的代码片段

写在前面

js 片段-增加按钮

css 片段 多彩显示文档树层级关系

css 片段 多彩显示大纲层级关系

相关帖子

存储空间的路径可以如何自定义

思源能实现 word+zotero 联动引用文章的排版效果吗

如何使用 sql 汇总所有的 mermaid 代码块？

如何使用 query 筛选特定文档

笔记编辑器优化参考

购买了功能特性激活码在哪？

块引用中图片显示错误，显示为无意义的文字

欢迎来到这里！

css 片段多彩显示文档树层级关系

css 片段多彩显示大纲层级关系