Standard-Tag pro Kategorie in einer Theme-Komponente festlegen

Entwickler
1

Wenn Sie /tags/category-slug/tag-name besuchen und auf die Taste <kbd>Neues Thema</kbd> klicken, ist der Composer bereits mit dem entsprechenden Tag voreingestellt, wie hier beschrieben:

Das ist großartig. Aber jetzt möchte ich (und mindestens eine andere Person) dieses Verhalten so einrichten, dass beim Besuch von /c/cat-slug/cat-id automatisch ein Standard-Tag gesetzt wird. Es scheint, als könnte eine Theme-Komponente diese Taste ansprechen und entweder modifizieren oder ausblenden und eine neue Taste hinzufügen (dort gibt es eine Plugin-Auslassung, die ich gerade nicht finden kann, die ich aber vor einer Minute gesehen habe).

Kann mir jemand einen Hinweis geben?

2

Soll es nur für eine bestimmte Kategorie funktionieren, oder bräuchtest du eine „Standardmarke", die für viele Kategorien gilt, wobei diese Marke für jede Kategorie unterschiedlich ist?

3

Ich stelle mir vor, ich würde eine Einstellung erstellen, um für einige Kategorien ein Standard-Tag festzulegen. Das kann ich wahrscheinlich umsetzen, weiß aber nicht, wo bzw. wie ich den „Thema erstellen"-Button so anpassen kann, dass er das Standard-Tag automatisch enthält.

5

TL;DR: Spring zum funktionierenden Code hier

Wenn du eine Seite ansiehst, die die Taste + Neues Thema enthält, kannst du den HTML-Code über die Entwicklerwerkzeuge (Inspector) prüfen.

Wenn du das tust, wirst du feststellen, dass diese Taste eine ID besitzt.

devtools new topic button markup
devtools new topic button markup1110×134 27.4 KB

IDs von HTML-Elementen sollen eindeutig sein, das heißt… keine zwei Elemente in derselben Ansicht dürfen dasselbe HTML-ID-Attribut teilen. Das reicht also, um zu beginnen.

Wenn ich auf Github nach "create-topic" suche, sehe ich Folgendes…

Repository search results · GitHub

Beachte den Filter auf der linken Seite.

github search filter
github search filter367×263 7.07 KB

Ich möchte den HTML-Code für die Taste finden, also Handlebars, da ich versuche, die Aktion herauszufinden, die sie sendet.

Also wähle ich Handlebars aus; dann sehe ich das.

Repository search results · GitHub

Es gibt nur ein Ergebnis, also haben wir Glück. Falls es mehr Ergebnisse gäbe, könnte man die Liste weiter eingrenzen, aber das liegt außerhalb des Rahmens dieses Themas.

Also, lass uns diese Datei prüfen.

Du wirst dann sehen, dass die Aktion der Taste so gesetzt ist:

action=action

Nun… das ist nicht sehr hilfreich… Also, was nun?

Wenn du action=action siehst, bedeutet das, dass die Aktion von einer übergeordneten Vorlage an die Komponente übergeben wird.

Lass uns versuchen herauszufinden, welche Vorlagen diese Komponente enthalten. Also gehen wir zu Github und suchen nach dem Komponentennamen, wie er in einer Vorlage verwendet würde. Für dieses Beispiel würden wir so etwas wie "{{create-topic-button" verwenden.

Beachte, dass ich nur {{KOMPONENTEN_NAME hinzugefügt und den Rest weggelassen habe. Wir kennen die anderen Argumente nicht, die übergeben werden, also wollen wir eine generische Suche.

Hier ist das Ergebnis:

Repository search results · GitHub

Wir erhalten zwei Ergebnisse… eines davon ist im Styleguide-Plugin, also ignorieren wir es einfach. Das andere befindet sich im Kern. Also, lass uns sehen, wie das aussieht.

discourse/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs at 292412f19610d49944f3e109aa7546ccd0553d6a · discourse/discourse · GitHub

  {{create-topic-button
    canCreateTopic=canCreateTopic
    action=(action "clickCreateTopicButton")
    disabled=createTopicButtonDisabled
    label=createTopicLabel
    btnClass=createTopicClass
    canCreateTopicOnTag=canCreateTopicOnTag
  }}

Ahh… wir kommen näher. Jetzt siehst du, dass die Aktion für die Taste

action=(action "clickCreateTopicButton")

ist.

Jetzt müssen wir herausfinden, was diese Aktion tut. Also suchen wir nach dem Namen der Aktion. Dann filtern wir auf .js-Dateien, da wir nun die Definition dieser Aktion in der JS-Datei der Komponente sehen wollen.

Repository search results · GitHub

Wieder erhalten wir nur ein Ergebnis, also lass uns es uns ansehen.

Es sieht also so aus, als würde die Aktion eines von zwei Dingen tun. Wenn die Kategorie schreibgeschützt ist und der Benutzer noch keinen Entwurf hat, wird eine Warnung angezeigt. Andernfalls wird eine createTopic()-Methode aufgerufen.

Wir interessieren uns für Letzteres, also lass uns das ansehen.

Wenn du in dieser Datei nach createTopic() suchst (interne Suche, nicht Github)… wirst du feststellen, dass es nur eine Referenz dafür gibt. Was ist los? Wie ruft diese Komponente eine Methode auf, die nicht definiert ist?

Nun, die Antwort befindet sich höher in der Datei.

Was bedeutet das?

Ich möchte hier nicht zu viel Zeit damit verbringen, aber Ember verwendet Klassen. Stelle dir Klassen wie wiederverwendbare Code-Bündel vor. Alles, was die oben hervorgehobene Zeile bedeutet, ist:

Nimm das Ember-Component-Bündel, füge das FilterModeMixin-Bündel hinzu und erlaube mir, weitere Methoden hinzuzufügen oder einige der vorhandenen zu überschreiben, um eine neue Ember-Komponente für meine Anwendung zu erstellen.

Also, lass uns nun zurück zur Aktion gehen, die wir verfolgen.

clickCreateTopicButton() {
  if (this.categoryReadOnlyBanner && !this.hasDraft) {
    bootbox.alert(this.categoryReadOnlyBanner);
  } else {
    this.createTopic();
  }
},

Es ruft this.createTopic() auf. Dies ist keine Standard-Ember-Komponentenmethode. Es ist eine benutzerdefinierte Discourse-Methode, also muss sie aus FilterModeMixin kommen. Was ist FilterModeMixin? Nun… es wird oben in der Datei definiert.

import FilterModeMixin from "discourse/mixins/filter-mode";

Also, ich schätze, wir müssen dorthin gehen.

discourse/app/assets/javascripts/discourse/app/mixins/filter-mode.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

Mache eine Pause und suche intern nach createTopic() in dieser Datei. Ich meine es ernst. Höre auf zu lesen und tu es. Ich warte… betrüge nicht… ich habe meine :eyes: auf dich.

OK. Du hast gesucht, und es gab keine Ergebnisse. Was nun?

Das, was ich oben beschrieben habe, ist nur eine Methode, um Dinge weiterzugeben. Wenn du nicht findest, wonach du suchst, mache einen Schritt zurück und versuche einen anderen Ansatz.

Also, lass uns zusammenfassen… wo stehen wir gerade? Bevor wir stecken blieben, haben wir die JS-Datei für die d-navigation-Komponente betrachtet. Lass uns ihre Vorlage ansehen.

Wieder verwenden wir "{{KOMPONENTEN_NAME" und suchen.

Repository search results · GitHub

Das gibt uns vier Ergebnisse…

Ist das wichtig? Vielleicht. Ist es in diesem Fall wichtig? Nein. Wir versuchen nur herauszufinden, woher createTopic() kommt oder was es ist. Also, lass uns einfach das erste Ergebnis nehmen.

discourse/app/assets/javascripts/discourse/app/templates/navigation/default.hbs at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

Würdest du das ansehen…

createTopic=(route-action "createTopic")

Großartig… mehr Fachjargon… weil alle das lieben

Aber im Ernst, lass uns über Routenaktionen sprechen. Was sind sie? Nun. Sie sind Routen…Aktionen? Als in Aktionen, die auf der Route definiert sind. Warum sind sie nett? Weil Routen in Discourse verschachtelt sein können.

Sieh es so:

- route-1
  - route-1-1
  - route-1-2
  - route-1-3

Wenn ich eine gemeinsame Komponente habe, die ich auf den Routen 111, 112 und 113 mit verschiedenen Parametern verwenden muss, wäre es dann nicht einfacher, wenn ich einfach dieselbe Komponente in allen verwende und dieselbe Aktion übergebe? Dann könnte ich sie bei Bedarf für jede Route anpassen?

Das ist es, was Routenaktionen tun.

OK, lass uns zurück zur Frage kommen. Wir haben uns

createTopic=(route-action "createTopic")

in der navigation/default-Komponente angesehen.

Jetzt müssen wir nur noch herausfinden, was die Route ist, um zu prüfen, was diese Routenaktion tut.

Du möchtest das Verhalten der Taste „Neues Thema