快速输入 KBD

就是 Keyboard,键盘。HTML 里面有个标签 kbd 用来标记按键,比如:

Win + D

就是:

<kbd>Win</kbd> + <kbd>D</kbd>

然后就可以据此设定一些特殊样式了,就像上面这样。

我用了一个 Templater 模板,代码稍微有点长:

<%*
  let content = tp.file.selection()
  if(!(content && content.length)) content = await tp.system.prompt("请输入快捷键")
  if(!(content && content.length)) return
  const keyNames = {
      "-": "minus",
      "=": "equal",
      "`": "backtick",
      "[": "leftSquareBracket",
      "]": "rightSquareBracket",
      "\\": "backslash",
      ";": "semicolon",
      "'": "singleQuotationMark",
      ",": "comma",
      ".": "period",
      "/": "forwardSlash",
      "↑": "up",
      "↓": "down",
      "←": "left",
      "→": "right",
  }
  tR += content.replace(/([a-z0-9\[\];',.\/\\`\-=↑↓←→]+)/gi, (m, s)=>{
    const className = 'key-'+(/^[a-z0-9]+$/i.test(s) ? s.toLowerCase() : keyNames[s])
    return `<kbd class=${className}>${s}</kbd>`
  })
%>

然后选中你输入的快捷键(文字),插入这个模板即可;如果没选中文字则弹出输入框来输入。这个模板会给每个按键添加上对应的类,便于进行更复杂的自定义。所以上面按键实际生成的代码是这样的:

<kbd class=key-win>Win</kbd> + <kbd class=key-d>D</kbd>
©2022~2023 稻米鼠. Last build at 2023/12/5 00:00:21