 |
Resumo | DiscoTOC permitirá que você gere uma tabela de conteúdos interativa para seus tópicos com um clique! |
 |
Pré-visualização | Pré-visualização no Discourse Theme Creator |
 |
Link do Repositório | https://github.com/discourse/DiscoTOC |
 |
Novo nos Temas do Discourse? | Guia para iniciantes sobre o uso dos Temas do Discourse |
Instale este componente de tema
Exemplos
Desktop
Mobile
Recursos
toc = tabela de conteúdos
-
Gera automaticamente toda a toc por meio de um botão no menu de engrenagem do compositor
-
A toc estará sempre na tela — rola com o conteúdo, como o widget de progresso do tópico
-
Conforme você rola para baixo nas seções do tópico, o elemento ativo na tabela de conteúdos será marcado como ativo (destaque azul)
-
adiciona atributos id aos títulos (você pode vincular a 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 vincular a ele)
-
Suporte a RTL (direita para esquerda)
-
As cores são baseadas na sua paleta de cores ativa atual
Como funciona?
Em resumo, ele procura por títulos nos tópicos que estão marcados para ter uma toc (por meio do botão do compositor) e, se for constatado que o tópico atual está marcado, 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ê pode 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 id. O componente verificará se os títulos já têm ids e, se tiverem, eles serão respeitados. Isso é útil se você criou manualmente uma toc.
Se os títulos não tiverem ids, ele gerará um id para cada título com base em seu texto (caracteres indesejados são removidos)
Depois de tudo isso, ele também adicionará um link ao lado de cada botão que leva diretamente àquela 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 da TOC no compositor |
| texto da toc no compositor | Texto que aparece na parte superior do painel de pré-visualização do compositor para indicar que o tópico terá uma tabela de conteúdos |
| categorias de TOC automática | Habilitar automaticamente a TOC em tópicos nestas categorias |
| tags de TOC automática | Habilitar automaticamente a TOC em tópicos com estas tags |
| TOC min heading | 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 | table of contents |
| insert_table_of_contents | Insert table of contents |
| jump_bottom | Jump to end |
| toggle_toc.show_timeline | Timeline |
| toggle_toc.show_toc | Contents |
O tema vem com três strings que você pode traduzir ou alterar.
table_of_contents: "table of contents"
isto é usado para o botão que abre a toc no celular
insert_table_of_contents: "Insert table of contents"
isto é usado como o texto para o botão da toc no menu de engrenagem do compositor
topic_will_contain_a_table_of_contents: "This topic will contain a table of contents"
Este é o texto que aparece na pré-visualização do compositor para indicar que uma toc será gerada para o tópico
Como eu crio uma toc?
- Escreva um tópico com títulos sintaticamente corretos
- Clique no botão da 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 imaginar, 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.
Depois de rolar para baixo da primeira postagem, a toc não rolará com você e o progresso do tópico será mostrado em vez disso enquanto você lê as respostas.
Então, as primeiras postagens recebem a toc, e as postagens subsequentes recebem o widget de progresso do tópico regular.
Isso acontece tanto no desktop quanto no celular.
Existem algumas desvantagens em usar este componente?
Nada de que eu tenha conhecimento, 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 jeito que estavam antes de você instalá-lo.
Limitações
Este componente assume o layout padrão do tópico. Como tal, ele 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 etapa posterior na forma de configurações do componente.
Créditos
Eu comecei com a biblioteca tocify.js do Greg Franko. No entanto, parece que ela não foi atualizada há muito tempo, então esta é essencialmente uma bifurcação (fork) que remove muitos recursos desnecessários, integra e estiliza o restante para o Discourse.
Então, não há solicitações externas e o tamanho total é de ~ 4kb gzip.
Grandes agradecimentos ao @erlend_sh por muitos feedbacks valiosos e ao @david por sua ajuda com as traduções.
Hospedado por nós? Os componentes de tema estão disponíveis para uso em nossos planos Pro, Business e Enterprise.