Composant des publications Wikifiées

Simple Description

This theme component enables you to make Wiki posts (and Shared Edits posts) more obvious.

Wikis and Shared Edits are a powerful feature of Discourse, but many users are unfamiliar with the concept and find the UI just a bit too subtle. This component makes it crystal clear, packaging the content from Change the style of a wiki post.

Screenshots

Detailed Description

Installing this component enables you to control the background colour of Wiki posts, and to add some text to the history/edit icon in the top right of the post.

It is a fork of discourse-wikified-post-background-color by @pacharanero, incorporates stuff from Change the style of a wiki post and re-used code from Personal Message Bubbles by @Rhidian.

Settings

Wiki post background color

The background colour of Wiki posts can be set to whatever you like. It defaults to ‘highlight’, but you can use any of these options:

  1. It works best when a Scheme colour is chosen (i.e. primary, secondary, tertiary, etc), as these are responsive to automatic dark mode.
  2. A named color recognised in CSS (e.g. blue, red, yellow, black, etc)
  3. An HTML color code (e.g. #effbfb, etc)

Shared edits background color

You can choose one of the same color options for Shared Edits posts (see the Shared Edits Plugin)

Wiki added text

This adds the little bit of green text (defaulting to Wiki Post) in the top right corner of the post:

image

This is dynamic, and changes colour along with the history icon if there has been a recent edit (this is an unintended happy thing):

image

If you don’t want any text there, then delete the text in the setting and save it.

Shared edits added text

The text displayed when it is a Shared Edits post. This is in the Danger color from your palate.

image

Roadmap

  1. Auto tag Topics with ‘wiki’

Please make suggestions as replies to this post.

Install this theme component

25 « J'aime »

Lovely stuff @nathank
I’m going to archive the old wikified post background color repo, in favour of this your new version, which adds much more.

4 « J'aime »

Quelqu’un d’autre rencontre-t-il cette erreur ?

Erreur : Variable non définie : « $Shared-edits-hide ». à la ligne 42 de common.scss >> @if ($Shared_edits_hide == « Yes »){ -----^

Je ne peux pas reproduire cela et je ne vois aucun problème évident dans le code. Pouvez-vous nous donner plus d’informations ?

1 « J'aime »

C’est parce que j’avais défini Shared edits hide sur Non. L’erreur est apparue dans les paramètres TC. L’erreur a disparu après l’avoir définie sur Oui.

Je ne comprends pas avec « Non » ni « Oui » sur la dernière version bêta de Discourse. Êtes-vous sur une ancienne version de Discourse ? Je n’ai mis aucun contrôle de version dedans, désolé.

1 « J'aime »

Désolé, ma faute - c’était un peu dépassé, ouais. J’ai oublié de tester à nouveau après la mise à jour récente jusqu’à ce que vous le mentionniez. Merci. :slight_smile:

1 « J'aime »

J’ai mis à jour le composant pour mieux prendre en charge les publications d’éditions partagées.

Cela inclut son adaptation aux changements d’éditions partagées ici :

2 « J'aime »

J’ai apporté une légère modification aux couleurs d’arrière-plan par défaut car j’avais du mal à voir les @mentions.

De plus, la couleur d’arrière-plan des modifications partagées est maintenant par défaut sur tertiary-very-low.

1 « J'aime »

Un excellent composant. Mais il améliore la visibilité uniquement sur la page du sujet. Est-il possible de le modifier pour que l’icône wiki s’affiche sur la page de catégorie, la liste des sujets « récents », « non lus », etc. ?

Bonne suggestion, et je suis sûr que c’est possible (PR bienvenus !).

Je m’en occupe en marquant simplement les publications avec #wiki dans mes instances. C’est bien sûr semi-manuel - vous pouvez identifier les publications / sujets wiki par une recherche avancée. Cela a l’avantage supplémentaire de les rendre facilement découvrables via la navigation dans la barre latérale.

Je pensais que ce serait bien d’avoir un marquage automatique des publications wiki dans le cadre de ce composant (ou de faire comme vous suggérez), mais cela ne m’a pas causé assez de problèmes pour que j’y consacre du temps, j’en ai peur.

2 « J'aime »

J’ai posé cette question en 2021 ici : Add an icon in front of wikis in the topic list?

La réponse a été :

La demande de fonctionnalité :

1 « J'aime »

Je cherche des conseils sur la façon d’adapter les couleurs d’arrière-plan au mode sombre (automatique).

Actuellement, les couleurs claires et vives que j’ai choisies pour les arrière-plans rendent les publications illisibles en mode sombre.

Serait-il possible d’étendre la palette de couleurs et d’effectuer des calculs de couleurs pour définir les couleurs d’arrière-plan pour les wikis et les pads ?

Vous pourriez utiliser des balises pour marquer les sujets de « wiki ».
Les balises peuvent être stylisées par CSS, si je me souviens bien.
Vous obtiendriez l’avantage supplémentaire d’une liste / d’une option de détail pour celles-ci.

De plus, une balise wiki pourrait être ajoutée aux sujets incluant automatiquement des wikis avec un plugin.

Voici pourquoi je recommande une couleur Scheme :

Si vous souhaitez sortir des sentiers battus avec vos couleurs, vous devrez trouver un moyen astucieux de gérer le mode sombre.

Une fonctionnalité intéressante serait de permettre également la spécification d’une couleur pour le mode sombre. J’examinerai cela lorsque j’aurai un peu de temps libre.

1 « J'aime »

Bien sûr. Mais ces couleurs sont trop dominantes pour un arrière-plan.
C’est pourquoi je rêvais de quelque chose comme 10% de couleur Scheme mélangé à 90% d’arrière-plan. Je suppose que SASS (ou quelque chose de similaire) n’est pas disponible en frontend.
Mais une magie CSS comme celle-ci fonctionnerait-elle ?

Mise à jour : rgba(0, 255, 0, 0.1) fonctionne très bien en mode sombre et clair.

Les fonctions SASS sont disponibles dans la section de personnalisation du thème, elles sont compilées lorsque vous enregistrez vos modifications. Vous ne pouvez cependant pas utiliser les fonctions SASS sur des variables de thème ou CSS.
Si vous souhaitez utiliser une fonction SASS sur une couleur de votre palette de couleurs, vous devez utiliser la variable SASS correspondante.

Fonctionnera :white_check_mark:

body {
    background: darken($secondary, 10%);
}

Ne fonctionnera pas :x:

body {
    background: darken($my_theme_variable, 10%);
}

Ne fonctionnera pas :x:

body {
    background: darken(var(--secondary), 10%);
}

Et sur le papier, je pense que ce que votre lien décrit devrait fonctionner. :slight_smile:

3 « J'aime »

C’est peut-être une piste à explorer. Voici un guide (pour ma propre référence) sur l’utilisation de la fonction SASS mix() :