Hugo markdown 링크에 상호 참조를 추가하는 방법 avatar
사요한
 | | 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

개선

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


이 기사는 mastodon.social, www.facebook.com, twitter.com 배포되었습니다.

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

avatar

ᜌᜓᜃᜒ (Yuki ・ 雪亮)이것이 망각의 끝이 아니라면 내 인생이 바로 오늘 끝날 듯 매일 살 것이다.

YOOki (柳 紀 ・ 유 기) 연대기

YOOki (柳 紀 ・ 유 기) 연대기ᜌᜓᜃᜒ (Yuki ・ 雪亮) 의 캐주얼 및 개인 블로그로의 복귀입니다. “YOOki"라는 이름은 YourOnly.One 의 두문자어와 내 별명 ᜌᜓᜃᜒ (Yuki ・ 雪亮) 의 매시업입니다.

흥미롭게도 중국 전설에 따르면 「柳」(YOO)는 고대 중국의 성입니다.이 성의 조상은 Yu Shun이라는 고대 현인과 밀접한 관련이 있습니다. 한국에서는 「유 (YOO)“혈통 흔적 하, 한, 조선 왕조에 유, 유 성의 소유자는 자선과 근면으로 명성을 얻었습니다. 1

또한 우아하거나 가느 다란 것을 의미하는 “버들 나무"또는 “버들 나무"의 단어이기도합니다. 그리고 모든 사람에게 지속적인 영양과 자원을 제공하는 수역 근처에서 자라는 나무. 그것은 또한 존재, 기름 (기음 (?)), 그리고 단순히 “U”(당신)를 의미 할 수 있습니다.

한자 「紀」(ki) 문자는 기록, 훈련, 질서 제공을 의미합니다. 한글에 해당하는 「기」(기기)는 에너지, 정신, 기치, 기간을 의미합니다. 동명사 또는 부정사를 만드는 데 사용되는 접미사이기도합니다.

“柳 紀"과 “유 기"가 “YOOki"의 중국어와 한국어로 무슨 뜻인지 아시겠습니까?


고시 : Google 번역

지금 재생 중
소셜 링크