Astro Cactus theme 각주에 붙는 주소가 이상한 문제

해결책 요약

1. 상대 경로의 기준이 되는 base 태그를 잘못 설정했다.

배포할 때의 환경을 개발환경에서 재현하는 걸 먼저 해보자.

• 개발 환경에서 출력해볼 때, --base 플래그 설정해볼 것.

배경

테마에 따라온 markdown 작성 예시글을 보는데 각주를 클릭했더니 잘못된 주소가 생성되어 있었다.
경로 생성 문제가 아직 남아 있는 것으로 보고 해결 방법을 찾아보게 되었다.

문제점

• 블로그 글을 생성할 때, 각주 링크의 주소가 이상하다.
  • 주소에 slug가 없이 홈 주소 + 각주 이름으로 주소가 생성된다.
• 각주 링크는 현재 글 경로를 기반한 주소가 생성되어야 하는데 이것들이 없이 생성된다.

건들여 본 것

rehype-plugin? remarkRehype?

• md, mdx파일을 html로 변환해 주는 node 패키지
• 이 과정에서 경로에 대한 작업을 할 때 게시글의 주소에 대한 정보가 포함되지 않았다?

GfM

• github에서 문법을 추가한 Markdown
• remark-gfm에서 해석해서 mdast¹으로 변환해 준다.

링크는 기본 마크다운 문법,
GfM을 쓰면 이렇게 각주를 사용할 수 있다.

[mdast][mdast][^mdast]

[^mdast]: MarkDown Abstract Syntax Tree

[mdast]: https://github.com/syntax-tree/mdast

• 근데 이걸 사용하는데 주소를 잘못 설정됐습니다.
• rehype에서 주소를 처리할 때 반영이 안 됐습니다.

mdast를 remark-rehype에서 처리할 때 옵션이 있나?

• footnoteBackContent?
• Astro에서 어떻게 처리하길래 이렇게 주소를 생성하나?
  • 아무것도 처리를 안 해서 이렇게 작동하나?

base 태그?

• 기존에 baseUrl 설정을 반영하려고 추가한 base 태그의 href값을 pathname으로 변경
  • 문제 해결됨.
• 근데 아예 base 태그를 지우면 되나?
  • 그러면 baseUrl도 적용 안된 상태로 주소가 생성됨.

사이트 내 상대경로 처리

돌고 돌아 문제는 경로문제로 돌아옴.

• 변경점들

---
<!-- ... -->
const baseUrl = import.meta.env.BASE_URL;
<!-- ... -->
---

<!-- ... -->
<a
    href= `${baseUrl}/`
    aria-current={url.pathname === `${baseUrl}/` ? "page" : false}
>
<!-- ... -->
</a>

---
<!-- ... -->
const baseUrl = import.meta.env.BASE_URL;
const pathName = Astro.url.pathname;
<!-- ... -->
---

<!-- ... -->
<base href={pathName} />
<!-- ... 다른 경로들에 baseUrl값 삽입 -->

아직은 경로를 추가해야할 곳을 찾으면 추가하는 걸 반복하여 해결함.

해결책

하위 경로를 사용하는 사이트에서는 경로 다루는 걸 주의하자.

여담

• 정리만 잘하면 다루기 쉽게 정의하는 것이 되네.
• 경로 찾을 때, 기준을 어디에서 따르고 있는지 확인하자
• github pages는 하위 경로를 챙겨야하는데 배포마다 확인해야 하니 까다롭다.
• cloudflare는 preview 빌드를 따로 보여주니깐 따로 브랜치를 만들어서 문제 확인하는 것이 편하다.