Hugo 外部リンクジャンプ提示ページ

前言#

この数日、「秦大叔」のブログ記事《サイト再起動》で、ブログのコメントに他人が残したドメインが期限切れになり、アダルトサイトのリンクにリダイレクトされてしまったため、アダルト問題で問題を起こしたという話を見ました。現在の中国本土のネット環境では、このような小さな罪がますます厳しく取り締まられていることがわかります。

コンプライアンスと自己検閲のために、私はブログに対して 2 つのことを行いました。一つはコメントシステムを Giscus に移行し、コメントのハードルを上げて半閉鎖状態にしました。もう一つは、ブログ内のリンクを整理し、残ったリンクをジャンプページを通じてリダイレクトすることです。ちょうど「空白」大佬がブログ《HUGO 外部リンクを中間ページにリダイレクト》を更新したのを見て、スタイルをそのままコピーして、Todo リストの一つを完了しました。

PS：私は正規の個人サイトは登録するべきだと思います。しかし、もし不正規のことをしたいのであれば、完全な身分の隔離を行うべきであり、単に登録しないだけで多くの関連する実名情報を露呈するのは避けるべきです。親のような口出しはしません、聞きたければ聞いてください。

定義#

外部リンク：正式には外部リンクと呼ばれ、インポートリンクとも言います。これは、インターネット上の他のサイトから自分のサイトに導入されるリンクを指します。以下「外部リンク」と呼びます。

3 つのファイルでジャンプページを作成#

私の設計思想は「空白」の最初のバージョンの JS の方法とは少し異なり、Hugo の内蔵テンプレート_markupの render-link.html を利用し、Hugo のビルド時に外部リンクを Hugo の内蔵の base64Encode コマンドで base64 エンコードし、SSG の特性を十分に活用しました。

1. render-link.html を新規作成または修正#

_markup/render-link.html は Hugo がリンクをレンダリングするための内蔵テンプレートです。
ブログで選択したテーマがカスタマイズされた render-link.html を持っていない場合は、このファイルを新しく作成する必要があります。テーマがすでにリンクレンダリングをカスタマイズしている場合は、このファイルを直接修正できます。
ファイルは Hugo プロジェクトのルートディレクトリのlayoutsディレクトリにあります：

layouts/
└── _default/
    └── _markup/
        ├── render-codeblock-bash.html
        ├── render-codeblock.html
        ├── render-heading.html
        ├── render-image.html
        ├── render-image.rss.xml
        └── render-link.html    # < --- このファイル

私が使用しているファイルの内容：

$domainList はホワイトリストに相当します。

{{- $domainList := slice "www.eallion.com" "github.com" "twitter.com" -}}
{{- $parsedDestination := urls.Parse .Destination -}}
{{- $host := $parsedDestination.Host -}}
{{- $matched := false -}}
{{- range $domainList -}}
    {{- if strings.HasSuffix $host . -}}
        {{- $matched = true -}}
        {{- break -}}
    {{- end -}}
{{- end -}}
{{- if $matched -}}
    <a href="/go/?target={{ .Destination }}" target="_blank" rel="noopener noreferrer">{{ .Text | safeHTML}}</a>
{{- else -}}
    <a href="/go/?target={{ .Destination | base64Encode }}" target="_blank" rel="noopener noreferrer">{{ .Text | safeHTML}}</a>
{{- end -}}

PS：DoIt テーマは layouts/partials/plugin/link.html ファイルを修正するだけで済みます。

Tips：render-link.htmlを利用することで、ブログが新しいウィンドウで開くことができます。多くのアジアのユーザーがこの技術を検索しています。

2. layout テンプレート go.html を新規作成#

新しいページテンプレートを作成します。例えば、go.htmlを Hugo プロジェクトのルートディレクトリのlayouts/_default/go.htmlに配置します。
最も簡単な方法は、single.htmlをコピーしてgo.htmlに名前を変更することです。

layouts/
└── _default/
    └── go.html    # < --- このファイル

以下は私の内容で、HTML、CSS、JS を同じページに配置してメンテナンスを容易にしました。<div class="redirect-all">要素が自分のテンプレート内にある位置に注意する必要がありますが、基本的にはそのまま使えます。

{{- define "title" }}{{ .Title }} - {{ .Site.Title }}{{ end -}}

{{- define "content" -}}
    {{- $params := .Scratch.Get "params" -}}
    <style>
        .redirect-all {
            position: relative;
            box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
            border-radius: 10px;
            color: #666;
            word-break: break-all;
            max-width: 800px;
            height: 400px;
            text-align: center;
            font-size: 0.85rem;
            overflow: hidden;
            margin: 100px auto 0;
            background: #fff url(/assets/images/redirect/redirect-light.webp) no-repeat center center / cover;
            @include breakpoint('small') {
                aspect-ratio: 2 / 1;
                height: auto;
            }
        }

        .redirect-nrong {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.5rem 1rem
        }

        .redirect-title {
            font-size: 1.25rem;
            font-weight: bold;
            color: #222;
            margin-bottom: 0.5rem;
        }

        .redirect-info {
            margin-top: 6px;
        }

        .redirect-tis {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-top: 1rem;
            margin-bottom: 2px;
            flex-wrap: wrap;
        }

        .redirect-button {
            display: flex;
            align-items: center;
            border-radius: 3px;
            border: none;
            background: #006bee;
            height: 32px;
            padding: 0 14px;
            cursor: pointer;
            outline: 0;
        }

        .redirect-button a {
            color: #fff !important;
        }

        [theme=dark] .redirect-all {
                background: #fff url(/assets/images/redirect/redirect-dark.webp) no-repeat center center / cover;
                color: #999;
            }

        [theme=dark] .redirect-title {
                color: #ddd;
            }
    </style>

    <div class="page single special">

        {{- /* Content */ -}}
        <div class="content" id="content">
            <div class="redirect-all">
                <div class="redirect-nrong">
                    <div class="redirect-title">{{ .Site.Title }}を離れ、以下の外部リンクにジャンプします</div>
                    <a href="" target="_self" rel="noopener noreferrer" id="redirect-link"><span id="redirect-link">リダイレクト先が指定されていません。</span></a>
                    <div class="redirect-info">このリンクが安全かどうかは自己判断してください。アカウントと財産の安全に注意してください。</div>
                    <div class="redirect-tis">
                        <div class="redirect-button"><a href='' target="_self" id='direct-link' rel="noopener noreferrer">今すぐ行く</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const params = new URLSearchParams(window.location.search);
        const encodedTarget = params.get('target');
        const target = atob(encodedTarget); // Base64デコードにatobを使用

        if (target) {

            const decodedTarget = decodeURIComponent(target);

            document.getElementById('direct-link').href = decodedTarget;
            document.getElementById('redirect-link').textContent = '' + decodedTarget; // 新しく追加された要素に元のアドレスを表示
            document.getElementById('redirect-link').href = decodedTarget;

        } else {
            const redirectMessageElement = document.getElementById('redirect-link');
            redirectMessageElement.textContent = 'リダイレクト先が指定されていません。';
        }
        </script>
{{- end -}}

3. go.md を新規作成してテンプレートを呼び出す#

Hugo プロジェクトのcontentディレクトリにgo.mdという名前のファイルを新しく作成します。goが中継ページのリンクパスになります。
go.mdファイルのフロントマターでは、先ほど新しく作成した対応するテンプレートを選択します。テンプレート名がgo.htmlの場合、layout または type はgoを選択します。

---
title: "リダイレクト"
layout: "go"
type: "go"
... ...
---

4. 背景画像#

背景画像は static ディレクトリに配置します：
または正しく参照できる場所（CDN など）に配置し、<style>内のbackground URL を修正します。
さらに、自分のテーマのダークモードに適応させる必要があります。

static/assets/images/redirect/redirect-light.webp
static/assets/images/redirect/redirect-dark.webp

その他の注意事項#

この方法は、ブログ内のすべての Markdown コンテンツ文書、つまりcontentディレクトリ内の.mdファイルのみをレンダリングできます。
{{ Shortcodes }}を使って投稿することに慣れている場合や、ページにカスタム HTML リンクがある場合は、リンクパスの base64 互換性を自分で作成する必要があります。このテンプレートは、href="/go/?target={{ base64Encode }}"のようなブログ内のリンクを解析できますが、ホワイトリストは除外されます。