Blogger 讓外部連結自動在新視窗開啟

Blogger 筆記:讓外部連結自動在新視窗開啟。

撰寫文章時或許會加入一些外部連結,Blogger 預設是在相同視窗開啟連結網頁,讀者在瀏覽文章時點擊連結於離開當前網頁,要繼續閱讀內容還要按上一頁非常麻煩。這時加入一段程式讓外部連結自動在新視窗開啟,就能避免上述情況也不必每次設定新視窗開啟,方便訪客瀏覽也增加停留時間。

自動在新視窗打開外部連結程式碼:

<script>
document.addEventListener("DOMContentLoaded", () => 
  [...document.querySelectorAll("a[href]")].forEach(a => {
    const href = a.getAttribute('href') || '';
    if (/^(#|javascript:)/.test(href)) return;
    try {
      if (new URL(href, location.href).hostname !== location.hostname) {
        a.target = "_blank";
        a.rel = [...new Set((a.rel||'').split(/\s+/).concat(['noopener','noreferrer']))].join(' ');
      }
    } catch(e){}
  })
);
</script>

操作說明:

1. 在 Blogger 後台,點擊「範本」→「編輯HTML」。(註:編輯 HTML 前請先備份範本。)
Blogger 讓外部連結自動在新視窗開啟
2. 找到 </body>,在上面加入程式碼儲存範本。
Blogger 讓外部連結自動在新視窗開啟

將程式加入後會自動分辨連結,站內連結在相同視窗開啟,外部連結在新視窗中開啟。