Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@nikaera

[Tips] Hugo で外部リンクを target="_blank" で開く方法

はじめに

Hugo で設定した外部リンクを開くときは別ウィンドウで開けるようにしたかったので、Hugo のテーマファイルをオーバーライドして対応しました。外部リンクが設定されているときのみ a タグに target="_blank" rel="noopener noreferrer" が追加されるようにしました。

テンプレートファイルは GO の HTML テンプレートで書かれているので、その書式にしたがって a タグの属性を書き換えることで、外部リンクの場合は target="_blank" rel="noopener noreferrer" を追加します。

a タグに外部リンクが設定されていた場合は target="_blank" を付与する

下記は hugo-PaperMod で、メインメニューの a タグに target="_blank" rel="noopener noreferrer" を追加するときのサンプルになります。

layouts/partials/header.html
<ul class="menu" id="menu" onscroll="menu_on_scroll()">
    <!-- `.Site.Menues.main` の要素数 (メニュー数) ループします -->
    {{- range .Site.Menus.main }}

    <!--
        要素内の .URL にアクセスすることで設定されているリンクにアクセスする。
        設定されている URL のプレフィクスが https:// or http:// であれば、
        絶対リンクが設定されているはずなため、外部リンクが設定されているとみなす。
    -->
    {{- $is_abs_url := or (strings.HasPrefix .URL "https://") (strings.HasPrefix .URL "http://") }}

    <!--
        もし外部リンクが設定されていれば、そのまま .URL の内容を出力する。
        そうでなければ、内部リンクを language プレフィクスを付与した形で出力する。
    -->
    {{- $menu_item_url := (cond $is_abs_url .URL (printf "%s/" .URL) ) | absLangURL }}
    <li>
        <!--
            外部リンクが設定されていたら ($is_abs_url が true なら)
            a タグに target="_blank" rel="noopener noreferrer" を設定する
        -->
        <a href="{{ $menu_item_url }}" {{- if $is_abs_url }} target="_blank" rel="noopener noreferrer" {{- end}}>
            <span {{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
                {{ .Name }}
            </span>
        </a>
    </li>
    {{- end -}}
</ul>

おわりに

Hugo でページを自分の思い通りカスタマイズするためには、ある程度は Go の HTML テンプレートの知識も必要になりそうです... :boy: :writing_hand:

参考リンク

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nikaera
様々な技術領域に関心のある雑食系エンジニアです。自分の記事が誰かのお役に立てば幸いです。Babylon.js/Serverless/TypeScript/React/Amplify/Unity
unity-game-dev-guild
趣味・仕事問わずUnityでゲームを作っている開発者のみで構成されるオンラインコミュニティです。Unityでゲームを開発・運用するにあたって必要なあらゆる知見を共有することを目的とします。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?