Componente de Posts Wikificados

Descrição Simples

Este componente de tema permite que você torne as postagens do Wiki (e as postagens de Edições Compartilhadas) mais óbvias.

Wikis e Edições Compartilhadas são recursos poderosos do Discourse, mas muitos usuários não estão familiarizados com o conceito e acham a interface um pouco sutil demais. Este componente torna tudo cristalino, empacotando o conteúdo de Change the style of a wiki post.

Capturas de Tela

Descrição Detalhada

A instalação deste componente permite controlar a cor de fundo das postagens do Wiki e adicionar algum texto ao ícone de histórico/edição no canto superior direito da postagem.

É um fork de discourse-wikified-post-background-color por @pacharanero, incorpora conteúdo de Change the style of a wiki post e reutiliza código de Personal Message Bubbles por @Rhidian.

Configurações

Cor de fundo da postagem do Wiki

A cor de fundo das postagens do Wiki pode ser definida como você desejar. O padrão é ‘highlight’, mas você pode usar qualquer uma destas opções:

  1. Funciona melhor quando uma cor do Esquema é escolhida (ou seja, primary, secondary, tertiary, etc.), pois essas são responsivas ao modo escuro automático.
  2. Uma cor nomeada reconhecida em CSS (por exemplo, blue, red, yellow, black, etc.)
  3. Um código de cor HTML (por exemplo, #effbfb, etc.)

Cor de fundo das Edições Compartilhadas

Você pode escolher uma das mesmas opções de cor para postagens de Edições Compartilhadas (consulte o Plugin de Edições Compartilhadas)

Texto adicionado ao Wiki

Isso adiciona um pequeno texto verde (padrão Postagem do Wiki) no canto superior direito da postagem:
image

Isso é dinâmico e muda de cor junto com o ícone de histórico se houver uma edição recente (isso é uma coisa feliz não intencional):
image

Se você não quiser nenhum texto ali, exclua o texto na configuração e salve.

Texto adicionado às Edições Compartilhadas

O texto exibido quando é uma postagem de Edições Compartilhadas. Isso está na cor Danger da sua paleta.

image

Roadmap

  1. Etiquetar automaticamente Tópicos com ‘wiki’

Por favor, faça sugestões como respostas a esta postagem.

Instale este componente de tema

26 curtidas

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 curtidas

Mais alguém está recebendo este erro?

Erro: Variável não definida: "$Shared-edits-hide". na linha 42 de common.scss >> @if ($Shared_edits_hide == "Yes"){ -----^

Não consigo reproduzir isso e não vejo nenhum problema óbvio no código. Você pode nos dar mais informações?

1 curtida

É porque eu tinha Shared edits hide definido como Não. O erro apareceu nas configurações do TC. O erro desapareceu depois de defini-lo como Sim.

Eu não entendo com No nem Yes na versão mais recente do Discourse Beta. Você está em uma versão antiga do Discourse? Eu não coloquei nenhum controle de versão nisso, desculpe.

1 curtida

Desculpe, minha falha - estava um pouco desatualizado, sim. Esqueci de testar novamente após a atualização recente até você mencionar. Obrigado. :slight_smile:

1 curtida

Acabei de atualizar o componente para atender melhor às postagens de Edições Compartilhadas.

Isso inclui adaptá-lo para as alterações de Edições Compartilhadas aqui:

2 curtidas

Fiz um pequeno ajuste nas cores de fundo padrão, pois não conseguia ver facilmente as @menções.

A cor de fundo das Edições Compartilhadas agora é tertiary-very-low por padrão.

1 curtida

Um excelente componente. Mas ele melhora a visibilidade apenas na página do tópico. É possível modificá-lo para que o ícone do wiki seja exibido na página da categoria, na lista de tópicos “recentes”, “não lidos”, etc.?

Boa sugestão, e tenho certeza que é possível (PR bem-vindo!).

Eu resolvo isso simplesmente marcando posts com #wiki em minhas instâncias. É claro que é semi-manual - você pode identificar os posts/tópicos wiki por meio de pesquisa avançada. Tem o bônus adicional de torná-los facilmente descobertos através da navegação na barra lateral.

Pensei que seria bom ter a marcação automática de posts wiki como parte deste componente de alguma forma (ou fazer como você sugere), mas isso não me causou dor suficiente para dedicar tempo para tentar, receio.

2 curtidas

Eu perguntei isso em 2021 aqui: Add an icon in front of wikis in the topic list?

A resposta foi:

A solicitação de Feature

1 curtida

Estou buscando conselhos sobre como adaptar as cores de fundo para o modo escuro (automático).

Atualmente, as cores claras e brilhantes que escolhi para os fundos tornam as postagens ilegíveis no modo escuro.

Seria possível estender a paleta de cores e fazer alguns cálculos de cores para definir cores de fundo para wikis e pads?

Você poderia usar tags para marcar tópicos de “wiki”.
As tags podem ser estilizadas por CSS, se não me engano.
Você obteria o benefício adicional de uma listagem / opção de detalhamento para elas.

Além disso, uma tag wiki poderia ser adicionada a tópicos que incluem wikis automaticamente com um plugin.

É por isso que recomendo uma cor do Scheme:

Se você quiser fugir do padrão com suas cores, precisará encontrar uma maneira inteligente de lidar com o modo escuro.

Um bom recurso seria permitir a especificação de uma cor para o modo escuro também. Vou dar uma olhada nisso quando tiver algum tempo livre.

1 curtida

Claro. Mas essas cores são muito dominantes para um fundo.
Portanto, eu estava sonhando com algo como 10% de cor do esquema misturada com 90% de fundo. Suponho que SASS (ou algo semelhante) não esteja disponível no frontend.
Mas alguma mágica CSS como esta funcionaria?

Atualização: rgba(0, 255, 0, 0.1) funciona muito bem nos modos escuro e claro.

As funções SASS estão disponíveis na seção de personalização do tema, elas são compiladas quando você salva suas modificações. Você não pode usar funções SASS em variáveis de tema ou CSS.
Se você quiser usar uma função SASS em uma cor do seu esquema de cores, você deve usar a variável SASS correspondente.

Funcionará :white_check_mark:

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

Não funcionará :x:

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

Não funcionará :x:

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

E no papel, acho que o que seu link descreve deveria funcionar. :slight_smile:

3 curtidas

Talvez isso valha a pena. Aqui está um guia (para minha própria referência) sobre o uso da função SASS mix():