참조링크

참조링크

문제점

Obsidian과 Hugo 간의 링크 호환성 문제 해결

Obsidian에서 상대경로로 설정된 링크는 Hugo에서 제대로 작동하지 않을 수 있습니다. Hugo는 기본적으로 링크를 처리할 때 상대경로를 기준으로 하여 현재 페이지의 경로에 따라 링크를 해석하기 때문에 Obsidian에서 설정한 상대경로 링크가 Hugo에서 의도한 대로 작동하지 않을 수 있습니다.

절대경로 사용의 일관성 유지

링크를 절대경로로 설정하면, 경로의 변화에 영향을 받지 않고 항상 정확한 위치를 가리킬 수 있습니다. 이는 특히 프로젝트 구조가 복잡하거나 여러 폴더에 걸쳐 있는 경우에 중요합니다. 절대경로를 사용하면 링크가 항상 일관된 경로를 유지하므로 링크 오류를 줄일 수 있습니다.

Hugo의 빌드 과정에서 발생하는 경로 문제 해결

Hugo는 baseURL을 기준으로 모든 링크를 처리합니다. baseURL을 올바르게 설정하고, 모든 링크를 절대경로로 변환함으로써 이러한 문제를 해결할 수 있습니다.

해결방안

Obsidian 링크 경로 변경

Obsidian에서 상대경로로 설정된 링크를 절대경로로 변경합니다. 예를 들면 다음과 같습니다.

[옵시디언이란](obsidian/about/옵시디언이란)

`render-link.html` 파일 수정

baseURL 을 설정한 후에도 Obsidian 과 Hugo의 절대경로에는 차이가 발생할 수 있습니다. 보통 프로젝트나 폴더의 구조 차이로 발생하는데, 예를 들면 다음과 같습니다.

baseURL 이 localHost 인 상태에서 [옵시디언이란](obsidian/about/옵시디언이란) 이 링크를 걸면 휴고는 주소를 다음과 같이 해석합니다.

http://localhost:1313/obsidian/about/옵시디언이란

하지만 프로젝트 구조나 마운트 설정 등에 따라 실제 파일은 다음의 위치에 있을 수 있습니다.

http://localhost:1313/docs/staticsite/obsidian/about/옵시디언이란

이 때, baseURL 을 http://localhost:1313/docs/staticsite/ 로 바꾸면 일반 페이지 링크에 문제가 발생합니다.

즉, 링크 주소만 바꿔야 하는 경우 추가되는 주소를 render-link.html 을 통해 설정할 수 있습니다.

\node_modules\@hyas\doks-core\layouts\_default\_markup\render-link.html

{{ if (strings.HasPrefix .Destination "mailto") -}}
  {{ with .Text -}}
    {{ partial "main/email" (dict "emailAddress" $.Destination "emailTitle" .) }}
  {{ else -}}
    {{ partial "main/email" (dict "emailAddress" $.Destination) }}
  {{ end -}}
{{ else -}}
  {{ $link := .Destination | relURL }}
  {{ if not (strings.HasPrefix $link "/docs/staticsite") -}}
    {{ $link = printf "/docs/%s" $link }}
  {{ end -}}
  <a href="{{ $link | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}>{{ .Text | safeHTML }}</a>
{{- end -}}

문단참조

Obsidian에서 문단을 참조하는 형식인 /obsidian/guide#test와 같은 링크도 Hugo에서 호환될 수 있습니다. #test는 해당 페이지 내의 앵커 링크를 나타내며, 페이지가 로드되면 지정된 위치로 스크롤됩니다.

다음은 문단 참조가 포함된 링크를 Hugo와 호환되게 설정하는 과정입니다:

Buy me a coffee

이미지 참조 테마 계층 구조

문제점