# Modelos para Wikis (especialmente uma Infobox Object)

**URL:** https://meta.discourse.org/t/templates-for-wikis-especially-an-infobox-object/322617
**Category:** Feature
**Tags:** wiki-posts
**Created:** [Agosto 21, 2024, 2:58am UTC](https://meta.discourse.org/t/templates-for-wikis-especially-an-infobox-object/322617 "2024-08-21T02:58:05Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![hazenbiz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hazenbiz/32/442603_2.png) [@hazenbiz](https://meta.discourse.org/u/hazenbiz)
#### Post date: [Agosto 21, 2024, 2:58am UTC](https://meta.discourse.org/t/templates-for-wikis-especially-an-infobox-object/322617/1 "2024-08-21T02:58:05Z")

</div>

Olá a todos! Usando o Discourse parcialmente como uma wiki para meu grupo de interesse — eu adoraria ter infoboxes para realmente levar esses artigos para o próximo nível.

Alguém já integrou isso no Discourse? Não consigo encontrar nenhum plugin ou componente de tema para isso.

Encontrei alguém que conseguiu um [modelo de infobox estilo wiki funcionando no Obsidian](https://codepen.io/carloshenrgin/pen/xxyzavo) — então talvez esse seria um bom lugar para começar.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [Agosto 25, 2024, 8:29am UTC](https://meta.discourse.org/t/templates-for-wikis-especially-an-infobox-object/322617/2 "2024-08-25T08:29:05Z")

</div>

Talvez usar um wrapper genérico de BBCode.

 ![A imagem é uma captura de tela de uma interface digital exibindo informações técnicas e uma caixa de teste com uma legenda informativa. (Legenda gerada por IA)](https://global.discourse-cdn.com/meta/original/4X/7/8/1/781e30bdadebce01681663353df46d56d39f9ab2.png)

Crie um #Customization > Theme component e adicione isso ao CSS Comum.

```plaintext
div[data-wrap="redbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
//* Descomente a linha abaixo para alterar a cor de fundo. Embora, nesse caso, fosse possível usar a cor de fundo do BBCode.
// background-color: var(--secondary);
//* Cor e Espessura da Caixa
      border: 2.5px solid #ff0000;
      border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
// background-color: var(--secondary);
      border: 2.5px solid #00ff00;
      border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
// background-color: var(--secondary);
      border: 2.5px solid #0000ff;
      border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
// background-color: var(--secondary);
      border: 2.5px solid #ffff00;
      border-radius: 0.40em;
}
div[data-wrap="box"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
// background-color: var(--secondary);
      border: 2.5px solid #808080;
      border-radius: 0.40em;
}

```

**Nota:** Criei várias cópias do código acima para cores diferentes. Ou seja, „greenbox“, „yellowbox“, „bluebox“ e „box“ (cinza).

 ![A imagem mostra uma tela de computador com uma lista de caixas, cada uma rotulada com um tipo de caixa e um texto de teste. (Legenda gerada por IA)](https://global.discourse-cdn.com/meta/original/4X/e/2/e/e2eb58d5d1c0179bac3e4673dc2a538ac825bce9.png)

Como usar em uma postagem

```plaintext
[wrap=redbox]
> ## Caixa de informações

Testando caixas
[/wrap]

```

Substitua „red“ pela cor apropriada. Para cinza, use apenas „box“.

* * *

**Nota 2:** Se estiver usando a cor do BBCode via #Customization > Plugin ou #Customization > Theme component em vez de usar „\>“ (uma linha em branco é necessária como separador), ou você poderia usar bgcolor=

[Texto Colorido TC](https://meta.discourse.org/t/discourse-coloured-text/218111?u=heliosurge) Como este é um componente de tema, ele pode ser instalado independentemente da hospedagem.

Existem 2 #plugins que suportam a cor do BBCode: [Cor do BBCode](https://meta.discourse.org/tag/bbcode-color) **ou** [Barra de Ferramentas de Formatação](https://meta.discourse.org/t/formatting-toolbar/40649). **Aviso:** Instale apenas um desses plugins; acho que a Barra de Ferramentas de Formatação avisa que instalar ambos quebrará seu site.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [Agosto 26, 2024, 12:40am UTC](https://meta.discourse.org/t/templates-for-wikis-especially-an-infobox-object/322617/3 "2024-08-26T00:40:29Z")

</div>

## Código Revisado Adiciona Cores de Fundo

- Observe que este código contém todo o código da postagem anterior.

> **Código para CSS Comum**
>
> ```plaintext
> div[data-wrap="redbox"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> border: 2.5px solid #ff0000;
> border-radius: 0.40em;
> }
> div[data-wrap="greenbox"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> border: 2.5px solid #00ff00;
> border-radius: 0.40em;
> }
> div[data-wrap="bluebox"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> border: 2.5px solid #0000ff;
> border-radius: 0.40em;
> }
> div[data-wrap="yellowbox"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> border: 2.5px solid #ffff00;
> border-radius: 0.40em;
> }
> div[data-wrap="box"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> border: 2.5px solid #808080;
> border-radius: 0.40em;
> }
> div[data-wrap="redboxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #ff0000;
> border: 2.75px solid #808080;
> border-radius: 0.40em;
> }
> div[data-wrap="greenboxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #00ff00;
> border: 2.75px solid #808080;
> border-radius: 0.40em;
> }
> div[data-wrap="blueboxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #0000ff;
> border: 2.75px solid #808080;
> border-radius: 0.40em;
> }
> div[data-wrap="yellowboxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #ffff00;
> border: 2.75px solid #808080;
> border-radius: 0.40em;
> }
> div[data-wrap="greyboxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #808080;
> border: 2.75px solid #808080;
> border-radius: 0.40em;
> }
> div[data-wrap="grey1boxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #808080;
> border: 2.75px solid #ff0000;
> border-radius: 0.40em;
> }
> div[data-wrap="grey2boxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #808080;
> border: 2.75px solid #00ff00;
> border-radius: 0.40em;
> }
> div[data-wrap="grey3boxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #808080;
> border: 2.75px solid #0000ff;
> border-radius: 0.40em;
> }
> div[data-wrap="grey4boxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #808080;
> border: 2.75px solid #ffff00;
> border-radius: 0.40em;
> }
> 
> ```
> 
> * * *

Use este código em postagens para caixas de bgcolor:

```plaintext
[Wrap="redboxbg"]
> Infobox

Testing boxed
[/wrap]

```

Novas opções de cor de fundo Substitua “ **red** ” por:

- “green”, “blue”, “yellow”  
_Cor de fundo. Borda cinza._

> **Screenshot Mobile**
>
> ![Há uma exibição colorida com caixas de texto que provavelmente representam diferentes categorias ou propósitos. (Legenda por IA)](https://global.discourse-cdn.com/meta/original/4X/6/8/6/6866e812c631a7c6a422215255aa28cbcf12f387.png)
> 
> * * *

- “grey”, “grey#” #=1-4.  
\*Todos os fundos cinzas, borda cinza, 1 borda vermelha, 2 borda verde, 3 borda azul, 4 borda amarela

> **Screenshot Mobile**
>
> ![Esta é uma captura de tela de uma interface de usuário mostrando uma caixa de teste rotulada "Picture" com a cabeça de um robô mecânico como imagem abaixo. (Legenda por IA)](https://global.discourse-cdn.com/meta/original/4X/b/7/f/b7f0d035d83e6af5612e3edc7780aa3aa5b7cacc.png)
> 
> ![Esta imagem exibe um menu suspenso com quatro caixas diferentes, cada uma representando um tipo diferente de teste. (Legenda por IA)](https://global.discourse-cdn.com/meta/original/4X/0/5/b/05bdb4139fbb59ed3167b8b22b6e83bf9cba6450.png)
> 
> ![Uma imagem estilizada de um robô com um rosto semelhante ao humano e um design intrincado, contra um cenário de uma paisagem urbana futurista. (Legenda por IA)](https://global.discourse-cdn.com/meta/original/4X/3/3/8/338db6fb1c9ea295818f572d358b720bd5763c9f.png)