分享两个好用的代码片段

写在前面

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

js 片段-增加按钮

增加三个按钮

  1. 快捷打开 js 代码片段
  2. 快捷打开 css 代码片段
  3. 重新加载页面
// 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 层

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

image.png

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)));
}

  • 思源笔记

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

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

    23020 引用 • 92599 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • cxg318
    // 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("barForward");
    js_btn_str = addBtnCssSnippets(js_btn_str);
    addBtnRefresh(js_btn_str);
    }, 300); 
    
  • 其他回帖
  • 因为链滴的帖子沉得很快,所以我会推荐同时分享

  • EmberSky

    已分享, 不够用惯了链滴, 感觉那边不太好用, 截屏粘贴不了

    1 回复
  • 请问 重新加载页面 的 JS 片段添加后为啥没有效果呢?

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

    image.png

    1 回复
  • 查看全部回帖