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

按照 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~11 行可以选择性的加按钮(把 true 改为 false 就不加对应按钮)。

/**
 * addBarButton.js
 * v0.1(代码片段模式)
 * 为顶栏增加数据历史、日记、闪卡按钮,点击后创建对应功能快捷键按下事件
 * 挂件模式支持点击日记列出笔记本。
 */
// 设置是否添加对应按钮
let g_addDailyNote = true;// 日记
let g_addFlashCard = true;// 闪卡
let g_addSetting = true;// 设置
let g_addHistory = true;// 数据历史

// 插入按钮
// 插入日历笔记本选择挂件 
// 参考: 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 b3-tooltips b3-tooltips__se" 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 b3-tooltips b3-tooltips__se" 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 b3-tooltips b3-tooltips__se" 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 b3-tooltips b3-tooltips__se" 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 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'
  }
  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;
  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();

隐藏

设置(Alt+P)---外观---代码片段---CSS--添加 CSS,以下为示例:

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

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

图片.png

记录下按钮的 id(# 后面的,到 . 为止;也可以点击后在开发者工具中看到),然后修改 css,比如:

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

createDailyNote.zip

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • yjmsiyuan

    支持,希望有更多这样的代码,就不用催作者改了。最期待编辑栏的代码自定义