Como personalizar o seu portal Docsie injetando o seu código Docsie incorporado no Visual Studio Code
Product Documentation Documentation Portals

Como personalizar o seu portal Docsie injetando o seu código Docsie incorporado no Visual Studio Code

Tal F.

Tal F.

July 05, 2021
(Updated: October 25, 2025)

Como personalizar o seu portal Docsie injetando o seu código Docsie incorporado no Visual Studio Code.


Share this article:

O que vai aprender

  • Learn how to access and obtain the Docsie embed code from your account settings
  • Understand the process of creating a custom deployment for your Docsie knowledge portal
  • Implement the Docsie embed code into Visual Studio Code HTML files
  • Apply basic styling customizations to personalize your Docsie documentation portal
  • Master the integration of Docsie documentation into your company's website

Como personalizar o seu portal Docsie através da inserção do código Docsie no Visual Studio Code.

O Docsie oferece muitas possibilidades de personalização. Neste artigo, vou orientá-lo sobre os passos necessários para começar a personalizar o seu portal Docsie. Tenha em mente que não sou um programador ou designer profissional, e que a sua equipa técnica pode utilizar estas ferramentas para criar portais Docsie muito mais elegantes do que eu. Este é apenas um guia passo a passo para ajudá-los a começar!

PASSO 1

O primeiro passo é obter a sua linha de código. Encontre a sua conta no canto superior direito onde estão os três pontos e clique neles. Isto levá-lo-á ao painel de definições do Docsie.

PASSO 2

A seguir, clique no botão 'Deployment' no lado esquerdo.

Uma vez nas definições de implementação, terá a possibilidade de criar um portal de conhecimento através da nuvem Docsie, ou criar um portal de conhecimento no website da sua empresa utilizando uma linha de código que pode adicionar ao seu HTML para iniciar o processo de estilização. Isto é feito simplesmente clicando em 'Configure a new deployment +'.

PASSO 3

A seguir, clique no separador que diz 'Custom deployment', escreva o seu website em 'Deployment URL' e depois clique em 'Create web portal'.

Depois de concluído, certifique-se de descer e encontrar o seu portal no final da lista de portais e depois clique em 'Get deployment script'.

PASSO 4

Agora copie o seu script e vamos passar para o Visual Studio Code!

Se precisar de mais informações sobre como obter o código incorporado do seu Docsie, consulte o meu artigo sobre publicação de documentação com código incorporado aqui.

Agora, no Visual Studio Code, crie um ficheiro (a menos que já tenha um ficheiro pronto) para index.html, index.css e index.js. Depois, abra o seu HTML e cole o seu código no corpo do HTML (abaixo da tag </head>).

PASSO 5

Agora para o passo 5, precisamos criar um 'Estilo Básico'.

Pode encontrar mais informações sobre como aplicar estilos básicos aos seus portais Docsie através do nosso link https://help.docsie.io/?doc=/publish-documentation-portal/docsie-styling-guide/base-style/

No meu exemplo, adicionei isto ao meu HTML. Como pode ver, adicionei um link com o nome da empresa e fiz algumas alterações ligeiras no CSS.

Os meus resultados parecem muito básicos, mas queria mostrar-lhe o potencial que a sua equipa técnica tem para melhorar os portais de conhecimento Docsie e criar portais que correspondam à aparência e sensação da sua marca. Lembre-se que pode ter um estilo e cores diferentes; na maioria dos casos, os nossos utilizadores colocam o seu logótipo incorporado com links do seu site, adicionam barras de navegação no topo para que o seu portal de conhecimento Docsie se integre perfeitamente nos sites das suas empresas e corresponda ao ambiente e CSS dos seus sites atuais.

PASSO 6

O último passo foi adicionar algumas alterações de estilo através deste texto:

  <style>
    :root {
        --docsie-font-family: garamond;
        --docsie-font-family-head: inherit;
        --docsie-font-family-mono: monospace;
        --docsie-hue-primary: 200;
        --docsie-hue-gray: var(--docsie-hue-primary);
        --docsie-sat-primary: 100%;

        --docsie-page-width: 1800px;   
        --docsie-notice-background: var(--docsie-color-primary-darker);
    }
    </style>

Colei-o abaixo da última tag div do 'estilo básico'.

E os resultados das minhas alterações de estilo muito básicas foram estes:

Agora que tem todas as ferramentas à sua disposição, experimente por si mesmo e veja como é alterar as coisas e criar belos portais de conhecimento dos quais pode orgulhar-se! Estou 100% certo de que os seus portais de conhecimento ficarão muito mais elegantes que o meu! :) Portanto, experimente e, acima de tudo, divirta-se!

Related Articles

Documentação Digital: Melhores Práticas para Informar e Inspirar

Para impulsionar a facilidade e consistência, as empresas devem seguir as melhores práticas de documentação digital. Isto abrange o design, a formatação, a escolha de tipos de ficheiros e a governação da documentação digital.

Both articles cover Html and Css

Ready to Transform Your Documentation?

Discover how Docsie's powerful platform can streamline your content workflow. Book a personalized demo today!

Book Your Free Demo
4.8 Stars (100+ Reviews)
Tal F.

Tal F.

VP of Customer Success @ Docsie.io