パンくずリンク

@manuelさん、ありがとうございます。このコンポーネントをあなたのコードで更新し(さらにいくつかのコードを追加しました)、追加の機能が有効になるようにしました。

  1. パンくずリストでサブカテゴリがサポートされるようになりました
  2. トピックページに加えて、すべてのカテゴリおよびサブカテゴリリストページに完全なパンくずリストが表示されるようになりました
  3. モバイルで有効または無効にする設定が追加されました
「いいね!」 2

こんにちは!このコンポーネントは素晴らしいです!

もしかしたら修正方法をご存知かもしれない、ちょっとした詳細があります。

スクロールダウンすると戻るボタンが消えてしまいます(添付の動画をご覧ください)…戻るボタンを画面の上部に固定/フローティングさせて、スクロールしても常に表示されるようにすることは可能でしょうか?

コンテキスト:コミュニティはモバイルアプリに(Webviewで)埋め込まれています。

「いいね!」 2

素晴らしいご提案をいただいた @cristo さん、ありがとうございます。これは設定として追加されました。

「いいね!」 3

ありがとうございます、@denvergeeks!ボタンは固定されました。

しかし、添付の動画でご覧いただけるように、ボタンをクリックしてもホーム画面の同じスクロール位置に戻りません。

「いいね!」 1

はい、これはホームボタンであり、戻るボタンではないからです!

「いいね!」 1

私のミスです!矢印のせいで、戻るボタンだと思っていました。

@denvergeeks ご説明ありがとうございます!戻るボタンを提供するコンポーネントをご存知ですか?

「いいね!」 1

いいえ、適切な「戻る」ボタンが含まれている、またはそれを含む既存のTCについては認識していません。それを含む既存のものが存在する可能性は十分にあります。

しかし、サイトナビゲーション内に「戻る」ボタンを設置することの有用性は認識していますので、それを提供する別のTCを作成します。

既存のテーマやテーマコンポーネントにそれが含まれているかどうか、確認していただけると、私の作業が早まるかもしれません。

「いいね!」 2

素晴らしい!調べて、結果をお知らせします。

ありがとうございます!

「いいね!」 2

@denvergeeks 参考になるトピックを見つけました。

まだ、バックボタンを含む既存のテーマやコンポーネントは見つかっていません。

「いいね!」 2

残念ながら、iPhone 16 Pro Max でも同じ問題が発生しています。

「いいね!」 2

はい、アップデート後に表示されたことを確認できます。Androidスマートフォンでこの問題が発生しています。

「いいね!」 2

ご報告ありがとうございます @Aaron_Walsh@cristo!今すぐアップデートして、結果をお知らせください!

「いいね!」 4

Android側の問題を確認しました。修正および削除されました。

「いいね!」 2

iPhoneで修正しました!

「いいね!」 2

@denvergeeks 素晴らしい!Androidでバックボタンが機能するようになりました。

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

「いいね!」 2

パンくずリストの配置場所を決定する方法がないことに気づきました。これは素晴らしい機能になるでしょう。たとえば、カテゴリバナーを使用しており、パンくずリストをその上に配置したいと考えています。

下に配置すると、少し見失ってしまいます。
これを変更する可能性はありますか?
よろしくお願いします。


修正できる(または少なくともオン/オフを切り替えるオプションがある)と思われることに気づきました。最後の / は不要だと思います。

image

したがって、Home / General Discussion / ではなく、Home / General Discussion のようになります。

編集:
CSSを使用してこれを実現しましたが、デフォルトにすることもできると思います。もし誰かがそれを望む場合のために:

/* Remove separator (::after content) from the last breadcrumb item */
.breadcrumbs li:last-child::after {
    content: none;
}

これはマイナーな調整ですが、私にはより良く見えます。マージンボトムを1remに増やして、より「呼吸」するスペースを与えますが、バナーがある場合(ページ上のその位置に固執する必要がある場合)は中央揃えにもなります。私の以前の画像(デフォルトの0.5rem)と1remを使用したものを比較してください。

image


私が作成したすべてのCSS調整後の最終結果:

image

CSS:

/* breadcrumbs - remove background and increase margin-bottom */
.breadcrumbs {
    background-color: transparent !important;
    margin-bottom: 1rem;
}

/* breadcrumbs - hide back arrow from Home link */
.breadcrumbs__title .d-icon {
    display: none;
}

/* breadcrumbs - remove separator (::after content) from the last breadcrumb item */
.breadcrumbs li:last-child::after {
    content: none;
}

こんにちは、Discourseコアの今後の変更に関するフォーラムで警告が表示されています。

[管理者通知] ディスクールコアへの今後の変更をサポートするために、テーマまたはプラグインを更新する必要があります。(ID:discourse.script-tag-discourse-plugin)特定された問題:「パンくずリンク」。

Discourseクラウドを使用していますが、これを解決できますか、それともプラグインの更新を待つ必要がありますか?

@manuel GitHubでこのコンポーネントのコントリビューターの一人であることに気づいたのですが、ここに言及してもよろしいでしょうか?

きっと他にもこのメッセージを見ている人がいるはずです。

[Admin Notice] Theme 'Breadcrumb Links' contains code which needs updating. (id:discourse.script-tag-discourse-plugin) (learn more)

そして「Learn More」は以下にリダイレクトされます。

コンポーネントが更新される可能性はありますか?
ありがとうございます!

「いいね!」 1

この問題を修正するPRを提出しました。コントリビューターがレビューしてマージしてくれることを願っています。

「いいね!」 2

共有ありがとうございます!警告メッセージなしで動作しています。

別の問題が発生しています。こちらで言及したものです。

その問題について、ChatGPTに尋ねたところ、次のような回答がありました(私は開発者ではないため):

ChatGPTのメッセージを表示

URLからtopicIdを抽出する方法に問題がある可能性があります。

const topicId = url.split('/')[2];

URLに、タイトルにスペースや特殊文字が含まれる場合、または標準的でないスラッグが含まれる場合など、より複雑なパターンが含まれていると、この単純な分割では正しいトピックIDを確実に取得できません。


これが問題を引き起こす理由:

  • /t/3ple-2015-2019-title/12345のようなURLでは、数値のトピックIDは末尾にありますが、コードはトピックIDが常に3番目のセグメントであると想定しています。
  • URL構造が異なる場合、スラッグやタイトルの部分を取得してしまい、IDではない場合があります。
  • これにより、AJAXリクエスト(/t/${topicId}.json)が失敗します。無効なトピックIDまたはスラッグを送信している可能性があり、正しくない、またはデフォルトのカテゴリ情報(「General」など)が返されます。

修正方法:

URLからトピックIDをより確実に抽出する方法を使用してください:

  1. URLの最後の数値セグメントからトピックIDを抽出する。

DiscourseのトピックURLは、多くの場合 /t/{slug}/{id} のようになります。例:

/t/3ple-2015-2019-title/12345

ここで、12345 がトピックIDです。


これを置き換えてください:

const topicId = url.split('/')[2];

これに置き換えてください:

const segments = url.split('/').filter(Boolean);
const topicId = segments[segments.length - 1]; // 最後のセグメント、数値IDであることが期待される

より安全にするために、topicId が数値であることを検証してください:

if (!/^\\d+$/.test(topicId)) {
  console.error("URLから抽出されたトピックIDが無効です:", topicId);
  return; // 実行を停止
}

要約:updateBreadcrumbs のコードスニペットを次のように更新してください:

if (url.includes('/t/')) {
  const segments = url.split('/').filter(Boolean);
  const topicId = segments[segments.length - 1];

  if (!/^\\d+$/.test(topicId)) {
    console.error("URLから抽出されたトピックIDが無効です:", topicId);
    return;
  }

  // その後、topicIdを使用してAJAX呼び出しを続行します
}

これにより、URLに複雑なタイトルやスペースが含まれていても、常に数値のトピックIDを取得でき、パンくずリストのカテゴリとパスのルックアップが修正されます。

これを修正していただけますか?
よろしくお願いします :raising_hands: