开发日志[3]--文章键盘翻页

2018-12-12

blog-development

最近解决了一个问题：

用键盘『←』『→』翻页到上一篇和下一篇文章

解决方案：

一开始是看了谢老大的这篇博客，找到了里面的提到的翻页代码：

$(function(){
  $(document).keydown(function(e) {
    var url = false;
        if (e.which == 37 || e.which == 74) {  // Left arrow and J
            {% if page.previous %}
        url = '{{page.previous.url}}';
        {% endif %}
        }
        else if (e.which == 39 || e.which == 75) {  // Right arrow and K
            {% if page.next %}
        url = '{{page.next.url}}';
        {% endif %}
        }
        if (url) {
            window.location = url;
        }
  });
})

我一开始不太明白怎么在 html 里面加 javascipt，上网搜了一下，把上面这段代码用一个<script language="Javascipt"></script> 包裹起来，然后粘贴到网站的默认页面（default.html）里头。从本地试了一下，好像不管用。

于是就给谢老大在博客后面留言，没想到七年前的博客，马上就收到回复了（感谢Disqus）：

我没用过Hugo，不过还是看一下代码：

<script type="text/javascript">
document.addEventListener('keyup', function(e) {
  if (e.target.nodeName.toUpperCase() != 'BODY') return;
  var url = false;
  if (e.which == 37) {  // Left arrow
    {{ if .PrevInSection }}
    url = '{{ .PrevInSection.RelPermalink }}';
    {{ end }}
  } else if (e.which == 39) {  // Right arrow
    {{ if .NextInSection }}
    url = '{{ .NextInSection.RelPermalink }}';
    {{ end }}
  }
  if (url) window.location = url;
});
</script>

和 Jekyll 有点像，改了改页面变量，如下：

<script type="text/javascript">
document.addEventListener('keyup', function(e) {
  if (e.target.nodeName.toUpperCase() != 'BODY') return;
  var url = false;
  if (e.which == 37) {  // Left arrow
    {% if page.previous %}
    url = '{{page.previous.url}}';
    {% endif %}
  } else if (e.which == 39) {  // Right arrow
    {% if page.next %}
    url = '{{page.next.url}}';
    {% endif %}
  }
  if (url) window.location = url;
});
</script>

把这个文件保存在网站的_includes/文件夹里，起了个名字叫arrow.html（需要的话，链接在此）。

最后，在_layouts/default.html 的footer 里面加了一行：

{% include arrow.html %}

就大功告成了。

感想：

功能实现了以后，我在前文提到的这篇博客下面冒了个泡表示感谢。结果被谢益辉同志一把揪住，让我详细说说实现的过程：

于是就有了这篇日志。

不过有一些问题我还没有完全搞明白，比如之前试的代码为啥不好用。我的猜测是那个<script language="Javascript"> 搞的鬼。根据这个问题的回答，好像language这个选项已经被弃用了。

还有就是下面这段代码是干嘛的，这个有空可以研究一下。

document.addEventListener('keyup', function(e) {
  if (e.target.nodeName.toUpperCase() != 'BODY') return;

下一步的目标是把『文章』和『开发日志』的键盘翻页分开处理，这样读者就不会看文章翻着翻着就到开发日志了，感觉比较无聊。此外就是归档页的归纳整理，感觉现在这个样子还是比较乱。但是如果索性去掉这页，我又觉得检索文章不太方便。还是先纠结一会儿吧。

以后的『开发日志』（包括此篇）我都会加上评论区，欢迎各位留言，一起交流。