タグスタイルのツール

:information_source: 概要 TagStyleToolを使用すると、タグの外観をカスタマイズできます。
:eyeglasses: プレビュー 後で入力します
:hammer_and_wrench: リポジトリ GitHubのTagStyleTool
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマは初めてですか? Discourseテーマを使用するための初心者ガイド

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

概要

TagStyleToolは、Discourseでのタグの外観をカスタマイズできるようにするために、(3)つの既存のコンポーネントから着想を得たバージョンです!

v0.2
ビジュアルスタイルビルダーを追加 - アイコン検索、カラーピッキング、カテゴリインポートが可能になりました!

機能:

  • 互換性の問題の解決(特にダッシュの削除とタグアイコン間)
  • 特定のタグにFont Awesomeアイコンを割り当てます。
  • 定義されていないタグにデフォルトのタグアイコンを適用するオプションを追加しました。
  • 継承の反転(例:ラベルまたはテキストの色)
  • ラベルの着色設定を使用する際のテキストの色とのコントラスト色の問題を解決します。
  • 既存のタグスタイルから選択できる機能を許可しました。
  • デフォルトのタグ機能やダッシュ機能を無効にできる設定の多様性。
  • 設定形式はTag Iconsと同じ(新しい設定が追加されています)で、移植性/採用が容易です。

v0.2現在

  • 全てのカテゴリに適用するオプションを実装。(これには欠点がありますが、可能だと思いますが、追加のメンテナンスが必要です)
  • 完璧なアイコンを見つけるためにFontAwesomeデータベースを検索!
  • ビジュアルカラーピッカーからお気に入りの色を選択。

今後の予定:

  • デフォルトのタグの色 :sweat_smile: アイコンだけでなく色だけが必要な場合のシナリオ。
  • 設定のユーザーフレンドリーな修正

その他:

これは久しぶりに一般公開したものです。問題があればお知らせください!

インスピレーション(および一部のケースではフォーマット/設定など)は、これらの既存のプロジェクトから直接採用されました。
Remove Dashes from Tag Names
Tag Icons
Color Tag Style

役立つリソース
これらは現在コンポーネントに統合されています
Font Awesome
HTML カラーピッカー

「いいね!」 8

試してみます!ありがとうございます!!いくつかのタグスタイリングコンポーネントを見たことがありましたが、複数インストールしなければならないのが面倒そうだったので、次にセットアップに取り組むときにあなたのものを試してみます!

「いいね!」 1

手早く試してみました。「初心者」の視点から2点ほどコメントします。

  • FontAwesomeの件で少し迷います。無料版だけですか?バージョンはどれですか?アイコンの一覧はどこかにありますか(あるいは、長すぎて無理ですか)?
  • 色について:RGBに詳しくない人のために、カラーピッカーを提供するのはどれくらい複雑になりますか?:innocent:

でも、すでに素晴らしいと思います!ありがとうございます!

道に迷う心配はいりません。私にできる限りのことで喜んでお手伝いします。結局のところ、Discourse はそのためにあるのですから、そうですよね?

Font Awesome
このコンポーネントは、Discourse の現在のバージョンに含まれている、現在のバージョンの Font Awesome アイコンをすべて自動的にサポートするはずです。現在 v6 をサポートしていると認識しています。それらはすべてこちら Font Awesome で見つけることができます。

質問の後半についてですが、はい、無料です。プレミアムバージョンはありますが、Font Awesome はすでにコアに含まれているため、それが Discourse でどのように機能するかはわかりません。

カラーピッカー
実装できるか見てみますが、テーマコンポーネントなので、プラグインにする必要が出る前にどれだけできるかはわかりません。ただし、この便利なツールを使用できます。色の付いた「HTML 5 を使用」エリアをクリックすると、このコンポーネントでは 16 進数の色を使用する必要があります。HTML Color Picker

「いいね!」 1

ありがとうございます!実際には、設定インターフェースにそれら2つのリソースへのリンクがあるだけでも非常に役立ちます!

「いいね!」 1

現在、色を選択するためのネイティブのHTMLコンポーネントがあります。

さらに簡単に使用できるように、コンポーネントでラップもしています。

「いいね!」 4

どうもありがとうございます!

フレンズのチャンドラー・ビングが微笑んでいる

さて、いくつか進捗がありました。プッシュする前に整理するためにまだいくつかやるべきことがあります。例えば、挿入ロジックが機能しない(コピーは機能する)、ボタンがサイト全体に表示されている、そして最も注目すべきは、ご覧のとおり、右下隅に表示されていることです。

また、タググループのすべてのタグに適用する方法を把握しました :eyes:


colorpickdemo

「いいね!」 3

そのスタイルビルダーは画期的な機能になるでしょう!

:smiley: プッシュしました。問題があればお知らせください。

「いいね!」 1

ビルダーはかなり素晴らしいです!最初はいくつかのタグにそれを使用できましたが、緑色のチェックマークを押して設定を保存すると、タグスタイルビルダーが消えてしまいました。

更新すると、ボタンが一瞬表示されてから再び消えます。

また、ビルダーによって提案されているにもかかわらず、アイコンの1つ(例:lock-keyhole)がタグに表示されないという問題もあります。SVGアイコンリストに追加して保存しましたが、やはり表示されません。

これは使用するのがとても楽しくなりそうなので、ご尽力に感謝します。これが私にとっていくつかのテーマコンポーネントを恒久的に置き換えるのを見たいと思っています。

「いいね!」 1

:sweat_smile: これらはすべて午前1時から2時にかけて行い、午前6時に公開したので、いくつかの問題についてはご容赦ください。

  • ボタンが消える現象は再現できました。厄介なやつです。修正できたと思います。
  • Font Awesomeアイコンについて何か忘れていたようです。サイトの設定に移動し、SVGサブセットに移動して、手動で追加する必要があります。Discourseが既に使用していない場合、デフォルトではレンダリングされません。ただし、これを行っても、レンダリングされないという問題がまだありました。これについてはさらに調査します。

これはリリースされました。

「いいね!」 2

そうだといいのですが。

コンポーネントを削除して再インストールしないと(どちらの場合も)ビルダーボタンが表示されませんでした。

最新バージョンでは、タグの初期設定を通じてボタンを表示させ続けることができます。また、更新後も表示させ続けることができます。しかし、「テーマとコンポーネント」からコンポーネント編集画面に戻ると、ボタンが再び消えています。ずる賢いバグです。

アイコンの部分をいじってみます。デフォルトのアイコンをオフにする方法があるので、色付きタグのタグアイコンを破棄する方法はあるでしょうか?例えば、デフォルトのアイコンセットと一致する場合などです。色付きタグのコンポーネントは、アイコンを設定する必要がないのが良かったので、そのすっきりした見た目が気に入っていました。それを再現できるのは私にとって便利な機能になるでしょう。

「いいね!」 2

:sweat_smile: 本当に厄介な小さな問題ですね。

いくつか試しているところです。最新のベータ版バンドルを送りましたので、もし何か問題があれば教えてください。それが私が作業しているコードベースです。

これでいくつかの問題が解決するはずです。オーバーライドのフォールバックとしてToDoリストを追加しました。例:Tag1,Pencil,NoColor は、デフォルトが使用されている場合(TrueまたはFalseのデフォルトが使用される)、Tag1,Pencil, <Color がレンダリングされ、そうでない場合は色の適用なし>となります。

これは私にとって素晴らしい学習プロセスです!:joy:

「いいね!」 1