Sphinxで作ったドキュメントの外部リンクを新しいタブで開く方法を考える

Sphinx で作成したドキュメントの外部リンクを開こうとすると、同じタブで開いてしまうのでちょっと不便ですよね。
conf.py やディレクティブで指定する方法も (多分) ないので、どうにかして外部リンクを新しいタブで開く方法がないか検討してみました。

Sphinx で外部リンクを作る方法

Sphinx で外部リンクを作る方法はいくつかあります。

1. 直接 URL を記入する

URL を直接記入すると、URL の文字列をリンクに変換してくれます。

URL は https://nyantaro-shokai.com だよ

2. インライン構文

リンクにラベルを付けたい場合はこうします。

詳しくは `にゃんタロー商会ブログ <https://nyantaro-shokai.com>`_ を見てね

3. 外部ターゲット

同じリンクを複数作りたい場合は外部ターゲットが便利です。

詳しくは にゃんタロー商会ブログ_ を見てね

にゃんタロー商会ブログ_ をよろしくね！

.. _にゃんタロー商会ブログ: https://nyantaro-shokai.com

HTML で外部リンクを新しいタブで開く方法

新しいタブで開くリンクは a タグの target に _blank を指定するだけで OK です。
あと、rel に noopener と noreferrer も指定しましょう。

<a href="https://nyantaro-shokai.com" target="_blank" rel="noopener noreferrer">にゃんタロー商会ブログ</a>

Sphinx で作った外部リンクを新しいタブで開く方法

それでは、Sphinx で作った外部リンクを新しいタブで開けるようにする方法を考えていきましょう。

Sphinx で作った HTML を見ると外部リンクの a タグに external というクラスがついていることがわかるでしょうか。(内部リンクは internal)
これがわかればこっちのもんです！(謎)

方針としては、JavaScript で external というクラスがついている a タグの要素を拾って target 属性を追加していく感じです。

Sphinx で JavaScript を使用するには conf.py に html_js_files を指定します。
今回は link_control.js という JavaScript ファイルを追加することにします。

html_js_files = ['link_control.js']

JavaScript のファイルは特に設定を変えていなければ _static に配置すれば OK です。
JavaScript は次のようにします。

window.addEventListener("load", func=()=>{
    const external_links = document.querySelectorAll("a.external");
    for(let i=0; i<external_links.length; i++){
        external_links[i].setAttribute("target", "_blank");
        external_links[i].setAttribute("rel", "noopener noreferrer");
    }
});

これですべての外部リンクが新しいタブで開かれるようになります。