Custom Hamburger Menu Links

私もこれに気づき、その他の下に外部リンクが表示されないようです。

「いいね!」 3

このコンポーネントでは内部リンクを使用しています。たとえば、ユーザー招待を開くリンクがあります: /my/invited/pending/

サイドバーからリンクを開くと、「おっと!そのページは存在しないか、プライベートです。」というメッセージが表示されます。

URLバーからアクセスすると、リンクは機能します。

完全なURL(https://domain.com/my/invited/pending/)を入力すると、URLは次のように開きます:
https://domain.com/https://domain.com/my/invited/pending/

「いいね!」 2

はい。既知の問題です。

「いいね!」 2

こんにちは。
これは次で動作するはずです: Chat,/chat/browse/open :slightly_smiling_face:

「いいね!」 2

ええ、わかっています。おそらく少し速すぎたのでコメントを送りました。いや、速すぎたのは確かです。なぜなら、フルURLではなくパスを使用する必要があると言うべきだったからです。

チャットの追加リンク…まあ、新しいサイドバーがプレイグラウンドを完全に変更し、もう必要なくなりました。

「いいね!」 2

Discourse のサイドバーのコードを確認したところ、@manuel によるアイコンの追加についてです。

現在、ハンバーガーメニューのデコレーションメソッドが prefixValue 定数(アイコン名が含まれている)を考慮していないため、アイコンのカスタムリンクをカスタマイズすることはできないようです。

また、api.decorateWidget を使用したハンバーガーメニューのデコレーションは廃止される予定のようです。以下を参照してください。
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L534

さらに、外部リンクが機能しなくなったのは、以下の理由による可能性があります。
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L524

そのため、これを可能にするためにはコアに変更が必要になるはずです。

:warning: Discourse の仕組みに関する私の知識はほとんどないため、間違っている可能性があります。

私の調査は正しいでしょうか?

「いいね!」 3

GitHub リポジトリからこのテーマコンポーネントをインストールしました。Discourse 3.0.0.beta15 を実行していますが、追加したように見えても、ハンバーガーメニューにリンクが表示されません… 何かアイデアはありますか?

「いいね!」 1

これに関連している可能性があります。

今日まで、外部リンクは機能しません。
また、内部リンクは完全なパスではなく、相対パスで始まる必要があります。

「いいね!」 3

この便利なコンポーネントをありがとうございます。いくつか重要な内部リンクを追加したいのですが、ハンバーガーメニューがサイドバーに統合された今、More メニューの下ではあまり目立たないことに気づきました。ユーザーは物事を見つけるのが苦手なので、理想的には My posts のすぐ後に、トップレベルに配置する必要があります。これを達成するための CSS ハックはありますか?

「いいね!」 2

CSSで達成できること以外だと思います。Discourseチームはこれをロードマップに入れていますが、すぐには実現しないと思います(私の考えでは):

「いいね!」 6

以下を使用します。

<script>
  const customHeader = document.createElement("div")
  customHeader.className = "sidebar-section-wrapper sidebar-section-community"
  customHeader.innerHTML = `
            <div class="sidebar-section-header-wrapper sidebar-row">
              <button id="ember11" class="sidebar-section-header sidebar-section-header-collapsable btn-flat btn no-text" type="button">
                <span class="sidebar-section-header-text"> 法的事項 </span>
              </button>
          </div>
          <div class="sidebar-section-content" id="customNavigation"/>
      `

  $(document).ready(function () {
    // リンクを作成
    const links = [
      { title: "インプリント", src: "/impressum" },
      { title: "プライバシー", src: "/privacy" },
    ]

    // モバイル
    let hamburger = document.getElementById("toggle-hamburger-menu")
    if (hamburger) {
      hamburger.addEventListener("click", addCustomLinks)
    } else {
      addCustomLinks()
    }
    
    let bool = false;
    function addCustomLinks() {
      setTimeout(function () {
        // ナビゲーションがロードされるまで待機を強制
        const sidebar = document.getElementsByClassName("sidebar-sections")[0]
        if (sidebar) {
          sidebar.append(customHeader)
          if (bool) return;
          // customNav IDを取得
          const customNavigation = document.getElementById("customNavigation")
          if (customNavigation) {
            links.filter(function (link) {
              let linkDiv = document.createElement("div")
              linkDiv.className = "sidebar-section-link-wrapper"
              linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                        <span class="sidebar-section-link-prefix icon"></span>
                        <span class="sidebar-section-link-content-text"> ${link.title} </span>
                    </a>
                  `
              customNavigation.append(linkDiv)
              let linkIcon = document.getElementById("link_" + link.title)
            })
          }
        }
        bool = true
      }, 0)
      
    }
  })
</script>

結果は https://forum.courservio.de/ で確認できます。
このコードの元のバージョンは https://meta.discourse.org/t/add-custom-links-to-sidebar/246848 から来ています。参考になるかもしれません。

「いいね!」 6

@hosch わあ、とてもいいですね、まさに探していたものです!どうもありがとうございます。

「いいね!」 1

@hoschさん、もしかして、もっと上に移動することは可能でしょうか? Community セクションの後、あるいはそれよりも前に表示させたいのです。


編集: これは次のようなバリエーションで可能のようです:
Rearrange Existing Hamburger Menu Items - #3 by awesomerobot

.sidebar-sections {
  display: flex; /* 並べ替えられるようにフレックスレイアウトを設定 */
  flex-direction: column;
  .sidebar-section-community {
    order: -1;
  }
}

一番上の位置に移動することについてどう思いますか?

「いいね!」 1

このメソッドには、ブラウザウィンドウが狭い場合などに、サイドバーの表示/非表示を切り替えるとカスタム div が消えるという特異な動作があります。これは特にタブレットで問題となります。タブレットは通常、デスクトップ版の Discourse を取得し、サイドバーを表示するにはハンバーガーメニューをクリックする必要があります。回避策はありますか?よろしくお願いします。


編集: ここで解決しました:

「いいね!」 1

@hosch@Olivier_Lambert、これを作成していただきありがとうございます。

この新米に、どこに挿入すればよいか説明していただけますか? :pray:

「いいね!」 1

サイドバー/ハンバーガーメニューセクションの要素を並べ替えるにはどうすればよいですか?

例:「カテゴリ」セクションで、「すべてのカテゴリ」をカテゴリの上に配置したい。同様に「すべてのタグ」も。

よろしくお願いします!

「いいね!」 1

コンポーネントをCSSに使用する方法はもうお分かりですよね?ヘッドセクションに追加してください。

簡単にはできません。現時点ではまだ完全に完成して洗練されていません。

「いいね!」 2

これを試しましたが、srcの近くでセミコロンを使用するとエラーが発生しました。

もう一度試してみましょう。よろしくお願いします。

「いいね!」 1

これはまだ解決されていません。以下の解決策では問題は修正されませんでした。

設定: Invite friends,/my/invited/pending/,f

オフオントピック:

以前にこの凝縮されたサイドバーのスタイリングを見ましたが、どこにも見つかりません。これはテーマコンポーネントですか?

「いいね!」 1

このCSSを使用できます。

#sidebar-section-content-categories,
#sidebar-section-content-tags {
    display: flex;
    flex-direction: column;
    li:last-child {
        order: -1;
    }
}

:slight_smile:

「いいね!」 8