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デコードを使用

        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 }}" のようなブログ内のリンクを解析できますが、ホワイトリストは除外されます。