Hugo: 외부 링크 새 탭에서 열기
블로그에서 외부 링크를 열때 새 탭을 쓰지 않고 현재 탭에서 링크를 여는 게 마음에 들지 않았다. 지난 수년 간 블로그를 운영하면서 이 문제를 깨닫지 못한 것은 아마도 링크를 열 때는 거의 항상 Cmd+클릭을 사용하는 내 습관 때문이었을 것이다. 최근에 문득, '외부 링크는 그냥 새 탭에서 여는 게 맞지 않을까?' 하는 생각이 들었다.
마크다운에서 링크 target 속성을 지정하는 문법이 있을까 찾아봤지만 그런 문법은 없었다. 일부 마크다운 렌더러는 다음과 같은 확장 문법을 지원한다고 한다.
[ntalbs' stuff](https://ntalbs.github.io){:target="_blank"}
그러나, Hugo의 마크다운 렌더러에서는 지원되지 않는다.
혹시 Hugo 설정 중 외부 링크에 target=_blank 속성을 추가하는 옵션이 있지 않을까 찾아봤지만, 역시 없었다. 겨우 찾아낸 방법은 다음과 같이 shortcodes를 만드는 방법이었다.
<a href="{{ .Get "href" }}" rel="noopener" target="_blank">{{ .Get "title" }}</a>
마크다운 문서를 작성할 때 마크다운 링크 문법 대신 다음과 같이 shortcodes를 사용하면 HTML 렌더링 시 링크 태그에 target 속성이 추가된다.
{{ newtabref href="https://www.rust-lang.org/" title="Rust" }}
그러나 이 방법을 쓰고 싶지는 않았다. 이건 마크다운이 아니라서 에디터에서 문법 강조가 안 된다. 또한 블로그 문서의 모든 외부 링크를 찾아 수정해야 하는 문제도 있었다.
이렇게 방법을 찾지 못하고 며칠을 보내다가 문득 StackOverflow에서 JavaScript로 문제를 해결하는 방법을 찾았다.
[...document.querySelectorAll('a')]
.filter(link => link.hostname != window.location.hostname)
.forEach(link => link.target = '_blank')
코드는 단순하다. 문서에 포함된 모든 링크에 대해 link.hostname이 현재 사이트의 hostname과 다르면 외부 링크로 판단해 target="_blank" 속성을 추가하는 것이다.
나중에 보니 내가 처음 찾았던 문서 How To Create Link With target='_blank' In Hugo Markdown에도 JavaScript를 사용하는 방법이 있었다. 아마도 처음에는 마크다운이나 Hugo에서 해결하는 방법을 찾고 싶은 나머지 JavaScript를 쓰는 방법은 거들떠 보지도 않았던 것 같다.