Discourseカテゴリーヘッダーのテーマコンポーネント

ダークモードのカテゴリロゴをサポートするPRはこちらです。

これも少し気になっていました。カスタムCSSで対応できます。

// カテゴリヘッダーの続きを読むリンクが、概要テキストと同じ色を使用するようにする

.category-about-url a {
  color: inherit;

}
「いいね!」 2

「続きを読む」リンクに関する私の残りの希望は次のとおりです。コンテンツが実際に追加されている場合にのみ表示されるようにすることです。長い「アバウト」カテゴリページと短いページがいくつかありますが、追加コンテンツがないリンクを提供したくありません。

(これが実現可能かどうかはわかりません。TCにとっては大変な要求かもしれません。)

「いいね!」 1

完全なカテゴリの説明が表示されている場合、テーマ クリエイターと開発インスタンスでも同様の問題が発生します。調査中です。ルートは変更されますが、追跡される変数は変更されないことが原因だと考えられます。

更新: ここでカテゴリの説明の展開/折りたたみ機能を追加しました。@nathank また、以下のバグも修正しました。

ルーターサービスで willDestroy を使用することについて、Ask Discourse から少しアドバイスがありました。

「いいね!」 2

すごい、ネイト!:open_mouth: 55件のコミットと1件のプルリクエストを1晩で…素晴らしいですね。
マージされるのを楽しみにしています。試すのが待ちきれません!

「いいね!」 1

実際には、私は遅い朝でした:wink:。説明にさらにテキストがあるかどうかを確認するというあなたの提案が可能かどうかを調べます。テスト中に私もそれを必要としていると感じました。

「いいね!」 2

これは素晴らしい追加機能です!:heart:

フィードバックは一点だけです。ユーザーに展開/折りたたみ機能を示すために、カテゴリヘッダーの右上または右端にシェブロンアイコンを追加すると良いかもしれません。しかし、これは素晴らしいスタートであり、現時点ではリンクテキストに絵文字を使用する

ことで、その機能は果たせています。

「いいね!」 2

PRがマージされました :git_merged:

承知しました :+1: 。確認します。

「いいね!」 3

Nateさん、続きを読む/続きを読むを閉じる機能は素晴らしいです、ありがとうございます!

もし、より多くのテキストが存在する場合にそのリンクを条件付けする方法があれば、それは素晴らしいでしょう――しかし、私もより長い説明を書くことができますよ :laughing:

まだ気づいていないかもしれない、いくつか問題があるようです:

  • カテゴリとタグのリンクがSVGアイコンをレンダリングしていません
  • カテゴリ画像が表示されないため、デフォルトのサイトアイコンが表示されています
(スクリーンショット)

私がなんとか回避できた些細なことですが:以前に言及した「続きを読む」リンクのように、Aboutテキスト内のリンクがテキスト色を継承していませんでした。このCSSは、カテゴリとタグのリンクには影響を与えずに、テキストリンクをスタイル設定します:

// テキストリンクのスタイリング。カテゴリとタグのリンクは除外します
.category-title-header .category-title-description 
a:not([data-type="tag"], [data-type="category"]) {
  color: inherit;
  text-decoration: underline;
}
(スクリーンショット)

image
image

アップデートには本当に感銘を受けています。私のSVGとアイコンの問題が簡単な修正であることを願っています。

興味深いですね。以前からそうだったかご存知ですか?

確認します。私もこれに遭遇しました。それまでの間、「サイトロゴを表示する」設定を無効にしてみてください。これで直るようです。

ありがとうございます。以前からそうでしたか?それとも何らかの変更がありましたか?

「サイトロゴを表示」設定を一時的に無効にしてみてください。これで解決するようです。

それがうまくいきました。ありがとうございます!もっと多くの設定を試すべきでした。

SVGリンクアイコンとテキストリンクの色については、以前に何をしたのかはわかりません。アバウトテキストの短い要約部分にリンクを置いたことはありませんでしたが、今は「続きを読む」を展開した部分にいくつかあります。

(リンク色のCSSは、あなたや他の誰かの役に立つかと思って共有しましたが、そのようなスタイルの調整は必ずしもコンポーネントの責任ではないことは承知しています。)

「いいね!」 1

Nate、プレースホルダーのカテゴリ/リンクSVGアイコンの問題について何か考えはありますか?

image image

ヘッダーとトピックでコーディング方法に違いがあるのか分かりませんが、出力されているものがかなり異なります。

カテゴリリンクの比較

ヘッダーのカテゴリリンク:
image

<a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square">
  <span class="hashtag-icon-placeholder">
    <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
      <use href="#square-full"></use>
    </svg>
  </span>
  <span>Wild Speculations</span>
</a>

トピックのカテゴリリンク:
image

<a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square" aria-label="Wild Speculations">
  <span class="hashtag-category-square hashtag-color--category-5"></span>
  <span>Wild Speculations</span>
</a>

そして

タグリンクの比較

ヘッダーのタグリンク:
image

<a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag">
  <span class="hashtag-icon-placeholder">
    <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
      <use href="#square-full"></use>
    </svg>
  </span>
  <span>ai</span>
</a>

トピックのタグリンク:
image

<a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag" aria-label="ai">
  <svg class="fa d-icon d-icon-tag svg-icon hashtag-color--tag-5 svg-string" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
    <use href="#tag"></use>
  </svg>
  <span>ai</span>
</a>

ここ数日忙しかった(明日対応します)。これはカテゴリの説明に含まれていると思われます。完全な説明を使用すると、まだ発生しますか?

ご尽力いただき感謝いたします。しつこくするつもりはありません。自分で解決できることがないか調べてみました。(何もできませんでした :flushed_face:

はい、Show full category description が有効な場合でも、引き続き発生します。

「いいね!」 1

何かできることがないか試してみます。最終手段は、色に基づいて(アイコンに対応していない可能性がある)ロジックを使用することです(複雑になる可能性があります)。他に良い方法があれば、提案を歓迎します。

@ToddZ 公式の Category Banners コンポーネント(Meta が使用していると思われる)のこの例を見ると、この問題も発生しています。

なるほど…! そして、誰かが問題を言及しています:

カテゴリアイコンが機能するかどうかを確認するためにCategory Bannersをインストールしましたが、機能しませんでした。カテゴリヘッダーの場合と同様に、カテゴリとタグのアイコンの両方にプレースホルダーが表示されます。そして、設定で選択されたアウトレットに関係なく、同じです。

それらを通常どおり処理する方法があれば素晴らしいですが、複雑な回避策に頼ってほしくはありません。

「いいね!」 1

Horizon テーマとの互換性をテストしました。全体的には基本的に動作しますが、唯一の問題は、現在カテゴリヘッダーテーマコンポーネントで使用されているプラグインのアウトレットが、Horizon テーマの list-controls コンテナ内にあることです。そのため、カテゴリヘッダー全体が固定されたままになります。

提案されている解決策は、プラグインのアウトレットを変更するか、list-controls コンテナの外にある別のプラグインアウトレットを選択するオプションを追加することです。例えば、discovery-list-controls-above アウトレットなどです。

ご希望であれば、PRを作成できます @NateDhaliwal

「いいね!」 1

興味深いですね。ご指摘ありがとうございます!確認します。

「いいね!」 1