トピックIDを変数として使用できますか?

一般的な単語は私が望むものとは正反対です。検索結果にすべてのチケットが含まれるのではなく、特定のチケットを検索する方法が欲しいのです。だからこそ、トピックIDが理想的なのです。それらは自動生成され、一意です。

いいえ、私が使用しているコードも元々はawesomerobotのものだったと思いますが、もうそのソースを見つけることができません。
現在使用しているものの配置は、テキストの下のブロックよりも好ましいです。

まあ、私はそれができません。あなたはできるかもしれません。
「リーアム・ニーソン風の声で」私には特定のスキルセットがある。コーディングはそれらの中にはない。」

では、このトピックを Marketplace または Feature に移動した方が良いかもしれません。

「いいね!」 1

私の意図を誤解されています。「トピック:ID」パラメータを含めた一般的な単語を意味していました。そうすれば、そのトピックからの結果のみが表示されます。一般的な単語は、「こんにちは」や「やあ」のような単語を変更する必要性をなくします。

@tknospdr @pfaffman トピックIDを入力して移動できる簡単なコンポーネントをこしらえました。

新しいコンポーネントを作成し、Edit CSS/HTML ボタンの下のJSタブにこれを追加します[1]:

import { apiInitializer } from "discourse/lib/api";
import Component from '@glimmer/component';
import { action } from "@ember/object";
import Form from "discourse/components/form";
import DiscourseURL from "discourse/lib/url";

export default apiInitializer((api) => {
    api.renderBeforeWrapperOutlet("full-page-search-filters",
        class GoToTopic extends Component {
            @action
            handleSubmit(data) {
                DiscourseURL.routeTo(`/t/${data.id}`);
            }

            <template>
                <div class="topic-id-go-to" style="margin-top: 1em;">
                    <Form @onSubmit={{this.handleSubmit}} as |form|>

                      <form.Field @name="id" @title="Topic id" as |field|>
                        <field.Input @type="number" @validation="required" />
                      </form.Field>

                      <form.Submit />
                    </Form>
                </div>
            </template>
        }
    );
});

これにより、検索ページにインプットが追加されます。


Submit ボタンはトピックに移動するためのものです[2];検索結果には影響しません。

お役に立てば幸いです!


  1. FormKitを初めて使いますが、とてもクールです! ↩︎

  2. ロケールが必要になるため、ボタンのテキストを変更できませんでした。TCリポジトリ全体が必要になるかもしれませんが、それはやりすぎかもしれません :person_shrugging:↩︎

「いいね!」 1

@NateDhaliwalさん、ありがとうございます。ご尽力に感謝いたします。
コンポーネントを作成し、JSタブの下にコードを貼り付けました。テーマでアクティブになっていることを確認しましたが、うまくいきませんでした。
検索ページは以下のようになります。

「いいね!」 1

サイトでこれを設定して試してみましたが、機能するようです。しかし、この警告が表示され、少し躊躇しています。

ブラウザコンソールにエラーはありますか?

これが唯一のエラーです。

そして、それは検索ではなく、トピックIDを表示するためのJSによるものだと思います。その要素に印を付けたページ以外には表示されません。

Advanced Search Banner コンポーネントを無効にしてから再度有効にしたところ、動作するようになりました。
:man_shrugging:

「いいね!」 1

現在の状況の要約です。

  1. 動作するソリューションがあります。少し洗練されていませんが、標準の検索ボックスでトピックIDを直接検索できるようになるまで、私のニーズには十分です。
  2. @awesomerobot が提案した現在のコードは機能するようですが、上記で投稿した警告が表示されます。
    2a. トピックIDを表示するために使用していた元のコードを削除すると、この警告は消えました…
  3. ソリューションを選択すると、トピックIDを表示するコードが元の投稿とソリューションの両方に表示されますが、それを考慮して表示されないようにする方法はありますか?
  4. CSSをもう少し洗練させました。現在、これを使用している指定されたカテゴリのすべてのスレッドのすべての返信にピルが表示されます。おそらく、洗練をやめるのが答えになるでしょうが、他の方法を知っている人がいれば、そのままにしておきたいです。見た目は良いと思います。

@awesomerobot
あなたのコードはうまく機能しますが、テキスト以外のCSS装飾は、最初の投稿以降のすべての投稿で、CSSで指定されたとおりの空のスペースとして表示されるようです。

インラインブロックをオフにすると、フル幅のカラーバーが表示されます。
背景色を変更すると、ピルの色が変わります。
など…

あなたが書いた内容に基づくと、最初の投稿にのみ表示するように指示したようですが、それはテキストにのみ影響します。追加の投稿のすべての要素を削除するために他に何かできることはありますか?

「いいね!」 1

はい、言ったように、私はコーダーではありませんが、Grok に質問するのはとても得意です。両方の問題を解決するコードを以下に示します。

  1. 返信 2 ~ X で空の CSS バブルが表示されなくなります。
  2. 引用されたソリューションでのトピック ID の重複がなくなります。

おそらく地球上で他に気にかけている人はいないかもしれませんが、Discourse をチケット発行システムとして使用している私たちにとって、トピックを追跡するのに役立つ良い方法のように思えます。

import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";

class TopicIdentifier extends Component {
  get topicId() {
    return this.args.post?.topic?.id;
  }

  get shouldShow() {
    const firstPost = this.args.post?.post_number === 1; // トピックの最初の投稿
    const desiredCategories = [9, 23]; // これを表示したいカテゴリ ID のコンマ区切りリスト
    const isInCategory = desiredCategories.includes(
      this.args.post?.topic.category.id
    );

    return firstPost && isInCategory;
  }

  <template>
    {{#if this.shouldShow}}
      <!-- 下のコンテンツを編集できます。{{this.topicId}} はトピック ID が入力される場所です -->
      Issue Tracking # is
      {{this.topicId}}
      <!-- 上のコンテンツを編集できます -->
    {{/if}}
  </template>
}

export default apiInitializer("0.8.40", (api) => {
  api.decorateCookedElement((element, helper) => {
```gjs
import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";

class TopicIdentifier extends Component {
  get topicId() {
    return this.args.post?.topic?.id;
  }

  get shouldShow() {
    const firstPost = this.args.post?.post_number === 1; // トピックの最初の投稿
    const desiredCategories = [9, 23]; // これを表示したいカテゴリ ID のコンマ区切りリスト
    const isInCategory = desiredCategories.includes(
      this.args.post?.topic.category.id
    );

    return firstPost && isInCategory;
  }

  <template>
    {{#if this.shouldShow}}
      <!-- 下のコンテンツを編集できます。{{this.topicId}} はトピック ID が入力される場所です -->
      Issue Tracking # is
      {{this.topicId}}
      <!-- 上のコンテンツを編集できます -->
    {{/if}}
  </template>
}

export default apiInitializer("0.8.40", (api) => {
  api.decorateCookedElement((element, helper) => {
    // 最初の投稿であり、ソリューションの引用内ではない場合にのみ続行します
    // 最初の投稿であり、引用内ではなく、指定されたカテゴリ内にある場合にのみ続行します
    const post = helper?.model;
    const desiredCategories = [9, 23]; // TopicIdentifier のカテゴリと一致させます
    if (
    if (
      helper?.model?.post_number !== 1 ||
      !post ||
      post.post_number !== 1 ||
      !desiredCategories.includes(post.topic?.category?.id) || // カテゴリを確認します
      element.classList.contains("post__contents-cooked-quote") || // 要素自体が引用コンテンツであるかを確認します
      element.closest("aside.accepted-answer") || // ソリューション/引用ラッパーを確認します
      element.closest(".quote") // 一般的な引用の追加確認
    ) {
      return;
    }

    const wrapper = document.createElement("div");
    wrapper.className = "tracking-id";

    helper?.renderGlimmer(
      wrapper,
      <template><TopicIdentifier @post={{helper.model}} /></template>
    );

    element.appendChild(wrapper);
  });
});
「いいね!」 3

もっと早くお伝えできませんでしたが、解決できてよかったです!これは妥当な解決策のように思えます。

「いいね!」 1

それを簡単にテストできることはわかっていますが、これを独自のコンポーネントに配置した場合に機能するかどうか、またはテーマ自体に配置する必要があるかどうか、すぐにわかりますか?

さらに小さな異常を見つけました。トピックの最初の投稿で、意図した2つ以外の投稿にも空のクラスバブルが表示されていたため、コードを少し更新する必要がありました。これが最終的な製品です。

import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";

class TopicIdentifier extends Component {
  get topicId() {
    return this.args.post?.topic?.id;
  }

  get shouldShow() {
    const firstPost = this.args.post?.post_number === 1; // トピックの最初の投稿
    const desiredCategories = [9, 23]; // これを表示したいカテゴリIDのカンマ区切りリスト
    const isInCategory = desiredCategories.includes(
      this.args.post?.topic.category.id
    );

    return firstPost && isInCategory;
  }

  <template>
    {{#if this.shouldShow}}
      <!-- 下の内容は編集できます。{{this.topicId}} の部分にトピックIDが挿入されます -->
      Issue Tracking # is
      {{this.topicId}}
      <!-- 上の内容は編集できます -->
    {{/if}}
  </template>
}

export default apiInitializer("0.8.40", (api) => {
  api.decorateCookedElement((element, helper) => {
    // Only proceed if this is the first post and not inside a solution quote
    // Only proceed if this is the first post, not in a quote, and in the desired category
    const post = helper?.model;
    const desiredCategories = [9, 23]; // TopicIdentifierと同じカテゴリに合わせる
    if (
      helper?.model?.post_number !== 1 ||
      !post ||
      post.post_number !== 1 ||
      !desiredCategories.includes(post.topic?.category?.id) || // カテゴリをチェック
      element.classList.contains("post__contents-cooked-quote") || // 要素自体が引用コンテンツであるかチェック
      element.closest("aside.accepted-answer") || // ソリューション/引用ラッパーをチェック
      element.closest(".quote") // 一般的な引用の追加チェック
    ) {
      return;
    }

    const wrapper = document.createElement("div");
    wrapper.className = "tracking-id";

    helper?.renderGlimmer(
      wrapper,
      <template><TopicIdentifier @post={{helper.model}} /></template>
    );

    element.appendChild(wrapper);
  });
});

自分で質問に答えますが、コード全体を新しいテーマコンポーネントに移動したところ、すべて問題なく動作しました。