So passen Sie Ihr Docsie-Portal an, indem Sie Ihren eingebetteten Docsie-Code in Visual Studio Code einfügen.
Docsie bietet zahlreiche Anpassungsmöglichkeiten. In diesem Artikel zeige ich Ihnen, wie Sie mit der Anpassung Ihres Docsie-Portals beginnen können. Bitte beachten Sie, dass ich kein professioneller Entwickler oder Designer bin. Ihr technisches Team kann diese Tools nutzen, um weitaus schönere Docsie-Portale zu erstellen. Dies ist lediglich eine Schritt-für-Schritt-Anleitung, um ihnen den Einstieg zu erleichtern!
SCHRITT 1¶
Der erste Schritt ist, Ihren Code zu erhalten. Klicken Sie auf die drei Punkte in der oberen rechten Ecke bei Ihrem Konto. Dies führt Sie zum Einstellungs-Dashboard von Docsie.
SCHRITT 2¶
Klicken Sie dann auf der linken Seite auf die Schaltfläche "Deployment".
In den Deployment-Einstellungen haben Sie die Möglichkeit, ein Wissensportal über die Docsie-Cloud zu erstellen oder ein Portal auf Ihrer eigenen Unternehmenswebsite einzurichten. Letzteres erfolgt durch einen Code, den Sie in Ihr HTML einfügen können, um mit der Gestaltung zu beginnen. Klicken Sie einfach auf "Configure a new deployment +".
SCHRITT 3¶
Klicken Sie auf den Reiter "Custom deployment", geben Sie Ihre Website unter "Deployment URL" ein und klicken Sie dann auf "Create web portal".
Scrollen Sie anschließend nach unten, finden Sie Ihr Portal am Ende der Portalliste und klicken Sie auf "Get deployment script".
SCHRITT 4¶
Kopieren Sie nun Ihr Skript und wechseln Sie zu Visual Studio Code!
Weitere Informationen zum Einbettungscode finden Sie in meinem Blog über die Veröffentlichung Ihrer Dokumentation mit eingebettetem Code hier.
Erstellen Sie in Visual Studio Code eine index.html-, index.css- und index.js-Datei (falls Sie noch keine haben). Öffnen Sie Ihre HTML-Datei und fügen Sie Ihren Code im Body-Bereich ein (unter dem </head>-Tag).
SCHRITT 5¶
Als Nächstes erstellen wir einen "Basic Style".
Mehr Informationen zur Anwendung grundlegender Stile für Ihre Docsie-Portale finden Sie unter https://help.docsie.io/?doc=/publish-documentation-portal/docsie-styling-guide/base-style/
In meinem Beispiel habe ich Folgendes zu meinem HTML hinzugefügt. Wie Sie sehen können, habe ich einen Firmennamen-Link hinzugefügt und leichte CSS-Änderungen vorgenommen.
Mein Ergebnis sieht sehr einfach aus, aber ich wollte Ihnen das Potenzial zeigen, das Ihr technisches Team nutzen kann, um Docsie-Wissensportale aufzuwerten und an das Erscheinungsbild Ihrer Marke anzupassen. Bedenken Sie, dass Sie möglicherweise einen anderen Stil und andere Farben bevorzugen. In den meisten Fällen fügen unsere Nutzer ihr Logo mit Websitelinks ein und platzieren Navigationsleisten am oberen Rand, damit ihr Docsie-Wissensportal nahtlos in ihre Unternehmenswebsites passt und dem Erscheinungsbild ihrer aktuellen Seiten entspricht.
SCHRITT 6¶
Im letzten Schritt habe ich einige Stiländerungen mit diesem Code vorgenommen:
<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>
Ich habe ihn unter dem letzten div-Tag des "Basic Style" eingefügt.
Das Ergebnis meiner einfachen Stiländerungen sieht so aus:
Jetzt haben Sie alle nötigen Werkzeuge zur Hand. Probieren Sie es selbst aus und experimentieren Sie mit verschiedenen Änderungen, um ansprechende Wissensportale zu erstellen, auf die Sie stolz sein können! Ich bin sicher, dass Ihre Wissensportale deutlich eleganter aussehen werden als meines. Also, probieren Sie es aus und vor allem: Haben Sie Spaß dabei!