igniteui docfx

Ui Docfx Site Builder Ignite Ignite

Dieses Projekt verwendet Node.js und Gulp als Build -Tool, um die Entwicklung der INGEITE UI DOCFX -Proben -Site für die Ignite UI für Angular zu beschleunigen.

Voraussetzungen

1. Docfx
2. Node.js
3. Net SDK 6.0 oder höher

Erste Schritte

Installieren von DOCFX

Um DOCFX zu installieren, stellen Sie es als DotNet -Tool wieder her - Installieren Sie die .NET -Lokal -Tools, die für das aktuelle Verzeichnis im Bereich des aktuellen Verzeichnisses enthalten sind:

dotnet tool restore

HINWEIS : Durch das Durchführen npm install werden DOTNET -Toolabhängigkeiten auch als postinstall -Schritt wiederhergestellt.

Installation der Abhängigkeiten von Node.js:

Wenn Sie NPM verwenden, rennen Sie:

npm install

Wenn Sie Garn verwenden, rennen Sie:

yarn install

Starten des Entwicklungsservers

Der Build -Prozess hängt von der Umgebungsvariablen NODE_ENV ab, um die richtige URL für die Winkelproben festzulegen. Weisen Sie entweder development , staging oder production NODE_ENV zu.

Sie können eine .env -Datei unter dem Stamm des Projekts erstellen und NODE_ENV beispielsweise durch die Zuweisung von Umgebungen festlegen.

 NODE_ENV=development

Um den Server zu starten, führen Sie aus:

für Englisch:

npm start -- --lang en

Für Japanse:

npm start -- --lang jp

für Koreanisch:

npm start -- --lang kr

Der Befehl nimmt ein aditiertes Argument -lang [en | JP | KR], um Englisch, Japanisch oder koreanische Version zu dienen.

Aufbau des statischen Standorts

Für Englisch:

npm run build -- --lang en

Für Japanisch:

npm run build -- --lang jp

Für Koreanisch:

npm run build -- --lang kr

Das Build -Skript erzeugt einen Ordner namens _Site in der Wurzel des jeweiligen Projekts. Zum Beispiel lebt für Englisch die statische Seite unter en/_site ;

Gebäude für Inszenierung und Produktion

Der Gebäudebefehl ist dem oben genannten Schritt sehr ähnlich. Um den Standort zur Inszenierung zu erstellen, rennen Sie:

npm run build-staging --lang en

Der Befehl bauen für die Inszenierung lautet:

npm run build-production --lang jp

Verwenden von explizitem Redakteur für Live-Bearbeitungsmuster

Das explizite Attribut für Code-View-Elemente ermöglicht es, explizit Live-Editor für das bestimmte Beispiel festzulegen und "CSB" und "Stackblitz" als Werte zu unterstützen.

 < code-view explicit-editor =" csb " ... > </ code-view > 

 < code-view explicit-editor =" stackblitz " ... > </ code-view > 

TOC -Themenbezeichnungen einschließen

Öffnen Sie '[en | JP | KR] Komponenten toc.yml 'Datei für die spezifische Sprachversion. Jedes TOC -Thema enthält Parameter für Name und HREF sowie einen optionalen Label -Parameter. Ab Version 3.5.1 der IgniteUi-Docfx-Template umfassen die unterstützten Etiketten 'neu', 'Aktualisiert,' 'Vorschau' und 'Beta'. Um ein gewünschtes Etikett hinzuzufügen, geben Sie einfach ihren Namen an und setzen Sie ihren Wert auf True.

Beispiel:

 - name: Update guide
  href: general/update-guide.md
  updated: true

Zusammenklappbare Code -Ausschnitte

Befolgen Sie die folgenden Schritte, um auf Dokumentationswebsites zusammenklappbare Code -Snippets zu generieren und anzuzeigen:

1. Erstellen Sie einen Abschnitt <Div> mit der Klasse "Fancy-Details".

2. Fügen Sie dem erstellten Abschnitt <Div> ein <Zusammenfassung> Element hinzu.

3. Fügen Sie den Zusammenfassungstext hinzu, der den Code -Snippet -Header zum <Summrary> Element darstellt.

4. Fügen Sie dem Abschnitt "Erstellte <Div> ein <code> Element hinzu.

5. Fügen Sie den Code -Snippet zum <Code> -Element hinzu.

6. Beispiel:

 < div class =" fancy-details " >
    < summary > Example of a successful response body: </ summary >
    < code >
        {
            "id": "{123456}_repo",
            "modified": "2023-02-03T14:07:34.0000000",
            "created": "2023-02-03T14:07:34.0000000",
            "name": "Marketing",
            "user": {
                "id": "{123456}_u ",
                "name": "Teddy Mitkova"
            },
            "dashboardSections": [
                {
                    "id": "{123456}_f",
                    "name": "May"
                }
            ]
        }
    </ code >
</ div >