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

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

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

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

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

添加

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

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

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


import("/widgets/createDailyNote/src/addBarButton.js");

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

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

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

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

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

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


/**
 * addBarButton.js
 * v0.8（代码片段模式） 本次更新：修复⌃ 和^
 * 为顶栏增加数据历史、日记、闪卡按钮，点击后创建对应功能快捷键按下事件
 * 挂件模式支持点击日记列出笔记本。 https://ld246.com/article/1674026309504
 */
// 设置是否添加对应按钮
let g_addDailyNote = true;// 日记
let g_addFlashCard = false;// 闪卡
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) {
    if (isMac()) {
      result.metaKey = true;
    } else {
      result.ctrlKey = true;
    }
    onlyKey = onlyKey.replace("⌘", "");
  }
  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;
}

function isMac() {
  return navigator.platform.toUpperCase().indexOf("MAC") > -1;
}

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（或点击开发者工具左上角按钮）后，将鼠标悬停在需要移除的按钮上，如下图：

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


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

createDailyNote.zip

8 回帖

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

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

yjmsiyuan • 2 年前

支持，希望有更多这样的代码，就不用催作者改了。最期待编辑栏的代码自定义
Kootea • 1 年前
付费者

对我有用，谢谢。
wenbocn • 1 年前 • 1 评论
付费者

请问能否增加一个显示“最近的文档”的按钮，以方便打开最近使用的文件，谢谢！👍 👍

1 引用

建议停靠栏添加 [最近的文档] 功能面板 • wenbocn

已经修改正文中的代码片段；需要在第 12 行，false 改为 true；

Undii • 1 年前 • 1
muxue • 2 个月前 via macOS
付费者捐赠者

您好，在 3.1.x 版本上这个功能是有用的，但是在 3.1.1x 版本上这个代码块就失效了，虽然能注册按钮但是点击了没反应（日记按钮），请问能更新一下代码片段吗？感谢！

1 回复
Undii • 2 个月前
付费者捐赠者作者

不太确定问题，我这边正常，先通过左上角菜单-> 日记-> 笔记本，选择一个默认笔记本，然后再试一下呢？或者到快捷键那里，检查一下“日记”的快捷键。

另外，一个可能的替代是使用“今日笔记”插件，还可以在创建日记时选择笔记本。

1 回复
muxue • 2 个月前 • 1 • 2 评论 via macOS
付费者捐赠者

我这边已经选了默认的笔记本，但是点击顶栏注册的按钮依旧没反应，不太清楚这里的报错是啥意思

可能和 mac 有关，我这里没有测试环境；正文代码更新了，麻烦重新试一下 ;前面启用的按钮也有所修改，替换时请注意修改

Undii • 2 个月前

@Undii 搞定了，代码片段里面的 hotkeyStr.indexOf 里面的 ^ 要改掉，应该是 ⌃，改掉之后就可以正常跳转了。感谢！

muxue • 2 个月前
carethink • 2 个月前 via macOS

请问有办法完全隐藏掉顶栏吗？比如把顶栏全部隐藏掉，鼠标经过时显示。或者设置个快捷键隐藏/显示顶栏。
carethink • 2 个月前 • 1 评论 via macOS

佬，有办法把顶栏完全隐藏吗？包括底色、按钮和其它所有的东西(图中红色圈起来的部分)

我用这个代码，在开发者工具里找了很久，也没搞明白如何能全部隐藏

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

顶栏全部隐藏可以是可以，但优先使用主题吧，我搞不定隐藏后样式好看和窗口三大按钮显示这个问题；

Undii • 2 个月前

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

添加

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

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

隐藏

相关帖子

希望有的功能和优化

windows 端 S3 同步失败。

打开思源不能立即输入中文

请教关于搜索方面的问题

如何批量去掉标记等工具栏应用内容

思源笔记是否有这个技术学习飞书的飞书妙计功能？

求助一个数据库模板列代码

欢迎来到这里！