Come personalizzare il tuo portale Docsie inserendo il codice incorporato in Visual Studio Code¶

Docsie offre numerose possibilità di personalizzazione. In questo articolo ti guiderò attraverso i passaggi necessari per iniziare a personalizzare il tuo portale Docsie. Tieni presente che non sono uno sviluppatore o designer professionista, e il tuo team tecnico potrà utilizzare questi strumenti per creare portali Docsie molto più eleganti di quanto io possa fare. Questa è semplicemente una guida passo passo per aiutarli a iniziare!

STEP 1¶

Il primo passo è ottenere la tua riga di codice. Ecco come si fa. Trova il tuo account nell'angolo in alto a destra dove ci sono tre puntini e fai clic. Ti porterà alla dashboard delle impostazioni di Docsie.

STEP 2¶

Successivamente, fai clic sul pulsante 'Deployment' sul lato sinistro.

Una volta nelle impostazioni di deployment, avrai la possibilità di creare un portale di conoscenza tramite il cloud Docsie, oppure di creare un portale sul sito web della tua azienda utilizzando una riga di codice da aggiungere al tuo HTML per iniziare il processo di styling. Basta semplicemente cliccare su 'Configure a new deployment +'.

STEP 3¶

Ora fai clic sulla scheda 'Custom deployment', inserisci il tuo sito web in 'Deployment URL' e poi clicca su 'Create web portal'.

Una volta fatto, assicurati di scorrere verso il basso per trovare il tuo portale in fondo all'elenco dei portali e poi clicca su 'Get deployment script'.

STEP 4¶

Ora copia il tuo script e passiamo a Visual Studio Code!

Se hai bisogno di maggiori informazioni su come ottenere il codice incorporato dal tuo Docsie, consulta il mio blog sulla pubblicazione della documentazione con il codice incorporato qui.

In Visual Studio Code, crea un file (a meno che tu non ne abbia già uno pronto) per index.html, index.css e index.js. Una volta fatto, apri il tuo HTML e incolla il codice nel corpo del tuo html (sotto il tag </head>).

STEP 5¶

Per il quinto passo dobbiamo creare uno 'stile base'.

Puoi trovare maggiori informazioni su come applicare lo stile base ai tuoi portali Docsie tramite il nostro link https://help.docsie.io/?doc=/publish-documentation-portal/docsie-styling-guide/base-style/

Nel mio esempio ho aggiunto questo al mio HTML. Come puoi vedere, ho inserito un link con il nome dell'azienda e ho fatto alcune modifiche CSS per personalizzarli.

I miei risultati sembrano molto basilari, ma volevo mostrarti il potenziale che il tuo team tecnico può sfruttare per migliorare i portali di conoscenza Docsie e creare portali che si adattino all'aspetto e alle sensazioni del tuo brand. Tieni presente che potresti avere uno stile e colori diversi; in effetti, nella maggior parte dei casi, i nostri utenti inseriscono il loro logo incorporato con i link del loro sito web, aggiungono barre di navigazione in alto in modo che il loro portale di conoscenza Docsie si integri perfettamente e naturalmente nei siti web aziendali e si adatti all'ambiente e al CSS dei loro siti attuali.

STEP 6¶

Infine, l'ultimo passo che ho fatto è stato aggiungere alcune modifiche di stile tramite questo testo:

  <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>

L'ho incollato sotto l'ultimo tag div dello 'stile base'.

E i risultati per le mie modifiche di stile molto basilari sono stati questi:

Ora che hai tutti gli strumenti a tua disposizione, provaci tu stesso e scopri come ci si sente a modificare le cose e creare bellissimi portali di conoscenza di cui puoi essere orgoglioso! Sono sicuro al 100% che i tuoi portali di conoscenza avranno un aspetto molto più elegante dei miei! :) Quindi provaci e soprattutto divertiti!