Jekyll新分页开启超链接

2017-02-05

像Jekyll或Hexo这种静态网站产生的博客，超链接是一个很麻烦的问题。

通常使用者会期待点击文章中的外部链接时，应该要开启新分页。但如果超链接是用markdown写的，就会在同一个分页开启外部链接。

有一个解决的方法是用的[the text](the url){:target"_blank"}， 但实际上可以通过一段JavaScript程序码来一劳永逸。

新增档案new-tab.js

我是把档案存在asserts/js/里面

function handleExternalLinks () {
  var host = location.host
  var allLinks = document.querySelectorAll('a')
  forEach(allLinks, function (elem, index) {
    checkExternalLink(elem, host)
  })
}

function checkExternalLink (item, hostname) {
  var href = item.href
  var itemHost = href.replace(/https?:\/\/([^\/]+)(.*)/, '$1')
  if (itemHost !== '' && itemHost !== hostname) {
    item.target = '_blank'
  }
}

// NodeList forEach function
function forEach (array, callback, scope) {
  for (var i = 0; i < array.length; ++i) {
    callback.call(scope, array[i], i)
  }
}

handleExternalLinks ()

加入_layouts/default.html

在<body></body>的最尾巴加入档案：

<html>
......
  <script type="text/javascript" src="/assets/js/new-tab.js"></script>
</body>
</html>

本文转自：https://note.pcwu.net/2017/02/05/jekyll-link-new-tab/