私もこれに気づき、その他の下に外部リンクが表示されないようです。
このコンポーネントでは内部リンクを使用しています。たとえば、ユーザー招待を開くリンクがあります: /my/invited/pending/
サイドバーからリンクを開くと、「おっと!そのページは存在しないか、プライベートです。」というメッセージが表示されます。
URLバーからアクセスすると、リンクは機能します。
完全なURL(https://domain.com/my/invited/pending/)を入力すると、URLは次のように開きます:
https://domain.com/https://domain.com/my/invited/pending/
はい。既知の問題です。
こんにちは。
これは次で動作するはずです: Chat,/chat/browse/open ![]()
ええ、わかっています。おそらく少し速すぎたのでコメントを送りました。いや、速すぎたのは確かです。なぜなら、フルURLではなくパスを使用する必要があると言うべきだったからです。
チャットの追加リンク…まあ、新しいサイドバーがプレイグラウンドを完全に変更し、もう必要なくなりました。
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
そのため、これを可能にするためにはコアに変更が必要になるはずです。
Discourse の仕組みに関する私の知識はほとんどないため、間違っている可能性があります。
私の調査は正しいでしょうか?
GitHub リポジトリからこのテーマコンポーネントをインストールしました。Discourse 3.0.0.beta15 を実行していますが、追加したように見えても、ハンバーガーメニューにリンクが表示されません… 何かアイデアはありますか?
これに関連している可能性があります。
今日まで、外部リンクは機能しません。
また、内部リンクは完全なパスではなく、相対パスで始まる必要があります。
この便利なコンポーネントをありがとうございます。いくつか重要な内部リンクを追加したいのですが、ハンバーガーメニューがサイドバーに統合された今、More メニューの下ではあまり目立たないことに気づきました。ユーザーは物事を見つけるのが苦手なので、理想的には My posts のすぐ後に、トップレベルに配置する必要があります。これを達成するための CSS ハックはありますか?
CSSで達成できること以外だと思います。Discourseチームはこれをロードマップに入れていますが、すぐには実現しないと思います(私の考えでは):
以下を使用します。
<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 から来ています。参考になるかもしれません。
@hosch わあ、とてもいいですね、まさに探していたものです!どうもありがとうございます。
@hoschさん、もしかして、もっと上に移動することは可能でしょうか? Community セクションの後、あるいはそれよりも前に表示させたいのです。
編集: これは次のようなバリエーションで可能のようです:
Rearrange Existing Hamburger Menu Items - #3 by awesomerobot
.sidebar-sections {
display: flex; /* 並べ替えられるようにフレックスレイアウトを設定 */
flex-direction: column;
.sidebar-section-community {
order: -1;
}
}
一番上の位置に移動することについてどう思いますか?
このメソッドには、ブラウザウィンドウが狭い場合などに、サイドバーの表示/非表示を切り替えるとカスタム div が消えるという特異な動作があります。これは特にタブレットで問題となります。タブレットは通常、デスクトップ版の Discourse を取得し、サイドバーを表示するにはハンバーガーメニューをクリックする必要があります。回避策はありますか?よろしくお願いします。
編集: ここで解決しました:
@hosch、@Olivier_Lambert、これを作成していただきありがとうございます。
この新米に、どこに挿入すればよいか説明していただけますか? ![]()
サイドバー/ハンバーガーメニューセクションの要素を並べ替えるにはどうすればよいですか?
例:「カテゴリ」セクションで、「すべてのカテゴリ」をカテゴリの上に配置したい。同様に「すべてのタグ」も。
よろしくお願いします!
コンポーネントをCSSに使用する方法はもうお分かりですよね?ヘッドセクションに追加してください。
簡単にはできません。現時点ではまだ完全に完成して洗練されていません。
これを試しましたが、srcの近くでセミコロンを使用するとエラーが発生しました。
もう一度試してみましょう。よろしくお願いします。
これはまだ解決されていません。以下の解決策では問題は修正されませんでした。
設定: Invite friends,/my/invited/pending/,f
オフオントピック:
以前にこの凝縮されたサイドバーのスタイリングを見ましたが、どこにも見つかりません。これはテーマコンポーネントですか?
このCSSを使用できます。
#sidebar-section-content-categories,
#sidebar-section-content-tags {
display: flex;
flex-direction: column;
li:last-child {
order: -1;
}
}
![]()

