メインメニュー(ハンバーガー)リンク/パネルはどのように生成されますか?

このトピックに関する専門知識が不足していることをお許しください。Discourseは、ハンバーガーメニューリンクのクリックをどのように処理しますか?

コンテキスト: 私はprerender.ioサービスを使用して、メイン(サイトのJSバージョン)のHTMLバージョンを提供しています。

menu ハンバーガーリンクが機能しません。

サイト)をテストするには、Chrome開発者ツールを使用し、エージェントをGooglebotスマートフォンに変更してください。Googlebotユーザーエージェントを使用すると、実質的にHTMLのprerenderバージョンを取得できます。

余談: prerenderのこのブログ投稿によると、次のようなコードで問題が発生する可能性があります。

`<a>アンカー</a>`
`<a href="javascript:goTo('page')">アンカー</a>`
`<span onclick="goTo('page')">アンカー</span>`

すべてのリンクは<a></a>タグの間にある必要があり、Googleがリンクを見つけてフォローできるようにhref属性内にターゲットURLを定義する必要があります。

おそらく、メインメニューリンクはこれらの方法で生成されていますか?

解決策に関するアイデアがあれば、大歓迎です。

編集 現在、サイトからprerenderを削除しました(ただし、ボットに提供されるJSバージョンは維持しています)-驚くべきことに、Googlebotは時折正しくレンダリングするようです。また、ChromeでGooglebotをユーザーエージェントとして使用しても、メニューの問題はありません。しばらくこれをテストします。

申し訳ありません、簡単な質問を非常に紛らわしくしてしまいました…

メニュー内のリンクは問題ないようです。問題は、prerenderでレンダリングしたときに開かない、ハンバーガーリンクそのものです。

@Johani によるこちらの投稿は、診断の試みに非常に役立ちました。

(ハンバーガーメニューをクリックしたときの機能に関して)こちらのコードを見て、正しい方向に向かっていますか?

メニューはボタンがクリックされたときにJavaScriptでドキュメントに追加されるため、サイトのHTMLのみのバージョンで動作するように簡単に変換することはできません。

ここにボタンが追加されている場所を示します。toggleHamburger という名前のアクションがあることがわかります。
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

toggleHamburgerhamburgerVisible の状態を変更するため、メニューは最終的に panels.push(this.attach("hamburger-menu")); で追加されます。これはここで確認できます。
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/widgets/header.js#L379

「いいね!」 1

@awesomerobot、質の高いご返信ありがとうございます。コミュニティの皆様も感謝されていることと思います。

カスタム作業に見合うかどうか検討させていただきます。

prerender.io からの返信は、「複雑な JavaScript」を使用している場合はおそらく機能しないだろう、というものでした。しかし、彼らがどの程度状況を把握しているかは定かではありません。

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