Componente dei Post Wikificati

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 Mi Piace

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 Mi Piace

Qualcun altro sta riscontrando questo errore?

Errore: Variabile non definita: "$Shared-edits-hide". alla riga 42 di common.scss >> @if ($Shared_edits_hide == "Yes"){ -----^

Non riesco a riprodurlo e non vedo problemi evidenti nel codice. Puoi fornirci maggiori informazioni?

1 Mi Piace

È perché avevo Shared edits hide impostato su No. L’errore è apparso nelle impostazioni TC. L’errore è scomparso dopo averlo impostato su Yes.

Non lo capisco né con No né con Yes sull’ultima versione Beta di Discourse. Sei su una vecchia versione di Discourse? Non ho inserito alcun controllo di versione, mi dispiace.

1 Mi Piace

Mi dispiace, errore mio - era un po’ obsoleto, sì. Ho dimenticato di testare di nuovo dopo l’ultimo aggiornamento finché non l’hai menzionato. Grazie. :slight_smile:

1 Mi Piace

Ho appena aggiornato il componente per soddisfare meglio i post di Modifiche Condivise.

Ciò include l’adattamento per le modifiche alle Modifiche Condivise qui:

2 Mi Piace

Ho apportato una piccola modifica ai colori di sfondo predefiniti poiché non riuscivo a vedere facilmente le @menzioni.

Anche il colore di sfondo delle modifiche condivise ora è impostato su tertiary-very-low per impostazione predefinita.

1 Mi Piace

Un componente eccellente. Ma migliora la visibilità solo sulla pagina dell’argomento. È possibile modificarlo in modo che l’icona wiki venga visualizzata sulla pagina della categoria, sull’elenco degli argomenti “recenti”, “non letti”, ecc.?

Ottimo suggerimento, e sono sicuro che sia possibile (PR ben accetti!).

Lo affronto semplicemente etichettando i post con #wiki nelle mie istanze. È ovviamente semi-manuale: puoi identificare i post/argomenti wiki tramite la ricerca avanzata. Ha il vantaggio aggiunto di renderli facilmente individuabili tramite la navigazione nella barra laterale.

Pensavo che sarebbe stato bello avere un’etichettatura automatica dei post wiki come parte di questo componente in qualche modo (o fare come suggerisci), ma non mi ha causato abbastanza problemi da dedicare il tempo a provarci, temo.

2 Mi Piace

L’ho chiesto nel 2021 qui: Add an icon in front of wikis in the topic list?

La risposta è stata:

La richiesta di funzionalità:

1 Mi Piace

Sto cercando consigli su come adattare i colori di sfondo alla modalità scura (automatica).

Attualmente, i colori chiari e luminosi che ho scelto per gli sfondi rendono i post illeggibili in modalità scura.

Sarebbe possibile estendere la palette di colori ed eseguire alcuni calcoli di colore per definire i colori di sfondo per wiki e pad?

Potresti usare i tag per contrassegnare gli argomenti “wiki”.
I tag possono essere stilizzati tramite CSS, se ricordo bene.
Otterresti il beneficio aggiuntivo di un elenco / opzione di drill-down per essi.

Inoltre, un tag wiki potrebbe essere aggiunto agli argomenti che includono wiki automaticamente con un plugin.

Questo è il motivo per cui consiglio un colore Scheme:

Se vuoi discostarti dai tuoi colori, dovrai trovare un modo intelligente per gestire la modalità scura.

Una bella funzionalità sarebbe quella di abilitare anche la specifica di un colore per la modalità scura. Ci darò un’occhiata quando avrò un po’ di tempo libero.

1 Mi Piace

Certo. Ma questi colori sono troppo dominanti per uno sfondo.
Pertanto stavo sognando qualcosa come il 10% di colore scheme mescolato con il 90% di sfondo. Suppongo che SASS (o qualcosa di simile) non sia disponibile nel frontend.
Ma qualche magia CSS come questa funzionerebbe?

Aggiornamento: rgba(0, 255, 0, 0.1) funziona abbastanza bene in modalità scura e chiara.

Le funzioni SASS sono disponibili nella sezione personalizza tema, viene compilato al salvataggio delle modifiche. Non è possibile usare funzioni SASS su variabili tema o CSS.
Se vuoi usare una funzione SASS su un colore del tuo schema colori, devi usare la variabile SASS corrispondente.

Funzionerà :white_check_mark:

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

Non funzionerà :x:

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

Non funzionerà :x:

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

E sulla carta, penso che quello che descrive il tuo link dovrebbe funzionare. :slight_smile:

3 Mi Piace

Forse vale la pena tentare. Ecco una guida (per mio riferimento) sull’uso della funzione SASS mix():