🇨🇳 DiscoTOC Tabela de Conteúdo Automática

|||
-|-|-|
:information_source: | Visão Geral | O DiscoTOC permite que você crie uma lista de conteúdo para seus tópicos com um clique.
| :eyeglasses: | Prévia | Beginner's guide to using Discourse Themes (Por favor, acesse o link em uma nova aba) |
:hammer_and_wrench: | Link do Repositório | https://github.com/discourse/DiscoTOC
:open_book: | Não familiarizado com os Temas do Discourse? | Por favor, visite a página oficial para o Guia para Iniciantes no Uso de Temas do Discourse

Exemplo

Desktop

Mobile

Funcionalidades

toc = table of contents (índice)

  • Crie uma lista de conteúdo (TOC) com um clique através do botão de configuração acima do menu, com base no conteúdo atual.
  • O TOC será exibido continuamente na página – o conteúdo de rolagem e os links do tópico estão sincronizados.
  • Quando você rolar o conteúdo do tópico na página, o TOC correspondente será destacado (exibido em verde).
  • Adicione atributos aos títulos (você pode vincular a conteúdo específico de outros tópicos/posts).
  • Clicar nos links do TOC navegará o navegador para a posição correspondente no conteúdo principal (rolagem sincronizada).
  • Adicione um link copiável para cada título (se desejar).
  • Suporte a RTL.
  • O esquema de cores é baseado no esquema de cores que você está usando atualmente.

Como Funciona

Por padrão, os títulos do conteúdo atual serão marcados como TOC (através do botão do composer para realizar a operação acima), e se o seu tema atual estiver marcado, ele também será convertido em TOC (isso está relacionado à hierarquia do título atual). Todos os títulos de conteúdo serão convertidos em TOC – isso significa que a configuração do seu título de arquivo MD deve estar correta; se a hierarquia do seu título estiver incorreta, o resultado da conversão também estará incorreto.

# heading 1
## heading 2
### heading 3
#### heading 4
##### heading 5
###### heading 6

Você pode ajustar a hierarquia conforme necessário, mas deve garantir a correção da hierarquia.

# heading 2
## heading 3
## heading 3
### heading 4
## heading 3
# heading 2

etc...

Para garantir que os links funcionem, todos os títulos devem ter um atributo Id.

Este componente verificará automaticamente o Id do título; se o título existir, o componente funcionará de forma mais eficaz. Além disso, o Id é mais útil ao criar tópicos manualmente.

Se o seu título não tiver um Id, este componente criará automaticamente um Id com base no conteúdo do título (caracteres desnecessários serão ignorados).

Quando todo o conteúdo acima for concluído, o TOC criará um link para o conteúdo principal com base nos títulos, como mostrado abaixo:

Configurações

Este componente tem apenas uma configuração, que é o ícone do TOC (esta imagem será usada nas configurações posteriores; o oficial não recomenda modificar este ícone.)

Tradução e Localização

Este componente requer pouca tradução, apenas os 3 campos a seguir precisam ser traduzidos.

table_of_contents: "table of contents (índice)"

Isso será exibido ao abrir o TOC em dispositivos móveis.

insert_table_of_contents: "Insert table of contents (inserir índice)"

Isso será exibido quando o TOC for inserido na página do tópico.

topic_will_contain_a_table_of_contents: "This topic will contain a table of contents (este tópico conterá um índice)"

Isso será exibido na página de visualização ao editar o conteúdo do tópico.

Como Criar um Título

  1. Títulos de conteúdo precisam ser criados com a sintaxe correta.
  2. Clique na opção de menu na página (isso só é exibido para tópicos e posts regulares; esta opção não será exibida se você estiver respondendo ou enviando mensagens privadas).
  3. Inserir na página do tópico.

O que Acontece com o Widget de Progresso de Leitura Quando Usamos o TOC

Como você pode saber, não é possível exibir o progresso de leitura e o TOC simultaneamente na página.

A solução oficial é que, se o TOC existir ao ler o primeiro post, apenas o TOC será exibido na página, e o widget de progresso de leitura será ignorado e não exibido.

Quando você rolar além do primeiro post, o TOC não será exibido; em vez disso, uma barra de progresso de leitura de todo o conteúdo será exibida.

Em resumo, o TOC é válido apenas para o primeiro post; posts subsequentes usarão a barra de progresso de leitura.

A exibição é a mesma para dispositivos móveis e desktops.

Quais Problemas Podem Ocorrer ao Usar Este Componente

De acordo com os autores e o oficial, nenhum problema foi encontrado ao usar este componente.

Toda a exibição de conteúdo é feita no lado do cliente, em termos técnicos, todo o conteúdo é feito no front-end, portanto, o fornecimento de dados do back-end não é afetado.

Quando você desabilita este componente, todo o conteúdo voltará ao normal.

Limitações de Uso

Este componente usa o layout de tema padrão.

Se o seu layout modificar o uso de títulos, este componente TOC não funcionará corretamente.

Por exemplo, é sabido que este componente não funciona corretamente com o tema Vincent.

O suporte para temas populares é a próxima consideração e desafio para o plugin oficial.

Desenvolvedor

O autor oficial desenvolveu com base na biblioteca tocify.js de Greg Franko.

No entanto, infelizmente, esta biblioteca não é atualizada há muito tempo, então o autor removeu muito conteúdo desnecessário, recursos e código desta biblioteca e integrou os recursos relevantes ao Discourse.

O tamanho total do componente é de aproximadamente ~ 4kb (com compressão gzip).

O autor também agradece a @erlend_sh por muitas boas sugestões e a @david por ajudar com a tradução.

O que Precisa Ser Melhorado (TODO)

  • Exibição em tempo real do TOC durante a edição (isso pode consumir muitos recursos)
  • Suporte para temas populares para exibir o TOC
  • Copiar automaticamente o link do botão do título para a área de transferência ao clicar nele.

O autor afirma sobre o lançamento desta versão: este é um lançamento inicial. Se você tiver alguma dúvida ou sugestão para este componente, sinta-se à vontade para entrar em contato diretamente com o autor original.

Para as instruções oficiais e links sobre este componente, bem como discussões, consulte: DiscoTOC - automatic table of contents.

Ajuda Técnica (Chinês)

Se você tiver outras dúvidas ou precisar de ajuda, visite nosso site (Chinês): iSharkFly - 飞鲨

1 curtida