Topic ID als Variable?

Ein gängiges Wort ist das Gegenteil von dem, was ich will. Ich möchte nicht, dass meine Suchergebnisse JEDES Ticket enthalten, ich möchte eine Möglichkeit, nach einem bestimmten Ticket zu suchen. Deshalb wäre die Topic-ID ideal. Sie werden automatisch generiert und sind eindeutig.

Nein, ich glaube, der Code, den ich verwende, war ursprünglich auch von awesomerobot, aber ich kann seine Quelle nicht mehr finden.
Ich bevorzuge die Platzierung dessen, was ich derzeit verwende, besser als diesen Block unter dem Text.

Nun, das kann ich nicht. Vielleicht können Sie das.
„Ich habe einen bestimmten Satz von Fähigkeiten. Programmieren gehört nicht dazu.“

Dann solltest du dieses Thema vielleicht nach Marketplace oder Feature verschieben.

1 „Gefällt mir“

Sie missverstehen mich. Ich meinte, ein gebräuchliches Wort einschließlich des Parameters topic:id zu haben, sodass nur Ergebnisse aus diesem Topic angezeigt werden. Das gebräuchliche Wort macht es überflüssig, Wörter wie ‘hi’ und ‘hello’ zu ändern.

@tknospdr @pfaffman Ich habe schnell eine Komponente zusammengestellt, mit der Sie die Topic-ID eingeben und dorthin springen können.

Erstellen Sie eine neue Komponente und fügen Sie dies zum JS-Tab unter der Schaltfläche CSS/HTML bearbeiten hinzu[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>
        }
    );
});

Dies fügt ein Eingabefeld zur Suchseite hinzu:


Die Schaltfläche Submit dient zum Aufrufen des Topics[2]; sie hat keine Auswirkungen auf die Suchergebnisse.

Ich hoffe, das hilft!


  1. Mein erster Versuch mit FormKit, es ist wirklich cool! ↩︎

  2. Ich konnte den Text der Schaltfläche nicht ändern, da dies Lokalisierungen erfordern würde… was ein ganzes TC-Repository benötigen würde, was vielleicht übertrieben ist :person_shrugging:. ↩︎

1 „Gefällt mir“

Danke @NateDhaliwal, ich schätze die Mühe.
Ich habe die Komponente erstellt, den Code in den JS-Tab eingefügt. Ich habe sichergestellt, dass sie in meinem Theme aktiv ist, aber es hat nicht funktioniert.
So sieht meine Suchseite aus:

1 „Gefällt mir“

Ich habe dies auf meiner Website eingerichtet, um damit herumzuspielen, und es scheint zu funktionieren. Allerdings erhalte ich diese Warnung, die mich etwas zögern lässt:

Gibt es Fehler in der Browserkonsole?

Das ist der einzige Fehler:

Und ich denke, das liegt daran, dass das JS die Topic-ID anzeigen soll, nicht die Suche. Sie wird nur auf den Seiten angezeigt, die ich für dieses Element vorgesehen habe.

Ich habe die Komponente „Erweiterte Suchleiste“ deaktiviert und dann wieder aktiviert, und jetzt funktioniert sie.
:man_shrugging:

1 „Gefällt mir“

Hier ist eine Zusammenfassung der aktuellen Situation:

  1. Wir haben eine funktionierende Lösung. Obwohl sie etwas unschön ist, wird sie meinen Bedürfnissen entsprechen, bis wir die Topic-ID direkt in der Standard-Suchbox suchen können.
  2. Der von @awesomerobot vorgeschlagene Code scheint zu funktionieren, löst aber die oben gepostete Warnung aus.
    2a. Als ich den ursprünglichen Code, den ich zur Anzeige der Topic-ID verwendete, entfernte, verschwand diese Warnung…
  3. Wenn Sie eine Lösung auswählen, wird der Code zur Anzeige der Topic-ID sowohl im ursprünglichen Beitrag als auch in der Lösung angezeigt. Gibt es eine Möglichkeit, dies zu berücksichtigen und zu verhindern, dass er dort angezeigt wird?
  4. Ich habe das CSS etwas aufgehübscht, jetzt habe ich einen Pill auf jeder Antwort in jedem Thread in den angegebenen Kategorien, in denen ich dies verwende. Ich nehme an, die Antwort wird sein, es nicht mehr aufzuhübschen, aber wenn jemand eine andere Möglichkeit kennt, würde ich es lieber behalten, ich finde, es sieht so gut aus.

@awesomerobot
Dein Code funktioniert hervorragend, aber es scheint, dass alle CSS-Dekorationen außer Text auf jedem Beitrag nach dem ersten als leerer Raum erscheinen, der so formatiert ist, wie es das CSS vorgibt.

Schalte Inline-Block aus und du erhältst eine durchgehende Farbleiste.
Ändere die Hintergrundfarbe und die Pille ändert die Farbe
usw…

Basierend auf dem, was du geschrieben hast, sieht es so aus, als hättest du gesagt, dass es nur im ersten Beitrag angezeigt werden soll, aber das betrifft nur den Text. Gibt es noch etwas, das wir tun können, um das Element bei allen zusätzlichen Beiträgen zu entfernen?

1 „Gefällt mir“

Okay, wie gesagt, ich bin kein Coder, aber ich bin verdammt gut darin, Grok Fragen zu stellen. Hier ist Code, der sich um beide Probleme kümmert.

  1. Keine leeren CSS-Blasen mehr in Antworten 2 bis X.
  2. Keine Duplizierung der Topic-ID mehr in zitierten Lösungen.

Vielleicht kümmert sich niemand sonst auf der Welt darum, aber das scheint eine gute Möglichkeit zu sein, Topics für diejenigen von uns zu verfolgen, die Discourse als Ticketsystem nutzen.

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; // erster Post im Topic
    const desiredCategories = [9, 23]; // eine durch Kommas getrennte Liste von Kategorie-IDs, in denen dies erscheinen soll
    const isInCategory = desiredCategories.includes(
      this.args.post?.topic.category.id
    );

    return firstPost && isInCategory;
  }

  <template>
    {{#if this.shouldShow}}
      <!-- Sie können den Inhalt unten bearbeiten, {{this.topicId}} ist, wo die Topic-ID eingefügt wird -->
      Issue Tracking # ist
      {{this.topicId}}
      <!-- Sie können den Inhalt oben bearbeiten -->
    {{/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; // erster Post im Topic
    const desiredCategories = [9, 23]; // eine durch Kommas getrennte Liste von Kategorie-IDs, in denen dies erscheinen soll
    const isInCategory = desiredCategories.includes(
      this.args.post?.topic.category.id
    );

    return firstPost && isInCategory;
  }

  <template>
    {{#if this.shouldShow}}
      <!-- Sie können den Inhalt unten bearbeiten, {{this.topicId}} ist, wo die Topic-ID eingefügt wird -->
      Issue Tracking # ist
      {{this.topicId}}
      <!-- Sie können den Inhalt oben bearbeiten -->
    {{/if}}
  </template>
}

export default apiInitializer("0.8.40", (api) => {
  api.decorateCookedElement((element, helper) => {
    // Nur fortfahren, wenn dies der erste Post ist und nicht innerhalb eines Lösungszitates
    // Nur fortfahren, wenn dies der erste Post ist, nicht in einem Zitat und in der gewünschten Kategorie
    const post = helper?.model;
    const desiredCategories = [9, 23]; // Stimmt mit den Kategorien aus TopicIdentifier überein
    if (
    if (
      helper?.model?.post_number !== 1 ||
      !post ||
      post.post_number !== 1 ||
      !desiredCategories.includes(post.topic?.category?.id) || // Kategorie prüfen
      element.classList.contains("post__contents-cooked-quote") || // Prüfen, ob das Element selbst der Zitatinhalt ist
      element.closest("aside.accepted-answer") || // Auf Lösungs-/Zitat-Wrapper prüfen
      element.closest(".quote") // Zusätzliche Prüfung auf generische Zitate
    ) {
      return;
    }

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

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

    element.appendChild(wrapper);
  });
});
3 „Gefällt mir“

Ich konnte mich nicht früher darum kümmern, aber ich bin froh, dass Sie es herausgefunden haben! Das sieht nach einer vernünftigen Lösung aus.

1 „Gefällt mir“

Ich weiß, dass ich es leicht testen kann, aber wissen Sie aus dem Stegreif, ob dies funktionieren würde, wenn ich dieses JS und CSS in eine eigene Komponente packen würde, oder muss es im Theme selbst sein?

Ich habe eine weitere kleine Anomalie gefunden. Ich sah die leeren Klassenblasen im ersten Beitrag von Themen außerhalb der 2, in denen ich sie haben wollte, also musste ich den Code ein wenig aktualisieren. Hier ist das Endergebnis.

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; // erster Beitrag im Thema
    const desiredCategories = [9, 23]; // eine durch Kommas getrennte Liste von Kategorie-IDs, in denen dies erscheinen soll
    const isInCategory = desiredCategories.includes(
      this.args.post?.topic.category.id
    );

    return firstPost && isInCategory;
  }

  <template>
    {{#if this.shouldShow}}
      <!-- Sie können den Inhalt unten bearbeiten, {{this.topicId}} ist, wo die Thema-ID eingefügt wird -->
      Issue Tracking # ist
      {{this.topicId}}
      <!-- Sie können den Inhalt oben bearbeiten -->
    {{/if}}
  </template>
}

export default apiInitializer("0.8.40", (api) => {
  api.decorateCookedElement((element, helper) => {
    // Nur fortfahren, wenn dies der erste Beitrag ist und nicht innerhalb eines Lösungszitates
    // Nur fortfahren, wenn dies der erste Beitrag ist, nicht in einem Zitat, und in der gewünschten Kategorie
    const post = helper?.model;
    const desiredCategories = [9, 23]; // Stimmt mit den Kategorien von TopicIdentifier überein
    if (
    if (
      helper?.model?.post_number !== 1 ||
      !post ||
      post.post_number !== 1 ||
      !desiredCategories.includes(post.topic?.category?.id) || // Kategorie prüfen
      element.classList.contains("post__contents-cooked-quote") || // Prüfen, ob das Element selbst der Zitatinhalt ist
      element.closest("aside.accepted-answer") || // Nach Lösungs-/Zitat-Wrapper suchen
      element.closest(".quote") // Zusätzliche Prüfung auf generische Zitate
    ) {
      return;
    }

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

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

    element.appendChild(wrapper);
  });
});
      element.classList.contains("post__contents-cooked-quote") || // Prüfen, ob das Element selbst der Zitatinhalt ist
      element.closest("aside.accepted-answer") || // Nach Lösungs-/Zitat-Wrapper suchen
      element.closest(".quote") // Zusätzliche Prüfung auf generische Zitate
    ) {
      return;
    }

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

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

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

Und um meine eigene Frage zu beantworten, ich habe den gesamten Code in eine neue Theme-Komponente verschoben und alles funktioniert weiterhin einwandfrei.