Hugo markdownリンクに相互参照を追加する方法

Hugoであまり使用されない機能の1つは、レンダリングフックです。この投稿では、レンダリングフックを使用して、リンクを作成するMarkdownのデフォルトの方法である [文章](https://example.com#fragment "題名")に内部相互参照サポートを追加します。

Hugoの内部相互参照は通常、組み込みのショートコード {{< ref >}}または{{% relref %}}を使用して行われますが、Hugoバージョン0.62.0以降ご存知でしたか ¹ 推奨される方法は、レンダリングフックを使用することですか ²？

特徴

Hugo内で相互参照するには、通常のMarkdownリンク形式を使用します
- {{< ref >}}と{{% relref %}}、またはそれらのバリエーションは過去のものです
- コンテンツのタイトルを自動的に使用する
- 多言語サポート
- Markdownリンクのテキストとタイトルのサポート
- URIフラグメントのサポートあり

手順

このディレクトリにrender-link.htmlというファイルを作成します/layouts/_default/_markup/

以下のコードを追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{{- $baseurl := urls.Parse site.BaseURL -}}
{{- $url := urls.Parse .Destination -}}
{{- $getpage := site.GetPage .Destination -}}
{{- $internal := lt (len $url.Host) 1 -}} {{/* NOTE: internal links will always have an empty $url.Host */}}

{{- $fragment := $url.Fragment -}}
{{- with $fragment -}}{{ $fragment = printf "#%s" $fragment }}{{- end -}}

{{- $destination := "" -}}
{{- if $internal -}}
  {{- if (strings.HasPrefix $url.Path "./") -}}
    {{/* NOTE: for links starting with ./ */}}
    {{- $urltrimmed := strings.TrimPrefix "./" $url -}}
    {{- $destination = printf "%s://%s/%s%s" $baseurl.Scheme $baseurl.Host $urltrimmed $fragment -}}
  {{- else -}}
    {{/* NOTE: for internal links */}}
    {{- $destination = printf "%s%s" $getpage.RelPermalink $fragment -}}
  {{- end -}}
{{- else -}}
  {{- $destination = .Destination -}}
{{- end -}}

<a href="{{ $destination | safeURL }}"{{ with or .Title $getpage.LinkTitle .Text }} title="{{ . }}"{{ end }}{{ if not $internal }} rel="noopener external"{{ end }}>{{ or .Text .Title $getpage.LinkTitle | safeHTML }}</a>

それでおしまい。

使い方

伝統的

1
2
3
4
- [https://example.com/#fragment](https://example.com/#fragment "https://example.com/#fragment")
- [直接](https://im.youronly.one/techmagus/browser-wars-3-blink-gecko-2018344/ "題名")
- [#fragmentで直接](https://im.youronly.one/techmagus/browser-wars-3-blink-gecko-2018344/#fragment "題名")
- [＃フラグメントのみ](#fragment)

新しい

特別な

[text](./path/to/content/)形式は、現在のHugoの一部ではなく、同じ（サブ）ドメインの下で、Webサイトの別の部分へのリンクを作成する場合に役立ちます。事業。 Hugo markdownリンクにリンクアイコンを追加する方法もインストールされている場合、この形式では外部リンクアイコンは生成されません。

[text.ext](./path/to/file.ext)は、現在のHugoプロジェクトの内部または外部の同じ（サブ）ドメインでホストされているダウンロードリンクに役立ちます。

1
2
- [贈り物を送る](./p/gift/)
- [link-icons.7z](./techmagus/dls/link-icons.7z)

ファイル拡張子なし

1
2
3
4
5
6
7
8
- [](20181210-browser-wars-iii)
- [](/20181210-browser-wars-iii)
- [](20181210-browser-wars-iii "題名")
- [](/20181210-browser-wars-iii "題名")
- [文章](20181210-browser-wars-iii)
- [文章](/20181210-browser-wars-iii)
- [文章](20181210-browser-wars-iii "題名")
- [文章](/20181210-browser-wars-iii "題名")

ファイル拡張子付き

1
2
3
4
5
6
7
8
- [](20181210-browser-wars-iii.md#fragment)
- [](/20181210-browser-wars-iii.md#fragment)
- [](20181210-browser-wars-iii.md#fragment "題名")
- [](/20181210-browser-wars-iii.md#fragment "題名")
- [Text＃fragment](20181210-browser-wars-iii.md#fragment)
- [Text＃fragment](/20181210-browser-wars-iii.md#fragment)
- [Text＃fragment](20181210-browser-wars-iii.md#fragment "題名")
- [Text＃fragment](/20181210-browser-wars-iii.md#fragment "題名")

サポートされていません

ファイル拡張子がなく、 ＃fragmentを使用した内部リンクでは、間違ったリンクが生成されます。

1
2
3
4
5
6
7
8
- [](20181210-browser-wars-iii#fragment)
- [](/20181210-browser-wars-iii#fragment)
- [](20181210-browser-wars-iii#fragment "題名")
- [](/20181210-browser-wars-iii#fragment "題名")
- [Text＃fragment](20181210-browser-wars-iii#fragment)
- [Text＃fragment](/20181210-browser-wars-iii#fragment)
- [Text＃fragment](20181210-browser-wars-iii#fragment "題名")
- [Text＃fragment](/20181210-browser-wars-iii#fragment "題名")

次の形式にも注意してください。

1
2
- [link-icons.7z](/dls/link-icons.7z)
- [link-icons.7z](../../dls/link-icons.7z)

上記の代わりに、 [文章](./path/to/file.ext)を次のように使用します。[link-icons.7z](./techmagus/dls/link-icons.7z)は次のようにレンダリングされます。 link-icons.7z

それを改善

上記のコードを自由に改善して、コミュニティに共有してください。あなたが適切にクレジットされるようにあなたのウェブサイトと名前を提供してください。