分享两个好用的代码片段

写在前面

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

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 回帖

分享两个好用的代码片段

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

EmberSky • 3 个月前
付费者作者

补充说明:

因为我有一个日历图的原因, 所以是在 plugin_Calendar-heatmap_0 后面, 可以放在右箭头的后面: 将 js_btn_str = addBtnJsSnippets("plugin_Calendar-heatmap_0"); 改为 js_btn_str = addBtnJsSnippets("barForward");

添加按钮的所在位置如下:
其他回帖
JeffreyChen • 3 个月前
付费者支持者捐赠者

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

lovelife88 • 3 个月前

订阅者支持者勇士

多彩文档树 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;
}

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

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

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

1 回复
查看全部回帖

写在前面

js 片段-增加按钮

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

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

相关帖子

Markdown 和快捷键生成的标题在文档内的格式不同

新版剪藏时经常出现「请启动思源并确保网络连通后再试」

从 wps 复制到思源，如果文字同时有加粗和下划线，粘贴到思源里不出现下划线而出现代码

关于同步功能的建议

思源的图片大小有时记不住

iframe 块内如何实现超链接悬浮预览

alist 附件管理插件最近更新 v0.1.2 功能演示

欢迎来到这里！

分享两个好用的代码片段

写在前面

js 片段-增加按钮

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

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

相关帖子

Markdown 和快捷键生成的标题在文档内的格式不同

新版剪藏时经常出现「请启动思源并确保网络连通后再试」

从 wps 复制到思源，如果文字同时有加粗和下划线，粘贴到思源里不出现下划线而出现代码

关于同步功能的建议

思源的图片大小有时记不住

iframe 块内如何实现超链接悬浮预览

alist 附件管理插件最近更新 v0.1.2 功能演示

欢迎来到这里！

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

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