Discourse アイコン

[Discourse]

| |
| -|-|-|
| | 概要 | Discourse アイコンを使用すると、投稿内で SVG アイコンサブセットからアイコンを利用できます。
| | プレビュー | Discourse テーマクリエーターでプレビュー
| | リポジトリリンク | https://github.com/discourse/discourse-icon
| | Discourse テーマが初めての方へ | Discourse テーマの使い方の初心者ガイド

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

これは Discourse チームによって管理されている#公式のテーマコンポーネントです。そのため、#サポート、#バグ、#UX、および#機能リクエストは、Meta の該当カテゴリで提出し、適切なテーマコンポーネントタグを付けてください。以下のリンクをクリックして、トピックを開始してください。

 サポート  バグ  UX  機能

機能

使用方法:

[wrap=icon id=square][/wrap]

例:
これは アイコンと アイコンです。

これは [wrap=icon id=far-square][/wrap] アイコンと [wrap=icon id=pencil][/wrap] アイコンです。

注意: アイコンが表示されない場合は、サブセットに含まれていないためです。管理者の場合は、サイト設定の svg icon subset で追加できます。

当方でホストされていますか? テーマコンポーネントは、Standard、Business、Enterprise プランで利用可能です。

[sam (Sam Saffron)]

素晴らしい！これは象徴的ですね！

(meta には非常に多くのテーマがありますが、幸い @kris.kotlarek のおかげで「すべてのテーマに追加」ボタンがあります。機能するまでに時間がかかるため、そこでの進捗を整理する必要があります。

[j.jaffeux (Joffrey Jaffeux)]

はい、今はすべてに追加したくなかったです。コーディングを刚刚終えたばかりなので😁 でも、今すぐ追加します

編集：あ、もう完了していました

[maiki]

ありがとう、すごく楽しいね！

BBスクリプトタグも、FontAwesomeを手動でコーディングしたこともないので、空のタグペアを使うという習慣はいつも奇妙に思えていました。それは一般的な慣習によるものですか、それともウェブ制作上の理由があるのでしょうか？また、タグの間に何かを入れることはできますか？それがテキストに影響しますか？

[j.jaffeux (Joffrey Jaffeux)]

ここには複数の原因があります。

まず、wrap BBCode 機能を実装した際、@sam は明確に 3 つの形式をサポートするよう私に依頼しました。

[wrap=foo][/wrap]
[wrap=foo]bar[/wrap]
[wrap=foo]
bar
[/wrap] 

これは、Discourse での既存の BBCode 使用法と整合性を取るためです。

[icon=times] のようなより良い構文にすることもできましたが、その場合、テーマコンポーネントではなくプラグインとして実装する必要がありました。

実験的な観点から、現状のままで問題ないと思います。もし多くの人に使われるようになれば、より簡潔な構文でこれを実現するプラグインを検討することもできます。

もう一つのアイデアとして、ユーザーやカテゴリ、絵文字のように、コンポーザーに自動補完記号を追加する API を追加する方法があります。しかし、複数のコンポーネントがそれぞれ独自の記号を選ぶことになり、混乱を招く恐れがあります。

[pfaffman (Jay Pfaffman)]

@j.jaffeux

[icon=times] というより良い構文にすることも可能ですが、その場合はテーマコンポーネントではなくプラグインとして実装する必要があります。

ああ！別の BBCode のサポートを追加する必要があり、それらを起点として使おうと思っていたのですが、ラップ処理はコア側で処理されているとのことですね。だから、あなたのテーマコンポーネントでどのように処理されているのかが見つからなかったのです。

現在の解決策は、リンク付き単語コンポーネントと少し汚い正規表現を使うことですが、リンクに必要なクラスを追加するのにまだ苦労しています。

[j.jaffeux (Joffrey Jaffeux)]

はい、詳しくは以下のトピックをお読みください：

Generic bbcode wrapper for theme components

I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

[pfaffman (Jay Pfaffman)]

はい、すでに十数回確認しました。そして、あなたのコンポーネントのコードを印刷して、それがJavaScriptなのかEmberなのか、どこまで理解できていないのかを何時間もじっと見つめていました。プラグインなしで[foo]タグを追加することはできないのでしょうか？それとも、あなたのコードにあるwrapを何らかの方法でfooに置き換えて、新しいBBCodeをカバーすることは可能でしょうか？

[j.jaffeux (Joffrey Jaffeux)]

いいえ、できません。その一部はサーバーサイドで処理されているためです。独自の BB コードを使用したい場合は、プラグインを作成する必要があります。例えば、wrap がどのように実装されているかを確認してください：

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/d-wrap.js.es6

[pfaffman (Jay Pfaffman)]

ありがとう！ようやく理解できてきました。1990年にC++とObjective Pascalを学んで以来、これほど新しい言語を学ぶのに苦労したことはありませんでした。

現在の正規表現によるハックはほぼ機能しています。プラグイン方式を採用するか、このハックを継続してクラスを追加する方法を模索するか、決める必要があります。

ともあれ、テーマコンポーネントでそのラップが見つからなかった理由がやっとわかりました！

[riking (Kane York)]

@j.jaffeux

[icon=times] のようなより良い構文にすることもできましたが、そうするとテーマコンポーネントではなくプラグインとして実装する必要があります。

これに対して、wrap プラグインに追加できるいくつかの構文レイアウトが思いつきます。

[wrap=foo /]
[wrap/=foo]

（XML の自己閉じタグを模倣していますが）どちらもかなり見苦しいですね

何か見栄えの良い素晴らしいアイデアはありますか？

[j.jaffeux (Joffrey Jaffeux)]

うん、これはあまり好きじゃないな

[JammyDodger]

大きなバグを見つけました…

アイコンラップを使用し、その後引用をハイライトすると、結果の画像が大幅に拡大されます。

• 投稿内の文にアイコンラップを使用します。例：これはアイコンです [wrap=icon id=far-check-square][/wrap]
• 関連するテキストをハイライトして「引用」します。
• 引用された抜粋でアイコンが非常に大きくなります。

ハイライト引用したときの構文は次のようになります。

[quote="JammyDodger, post:1, topic:294, full:true"]
これはアイコンです ![](/svg-sprite/grumpy.jammydodger.monster/icon/222222/far-check-square.svg)
[/quote]

これが巨大になる返信です

ただし、フォーマットバーの吹き出しを使用して引用すると、問題なく機能します。

[Arkshine]

アイコンをどのように引用してハイライト表示できるのですか？私のテストサイトでは、アイコンがスキップされます。

[JammyDodger]

よくわかりません。マウスを使っています。

[Arkshine]

お使いのブラウザは何ですか？

マウスを使って、ChromeとFirefoxでテストしましたが、アイコンを選択できませんでした。

---

編集：

現在のサブセットで利用できないアイコンをラップすると、代わりにSVG画像が作成されます。
その後、それを引用できます。

[Canapin (Coin-coin le Canapin)]

@Arkshine

現在のサブセットで利用できないアイコンをラップすると、代わりにSVG画像が作成されます。

例を教えていただけますか？あなたのスクリーンショットはチェックマークが付いたチェックボックスを示しており、私のテストインスタンスでそれ（おそらくDiscourseで使用されていないx-rayのような他のアイコンも）を選択するのに問題はありません。

[Arkshine]

問題がわかりました。コンポーネントは、d-wrap クラスを持つラッパーがあるかどうかを見て検索しますが、提供されたアイコンがサブセットに含まれていない場合、ラッパーがありません。代わりにSVGとして画像を作成します。

例：

SVG、サブセット内のアイコン

SVGとしての画像、サブセット外のアイコン

画像を引用すると、ラッパーがないため（画像はクラスのない画像に変換されるマークダウンに変換される）、コンポーネントは何も行いません。

[gormus (Osman Görmüş)]

@joffreyjaffeux

注意: アイコンが表示されない場合は、サブセットに含まれていないことが原因です。管理者の場合は、サイト設定の svg icon subset で追加できます。

これは、テーマで利用可能な settings.yml に svg_icons フィールドが必要であることを意味しますか？それとも、有効になっているテーマコンポーネントから利用可能な任意の svg_icons フィールドを使用できますか？また、その場合、このフィールドをこのテーマコンポーネントに追加するのは理にかなっていますか？

svg_icons:
  default: ''
  type: 'list'
  list_type: 'compact'

私の経験では、SVGアイコンは <img /> タグに変換され、カラースキームが変更されたときに currentColor を継承しません。

例の段落を比較してください。

[thoka (Thomas Kalka)]

ダークモードでのレンダリングを強化できますか？

インターフェースと同じ色にしたいのですが：