設定jekyll開啟連結都使用新分頁開啟

2020/02/15 jekyll

在搞jekyll的時候,發現發現開超連結都沒辦法開新分頁,可以透過加一些程式碼,讓所有的非網域內的網址都用超連結開

修改教學

新增一個.js檔案

檔案可以直接下載: new-tab.js

或是複製以下代碼,我是放到 /asset/js/new-tab.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'
      item.rel = 'noopener noreferrer'
    }
  }
  
  // NodeList forEach function
  function forEach (array, callback, scope) {
    for (var i = 0; i < array.length; ++i) {
      callback.call(scope, array[i], i)
    }
  }
  
  handleExternalLinks ()

代碼我也是參考別人的,簡單來說就是會找出所有非本網域內的超連結,加上下面兩個值

target="_blank" 代表開啟新分頁,有這個值就可以開新分頁了

rel="noopener noreferrer"算是讓超連結變的更安全,預防網站被釣魚軟體注入,詳細可以看一下參考資料,有蠻有趣的範例網頁讓你知道兩者的差別

代碼插到網頁上

new-tab.js代碼引用到網站裡,我是放到_include/footer.html,複製以下代碼插入

<!-- new-tab.js -->
{% if site.new-tab.enable %}
  <script type="text/javascript" src="/assets/js/new-tab.js"></script>
{% endif %}

並且用if做了一個開關,方便我們在_config.yml,決定要不要開啟這個功能

修改_config.yml

打開_config.yml,複製以下代碼插入

#連結自動開新分頁
new-tab:
  enable: true

只要將enable設置成true,開啟新分頁的功能就會被打開,這樣就設定完成了~

參考資料


留言

Table of Contents