manuel
(Manuel Kostka)
1
| | | |
|:information_source: | 概要 | 準備されたテーマテンプレートでテーマデザインを素早く開始できます。|
|:busts_in_silhouette: | 対象者 | Discourseのテーマ構築を始めたい新しい開発者。既製のテンプレートを使用したい経験豊富な開発者。|
|:hammer_and_wrench: | リポジトリ | https://gitlab.com/manuelkostka/discourse/canvas/theme|
|:eyes: | プレビュー | Canvasテーマ |
Canvasは、コーディング量を減らしてカスタムテーマを作成できる柔軟なテンプレートを提供します。プロパティと設定値を簡単に調整して、ニーズに合わせてテーマをカスタマイズできます。
表示例
ベーステンプレートはデフォルト値を保持し、デザイン的にはニュートラルなままです。
いくつかのカスタムプロパティとハイライトカラーを定義して変更を加えた最小限の調整：
トピックカードコンポーネントとバナーのカスタムスタイルを統合したデザイン：
カスタムフォントと独自のカラースキームを含む精巧なテーマ：
旧Centralテーマを模したデザイン：
使用方法
-
テーマテンプレートをクローンします。
-
discourse_theme gemを使用して、テーマをDiscourseインスタンスと同期します。
-
管理者バックエンドに移動し、これらのテーマコンポーネント設定を手動で調整します。
カテゴリバナー
プラグインアウトレット → above-main-container
タグバナー
サイトヘッダーの下に表示 → チェックを外す
メインコンテナの上に表示 → チェックを入れる
-
scss/properties.scssを編集して、カスタムプロパティの値を定義します。
-
about.jsonを編集して、アセット、カラースキーム、その他のテーマコンポーネントを追加します。
セットアップの詳細
Canvasテーマテンプレートは、いくつかのテーマコンポーネントをバンドルし、既製のスタイルファイルを追加することで、デフォルトのテーマスケルトンを拡張するだけです。実際の機能は、別のテーマコンポーネントであるCanvas Settingsによって処理されます。このコンポーネントは2つの機能を提供します。
この分割されたセットアップにより、Canvasテンプレートを使用してテーマを作成しながら、コンポーネントを通じて提供される継続的な修正と更新の恩恵を受けることができます。
テーマの例
共有されているテーマの例は、https://canvas.kostka.studio でプレビューできます。サイドバーの下部にテーマ切り替えがありますので、テーマを変更できます。
共有されている例のビューのコードを確認するか、これらのリポジトリからスターターテーマとしてインストールしてください。
このプロジェクトの開発にご支援いただいたDiscourseに心より感謝申し上げます！
「いいね！」 25
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://canvas.kostka.studio
「いいね！」 8
Heliosurge
(Dan DeMontmorency)
18
とても良いです。共有していただきありがとうございます。
「いいね！」 1
kevin001
(kevin001)
19
このテンプレートを共有していただきありがとうございます！コンポーネントの柔軟性とクリーンなデザインのおかげで、非常に簡単にカスタマイズできます。自分のインスタンスで試してみるのが楽しみです。
「いいね！」 2
Canapin
(Coin-coin le Canapin)
21
近々、Foundationアップデートが新しいデフォルトになるにあたり、Canvasテーマテンプレートは同じ「foundations」（ええと）を使用するように更新されるのでしょうか、それとも現在の（まもなく古くなる）Foundationテーマに非常に近い現在のスタイルを維持するのでしょうか？
「いいね！」 1
!