Hugo markdown 링크에 상호 참조를 추가하는 방법

Hugo의 덜 일반적으로 사용되는 기능 중 하나는 렌더 후크입니다. 이 게시물에서는 렌더 후크를 사용하여 Markdown의 기본 링크 생성 방식인 [텍스트](https://example.com#fragment "제목")에 내부 상호 참조 지원을 추가할 것입니다.

Hugo의 내부 상호 참조는 일반적으로 내장 단축 코드 {{< ref >}} 또는 {{% relref %}}를 사용하여 수행되지만 Hugo 버전 0.62.0부터 ¹ 알고 계셨습니까? 권장되는 방법은 렌더 후크를 사용하는 것입니까 ²?

특징

일반 Markdown 링크 형식을 사용하여 Hugo 내에서 상호 참조
- {{< 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)
- 사용하는 방법 섹션을 재구성했습니다.

단계

이 디렉토리 /layouts/_default/_markup/에 render-link.html이라는 파일을 만듭니다.

아래 코드를 추가하세요.

 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의 일부가 아닌 동일한 (하위) 도메인 아래 웹사이트의 다른 부분에 대한 링크를 생성하려는 경우에 유용합니다. 프로젝트. 이 형식은 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 "제목")
- [텍스트#조각](20181210-browser-wars-iii.md#fragment)
- [텍스트#조각](/20181210-browser-wars-iii.md#fragment)
- [텍스트#조각](20181210-browser-wars-iii.md#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 "제목")
- [텍스트#조각](20181210-browser-wars-iii#fragment)
- [텍스트#조각](/20181210-browser-wars-iii#fragment)
- [텍스트#조각](20181210-browser-wars-iii#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

개선

위의 코드를 자유롭게 개선하고 커뮤니티에 다시 공유하십시오. 귀하의 웹사이트와 이름을 제공하여 적절하게 크레딧을 받으십시오.