자바스크립트를 활성화 해주세요

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

Hugo에서 Markdown 링크에 대한 상호 참조 지원을 추가하는 방법

 ·   ·  ☕ 5 분 읽기  · 
❄️ 사요한
Fediverse Follow

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

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

특징

  • 일반 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)
    • 사용하는 방법 섹션을 재구성했습니다.

단계

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

  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의 일부가 아닌 동일한 (하위) 도메인 아래 웹사이트의 다른 부분에 대한 링크를 생성하려는 경우에 유용합니다. 프로젝트. 이 형식은 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

개선

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


공유하기

마음에 드셨나요? 이 게시물을 공유하고 아래에 댓글을 남기고 선물을 보내주세요! (새 탭/창에서 열립니다)