Jekyll 新分頁開啟超連結
像 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>