CSS e JavaScript personalizados

Planos que suportam o uso de CSS e JS personalizados no site da base de conhecimento

Trechos de CSS

Um snippet é um pedaço de código reutilizável, e um snippet CSS "CSS (Cascading Style Sheets) + Snippet" é um conjunto de utilitários e exemplos interativos para CSS3. Ele ajuda a criar os modelos de layout usados com frequência. Esses são blocos de código pré-escritos que os desenvolvedores podem inserir rapidamente em seus projetos para obter funcionalidades específicas sem escrever o código do zero.

Esses snippets ajudam a simplificar o processo de desenvolvimento, economizando tempo, reduzindo erros e garantindo consistência em toda a base de código.

Um exemplo de um snippet CSS:

.shadow {
 box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 }

O snippet CSS acima pode fazer com que bordas e imagens se destaquem em sua página.

Customizando CSS usando snippets de CSS

Para personalizar o CSS usando snippets de CSS, siga as etapas abaixo:

1. Navegue até Configurações () > site da base de conhecimento > Personalizar site > CSS e JavaScript personalizados no portal da base de conhecimento.

2. Na guia CSS , você pode adicionar trechos de código de duas maneiras:

   um. Insira o trecho de código na área de texto.

   b. Clique em Adicionar snippets de código para adicionar os snippets pré-carregados (7 snippets pré-carregados).

3. Uma vez feito isso, clique em Salvar ou Ctrl + S para salvar as alterações feitas.

   Para mais informações, leia o artigo sobre CSS Snippets.

Trechos de JavaScript

Um snippet JavaScript é um pedaço de código reutilizável escrito em JavaScript, normalmente usado para executar tarefas específicas ou adicionar funcionalidade a uma página da web. Esses snippets geralmente são pequenos, focados e projetados para serem facilmente inseridos em bases de código existentes.

Personalizando JavaScript usando snippets JavaScript personalizados

Para personalizar o JavaScript usando snippets JavaScript personalizados, siga as etapas abaixo:

1. Navegue até Configurações () > site da base de conhecimento > Personalizar site > CSS e JavaScript personalizados no portal da base de conhecimento.

2. No painel de navegação esquerdo, clique na guia JavaScript e cole o código desejado no snippet JavaScript.

   Por exemplo, para mover os artigos relacionados acima da seção de comentários no site da base de dados de conhecimento, cole o código a seguir no snippet JavaScript.  

panel.onload = function () {
$(".content_block_text" ).append("<div class=\"sperator\"><hr></div>");
$('.related-articles-container').appendTo('.content_block_text') 
}

4. Uma vez feito isso, clique em Salvar.

Solucionando problemas

Adaptando o código personalizado para o modelo de aplicativo de página única (SPA) no Document360

Com a transição do site do Document360 para um modelo de SPA (Aplicativo de Página Única), qualquer JavaScript personalizado dependente de eventos de atualização de página pode não funcionar mais conforme o esperado. Isso ocorre porque os SPAs atualizam apenas o conteúdo do artigo, não a página inteira.

Abaixo estão as áreas em que os usuários podem injetar JavaScript personalizado no portal do Document360:

1. JavaScript personalizado

   Navegue até Configurações () > site da base de conhecimento > Personalizar site > CSS e JavaScript personalizados no portal da base de conhecimento.

2. Integrações HTML personalizadas
   Navegue até Configurações () > site da base de conhecimento > Integrações > HTML personalizado no portal da base de conhecimento.

Solução recomendada

Para garantir a compatibilidade com o modelo SPA, atualize seu JavaScript personalizado para usar o articleload evento. Esse evento é acionado quando o conteúdo do artigo é atualizado, garantindo que seus scripts funcionem perfeitamente na nova arquitetura.

1. Substitua qualquer código que dependa de eventos de atualização de página por uma assinatura do articleload evento.

2. Use o seguinte snippet de código para adaptar seus scripts personalizados:

   panel.addEventListener('articleload', function() {
     // Your custom JavaScript code here
   });

3. Teste seus scripts atualizados para confirmar se eles funcionam corretamente no ambiente SPA.

   Se o problema persistir após seguir essas etapas, entre em contato com a equipe de suporte do Document360 para obter mais assistência: Entre em contato com o suporte do Document360