登录 注册

通过代码片段增加 / 隐藏顶栏按钮

本贴最后更新于 274 天前，其中的信息可能已经东海扬尘

距离此代码片段的发布已经有一段时间了，在最近的 v2.9.2 版本中，由于快捷键判定方式变化，旧版代码片段已经失效，请参考 代码片段+挂件笔记本选择 部分使用更新后的压缩包版本 createDailyNote.zip 替代，或使用更新后的 v0.2 版本代码片段。

最近修改：2024 年 3 月 22 日：v0.5 加入打开代码片段（压缩包未更新）

按照 D 大所说，目前自定义顶栏优先级不高。（ 关于思源 2.6.3 版本左上角的建议 - 88250 的回帖 ）

……那这段时间就自己整吧。

图片.png

添加

代码片段 + 挂件笔记本选择

不需要创建日记时选择笔记本的话，可以直接看下一节

  1. 下载压缩包（链接在结尾），解压后将所有文件复制到 ${思源data目录}/widgets/createDailyNote/ 下;
  2. 编辑 ${思源data目录}/widgets/createDailyNote/src/config.js（可以选择添加哪些按钮）；
  3. 复制以下代码，在设置（Alt+P）---外观---代码片段---JS---添加 JS 粘贴。
import("/widgets/createDailyNote/src/addBarButton.js");

默认左键点击日记按钮，弹出笔记本选择；右键点击日记按钮，直接创建日记。蓝色字体的为当前默认笔记本。

如果不再使用，删除代码片段后重启思源。

不下载压缩包，仅代码片段

（日记按钮不支持选择笔记本，点击将直接创建日记；和上面的代码片段不能同时启用）

如果不再使用，删除代码片段后重启思源。

复制以下代码，在设置（Alt+P）---外观---代码片段---JS---添加 JS 粘贴。修改代码 8~12 行可以选择性的加按钮（把 true 改为 false 就不加对应按钮）。

/**
 * addBarButton.js
 * v0.5（代码片段模式） 本次更新：加入代码片段按钮；
 * 为顶栏增加数据历史、日记、闪卡按钮，点击后创建对应功能快捷键按下事件
 * 挂件模式支持点击日记列出笔记本。 https://ld246.com/article/1674026309504
 */
// 设置是否添加对应按钮
let g_addDailyNote = true;// 日记
let g_addFlashCard = true;// 闪卡
let g_addSetting = true;// 设置
let g_addHistory = true;// 数据历史
let g_addRecentDocs = true;// 最近打开的文档// TODO: ipad上没用？
let g_addSnippets = true;// 代码片段


let g_addSnippetInterval = null;


// 插入按钮
// 插入日历笔记本选择挂件 
// 参考: https://ld246.com/article/1662969146166  原作者: BryceAndJuly
// 参考: https://github.com/svchord/Rem-Craft 原作者: Seven Chor
function addDailyNote() {
  let barSync = document.getElementById("barSync");
  barSync.insertAdjacentHTML(
    "afterEnd",
    '<div id="barDailyNote_simulate" class="toolbar__item ariaLabel" aria-label="日记/DailyNote" ></div>'
  );
  let dailyNoteBtn = document.getElementById("barDailyNote_simulate");
  dailyNoteBtn.innerHTML = `<svg><use xlink:href="#iconCalendar"></use></svg>`;

  dailyNoteBtn.addEventListener(
    "click",
    function (e) {
      dispatchKeyEvent("dailyNote")
    },
    false
  );

}
function addFlashCard() {
  let barSync = document.getElementById("barSync");
  barSync.insertAdjacentHTML(
    "afterEnd",
    '<div id="barFlashCard_simulate" class="toolbar__item ariaLabel" aria-label="闪卡/FlashCards" ></div>'
  );
  let flashCardBtn = document.getElementById("barFlashCard_simulate");
  flashCardBtn.innerHTML = `<svg><use xlink:href="#iconRiffCard"></use></svg>`;

  flashCardBtn.addEventListener(
    "click",
    function (e) {
      dispatchKeyEvent("riffCard");
    },
    false
  );
}
function addSetting() {
  let barMode = document.getElementById("barMode");
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="barSetting_simulate" class="toolbar__item ariaLabel" aria-label="设置/Settings" ></div>'
  );
  let settingBtn = document.getElementById("barSetting_simulate");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconSettings"></use></svg>`;

  settingBtn.addEventListener(
    "click",
    function (e) {
      dispatchKeyEvent("config");
    },
    false
  );
}

function addHistory() {
  let barSync = document.getElementById("barSync");
  barSync.insertAdjacentHTML(
    "afterend",
    '<div id="barHistory_simulate" class="toolbar__item ariaLabel" aria-label="数据历史/History" ></div>'
  );
  let historyBtn = document.getElementById("barHistory_simulate");
  historyBtn.innerHTML = `<svg><use xlink:href="#iconHistory"></use></svg>`;

  historyBtn.addEventListener(
    "click",
    function (e) {
      dispatchKeyEvent("dataHistory");
    },
    false
  );
}

function addRecentDocs() {
  let barSync = document.getElementById("barSync");
  barSync.insertAdjacentHTML(
    "afterend",
    '<div id="barRecentDocs_simulate" class="toolbar__item ariaLabel" aria-label="最近文档/RecentDocs" ></div>'
  );
  let historyBtn = document.getElementById("barRecentDocs_simulate");
  historyBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="fill:none;"><path d="M16 22h2c.5 0 1-.2 1.4-.6.4-.4.6-.9.6-1.4V7.5L14.5 2H6c-.5 0-1 .2-1.4.6C4.2 3 4 3.5 4 4v3"/><polyline points="14 2 14 8 20 8"/><circle cx="8" cy="16" r="6"/><path d="M9.5 17.5 8 16.25V14"/></svg>`;

  historyBtn.addEventListener(
    "click",
    function (e) {
      dispatchKeyEvent("recentDocs");
    },
    false
  );
}


function addSnippetSetting() {
  let barMode = document.getElementById("barMode");
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="barSnippet_simulate" class="toolbar__item ariaLabel" aria-label="代码片段" ></div>'
  );
  let settingBtn = document.getElementById("barSnippet_simulate");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconSettings"></use></svg>`;

  settingBtn.addEventListener(
    "click",
    function (e) {
      dispatchKeyEvent("config");
      clearInterval(g_addSnippetInterval);
      g_addSnippetInterval = setInterval(()=>{
           const appBtn = document.querySelector(`[data-key="dialog-setting"] [data-name="appearance"]`);
           if (appBtn) appBtn.click();
           const btn = document.querySelector(`button#codeSnippet`);
           if (btn) {btn.click();clearInterval(g_addSnippetInterval);}  
      }, 50);
    },
    false
  );
}

function hideDailyNodePanel(e) {
  dailyNotePanel.style.visibility = "hidden";
  window.removeEventListener("click", hideDailyNodePanel, false);
  e.stopPropagation();
}

/**
 * 
 */
function dispatchKeyEvent(functionName) {
  let keyInit = parseHotKeyStr(window.top.siyuan.config.keymap.general[functionName].custom);
  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);
}

/**
 * 
 * @param {*} hotkeyStr 思源hotkey格式 Refer: https://github.com/siyuan-note/siyuan/blob/d0f011b1a5b12e5546421f8bd442606bf0b5ad86/app/src/protyle/util/hotKey.ts#L4
 * @returns KeyboardEventInit Refer: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/KeyboardEvent
 */
function parseHotKeyStr(hotkeyStr) {
  let result = {
    ctrlKey: false,
    altKey: false,
    metaKey: false,
    shiftKey: false,
    key: 'A',
    keyCode: 0
  }
  if (hotkeyStr == "" || hotkeyStr == undefined || hotkeyStr == null) {
    console.error("解析快捷键设置失败", hotkeyStr);
    throw new Error("解析快捷键设置失败");
  }
  let onlyKey = hotkeyStr;
  if (hotkeyStr.indexOf("⌘") != -1) {
    result.ctrlKey = true;
    onlyKey = onlyKey.replace("⌘", "");
  }
  if (hotkeyStr.indexOf("⌥") != -1) {
    result.altKey = true;
    onlyKey = onlyKey.replace("⌥", "");
  }
  if (hotkeyStr.indexOf("⇧") != -1) {
    result.shiftKey = true;
    onlyKey = onlyKey.replace("⇧", "");
  }
  // 未处理 windows btn （MetaKey） 
  result.key = onlyKey;
  // 在https://github.com/siyuan-note/siyuan/commit/70acd57c4b4701b973a8ca93fadf6c003b24c789#diff-558f9f531a326d2fd53151e3fc250ac4bd545452ba782b0c7c18765a37a4e2cc
  // 更改中，思源改为使用keyCode判断快捷键按下事件，这里进行了对应的转换
  // 另请参考该提交中涉及的文件
  result.keyCode = keyCodeList[result.key];
  console.assert(result.keyCode != undefined, `keyCode转换错误,key为${result.key}`);
  switch (result.key) {
    case "→": {
      result.key = "ArrowRight";
      break;
    }
    case "←": {
      result.key = "ArrowLeft";
      break;
    }
    case "↑": {
      result.key = "ArrowUp";
      break;
    }
    case "↓": {
      result.key = "ArrowDown";
      break;
    }
    case "⌦": {
      result.key = "Delete";
      break;
    }
    case "⌫": {
      result.key = "Backspace";
      break;
    }
    case "↩": {
      result.key = "Enter";
      break;
    }
  }
  return result;
}

if (g_addFlashCard) addFlashCard();
if (g_addDailyNote) addDailyNote();
if (g_addHistory) addHistory();
if (g_addSetting) addSetting();
if (g_addRecentDocs) addRecentDocs();
if (g_addSnippets) addSnippetSetting();

const keyCodeList = {
  "⌫": 8,
  "⇥": 9,
  "↩": 13,
  "⇧": 16,
  "⌘": 91,
  "⌥": 18,
  "Pause": 19,
  "CapsLock": 20,
  "Escape": 27,
  " ": 32,
  "PageUp": 33,
  "PageDown": 34,
  "End": 35,
  "Home": 36,
  "←": 37,
  "↑": 38,
  "→": 39,
  "↓": 40,
  "PrintScreen": 44,
  "Insert": 45,
  "⌦": 46,
  "0": 48,
  "1": 49,
  "2": 50,
  "3": 51,
  "4": 52,
  "5": 53,
  "6": 54,
  "7": 55,
  "8": 56,
  "9": 57,
  "A": 65,
  "B": 66,
  "C": 67,
  "D": 68,
  "E": 69,
  "F": 70,
  "G": 71,
  "H": 72,
  "I": 73,
  "J": 74,
  "K": 75,
  "L": 76,
  "M": 77,
  "N": 78,
  "O": 79,
  "P": 80,
  "Q": 81,
  "R": 82,
  "S": 83,
  "T": 84,
  "U": 85,
  "V": 86,
  "W": 87,
  "X": 88,
  "Y": 89,
  "Z": 90,
  "ContextMenu": 93,
  "MyComputer": 182,
  "MyCalculator": 183,
  ";": 186,
  "=": 187,
  ",": 188,
  "-": 189,
  ".": 190,
  "/": 191,
  "`": 192,
  "[": 219,
  "\\": 220,
  "]": 221,
  "'": 222,
  "*": 106,
  "+": 107,
  "-": 109,
  ".": 110,
  "/": 111,
  "F1": 112,
  "F2": 113,
  "F3": 114,
  "F4": 115,
  "F5": 116,
  "F6": 117,
  "F7": 118,
  "F8": 119,
  "F9": 120,
  "F10": 121,
  "F11": 122,
  "F12": 123,
  "NumLock": 144,
  "ScrollLock": 145
};

隐藏

设置（Alt+P）---外观---代码片段---CSS--添加 CSS，以下为示例：

/*隐藏搜索、后退、前进按钮*/
#barSearch, #barBack, #barForward {
   display: none;
}

要隐藏其他按钮，Ctrl+Shift+I 打开开发者工具，Ctrl+Shift+C（或点击开发者工具左上角按钮）后，将鼠标悬停在需要移除的按钮上，如下图：

图片.png

记录下按钮的 id（# 后面的，到 . 为止；也可以点击后在开发者工具中看到），然后修改 css，比如：

/*隐藏同步按钮*/
#barSync {
   display: none;
}

createDailyNote.zip

  • 思源笔记

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

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

    23012 引用 • 92566 回帖
3 引用
[js] 添加一个顶栏按钮，实现点击即打开代码片段界面 • JeffreyChen
建议 最近文档 支持搜索 • wenbocn
依然请求把日记按钮加到任务顶栏中 • Ethan96
5 操作
Undii 在 2024-03-22 21:55:40 更新了该帖
Undii 在 2023-10-26 13:54:37 更新了该帖
Undii 在 2023-10-07 14:43:12 更新了该帖
Undii 在 2023-06-21 22:55:14 更新了该帖 Undii 在 2023-06-21 22:50:47 更新了该帖
1 感谢
5 收藏
2 赞同
3 引用
5 操作
3 回帖
728 341 18 189 25 10 145

相关帖子

3 回帖
通过代码片段增加 / 隐藏顶栏按钮

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
Undii
休眠中💤
回帖
147
 帖子
32
 积分
16651