Comment puis-je voir les catégories et « les plus récents » sur mobile ?

[Aurora]

Comment puis-je voir les catégories et les « derniers » sur mobile ?

Comme ça ?

[Arkshine]

J’ai regardé, et ils ont utilisé du code JS personnalisé pour forcer la vue « catégories et derniers sujets ».

Je n’ai pas vérifié s’il y avait une meilleure façon ; voici ce qu’ils font (j’ai modernisé le code et ajouté quelques commentaires) :

import { apiInitializer } from "discourse/lib/api";
import CategoriesAndLatestTopics from "discourse/components/categories-and-latest-topics";
import CategoryList from "discourse/models/category-list";
import { MAX_UNOPTIMIZED_CATEGORIES } from "discourse/lib/constants";

export default apiInitializer((api) => {
  // Force la vue Catégories et derniers sujets.
  api.modifyClass(
    "component:discovery/categories-display",
    (Superclass) =>
      class extends Superclass {
        get categoriesComponent() {
          if (this.args.parentCategory) {
            return super.categoriesComponent;
          } else {
            return CategoriesAndLatestTopics;
          }
        }
      }
  );

  // Identique à l'original, à la différence près de la vérification "this.site.desktopView",
  // de sorte qu'elle trouve également les derniers sujets pour mobile.
  api.modifyClass(
    "route:discovery-categories",
    (Superclass) =>
      class extends Superclass {
        async findCategories(parentCategory) {
          let model;

          let style = this.siteSettings.desktop_category_page_style;
          if (this.site.categories.length > MAX_UNOPTIMIZED_CATEGORIES) {
            style = "categories_only";
          }

          if (
            style === "categories_and_latest_topics" ||
            style === "categories_and_latest_topics_created_date"
          ) {
            model = await this._findCategoriesAndTopics(
              "latest",
              parentCategory
            );
          } else if (style === "categories_and_top_topics") {
            model = await this._findCategoriesAndTopics(
              "top",
              parentCategory
            );
          } else {
            PreloadStore.remove("topic_list");
            model = await CategoryList.list(this.store, parentCategory);
          }

          return model;
        }
      }
  );
})

Vous pouvez essayer de coller le code dans un nouveau composant → Modifier le code → Onglet JS.
Faites-moi savoir si cela vous aide.

[Aurora]

Merci beaucoup. J’ai essayé, mais cela n’a rien changé.

[Arkshine]

Je vérifierais les points suivants, assurez-vous :

• Le code se trouve dans l’onglet JS (et pas ailleurs)
• Votre code est activé (si vous avez créé un TC, assurez-vous qu’il est attaché au thème)
• Vous avez le paramètre du site desktop_category_page_style réglé sur categories_and_latest_topics
• S’il y a des erreurs dans la console du navigateur

Voyons si nous pouvons comprendre pourquoi rien ne se passe.

[Aurora]

Je pense que j’ai tout fait de cette façon. Est-ce que c’est bien copié ?

[Arkshine]

Vous pouvez supprimer le doublon. C’est probablement la raison pour laquelle cela ne fonctionne pas (ces 5 lignes) :

[Aurora]

Maintenant, quelque chose arrive ! Mais pas quand j’utilise l’élément « catégorie et groupe modernes ».