カスタムヘッダーリンク(アイコン)

こんにちは、このコンポーネントは正常に動作しますが、リンクがディスコース(同じ)のリンクである場合、アクティブなクラスを追加するにはどうすればよいですか?デフォルトのアイコン項目にはアクティブなクラスがありますが、コンポーネントからのものではありません。

「いいね!」 1

これは少々紛らわしいトピックです。OPはウィキとして更新されますが、議論のほとんどは数年前にリリースされたコンポーネントのバージョンを参照しています。

トピックとOPは、テキストリンクに加えてグラフィカルなアイコンもサポートしていることを示唆しています。しかし、Object Settings Editor にはアイコンを定義するフィールドがありません。SVGアイコンを手動で追加しようとしました。

"icon": "https://foo.svg",

グラフィカルなボタンは表示されず、カスタムリンクの他のパラメータに基づいてテキストリンクボタンが表示されます。この投稿とOPの間の古い議論は、SVGアイコンを有効にするために何かをどこかに追加する必要があるかもしれないことを示唆していますが、それは何で、どこに追加すればよいのでしょうか?

こんにちは。

このテーマコンポーネントのことを指していますか?

この「Custom Header Links (icons)」というテーマコンポーネントには、Object設定はありません。
アイコンサポート付きのヘッダーリンクが必要な場合は、こちらを使用すると良いでしょう。:+1:

「いいね!」 2

このコンポーネントを新しいオブジェクト設定に移行したことに注意してください。

これで設定の変更がはるかに簡単になるはずです。

「いいね!」 2

「カスタムヘッダーリンク」コンポーネントを更新しようとすると、次のエラーが発生します。「エラーが発生しました: リクエストに無効なパラメータが指定されています: JSON Pointer ‘/3/url’ のプロパティは有効なURLである必要があります。」

はい、原因がわかりました。スキーマでは url: true となっており、実際には相対 URL も許可しているため、これは単なる文字列であり、無効な URL と見なされます。

確認します。

「いいね!」 1

コンポーネントの設定を見せていただけますか?もしよろしければ、プライベートメッセージでお送りください。

今家にいません。できるだけ早くやります。

「いいね!」 1

この問題はPatrickとPMで直接解決しました。もし同じ問題に直面している人がいれば、新しい設定ではURLチェックがより厳格になっていることが原因です。

設定で入力するURLは、正しくエンコードされたURLである必要があります。最も簡単な解決策は、ブラウザのコンソールでencodeURIを使用することです。

このURLを例にとります:「/some-url?title=Foo bar:baz」

encodeURI("/some-url?title=Foo bar:baz")

これにより、次のようになります。

/some-url?title=Foo%20bar:baz
「いいね!」 5

こんにちは。アイコンを並べ替える方法はありませんが、「エディター」ボタンをクリックしてコンポーネント内のコード行を並べ替えることで、スクリプトを編集して並べ替えることができます。

「いいね!」 1

実行中 3.5.0.beta2-dev (137e8a0fa0)。14コミット遅れています

更新しようとするとエラーが発生します。

エラーが発生しました: リクエストに無効なパラメーターを指定しました: JSONポインター '/1/title' のプロパティが存在しなければなりません。JSONポインター '/1/icon' のプロパティが存在しなければなりません。JSONポインター '/1/url' のプロパティが存在しなければなりません。

これを修正する方法はありますか?

「設定エディター」をクリックして設定を教えていただけますか?

もしそれがプライベートなものであれば、私にDMを送ってください。

「いいね!」 1

送信しました、ありがとうございます!

「いいね!」 1

フォローアップです。予想通り、いくつかの理由で Wingtip の移行は失敗しました。正しい設定を教えました。移行がどのような状況で失敗するのか疑問です。:thinking:

編集:
実際、最初はうまくいかなかったので、以下のことを提案しました。

また、何らかの理由で有効な設定を受け付けませんでした。設定をリセットし、更新してから、正しい設定で再構成する必要がありました。大したことではありません。多くの設定は必要ありませんでした。改めてご協力に感謝します!

「いいね!」 1

Introducing Font Awesome 5 and SVG icons

カスタムSVGアイコンをレンダリングできません。何が間違っているのか特定するのを手伝っていただけると幸いです。

デフォルトのテーマにSVGファイルをアップロードしました。

次に、このテーマコンポーネントに以下を追加しました。

image

image

icons-sprite、fa-icons-sprite、fab-icons-spriteを使用しましたが、SVGはレンダリングされません。プレースホルダーはありますが、クリックでき、リンクも機能しますが、アイコンがありません。

インスペクターには次のように表示されます。
<svg class="fa d-icon d-icon-fab-icons-sprite svg-icon svg-string" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#fab-icons-sprite"></use></svg>

Dev トピックに移動すべきだと思います。

@icaria36
Three_asterisks の内容を共有していただけますか?

スプライトシートは特定の形式に従っています。

その後、識別子として my-theme-icon-1my-theme-icon-2 を使用できます。

詳細については、Replace Discourse's default SVG icons with custom icons in a theme を参照してください。

「いいね!」 2

@Arkshine ありがとうございます!そのページにたどり着きましたが、どうやらスクロールしすぎたようです。いいえ、SVGファイルでの宿題はまだやっていません。やってみます(SVGファイルでテキストを編集するのは初めてです。最初の一歩は常にあります)::sweat_smile: うまくいけば、それで全部です。:folded_hands:

「いいね!」 1

このコンポーネントでは、Facebook、Instagram、TikTokのアイコンを読み込むことができますが、どうしてもオリジナルのTwitterアイコンも新しいXアイコンも読み込むことができません。

何かヒントはありますか?

設定を共有していただけると役立つかもしれません。それがないと、お手伝いするのは難しいです。

私の方では正常に動作しています。
image