Discourse Bars 🍻 🍸 (サイドバーフレームワーク)

merefield · 2024 年 3 月 6 日午後 4:17

概要

コンポーネント[^1]をトップバーやサイドバーに配置できるテーマコンポーネント。

ルートと位置ごとに「ウィジェット」のセットを指定します。
ディスカバリー[^2]、トピック、タグ[^3]、カテゴリ[^3]、カテゴリ[^3]またはタグの交差[^4]のいずれかのセットアップをサポートします。
「バー」は、トップ、レフト、ライト、または代替ライトの位置のいずれかになります。
各バーは折りたたみまたは非表示にできます（ブラウザをリフレッシュすると非表示がリセットされます）。デフォルトで最小化できます。
公式サイドバーを処理しますが、サイドバーの左側にバーを使用する場合は、公式サイドバーのドロップダウンモードをお勧めします。
いくつかの大きな文字を示す既存のサンプル設定が付属しており、デモとして、またサンプル設定を確認できるようにしています。これらを削除し、独自のコンポーネント名に置き換えてください。
1つのコンポーネントが付属しています： bars-custom-html（事前入力されたサンプル設定を参照）-ただし、多くの既存のテーマコンポーネントとプラグインのコンポーネントは互換性があります。
モバイルサポートはまだ実装されていません。

[^1]：このTCは、Glimmerコンポーネントをサポートしています。Glimmerコンポーネントは「自己完結型」である必要があります。つまり、データを自分で取得します（これにより、完全にモジュール化され、どのルートでも使用できます）。

[^2]：‘discovery’（ルート）という用語は、特定のトピックをクリックしてドリルダウンする前に、利用可能なトピックを閲覧できるメインのトピックリストページ（例：「最新」、「新規」）を指します。

[^3]：技術的には「discovery」ルートでもありますが、必要に応じて差別化できるように、これらのルートを個別の名前に分けています。

[^4]：タグ交差プラグインを参照してください。

クイックリンク


コードを入手	`https://github.com/merefield/discourse-tc-bars`
コードを見る	GitHub - merefield/discourse-tc-bars: A Theme Component that allows you to lay out Components ("widgets") on top and side bars
インストールガイド	Installing a theme or theme component

このテーマコンポーネントをお楽しみいただけましたら、GitHub で:star:評価をお願いします！

無駄な例：

初回読み込み時：

このTCに関する重要な注意事項！

このテーマコンポーネントは、主にテーマ開発に関する技術的な理解を持つ開発者および管理者を対象としています。十分な技術力がない場合や、Barsを使用したサイドバーの実装にヘルプが必要な場合は、私または#marketplaceの他の開発者を雇用できます。
このテーマコンポーネントは、サイドバーをサポートするためのフレームワークを提供するものです。最終的な視覚的な洗練を提供するものではなく、また提供することを意図していません。これは、テーマで追加のCSSを使用して実装する必要があります。ただし、多くの作業を代行し、考慮事項を減らし、以前はできなかったことを可能にするかもしれません…

コンポーネントの考慮事項

コンポーネント名を指定する必要があります。コンポーネント名は、実際にはテーマ、TC、またはプラグインの component ディレクトリ内のファイル名と同じです（接尾辞を除く）。
- コンポーネント名は、テーマコンポーネントの名前（複数のEmber Glimmerコンポーネントを保持できる可能性がある）ではなく、実際の Emberコンポーネントファイルの名前です、たとえば次のようになります。
image659×364 12.3 KB

したがって、layouts-tag-list です。
既存のテーマコンポーネントまたはプラグインから取得できます。既存のコンポーネントが機能する場合があります。例：
- 🏷️ Bars Tag List Component
- Render a component within a Widget. (Using select-kit components within plugin code) - #31 by merefield
- Discourse AI Topic Summary 🤖 …そしておそらく：
- リーダーボードウィジェット：https://github.com/discourse/discourse-gamification/blob/main/assets/javascripts/discourse/components/minimal-gamification-leaderboard.js （試したら下に教えてください！）
コンポーネントの構築にはある程度の専門知識が必要です。
- ただし、別のテーマコンポーネントで独自のコンポーネントを構築してみてください。両方が同じテーマでアクティブであることを確認してください。
コンポーネントは独自のデータを取得する必要があります（この方法でレイアウトするために必要な特定のプラグインアウトレットを使用できないため、プラグインアウトレットのパススルーモデルを使用できません）。
- 標準では、Discourseコアまたは既存のプラグインによって提供される既存のJSON APIデータのみを使用できます。現在のAPIから取得できないカスタムデータが必要な場合は、私または#marketplaceの誰かを雇用して支援を依頼できます。
サイドバーとコンポーネントの境界線を好みに合わせてスタイリングする必要がある場合があります。（ヘルプが必要な場合は、開発者の雇用を検討してください）。
- ボックスシャドウと境界線を戦略的に使用すると、見た目が非常に良くなります。芸術的になりましょう！

なぜ

DiscourseコアがEmber 5にアップデートされたことで、PavilionのプラグインLayouts がDiscourseレイアウトを操作するための優れた方法を提供していましたが、機能しなくなりました。比較的簡単なエンドユーザーインターフェースを介してトピックルートにサイドバーを表示する簡単な方法がなくなりました。
さらに、EmberはGlimmerコンポーネントを導入し、より扱いやすくなりました。（Layoutsは、Glimmerコンポーネントに置き換えられたWidgets APIを使用していました）。
最後に、Discourseコアチームは、より複雑な設定をデプロイ可能にする新しいテーマコンポーネント設定用のJSONエディターを提供しました
Layoutsプラグインを修正する代わりに（Layoutsの時代にはTCは存在しませんでした）、フロントエンドだけでほとんどのことが達成できるため、テーマコンポーネントとして再構築するのが理にかなっていました。
「Bars」の登場です乾杯!!

既知の問題

トップバーが固定されません（解決できない場合は、対応する設定を削除する可能性があります）。

クレジット

長年お世話になった、現在壊れているLayouts Plugin の精神的後継者（@angus作、乾杯！）。
Right Side Blocks のparamsシステムを使用しています（@pmusarajさん、ありがとう！）。

[^1]：‘discovery’（ルート）という用語は、特定のトピックをクリックしてドリルダウンする前に、利用可能なトピックを閲覧できるメインのトピックリストページ（例：「最新」、「新規」）を指します。
[^2]：技術的には「discovery」ルートでもありますが、必要に応じて差別化できるように、これらのルートを個別の名前に分けています。
[^3]：詳細はこちらを参照してください。これはオプションのままであるため（Barsのすべてのインストーラーがカスタムホームページを望むわけではありません）、Barsは about.json に必要なモディファイアを追加しません。そのため、アクティブ化するには親テーマまたは別のTCに追加する必要があります。

Lilly · 2024 年 3 月 6 日午後 4:27

すごい、これはクールですね！ロバート、よくできました。ありがとうございます！

フォークしました！

thoka · 2024 年 3 月 6 日午後 5:57

カスタムウィジェットの追加方法を学び始めたばかりなのですが、モバイルビューでスクロールしないフッターにウィジェットを追加するオプションがあれば嬉しいです。
このコンポーネントの将来のバージョンで可能でしょうか？

merefield · 2024 年 3 月 6 日午後 6:00

現時点では追加の「バー」を追加する予定はありませんが、状況が落ち着き、TCが明らかに安定したら…

…PRやスポンサーシップもいつでも歓迎です

denvergeeks · 2024 年 3 月 6 日午後 6:56

素晴らしいですね - ありがとうございます！サイドバーのいずれかにタグリストウィジェットを含めるための設定例を提供していただけますか？

例えば、指示によるとこれは機能するはずです…

しかし、左側のサイドバーにはまだ大きな「a」しか表示されません…

merefield · 2024 年 3 月 6 日午後 7:03

2点あります。

まず、StarZenからの類似の設定を以下に示します。

コンポーネント名は、実際にはコンポーネント内のファイル名と同じです（OPに追加します）。

https://starzen.space

次に、これは非常にくだらないことですが、保存を押してから、保存を押した後にチェックマークを押す必要があります。

二重保存です！

これはコアの現在のテーマ設定の性質であり、バーではありません。OPにその旨を追記するかもしれません。

denvergeeks · 2024 年 3 月 6 日午後 7:12

はい、ダブル保存しました

それでも、何か見落としているに違いありません。結果は同じです。何か他に提供できるものはありますか？

merefield · 2024 年 3 月 6 日午後 7:13

設定のJSONを共有してください（TC下部のボタン）。

denvergeeks · 2024 年 3 月 6 日午後 7:14

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

merefield · 2024 年 3 月 6 日午後 7:15

component_name がまだ間違っています。私の例を見て、残りは削除した方がよいでしょう。

denvergeeks · 2024 年 3 月 6 日午後 7:22

うーん…OK、最初のもの以外はすべて削除し、名前をあなたのものと一致するように変更しました（コンポーネント名はTCから来ているにもかかわらず GitHub - merefield/discourse-tc-bars-tag-list-component: The Tag List Widget allows you to display tags from Discourse in a sidebar using Pavilion's Custom Layouts Plugin. - 正しいコンポーネント名がlayouts-tag-listであることはどこで見つけられますか？）

しかし、モーダルでコンポーネント名を変更しても、設定JSONで変更されたり、ダブルセーブ後も残りの項目が削除されたりしないようです…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

merefield · 2024 年 3 月 6 日午後 7:25

上記で説明したように（そしてOPで詳しく説明したように）、コンポーネント名はテーマコンポーネントの名前（多くのEmber Glimmerコンポーネントを保持できる）ではなく、実際のEmberコンポーネントの名前です。

したがって、layouts-tag-list です。

これは有用な誤解なので、この例を使用してOPでさらに明確にします。

設定がなぜ固定されるのかわかりません

テーマコンポーネントを削除して再追加し、同じプロセスをもう一度試してみてください。

または、ブラウザを更新するだけですか？

ckshen · 2024 年 3 月 6 日午後 7:34

@merefield さん、ありがとうございます！

Discourse Bars は、右サイドバーブロックとカスタム HTML を使用した場合と機能的にどのように異なりますか？（場所が右側だけである必要がないという点以外で）

merefield · 2024 年 3 月 6 日午後 7:35

Bars は、RSB の前身である Pavilions Layouts のスピリチュアルサクセサーです。

しかし、RSB と比較すると、主にマルチルートおよびマルチポジションのサポート (Bars の目標は Layouts の有用性と柔軟性を再現すること) であり、重要な追加機能はトピックルートのサポートです。さらに、現時点では params をサポートしていません。まだユースケースに遭遇していません。また、デモの大きな文字を除いてコンポーネントをバンドルしていません。これは意図的であり、Layouts と同様に、管理者/開発者向けのフレームワークであることを意図しています。

ロードマップもより野心的になる可能性があります。資金提供を受けられれば、Layouts が持っていたモバイル機能を追加するかもしれません。誰でも私に連絡して、その作業のスポンサーになることができます。

denvergeeks · 2024 年 3 月 6 日午後 7:38

バーTCとレイアウト-タグリストTCの両方を削除して再インストールしました（個別に、または両方一緒に削除して再追加してみました）が、結果はすべて同じです。以前と同様に毎回更新しました。ブラウザのキャッシュもクリアしました。

merefield · 2024 年 3 月 6 日午後 7:41

設定がスタックするという問題は再現できませんでした。左サイドバーを追加・削除しただけです。

同様の報告があれば、ぜひお聞かせください。

denvergeeks · 2024 年 3 月 6 日午後 7:49

お時間を割いていただきありがとうございます。本日中に他のDiscourseインスタンスでも試してみて、改めてご報告します。

denvergeeks · 2024 年 3 月 6 日午後 8:17

プラグインをすべて削除し、再構築しました（他のTCやテーマはインストールされていません）。昨夜からのクリーンインストールです。

参考になるかもしれませんが、上記のと同じ設定で、左側のサイドバーは他の場所には表示されませんが、/latest ルートには表示されることがわかりました（ただし、「タグ」というタイトルのみが表示され、タグは表示されません）。

そして、設定のJSONはこちらです。

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list\",\"route\":\"discovery\",\"position\":\"left\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

merefield · 2024 年 3 月 6 日午後 8:22

自分でデバッグする必要があります。コンソールやテーマのCSSなどを確認してください。

私の方では動作しています。

レイアウトのタグリストがタググループを必要とするかどうかは思い出せません…必要かもしれません！

denvergeeks · 2024 年 3 月 6 日午後 11:30

はい、設定でタググループを有効にし（その後、いくつかのタググループを作成し）、タグが表示されるようになりました。

しかし、コンポーネントアイテムのルートをdiscoveryに設定しても、/latest、/new、/topリストには左側のバーしか表示されません。

ここで使用できる「ルート」のリストを教えていただけますか？

重ねて感謝いたします！

トピック		返信	表示
Discourse Tab Bar for Mobile Theme component	78	21523	2025 年 11 月 10 日
Topic List Sidebars Theme component official , topic-list-sidebars	22	13799	2025 年 6 月 6 日
Right Sidebar Blocks Theme component official , desktop , right-sidebar-blocks	145	13839	2025 年 10 月 10 日
Discourse Popular Tag Sidebar Theme component	26	7290	2023 年 1 月 9 日
Looking for the perfect theme Community	6	292	2024 年 9 月 19 日