 |
Resumo | DiscoTOC permitirá que você gere uma tabela de conteúdos interativa para seus tópicos com um único clique! |
 |
Pré-visualização | Pré-visualizar no Discourse Theme Creator |
 |
Link do Repositório | https://github.com/discourse/DiscoTOC |
 |
Novo em Temas do Discourse? | Guia para iniciantes sobre o uso de Temas do Discourse |
Instalar este componente de tema
Amostras
Desktop
Mobile
Funcionalidades
toc = tabela de conteúdos
-
Gera automaticamente toda a toc via um botão no menu de engrenagem do compositor
-
A toc sempre estará na tela - rola com o conteúdo como o widget de progresso do tópico
-
À medida que você rola passando por seções no tópico, o elemento ativo na tabela de conteúdos será definido como ativo (destaque azul)
-
Adiciona atributos de id aos títulos (você pode linkar para uma seção específica de outro tópico/postagem)
-
Clicar em qualquer link na toc instruirá o navegador a navegar para a seção relevante (rolagem suave)
-
Adiciona um link copiável ao lado de cada título (se você quiser linkar para ele)
-
Suporte a RTL
-
As cores são baseadas na sua paleta de cores ativa atual
Como funciona?
Em resumo, ele procura por títulos em tópicos que estão marcados para ter uma toc (via o botão do compositor) e, se resultar que o tópico atual está marcado, então ele pega todos os títulos e os coloca na toc (aninhados na ordem dos níveis de título) - isso significa que seu markdown deve estar sintaticamente correto.
# título 1
## título 2
### título 3
#### título 4
##### título 5
###### título 6
Você é livre para voltar e avançar nos níveis de título, mas a ordem deve estar correta
# título 2
## título 3
## título 3
### título 4
## título 3
# título 2
etc...
Para que os links na toc funcionem, os títulos devem ter atributos de id. O componente verificará se os títulos já possuem ids e, se tiverem, eles serão respeitados. Isso é útil se você já criou uma toc manualmente.
Se os títulos não tiverem ids, então ele gerará um id para cada título baseado em seu texto (caracteres indesejados são removidos)
uma vez que tudo isso seja feito, ele também adicionará um link ao lado de cada botão que linka diretamente para aquela seção:
Configurações
| Nome | Descrição |
|---|---|
| nível de confiança mínimo para criar TOC | O nível de confiança mínimo que um usuário deve ter para ver o botão TOC no compositor |
| texto toc do compositor | Texto que aparece no topo do painel de pré-visualização do compositor para indicar que o tópico terá uma tabela de conteúdos |
| categorias toc automática | Ativar automaticamente TOC em tópicos nestas categorias |
| tags toc automática | Ativar automaticamente TOC em tópicos com estas tags |
| TOC min título | Número mínimo de títulos em um tópico para que a tabela de conteúdos seja exibida |
Traduções
| Tradução | Padrão |
|---|---|
| table_of_contents | tabela de conteúdos |
| insert_table_of_contents | Inserir tabela de conteúdos |
| jump_bottom | Ir para o final |
| toggle_toc.show_timeline | Linha do tempo |
| toggle_toc.show_toc | Conteúdos |
O tema vem com três strings que você pode traduzir ou alterar.
table_of_contents: "tabela de conteúdos"
isto é usado para o botão que abre a toc no mobile
insert_table_of_contents: "Inserir tabela de conteúdos"
isto é usado como o texto para o botão toc no menu de engrenagem do compositor
topic_will_contain_a_table_of_contents: "Este tópico conterá uma tabela de conteúdos"
Este é o texto que aparece na pré-visualização do compositor para indicar que uma toc será gerada para o tópico
Como crio uma toc?
- Escreva um tópico com títulos sintaticamente corretos
- Clique no botão toc no menu de engrenagem (aparece apenas ao criar um tópico regular - respostas e MPs são ignorados
- Lucro.
O que acontece com o widget de progresso do tópico quando um tópico tem uma toc?
Como você provavelmente pode adivinhar, não há espaço para mostrar ambos ao mesmo tempo, então a maneira como este componente funciona é a seguinte
em um tópico com uma toc, o widget de progresso do tópico é ocultado enquanto a primeira postagem está na tela, e você vê a toc em vez disso.
Assim que você rolar passando a primeira postagem, a toc não rolará com você e o progresso do tópico será exibido em vez disso enquanto você lê quaisquer respostas.
Então, as primeiras postagens recebem a toc, e as postagens subsequentes recebem o widget regular de progresso do tópico.
Isso acontece tanto no desktop quanto no mobile.
Existem desvantagens ao usar este componente?
Nada que eu saiba, todas as alterações são feitas no lado do cliente. Então você pode facilmente remover o componente e suas postagens voltarão ao estado em que estavam antes de você instalá-lo.
Limitações
Este componente assume o layout padrão de tópicos. Como tal, não funcionará com temas que modificam esse layout, como o tema Vincent. O suporte para temas populares que modificam o layout virá em uma fase posterior na forma de configurações de componente.
Crédito
Comecei com a biblioteca tocify.js de Greg Franko. No entanto, parece que não foi atualizada há algum tempo, então isso é essencialmente um hard-fork que remove muitas funcionalidades desnecessárias, integra e estiliza o restante para o Discourse.
Portanto, não há solicitações externas e o tamanho total é de ~ 4kb gzip.
Muito obrigado a @erlend_sh por muitos feedbacks valiosos e a @david por sua ajuda com as traduções.
Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Pro, Business e Enterprise.
obrigado!
