登录 注册

分享两个好用的代码片段

写在前面

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

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)));
}
  • 思源笔记

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

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

    22337 引用 • 89380 回帖
7 引用
大纲的不同层级显示不同背景色有 CSS 代码吗？ • EmberSky
不知道什么原因, 操作慢动作 • cxg318
有没有办法把代码片段设置做成一个按钮放在侧边栏？ • EmberSky
[js] 全屏和刷新按钮、右上角倒计时 怎么设置标题内边框 测试专用帖 回复代码导致帖子异常
东莞 位置
5 感谢
3 收藏
7 引用
10 回帖
4
2
2
481 370 108 1 2

相关帖子

10 回帖
分享两个好用的代码片段

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • lovelife88 •
    订阅者 支持者 勇士

    多彩文档树 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;
}
  • 其他回帖
  • JeffreyChen •
    付费者 支持者 捐赠者

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

  • EmberSky •
    付费者 作者

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

    1 回复
  • EmberSky •
    付费者 作者

    补充说明:

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

    添加按钮的所在位置如下:

    image.png

  • 查看全部回帖
EmberSky
如果感觉我的回答对你有帮助, 请点击 感谢 支持一下, 谢谢! 东莞
回帖
283
 帖子
41
 积分
6528