Hugo markdownリンクに相互参照を追加する方法 avatar
謝雪矢(ゆきや)
 | | 6 分で読めます | 更新日時

Fediverse Follow

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

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

特徴

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

新着情報

  • 2022年6月17日:

    • 修正:[text](./path/to/content/)[text.ext](./path/to/file.ext)の構文
  • 2022年5月27日:

    • [文章](./path/to/content/)
    • [text.ext](./path/to/file.ext)
    • 使い方セクションを再編成

手順

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

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

     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

それを改善

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


avatar

Yohan Yukiya Sese-Cunetaㆍ사요한・謝雪矢·ᜌᜓᜃᜒもしこれが忘却の終わりでないなら、私は自分の人生がまさにこの日に終わるかのように毎日を生きるでしょう。

YOOkiクロニクルズ

YOOkiクロニクルズは、謝雪矢 がカジュアルで個人的なブログに復帰したことを意味する。 YOOkiという名前は、**YourOnly.Oneの頭文字をマッシュアップしたものです。ᜌᜓᜃᜒ (Yuki・雪矢)**というニックネームがあります。

興味深いことに、中国の伝説によると、は古代中国の姓です。 姓の祖先は、ユ·シュンという古代の賢王と密接に関連していました。 韓国では系が夏·韓·朝鮮時代にさかのぼる。 ユまたはユという名前の所有者は、慈善と勤勉で有名でした。1

また、またはを意味する優雅で細身、そしてすべての人に持続的な栄養と資源を提供する水域の近くに生えている木を意味する。 それはまた、存在すること、すなわち油(油)、そして単にあなたとして存在することを意味することもできます。

ハンジ 文字は、記録、規律、注文を提供することを意味します。 ハングルのは、エネルギー、精神、旗、期間を意味し、ゲルンや不定詞を作る時に使う接尾辞でもあります。


注意:ネイバーPapago神経翻訳

再生中