分享两个好用的代码片段

写在前面

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

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 • 4 个月前
订阅者付费者捐赠者

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

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

1 回复
其他回帖
JeffreyChen • 4 个月前
付费者支持者捐赠者

也可以在 https://sypai.cc/ 的 CSS 和 JS 板块分享一下

1 回复
JeffreyChen • 4 个月前
付费者支持者捐赠者

因为链滴的帖子沉得很快，所以我会推荐同时分享

lovelife88 • 4 个月前

订阅者支持者勇士

多彩文档树 css 的前面漏掉了一段代码，建议补上。

:root {
    /* 文档树缩进 */
    --level-spacing-0: 20px;
    --level-spacing-1: 20px;
    --level-spacing-2: 20px;
    --level-spacing-3: 20px;
    --level-spacing-4: 20px;
    --level-spacing-5: 20px;
}

查看全部回帖

写在前面

js 片段-增加按钮

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

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

相关帖子

请问思源笔记的模板如何修改？

思源安装问题

思源从 AI 复制出来的数学符号无法识别渲染的一种解决方法

求助导出格式和编辑格式大不一样

提及面板的内容可编辑

写思源插件

v3.1.15 表格粘贴错误

欢迎来到这里！

分享两个好用的代码片段

写在前面

js 片段-增加按钮

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

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

相关帖子

请问思源笔记的模板如何修改？

思源安装问题

思源从 AI 复制出来的数学符号无法识别渲染的一种解决方法

求助导出格式和编辑格式大不一样

提及面板的内容可编辑

写思源插件

v3.1.15 表格粘贴错误

欢迎来到这里！

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

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