プログレスバー

Canapin · 2026 年 1 月 23 日午後 12:52


	概要	サイトに進捗バーを追加する
	プレビュー	\[todo\]
	リポジトリ	\u003chttps://github.com/Canapin/Discourse-progress-bar\u003e
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
	Discourseテーマは初めてですか？	Discourseテーマを使用するための初心者ガイド

このテーマコンポーネントをインストール

Discourse Progress Bar

説明

このコンポーネントは、サイトの利用可能なアウトレットにプログレスバーを追加します。

スクリプトを使用して、ペイロード {\"name\":\"current_value\",\"value\":\"[yourNewValue]\"} を指定して /admin/theme/[theme_component_ID]/setting に PUT リクエストを送信することで、プログレスバーの値を自動的に更新する場合に最適です。

プログレスバーは、次のアウトレットに収まるように最適化されています。

above-main-container
above-site-header
before-header-panel
below-site-header
before-sidebar-sections

使用例

このコンポーネントは、コミュニティ資金提供によるフォーラムの寄付の進捗状況を公開するために開発されました。

Ko-fi の Webhook を使用したカスタムスクリプトにより、寄付ごとにプログレスバーが動的に更新されました。

プログレスバーがあることで、コミュニティにとって非常に モチベーションになりました。
以前はピン留めされたトピックのみが使用され、寄付目標は数か月かけて達成されていました。
プログレスバーを導入したことで、過去数年間、寄付目標は数日で達成されるようになりました！

このプログレスバーは、明らかに他の目的にも使用できます。ぜひ、何に使用しているか教えてください！

スクリーンショット

デスクトップ

above-main-container

before-sidebar-sections

above-site-header

before-header-panel (デスクトップのみ)

below-site-header

モバイル

above-main-container および below-site-header