 |
Resumo | Adiciona chamadas no estilo Obsidian como alternativa às citações em markdown. |
 |
Pré-visualização | Theme Creator |
 |
Repositório | GitHub - Arkshine/discourse-quote-callouts · GitHub |
 |
Guia de Instalação | Como instalar um tema ou componente de tema |
 |
Novo em Temas do Discourse? | Guia para iniciantes no uso de Temas do Discourse |
Instale este componente de tema
Este componente de tema adiciona suporte a chamadas no estilo Obsidian no Discourse como alternativa às citações em markdown.
As chamadas são uma ótima maneira de destacar conteúdo e adicionar notas, avisos ou outras mensagens especiais às suas publicações.
Uso
Para criar uma chamada, você tem várias opções.
Sintaxe Markdown
Adicione [!tipo] à primeira linha de uma citação, onde tipo é o identificador do tipo. O identificador do tipo determina como a chamada será exibida. Para ver todos os tipos disponíveis, consulte Tipos Suportados.
> [!dica]
> **Dica**: Use `trechos de código` para melhorar a legibilidade. Eles proporcionam clareza e precisão.
Pré-visualização
Você pode alterar o tipo clicando no ícone:
Editor de texto rico
Agora há suporte total. Consulte a seção Suporte ao editor de texto rico.
Atalho de teclado
- Ctrl + q — Insere uma chamada vazia
Barra de ferramentas
Chat
Um botão na barra de ferramentas para inserir uma chamada padrão está disponível.
Título personalizado
Por padrão, o título da chamada é seu identificador de tipo em formato título. Você pode alterá-lo adicionando texto após o identificador de tipo:
> [!pergunta] Etiqueta Personalizada 🤗
> As etiquetas das chamadas podem ser personalizadas.
> [!resumo] [date=2032-12-22 timezone="Europe/Paris"]
> Elas também podem conter formatação especial em linha, como datas dinâmicas.
Você também pode criar chamadas apenas com título:
> [!sucesso] resolvido.
Chamadas dobráveis
Você pode tornar uma chamada dobrável adicionando um sinal de mais + ou menos - diretamente após o identificador de tipo.
+expande a chamada por padrão-a colapsa
> [!tarefa]- Minha Lista de Tarefas
>
> - [x] Escrever documentação
> - [ ] Adicionar testes
> - [ ] Revisar código
> [!tarefa]+ Minha Lista de Tarefas Expandida
>
> - [x] Criar repositório
> - [ ] Configurar CI/CD
> - [ ] Implantar em produção
Chamadas aninhadas
Você pode aninhar chamadas em vários níveis.
> [!pergunta] As chamadas podem ser aninhadas?
>
> > [!tarefa] Sim!, elas podem.
> >
> > > [!exemplo] Você pode até mesmo usar várias camadas de aninhamento.
> [!dica]
> Aqui está uma dica útil
>
> > [!informação]
> > Com algumas informações adicionais
> >
> > > [!exemplo]
> > > E um exemplo aninhado
>
> Voltando à dica principal
Tipos padrão suportados
Você pode usar vários tipos e aliases de chamadas.
Cada tipo vem com uma cor de fundo e um ícone diferentes.
Consulte a configuraçãocallouts.
nota. Consulte a seção Padrões de fallback para mais informações.
| Tipo | Descrição | Aliases |
|---|---|---|
nota |
Para notas e informações gerais | - |
resumo |
Para resumos ou seções abstratas | summary, tldr |
informação |
Para conteúdo informativo | - |
tarefa |
Para listas de tarefas ou itens de pendência | - |
dica |
Para dicas e informações importantes | hint, important |
sucesso |
Para mensagens de sucesso | check, done |
pergunta |
Para perguntas e FAQs | help, faq |
aviso |
Para avisos | caution, attention |
falha |
Para notificações de falha | fail, missing |
perigo |
Para mensagens de perigo ou erro | error |
bug |
Para relatórios de bugs ou problemas conhecidos | - |
exemplo |
Para exemplos | - |
citação |
Para citações | cite |
Personalização
Ícone
Você pode usar um ícone do FontAwesome ou fornecer diretamente um elemento SVG.
Elemento SVG
Embora a versão gratuita do FontAwesome ofereça muitas opções, às vezes você pode se sentir limitado.
Você pode fornecer um elemento SVG <svg>...</svg>.
Exemplo: Ícones Lucide – É um conjunto excelente com a vantagem de escolher a largura do traço.
- Selecione um ícone
- Ajuste a largura do traço
- Clique em Copiar SVG
- Vá para as configurações do componente de tema e cole o conteúdo
Padrões de fallback
Você pode definir valores padrão para quando um tipo de chamada especificado não for encontrado com as seguintes configurações:
callout_fallback_typecallout_fallback_iconcallout_fallback_color
> [!discourse é fantástico]
> Sim.
Configuração global
Você pode personalizar vários aspectos das chamadas por meio de:
- Opacidade do fundo
- Propriedades da borda (largura, estilo, cor, raio)
- Preenchimento
- Propriedades da fonte do título (tamanho, peso)
- Espaço entre o ícone e o título
Configuração por chamada
Cada tipo de chamada pode ser personalizado com:
- Ícone personalizado
- Texto do título
- Esquema de cores
- Propriedades da borda
Consulte a seção Configurações abaixo.
Configurações
Lista
| Configuração | Descrição |
|---|---|
| callouts | Define as chamadas. |
| callout_fallback_type | O tipo de chamada padrão a ser usado quando o tipo especificado não for encontrado. Valor padrão: nota |
| callout_fallback_icon | O ícone padrão a ser usado quando o tipo especificado não for encontrado. Valor padrão: far-pen-to-square |
| callout_fallback_color | A cor padrão a ser usada quando o tipo especificado não for encontrado. Valor padrão: #027aff |
| callout_background_opacity | A opacidade global do fundo para a chamada (1 a 100). Valor padrão: 10 |
| callout_border_width | A largura global da borda para a chamada. Valor padrão: vazio |
| callout_border_style | O estilo global da borda para a chamada. Valor padrão: vazio |
| callout_border_color | A cor global da borda para a chamada. Valor padrão: vazio |
| callout_border_radius | O raio global da borda para a chamada. Valor padrão: var(--d-border-radius) |
| callout_padding | O preenchimento global para a chamada. Valor padrão: 0.75em 0.75em 0.75em 1.5em |
| callout_title_font_size | O tamanho global da fonte para o título da chamada. Valor padrão: inherit |
| callout_title_font_weight | O peso global da fonte para o título da chamada. Valor padrão: bold |
| callout_title_gap | O espaço global entre o ícone e o título da chamada. Valor padrão: 0.5em |
| callout_icon_sizep | O tamanho global para o ícone da chamada. |
| callout_transition_duration_ms | A duração da animação de abertura e fechamento (ms). |
| svg_icons | Lista de ícones do FontAwesome 6 usados neste componente de tema. |
Página de configuração por chamada:
| Configuração | Descrição |
|---|---|
| Tipo* | O tipo da chamada. Este identificador será usado na sintaxe da chamada: [!tipo] |
| Alias | Os aliases para a chamada, separados por |.Exemplo: cite|quote |
| Ícone | O ícone do fontawesome para a chamada. Você pode precisar adicioná-lo à configuração svg_icons se não estiver disponível no subconjunto padrão.Alternativamente, você pode fornecer um elemento SVG diretamente, por exemplo, <svg>...</svg> |
| Tamanho do ícone | O tamanho para o ícone da chamada. Nota: Use apenas valores CSS válidos, por exemplo, 1em, 16px, 1.5rem |
| Título | O título para a chamada. Se nenhum título for fornecido na chamada, esta configuração será usada. Nota: se ambos estiverem vazios, o título será o tipo da chamada. |
| Cor | A cor para a chamada. Isso será usado para o fundo, título e ícone. Nota: Use apenas códigos de cor hexadecimal, por exemplo, #027aff |
| Largura da borda | A largura da borda para a chamada. |
| Estilo da borda | O estilo da borda para a chamada. |
| Cor da borda | A cor da borda para a chamada. Importante: se você estiver usando funções CSS para produzir um valor alfa, como rgba, certifique-se de não usar espaços entre os valores, por exemplo, rgba(145,145,145,0.1) |
| Raio da borda | O raio da borda para a chamada. |
* Configuração obrigatória
Suporte ao editor de texto rico
Este componente agora suporta o editor de texto rico do Discourse, facilitando a criação, edição e organização de chamadas.
Criando chamadas
Você pode inserir chamadas de várias maneiras:
- Atalho de teclado: Ctrl + Q
- Botão da barra de ferramentas
- Regras de entrada:
/callout<:tipo>!!<tipo>
- Suporte a colagem
Vídeo
Editando chamadas
Os controles para editar uma chamada aparecem apenas quando você a seleciona antes.
-
Seletor de tipo
Ao clicar no ícone, um menu flutuante aparecerá. -
Título personalizado
Suporta formatação em linha e emojis -
Dobramento
Defina chamadas como colapsáveis. Pode ser acessado pelo menu de opções.
Vídeo
Controles de movimento
-
Desktop
- Arrastar e soltar usando um identificador
-
Dispositivos touch
- Mover chamadas para cima/baixo
- Aninhar dentro de chamadas adjacentes
- Desabilitado por padrão (pode ser habilitado nas opções)
Vídeo
Navegação por teclado
Melhora a navegação dentro de chamadas aninhadas:
- ← no início do título abre o seletor de tipo
- ↑ / ↓ dentro de áreas vazias cria/remove parágrafos
- Enter no título move o cursor para o corpo
Vídeo
Clique para inserir
- Clique em áreas vazias para criar um parágrafo
- Botões opcionais permitem inserir conteúdo dentro ou fora das chamadas
Vídeo
Roadmap
Planos futuros de desenvolvimento podem incluir:
- Autocompletar tipos ao digitar
Créditos
- @StefanoCecere – Solicitação de recurso, Style blockquotes as callouts in Obsidian
Seu site pode não funcionar porque um tema / componente tem erros.
