Hur du anpassar din Docsie-portal genom att infoga din inbäddade Docsie-kod i Visual Studio Code.
Docsie har många anpassningsmöjligheter. I den här artikeln guidar jag dig genom stegen du behöver ta för att börja anpassa din Docsie-portal. Tänk på att jag inte är en professionell utvecklare eller designer. Ditt tekniska team kan använda dessa verktyg för att skapa betydligt snyggare Docsie-portaler än jag kan. Detta är bara en steg-för-steg-guide för att hjälpa dem komma igång!
STEG 1¶
Första steget är att hämta din kod. Så här gör du. Hitta ditt konto i det övre högra hörnet där det finns tre prickar och klicka på dem. Det tar dig till Docsies inställningspanel.
STEG 2¶
Klicka sedan på knappen "Deployment" på vänster sida.
När du är i deployment-inställningarna kan du skapa en kunskapsportal via Docsie Cloud eller på din egen företagswebbplats genom att använda en kodrad som du kan lägga till i din HTML för att börja anpassa. Detta gör du enkelt genom att klicka på "Configure a new deployment +".
STEG 3¶
Klicka sedan på fliken "Custom deployment", skriv in din webbplats i "Deployment URL" och klicka på "Create web portal".
När det är klart, scrolla ner och hitta din portal längst ner i portallistan och klicka på "Get deployment script".
STEG 4¶
Kopiera nu ditt skript och låt oss hoppa till Visual Studio Code!
Om du behöver mer information om hur du får den inbäddade koden från din Docsie, kolla in min blogg om hur du publicerar din dokumentation med inbäddad kod här.
Skapa nu en fil i Visual Studio Code (om du inte redan har en) för index.html, index.css och index.js. När det är klart, öppna din HTML och klistra in din kod i body-delen av din html (under </head>-taggen).
STEG 5¶
I steg 5 behöver vi skapa en "Basic style".
Du hittar mer information om hur du tillämpar grundläggande styling på dina Docsie-portaler via vår länk här https://help.docsie.io/?doc=/publish-documentation-portal/docsie-styling-guide/base-style/
I mitt exempel har jag lagt till detta i min HTML. Som du ser har jag lagt till en företagsnamn-länk och gjort några mindre CSS-ändringar.
Mitt resultat ser ganska enkelt ut, men jag ville visa potentialen som ditt tekniska team har för att förbättra Docsie-kunskapsportaler och skapa portaler som matchar ert varumärkes utseende och känsla. Kom ihåg att du kan ha en annan stil och färger. I de flesta fall lägger våra användare till sin logotyp tillsammans med sina webbplatslänkar och navigeringsfält högst upp så att deras Docsie-kunskapsportal passar sömlöst in på företagets webbplatser och matchar miljön och CSS:en på deras befintliga sajter.
STEG 6¶
I det sista steget lade jag till några stiländringar med följande kod:
<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>
Jag klistrade in det under den sista div-taggen i "basic style".
Och resultaten för mina mycket enkla stiländringar blev detta:
Nu när du har alla verktyg till ditt förfogande, prova själv och se hur det känns att ändra saker och skapa vackra kunskapsportaler som du kan vara stolt över! Jag är 100% säker på att dina kunskapsportaler kommer att se mycket snyggare ut än mina! :) Så prova och ha framför allt kul med det!