본문 바로가기

Hugo - 외부 링크 새 탭 새 창 에서 열기

 

답답하게도 기본 값이 같은 창에서 모든 링크가 열리도록 설정되어 있나 보다.

외부 사이트는 그냥 새로운 탭이나 창에서 로딩 되면 훨씬 편할 것 같아서 찾아보기 시작~~

 

결론적으로, 자신의 휴고 사이트에서 마크다운 번역기를 어떤 것으로 쓰는 가에 따라 다르다.

아래글 참고해 주시고,

How to Open Link in New Tab with Hugo's new Goldmark Markdown Renderer

 

How to Open Link in New Tab with Hugo's new Goldmark Markdown Renderer | Prasad's Pen

Hugo is a blazing fast static site generator, which makes it a terrific choice to create your blogs. It's written in Go and uses Go's templating language to generate blog content with customizable templates for styling. Check out this article for a good ov

agrimprasad.com

Blackfriday 마크다운 렌더링 엔진 사용하는 경우

쉽다. 그냥 설정파일에 아래 내용을 추가하면 된다.

[blackfriday] hrefTargetBlank = true

하지만, Goldmark로 기본 엔진이 변경된 지금 다른 방법을 사용해야 한다는 아래 글 참고해주시고,

However, in the latest Hugo v0.62.0, this doesn't work anymore as the default markdown renderer has changed to Goldmark, which is CommonMark compliant and allows for custom templates to render links and images from markdown. Thus, if you want to open your blog's links in a new tab (which is not supported by default), you'll have to use a custom markdown render hook to add the target="_blank" attribute to the links.

Goldmark 마크다운 렌더링 사용하는 경우,

조금 복잡하지만, 머 쉽다.

아래 파일을 해당 위치에 동일하게 만든다.

layouts/_default/_markup/render-link.html

 

아래와 같이 내용을 파일에 입력하고 저장한다.

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text }}</a>

간단하게 살펴보면, 외부 링크라고 판단되는 경우 target을 새 탭이나 창으로 열리도록 변경하도록 되어 있다.

 

끝.

 

즐겨라 머든, 이 분도 이렇게 즐기는데 ^^

Jump the waves from https://unsplash.com/photos/gATkEMsFmSE

B로그0간

개발 관련 글과 유용한 정보를 공유하는 공간입니다.