Hugo 添加 . 键盘快捷键

💡 原文英文,约200词,阅读约需1分钟。
📝

内容提要

这篇文章介绍了一种键盘快捷键的代码修改,按下“.”键可以快速跳转到编辑页面。代码通过监听键盘事件,判断当前页面类型,并确保焦点不在输入框内,从而生成相应的编辑链接。

🔎

延伸解读

快捷键的适用页面范围

代码明确排除了首页、文章列表页和标签页,仅在其他页面生效。这意味着在文章详情页等页面按下“.”键才会跳转,避免了在无需编辑的页面误触发。这种设计考虑了不同页面的编辑需求,但如果你希望在其他页面也能快速编辑,可能需要调整排除条件。

输入框内的按键保护

代码通过检查事件目标的节点名是否为INPUT或TEXTAREA,确保在输入框内按“.”键不会触发跳转。这防止了用户在填写表单或搜索时被意外重定向,提升了使用体验。但若页面使用其他可编辑元素(如contenteditable),则可能无法覆盖。

编辑链接的生成逻辑

根据当前路径分割后的段数,代码动态生成文件名:三段路径(如/posts/文章名/)直接使用文章名加.org后缀,否则添加posts/前缀。这适应了不同URL结构,但硬编码了GitHub仓库地址和分支,若仓库或分支变更需同步修改。

❓

Q&A

如何通过按下'.'键快速跳转到编辑页面?

按下'.'键后,代码会判断当前页面类型并确保焦点不在输入框内,从而生成相应的编辑链接。

这个代码是如何判断当前页面类型的?

代码通过检查`window.location.pathname`来判断当前页面是否为主页、文章页或标签页。

在什么情况下按下'.'键不会跳转到编辑页面?

如果当前页面是主页、文章页、标签页,或者焦点在输入框内,则不会跳转。

生成的编辑链接是如何构造的?

编辑链接根据当前页面路径生成文件名,格式为`posts/{文件名}.org`。

这个功能有什么实际应用场景?

该功能适用于需要快速编辑内容的用户,提升编辑效率。

如何修改代码以适应不同的需求?

可以根据需要调整`window.location.pathname`的判断条件或修改生成的链接格式。

🏷️

标签

➡️

继续阅读