# 메인 메뉴(햄버거) 링크/패널은 어떻게 생성되나요?

**URL:** <https://meta.discourse.org/t/how-is-the-main-menu-hamburger-link-panel-generated/225775>\
**Category:** Support\
**Created:** [4월 30, 2022, 10:36오후 UTC](https://meta.discourse.org/t/how-is-the-main-menu-hamburger-link-panel-generated/225775 "2022-04-30T22:36:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![stance455](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stance455/32/255345_2.png) [@stance455](https://meta.discourse.org/u/stance455)\
**Post date:** [4월 30, 2022, 10:36오후 UTC](https://meta.discourse.org/t/how-is-the-main-menu-hamburger-link-panel-generated/225775/1 "2022-04-30T22:36:05Z")

</div>

이 주제에 대해 전문 지식이 부족하여 죄송합니다만, Discourse는 햄버거 메뉴 링크 클릭을 어떻게 처리하나요?

**배경:** 저는 [prerender.io](http://prerender.io) 서비스를 사용하여 메인 사이트(사이트의 JS 버전)의 HTML 버전을 서빙하고 있습니다.

~~메뉴~~ 햄버거 링크가 작동하지 않습니다.

~~Chrome DevTools를 사용하여 에이전트를 Googlebot 스마트폰으로 변경하면 ( [사이트](https://discors.flynumber.com/) )를 테스트할 수 있습니다. Googlebot 사용자 에이전트를 사용하면 사실상 HTML 프리렌더링 버전을 받게 됩니다.~~

**참고:** prerender의 [이 블로그 게시물](https://prerender.io/common-javascript-seo-problems/)에 따르면, 다음과 같은 코드가 문제가 될 수 있다고 합니다.

```plaintext
`<a onclick=”goTo(‘page’)”>Anchor</a>`
`<a href=”javascript:goTo(‘page’)”>Anchor</a>`
`<span onclick=”goTo(‘page’)”>Anchor</span>`

```

> 모든 링크는 태그 사이에 있어야 하며, Google이 이를 찾고 따를 수 있도록 href 속성에 대상 URL을 정의해야 합니다.

아마도 메인 메뉴 링크가 이 방식으로 생성되고 있는 것일까요?

해결책에 대한 아이디어가 있다면 매우 감사하겠습니다.

**수정** 당분간 사이트에서 프리렌더링을 해제했습니다(하지만 봇에는 여전히 JS 버전을 서빙함). 놀랍게도 Google 봇은 가끔씩 사이트를 올바르게 렌더링하는 것 같습니다. 또한 Chrome에서 Google 봇을 사용자 에이전트로 사용할 때 메뉴 관련 문제가 발생하지 않습니다. 이 문제를 조금 더 테스트해 볼 예정입니다.

 ![Screen Shot 2022-05-01 at 11.30.36 PM](https://global.discourse-cdn.com/meta/original/4X/d/5/c/d5c97969a5b329d981251fbd298d2f91f371e8ab.jpeg)

---

<div class="post-metadata">

**Author:** ![stance455](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stance455/32/255345_2.png) [@stance455](https://meta.discourse.org/u/stance455)\
**Post date:** [5월 1, 2022, 4:25오후 UTC](https://meta.discourse.org/t/how-is-the-main-menu-hamburger-link-panel-generated/225775/2 "2022-05-01T16:25:34Z")

</div>

죄송합니다. 단순한 질문을 꽤나 복잡하게 만들어 버렸네요 …

메뉴 안의 링크들은 정상적으로 보이는 것 같고, 제 문제는 실제 햄버거 링크 자체에 있습니다. prerender로 렌더링되면 그냥 열리지 않거든요.

@Johani 님의 [이 게시물](https://github.com/discourse/discourse/blob/8a250a1eac9032485e7d367f93e6ac418014e2ff/app/assets/javascripts/discourse/app/components/site-header.js#L40)은 문제를 진단하는 데 큰 도움이 되었습니다.

햄버거 메뉴를 클릭했을 때의 기능과 관련하여 [이 코드 부분을 살펴보는 것](https://github.com/discourse/discourse/blob/8a250a1eac9032485e7d367f93e6ac418014e2ff/app/assets/javascripts/discourse/app/components/site-header.js#L40)이 올바른 방향일까요?

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [5월 2, 2022, 2:48오후 UTC](https://meta.discourse.org/t/how-is-the-main-menu-hamburger-link-panel-generated/225775/3 "2022-05-02T14:48:16Z")

</div>

버튼이 클릭될 때 JavaScript를 통해 메뉴가 문서에 추가되므로, HTML 전용 버전의 사이트에서 작동하도록 쉽게 변환할 수 없습니다.

아래는 버튼이 추가되는 위치입니다. `toggleHamburger`라는 이름의 액션이 있는 것을 볼 수 있습니다:

[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/widgets/header.js#L246](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/widgets/header.js#L246)

`toggleHamburger` 액션은 같은 파일의 후반부에 정의되어 있으며, 위치는 다음과 같습니다:

[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/widgets/header.js#L483](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/widgets/header.js#L483)

`toggleHamburger`는 `hamburgerVisible` 상태를 변경하므로, 궁극적으로 메뉴는 `panels.push(this.attach("hamburger-menu"));`를 통해 추가됩니다. 이 코드는 아래에서 확인할 수 있습니다:

[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/widgets/header.js#L379](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/widgets/header.js#L379)

---

<div class="post-metadata">

**Author:** ![stance455](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stance455/32/255345_2.png) [@stance455](https://meta.discourse.org/u/stance455)\
**Post date:** [5월 2, 2022, 8:46오후 UTC](https://meta.discourse.org/t/how-is-the-main-menu-hamburger-link-panel-generated/225775/4 "2022-05-02T20:46:07Z")

</div>

@awesomerobot 님, 정말 훌륭한 답변이네요. 커뮤니티에서도 감사하게 생각하실 거예요.

커스텀 작업이 worthwhile한지 확인해 보겠습니다.

prerender.io에서 받은 답변은 기본적으로 "복잡한 JS"를 사용한다면 작동하지 않을 가능성이 높다는 것이었습니다. 다만 그들이 상황을 얼마나 면밀히 파악했는지는 잘 모르겠네요.

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [6월 1, 2022, 8:46오후 UTC](https://meta.discourse.org/t/how-is-the-main-menu-hamburger-link-panel-generated/225775/5 "2022-06-01T20:46:51Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.