모바일에서 URL의 해시/앵커가 제거됩니다. 어떻게 막나요?

지원
1

데스크톱에서 앵커가 포함된 링크를 클릭하면 해당 위치로 스크롤됩니다. 하지만 모바일(Android, FF & Chrome)에서는 URL에서 앵커가 제거되어 해당 위치로 스크롤되지 않습니다.

제가 하려는 일:

제목으로 링크해야 하는 긴 가이드라인 및 FAQ 문서가 있습니다. Discourse가 id 파라미터를 제거하기 때문에, 대상 문서의 사용자 정의 data 속성을 사용하고 URL의 앵커를 감지하여 일치하는 data 속성을 가진 요소로 스크롤하는 간단한 테마 컴포넌트를 만들었습니다.

데스크톱에서는 작동합니다!

하지만 모바일에서는 앵커가 제거되어 대상 페이지에 도달했을 때 올바른 요소로 스크롤되지 않습니다. 그리고 물론 긴 문서의 경우 모바일에서 해당 내비게이션이 가장 필요합니다.

목차(Table of Contents) 컴포넌트가 생성하는 앵커는 새 탭에서 열 때 작동한다는 것을 발견했습니다. URL에서 제거되지 않고 브라우저가 올바른 위치로 스크롤합니다.

이를 어떻게 작동시킬 수 있을까요?

2

작은 업데이트…

어떤 사람이 쿼리 파라미터를 대신 사용하라고 제안했습니다. 모바일에서는 삭제되지 않는 것 같습니다. 하지만 놀랍게도 데스크톱에서는 삭제됩니다.

3

URL가 제거되는 특정 문제에 대해서는 다루지 않지만, 관련 게시글을 몇 가지 소개합니다.

4

저는 안드로이드를 사용하지 않아서 이 부분을 테스트해볼 수는 없지만, 헤더 링크를 여러 번 사용해봤고 아이폰에서는 문제없이 잘 작동합니다. 왜 원하는 헤더에 그냥 링크를 걸지 않고 id 앵커를 사용하시는지 궁금합니다.

예를 들어, 이 링크는 잘 작동하나요? cloudflare R2 configuration

현재 사용 중인 앵커 링크의 형태를 예시로 보여주시겠어요? 아마 제가 의도를 잘못 이해하고 있는 것 같습니다.

5

그 헤더 링크들이 매우 취약하기 때문입니다. 제공하신 링크가 다음과 같은 형태입니다:

https://meta.discourse.org/t/-/148916#p-738234-cloudflare-r2-13

끝부분의 -13을 보셨나요? 그것은 해당 헤더가 13번째 헤더이기 때문에 붙은 것입니다. 문서 앞부분에 새로운 헤더가 추가되는 순간 링크가 깨집니다. 물론 헤더 텍스트를 변경해도 링크가 깨집니다.

여기서 '깨진다’는 것은 대상 문서가 변경된다는 뜻입니다. 제 판단으로는 해당 앵커가 페이지 로드 시 동적으로 생성됩니다. 따라서 TOC 플러그인을 사용하는 경우 문서 변경은 문제가 되지 않습니다.

우리의 사용 사례는 FAQ에 링크를 거는 것이므로, 새로운 질문/헤더를 추가하는 일은 드물지 않습니다.

하지만 말씀하신 대로 Discourse는 해당 앵커의 패턴을 감지하여 통과시키는 것 같습니다. 하지만 예상되는 패턴과 일치하지 않으면 제거됩니다.

그것들은 그냥 평범한 알파벳과 숫자로 이루어진 ID입니다. 따라서 위 예시에 앵커를 만들려 한다면 cloudflare-r2를 그대로 사용하면 됩니다.

6

이런 방식이 괜찮을까요?

<a name="cloudflare-r2"></a>
## Cloudflare R2 구성

이렇게 하면 앵커를 헤딩과 분리할 수 있고, URL 끝에 #cloudflare-r2를 추가하여 해당 위치로 링크할 수 있습니다.

7

테스트 결과, 마크다운 쿠크(Markdown cooker)가 name 속성을 제거하고 있습니다. 이것이 제 첫 번째 문제의 근본 원인입니다.

하지만 이 주제에서 제가 제기하는 문제는, 해당 앵커가 작동한다고 하더라도 모바일에서는 #cloudflare-r2가 제거된다는 것입니다. 데스크톱에서는 그러지 않습니다.

8

아, 그렇구나. 리치 텍스트 에디터는 그런 태그를 제거하지만 마크다운 에디터는 그렇지 않네… 리치 에디터에서는 HTML이 유지되도록 div로 감싸야 할 것 같아.

 <div><a name="x"></a></div>
9

그 방법을 시도해 봤습니다. 그래도 여전히 지워지네요. 또한, 나중에 누군가가 마크다운 편집기를 사용하지 않을 것이라고 기대할 수도 없습니다.

테스트를 위해 그 HTML을 리치 텍스트 편집기에 넣어 봤습니다. 결과를 지켜보죠…

10

좋아요! 두 가지 모두 정상적으로 작동하는 것 같습니다. 게다가 두 편집기에서 모두 그렇습니다.

특히 모바일에서 더 많은 테스트를 해야 합니다. 계속 작업을 진행한 후 결과를 보고하겠습니다.

감사합니다!