manuel
(Manuel Kostka)
1
|||
|-|-|-|
| 
| 概要 | 用意されたテーマテンプレートで、テーマデザインを素早く開始できます。
| 
|対象者| Discourseのテーマ構築を始めたい新規開発者。既製のテンプレートを使用したい経験豊富な開発者。 |
| 
|リポジトリ| Manuel Kostka / Discourse / Canvas / Canvas Theme Template · GitLab |
| 
|インストールガイド|テーマまたはテーマコンポーネントのインストール方法|
| 
|Discourseテーマ初心者の方へ| Discourseテーマ使用の初心者ガイド
Canvasは、コーディングを少なくしてカスタムテーマを作成できる柔軟なテンプレートを提供します。プロパティや設定値を簡単に調整して、ニーズに合ったテーマにカスタマイズできます。
表示例
ベーステンプレートはデフォルト値を保持し、デザインはニュートラルなままです。
いくつかのカスタムプロパティを変更し、ハイライトカラーを定義した最小限の調整：
トピックカードコンポーネントとバナー用のカスタムスタイルを統合したデザイン：
カスタムフォントとユニークなカラースキームを含む、手の込んだテーマ：
使用方法
-
テーマテンプレートをクローンします。
-
discourse_theme gemを使用して、テーマをDiscourseインスタンスと同期します。
-
管理バックエンドに移動し、これらのテーマコンポーネント設定を手動で調整します：
カテゴリバナー
プラグインのアウトレット → above-main-container
タグバナー
サイトヘッダーの下に表示 → チェックを外す
メインコンテナの上に表示 → チェックを入れる
-
scss/properties.scssを編集して、カスタムプロパティの値を定義します。
-
about.jsonを編集して、アセット、カラースキーム、その他のテーマコンポーネントを追加します。
セットアップの詳細
Canvas Themeテンプレートは、いくつかのテーマコンポーネントをバンドルし、既製のスタイルファイルを追加することで、デフォルトのテーマスケルトンを拡張するだけです。実際の機能は、別のテーマコンポーネントであるCanvas Settingsによって処理されます。このコンポーネントは2つの機能を提供します。
この分割されたセットアップにより、Canvasテンプレートを使用してテーマを作成しながら、コンポーネントを通じて提供される継続的な修正とアップデートの恩恵を受けることができます。
テーマ例
共有された表示例のコードを確認するか、これらのリポジトリからスターターテーマとしてインストールできます。
このプロジェクトの開発にご協力いただいたDiscourseに心より感謝いたします！
「いいね！」 24
jrgong
(jrgong)
2
例のテーマをインストールしようとしたときに、それらのテーマ設定が表示されませんでした。これは予期された動作ですか？
「いいね！」 1
manuel
(Manuel Kostka)
3
設定は、「Canvas Settings」としてインストールされたテーマコンポーネントにあります。設定が常にUI上でTheme Settingsと名前付けされているのは少し誤解を招くかもしれません。テーマコンポーネントでも同様です。
「いいね！」 2
jrgong
(jrgong)
4
Canvas Settings コンポーネントで見つけました、ありがとうございます！
「いいね！」 3
pmusaraj
(Penar Musaraj)
5
@manuel、ご協力ありがとうございます。
ローカルでエディタバージョンを試してみましたが、ほとんど非常によく機能しますが、いくつかの小さな問題に気づきました。
デフォルトのインストールで、設定を変更せずに、Extra Bannersコンポーネントのタグラベルが間違った場所に表示されます。
カテゴリバナーも同じ場所、サイドバーの上に表示されます。最新トピック、ホットトピックはメイン列に正しく表示されます。
テーマの目標は管理UIを完全にカバーすることではないと推測しますが、ライトおよびダークエディタのカラーパレットでは、管理サイドバーがかなり異なって見えます。非管理サイドバーと調和させることは可能かどうか興味があります。
「いいね！」 5
manuel
(Manuel Kostka)
6
サイドバーの横にバナーを表示するようにテーマが設定されており、above-main-container アウトレットを使用します。Extra-Banners コンポーネントはデフォルトでそのアウトレットを使用しますが、カテゴリとタグのバナー用の 2 つのコンポーネントは、デフォルトではヘッダーの下にレンダリングされます。デフォルトのアウトレットを変更するためだけにこれらのコンポーネントをフォークしたくありません。そのため、これらの指示を記載しました。
しかし、見落としやすい場合は、もっと良い表現方法があるかもしれません。
はい、それは十分に簡単で、このテーマの良いアプローチのようです。コミットを追加しました！
「いいね！」 5
pmusaraj
(Penar Musaraj)
7
ああ、そうか、どうしてこうなったのか分かった。カテゴリ/タグバナーコンポーネントのデフォルトを変更したくないし、フォークもしたくない。修正が難しいので、今はそのままにして、他の人も同じ問題に遭遇するかどうか見てみよう。
管理者のサイドバーの変更はすでに良くなっている、ありがとう！
「いいね！」 4
mk0r
8
これらの指示をもう少し詳しく説明していただけますか？管理UIからインストールすることはできませんか？ありがとうございます 
編集：管理UIからインストールしましたが、機能しているようです。ただし、SCSSを編集する場所が見当たらないようです。
編集：やはり、これは予想されることであり、テーマファイルを直接編集するように示しているのですね。管理UI経由でこれを実行できるようにロードマップに載せることはできないかと思いますか？例えば、設定エディタと同じように、変数エディタがあれば。
「いいね！」 3
manuel
(Manuel Kostka)
9
コアロードマップに何が含まれているかはわかりませんが、今すぐできることの1つは、管理UIで新しいテーマコンポーネントを直接作成することです。
そして、そのCSSファイルでカスタムプロパティを宣言します。テーマリポジトリのReadmeファイルでプロパティを検索するか、properties.scssの内容をコピーすることができます。
「いいね！」 2
Heliosurge
(Dan DeMontmorency)
10
これをGitHubにクローンするにはどうすればよいですか？ まだ少し初心者です 
manuel
(Manuel Kostka)
11
UIからインポートすることもできます。
ただし、変更を同期できるようにするには、ローカルクローンにプルしてから、そこからプッシュする必要があると思います。以下のようになります。
- GitLabからクローン
git clone "https://gitlab.com/manuelkostka/discourse/canvas/theme.git"
- プッシュURLをGitHubリポジトリに設定
git remote set-url --push origin "git@github.com:Username/Reponame.git"
- その後、定期的にGitLabからフェッチしてGitHubにプッシュできます
git fetch -p origin
git push origin
「いいね！」 2
Heliosurge
(Dan DeMontmorency)
12
GitHubのモバイル版ではプラス記号が表示されません。自宅でコマンドラインを試す必要があるかもしれません。
GitHubのダッシュボードで表示されるのは、新しいリポジトリを作成するオプションのみで、請求オプションはありません。無料アカウントを使用しているため、それが関係しているかどうかはわかりません。
manuel
(Manuel Kostka)
13
コンポーネントUIでいくつかのスタイル変数とレイアウトオプションを定義できるコンポーネントを追加しました。
スタイルシートでカスタム変数を宣言するのに比べると限定的ですが、いくつかの異なる見た目を試すことができます。これでうまくいくか、ぜひ聞かせてください！
「いいね！」 2
Aurora
(Aurora)
14
今、いじっていますが、いいですね！メニューの行間を狭くして、よりコンパクトにする方法はありますか？
また、ソリッドサイドバーをスクロールできませんが、これは間違いですか？
「いいね！」 2
manuel
(Manuel Kostka)
16
ソリッドサイドバーのCSSスタイルを調整したところ、スクロールが再び機能するはずです！
ただし、ソリッドサイドバーは、上記投稿で言及したスタイルコンポーネントのオプションの1つにすぎません。さらにスタイルを調整したい場合（サイドバーメニューの間隔を空けるなど）は、上記使用方法およびセットアップの詳細で説明されているアプローチを使用する必要があります。CSSカスタムプロパティ（この場合は-d-sidebar-row-height）を使用して独自のスタイルシートを使用します。
「いいね！」 3
manuel
(Manuel Kostka)
17
このテンプレートを基にした新しいサンプルテーマを作成しました。名前が示す通り、このテーマはオリジナルのCentralテーマへのオマージュです！ 
Centralのレイアウトとビジュアルスタイルが気に入っており、カスタムユーザーメニューやいくつかのサイドバーブロックのような機能をスタンドアロンコンポーネントとしてパッケージ化してきました。
サイドバーといくつかのスタイルがあれば、このテンプレートでオリジナルのテーマのルックアンドフィールにかなり近づけることに気づきました。
いずれにせよ、Centralテーマを完全に再構築する予定はありませんが、将来的には専用のトピックリストスタイルを試すかもしれません。もし興味があり、見てみたい場合は、テーマはこちらでも公開されています: https://central.kostka.studio
「いいね！」 8
Heliosurge
(Dan DeMontmorency)
18
とても良いです。共有していただきありがとうございます。
「いいね！」 1
kevin001
(kevin001)
19
このテンプレートを共有していただきありがとうございます！コンポーネントの柔軟性とクリーンなデザインのおかげで、非常に簡単にカスタマイズできます。自分のインスタンスで試してみるのが楽しみです。
「いいね！」 2
!