Ajouter une classe de catégorie à une page publiée

Dev
1

Si nous ne pouvons pas utiliser type="text/discourse-plugin" dans une balise script, existe-t-il un moyen d’obtenir le slug de la catégorie actuelle d’une page publiée ?
Le but est d’ajouter une nouvelle classe contenant le slug dans une balise HTML de la page.

2 « J'aime »
2

Bonjour,

Je ne suis pas sûr de bien comprendre, mais la catégorie est disponible sur le corps, vous pouvez donc la cibler.

Par exemple :

Screenshot 2022-11-01 at 17.42.55
Screenshot 2022-11-01 at 17.42.55598×127 17.1 KB

Vous pouvez cibler tous les sujets de la catégorie lounge avec :

.published-page.lounge {
  ...
}
2 « J'aime »
3

Désolé, je n’ai pas été assez clair et j’aurais dû mieux expliquer le but.

Actuellement, la publication de pages n’utilise pas l’arrière-plan de la catégorie.

Paramètre :

image
image636×743 82.3 KB

Vue du sujet :

image
image1432×772 71.6 KB

Vue de la page publiée :

image
image898×330 19 KB

L’arrière-plan de la catégorie est défini dans color_definitions.scss :

body.category-test-category {
    background-image: url(/uploads/default/original/1X/1851d5e9eb66a9ecf49f0dc747dfbad1a0fd220b.jpeg)
}

La page publiée n’a pas la classe category-test-category, et donc n’hérite pas de l’image d’arrière-plan.

Mon idée est d’utiliser javascript pour obtenir le slug de la catégorie et ajouter une classe category-[slug de la catégorie] à la balise body, quel que soit le nom de la catégorie, afin que les arrière-plans de catégorie soient automatiquement appliqués, au lieu d’écrire du CSS personnalisé pour chaque catégorie de page publiée, tel que :

.published-page {
    &.test-category {
        background-image: url("/uploads/default/original/1X/1851d5e9eb66a9ecf49f0dc747dfbad1a0fd220b.jpeg");
    }
}
4 « J'aime »
4

Je suis d’accord, très bonne idée :+1:

2 « J'aime »
5

Je vois… Oui, c’est une bonne idée, mais malheureusement, je ne pense pas qu’il soit possible de modifier une page publiée avec un composant de thème (javascript)… Probablement avec un plugin ou en ajoutant la partie category- avant le nom de la catégorie dans le cœur.

Je pense que pour l’instant, la méthode manuelle fonctionne. Créez un composant de thème avec le SCSS pertinent pour les catégories de pages publiées et ajoutez des paramètres pour cela.

Je veux dire quelque chose comme ceci peut-être : GitHub - VaperinaDEV/published-page-category-background-image

Mais peut-être qu’il existe une meilleure solution, je ne suis pas sûr. :slightly_smiling_face:

3 « J'aime »
6

C’est une solution très astucieuse, mais je suis d’accord qu’avoir une telle chose par défaut (ou personnalisable) dans le cœur pourrait être agréable. L’intention actuelle est d’avoir explicitement un arrière-plan par défaut utilisant les couleurs du thème, comme nous pouvons le voir dans publish.scss :

.published-page {
  background-color: var(--secondary);
  color: var(--primary);

Et si les URL des images d’arrière-plan des catégories personnalisées étaient stockées dans des variables CSS auxquelles nous pourrions facilement accéder dans notre CSS personnalisé ? Au moins, nous n’aurions pas à nous embêter à utiliser l’URL complète de l’image dans notre CSS.

J’ai fait une demande de fonctionnalité ici : Published pages could inherit categories' background image setting

4 « J'aime »