diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 000000000..191718b49 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,5 @@ +Please makes sure these boxes are checked before submitting your PR, thank you! + +* [ ] Make sure you are merging your commits to `master` branch. +* [ ] Add some descriptions and refer relative issues for you PR. +* [ ] DO NOT include files inside lib directory. diff --git a/CHANGELOG.md b/CHANGELOG.md index 7f42709b1..7982c14b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,11 @@ +# 3.4.3 / 2017-03-16 +================== + + * Add ability to ignore headers when generating toc ([#127](https://github.com/QingWei-Li/docsify/issues/127) [@christopherwk210](https://github.com/christopherwk210)) + * fix external-script not inserting script at right place [@Leopoldthecoder](https://github.com/Leopoldthecoder) + * add German docs [@jrappen](https://github.com/jrappen) + # 3.4.2 / 2017-03-11 * feat(emojify): add no-emoji option diff --git a/README.md b/README.md index 6b722a62d..6c84b449e 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@
@@ -39,12 +39,12 @@ Create an `index.html`. - + - + ``` diff --git a/dev.html b/dev.html index d928711e5..4b31b4d0b 100644 --- a/dev.html +++ b/dev.html @@ -7,20 +7,23 @@ + - diff --git a/docs/_navbar.md b/docs/_navbar.md new file mode 100644 index 000000000..0957c699e --- /dev/null +++ b/docs/_navbar.md @@ -0,0 +1,4 @@ +- :uk: + - [:cn: 中文](/zh-cn/) + - [:de: German](/de-de/) + - [:uk: English](/) diff --git a/docs/de-de/README.md b/docs/de-de/README.md new file mode 100644 index 000000000..303ac79a0 --- /dev/null +++ b/docs/de-de/README.md @@ -0,0 +1,27 @@ +## docsify + +> Ein magischer Generator für Dokumentationen. + +## Was ist das + +**docsify** generiert deine Dokumentationswebseite zeitgleich (mit der Darstellung). Im Gegensatz zu GitBook, werden keine statischen HTML Seiten generiert. Stattdessen, werden im Hintergrund Markdown Dateien geladen und umgewandelt, und als Webseite dargestellt. Alles, was du brauchst, ist eine Datei namens `index.html`, um sie über [GitHub Pages zu veröffentlichen](/de-de/deploy). + +Siehe [Schnellstart](/de-de/quickstart) für weitere Informationen. + +## Features + +* keine generierten, statischen HTML Dateien +* einfach und klein (~16kB gzipped) +* smarte Erweiterung mit Volltextsuche +* mehrere Themes +* praktische API für Erweiterungen +* Unterstützung für Emoji +* Kompatibel mit IE10+ + +## Beispiele + +Vergleiche die Liste namens [Showcase](https://github.com/QingWei-Li/docsify/#showcase) mit Beispielen, wie **docsify** verwendet wird. + +## Spenden + +Bitte ziehe eine Spende in Erwägung, sollte **docsify** dir hilfreich oder meine Arbeit dir wertvoll erscheinen. Ich freue mich, wenn du mir [eine Tasse Kaffee kaufst](https://github.com/QingWei-Li/donate). :heart: diff --git a/docs/de-de/_navbar.md b/docs/de-de/_navbar.md new file mode 100644 index 000000000..95260cda8 --- /dev/null +++ b/docs/de-de/_navbar.md @@ -0,0 +1,4 @@ +- :de: + - [:cn: 中文](/zh-cn/) + - [:de: German](/de-de/) + - [:uk: English](/) diff --git a/docs/de-de/_sidebar.md b/docs/de-de/_sidebar.md new file mode 100644 index 000000000..a864b3b24 --- /dev/null +++ b/docs/de-de/_sidebar.md @@ -0,0 +1,22 @@ +- Loslegen + - [Schnellstart](/de-de/quickstart) + - [Schreiben weiterer Seiten](/de-de/more-pages) + - [Navigationsleiste anpassen](/de-de/custom-navbar) + - [Titelseite](/de-de/cover) + +- Anpassen + - [Einstellungen](/de-de/configuration) + - [Themen](/de-de/themes) + - [Liste der Erweiterungen](/de-de/plugins) + - [Schreiben eigener Erweiterungen](/de-de/write-a-plugin) + - [Markdown-Einstellungen](/de-de/markdown) + - [Hervorheben von Sprachen](/de-de/language-highlight) + +- Guide + - [Inbetriebnahme](/de-de/deploy) + - [Helfer](/de-de/helpers) + - [Vue Kompatibilität](/de-de/vue) + - [CDN](/de-de/cdn) + - [Offline Modus (PWA)](/de-de/pwa) + +- [Changelog](/de-de/changelog) diff --git a/docs/de-de/cdn.md b/docs/de-de/cdn.md new file mode 100644 index 000000000..20d44abec --- /dev/null +++ b/docs/de-de/cdn.md @@ -0,0 +1,47 @@ +# CDN + +Empfohlen: [unpkg](//unpkg.com), welches jeweils die aktuelle Version liefert, wie sie über npm veröffentlicht wurde. Du kannst auch den Quellcode des npm Packets über [unpkg.com/docsify/](//unpkg.com/docsify/) anschauen. + +## Aktuelle Version + +```html + + + + + +``` + +Alternativ kannst du auch die [komprimierten Dateien](#komprimierte-dateien) verwenden. + +## Spezielle Version + +```html + + + + + +``` + +## Komprimierte Dateien + +```html + + + + + +``` + +```html + + + + + +``` + +## Andere CDN + +[jsDelivr](http://www.jsdelivr.com/projects/docsify) ist auch verfügbar. diff --git a/docs/de-de/configuration.md b/docs/de-de/configuration.md new file mode 100644 index 000000000..8e5f68222 --- /dev/null +++ b/docs/de-de/configuration.md @@ -0,0 +1,307 @@ +# Einstellungen + +**docsify** unterstützt zwei verschiedene Arten, um die Einstellungen anzupassen. Du kannst das `window.$docsify` anpassen, oder die Einstellungen über das script tag im `data-*` Attribut vornehmen. + +```html + + + + + +``` + +Beide Arten sind miteinander kompatibel, wobei die erste jedoch empfohlen wird. Sie ist deutlicher und kann in einer separaten Datei geführt werden. + +!> Innerhalb des `window.$docsfiy` sollten die Optionen mit camelCase geschrieben werden. + +## el + +- Typ: `String` +- Standard: `#app` + +Das DOM Element kann bei der Initialisierung gesetzt werden. Es kann ein CSS selector string oder ein richtiges HTMLElement sein. + +```js +window.$docsify = { + el: '#app' +} +``` + +## repo + +- Typ: `String` +- Standard: `null` + +Verwende die repository URL oder eine Zeichenfolge aus `Benutzername/repo`, um das [GitHub Corner](http://tholman.com/github-corners/) widget in die obere rechte Ecke der Seite zu implementieren. + +```js +window.$docsify = { + repo: 'QingWei-Li/docsify', + // oder + repo: 'https://github.com/QingWei-Li/docsify/' +} +``` + +## max-level + +- Typ: `Number` +- Standard: `6` + +Maximale Anzahl der Inhaltsübersichtebenen. + +```js +window.$docsify = { + maxLevel: 4 +} +``` + +## load-navbar + +- Typ: `Boolean|String` +- Standard: `false` + +Lädt die Navigationsleiste von der Markdown Datei `_navbar.md` falls **true**, oder vom gewählten Pfad. + +```js +window.$docsify = { + // lade von _navbar.md + loadNavbar: true, + + // lade von nav.md + loadNavbar: 'nav.md' +} +``` + +## load-sidebar + +- Typ: `Boolean|String` +- Standard: `false` + +Lädt das seitliche Inhaltsverzeichnis von der Markdown Datei `_sidebar.md` falls **true**, oder vom gewählten Pfad. + +```js +window.$docsify = { + // lade von _sidebar.md + loadSidebar: true, + + // lade von summary.md + loadSidebar: 'summary.md' +} +``` + +## sub-max-level + +- Typ: `Number` +- Standard: `0` + +Wähle die maximale Anzahl der Unterpunkte pro Datei in der Inhaltsübersicht. + +```js +window.$docsify = { + subMaxLevel: 2 +} +``` + +## auto2top + +- Typ: `Boolean` +- Standard: `false` + +Scrolle zum Anfang der Seite, wenn die Route gewechselt wird. + +```js +window.$docsify = { + auto2top: true +} +``` + +## homepage + +- Typ: `String` +- Standard: `README.md` + +`README.md` in deinem Ordner für die Dokumentation wird als Startseite für deine Webseite gesetzt, aber manchmal musst du das vielleicht ändern. + +```js +window.$docsify = { + // Wähle /home.md + homepage: 'home.md', + + // Oder verwende das README in deinem repo + homepage: 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/README.md' +} +``` + +## base-path + +- Typ: `String` + +Der Basispfad der Webseite. Du kannst einen anderen Ordner wählen, oder eine andere Domain. + +```js +window.$docsify = { + basePath: '/path/', + + // Lade die Dateien von einer anderen Domain + basePath: 'https://docsify.js.org/', + + // Oder lade Dateien von einem anderen repo + basePath: 'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/' +} +``` + +## coverpage + +- Typ: `Boolean|String` +- Standard: `false` + +Aktiviere das [Titelseitenfeature](/de-de/cover). Falls `true`, wird sie von `_coverpage.md` geladen. + +```js +window.$docsify = { + coverpage: true, + + // Anderer Dateiname + coverpage: 'cover.md' +} +``` + +## name + +- Typ: `String` + +Webseitenname, wie er in der Inhaltsübersicht in der Seitenleiste angezeigt wird. + +```js +window.$docsify = { + name: 'docsify' +} +``` + +## name-link + +- Typ: `String` +- Standard: `window.location.pathname` + +Der Name der Links. + +```js +window.$docsify = { + nameLink: '/', + + // Für jede Route + nameLink: { + '/zh-cn/': '/zh-cn/', + '/': '/' + } +} +``` + +## markdown + +- Typ: `Function` + +Siehe [Markdown Konfiguration](/de-de/markdown). + +```js +window.$docsify = { + // Objekt + markdown: { + smartypants: true, + renderer: { + link: function() { + // ... + } + } + }, + + // Funktion + markdown: function (marked, renderer) { + // ... + return marked + } +} +``` + +## theme-color + +- Typ: `String` + +Passe die Farbe der Themen an. Verwende [CSS3 Variablen](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) und polyfill in älteren Browsern. + +```js +window.$docsify = { + themeColor: '#3F51B5' +} +``` + +## alias + +- Typ: `Object` + +Verwende alternative Routen. Du kannst sie ungehindert anpassen. + +```js +window.$docsify = { + alias: { + '/zh-cn/changelog': '/changelog', + '/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG' + } +} +``` + +## auto-header + +- Typ: `Boolean` + +Sollten `loadSidebar` und `autoHeader` beide aktiviert sein, setze einen Header vor die Seite in jedem Link in `_sidebar.md`, bevor sie in HTML umgewandelt wird. Vergleiche [#78](https://github.com/QingWei-Li/docsify/issues/78). + +```js +window.$docsify = { + loadSidebar: true, + autoHeader: true +} +``` + +## execute-script + +- Typ: `Boolean` + +Führe das Skript auf der Seite aus. Analysiere nur das erste script tag ([demo](/de-de/themes)). Sollte Vue verwendet sein, wird es in der Standardeinstellung ausgeführt. + +```js +window.$docsify = { + executeScript: true +} +``` + +```markdown +## Dies ist ein Test + + +``` + +?> Nehme zur Kenntnis, dass, solltest du ein externes Skript ausführen, z.B. ein eingebettete jsfiddle demo, du sicher gehen solltest, das [external-script](plugins?id=external-script) plugin zu verwenden. + +## no-emoji + +Verhindere die Umwandlung in Emojis: + +```js +window.$docsify = { + noEmoji: true +} +``` diff --git a/docs/de-de/cover.md b/docs/de-de/cover.md new file mode 100644 index 000000000..8fcbbf906 --- /dev/null +++ b/docs/de-de/cover.md @@ -0,0 +1,56 @@ +# Titelseite + +Aktiviere die Unterstützung für Titelseiten, indem du `coverpage` auf **true** einstellst, vergleiche [coverpage Einstellungen](/de-de/configuration#coverpage). + +## Einfache Verwendung + +Setze `coverpage` auf **true**, und erstelle `_coverpage.md`: + +```html + + + + +``` + +```markdown + + + + +# docsify 3.5 + +> Ein magischer Generator für Dokumentationsseiten. + +- Einfach und wenig Speicherbedarf (~16kB gzipped) +- Keine statischen HTML Dateien +- Mehrere Themes + +[GitHub](https://github.com/QingWei-Li/docsify/) +[Schnellstart](#docsify) +``` + +!> Die Dokumentationsseiten können nur eine Titelseite haben! + +## Eigener Hintergrund + +Die Hintergrundfarbe wird in der Standardeinstellung zufällig generiert. Du kannst sie anpassen, oder auch ein Hintergrundbild verwenden: + +```markdown + + +# docsify 3.5 + +[GitHub](https://github.com/QingWei-Li/docsify/) +[Schnellstart](#quick-start) + + + + + + +``` diff --git a/docs/de-de/custom-navbar.md b/docs/de-de/custom-navbar.md new file mode 100644 index 000000000..7373e5e33 --- /dev/null +++ b/docs/de-de/custom-navbar.md @@ -0,0 +1,95 @@ +# Navigationsleiste anpassen + +## HTML + +Solltest du eine Navigationsleiste benötigen, so kannst du eine HTML-basierte erstellen. + +!> Die Links der Dokumentation fangen alle mit `#/` an. + +```html + + + + + + +``` + +## Markdown + +Oder du kannst deine Navigationsleiste mit einer Datei basierend auf Markdown erstellen, indem du `loadNavbar` auf **true** setzt und eine Datei namens `_navbar.md` erstellst, vergleiche [load-navbar Einstellungen](/de-de/configuration#load-navbar). + +```html + + + + +``` + +```markdown + + +- [En](/) +- [Deutsch](/de-de/) +``` + +!> Solltest du Github Pages verwenden, musst du zusätzlich eine Datei namens `.nojekyll` in `./docs` erstellen, um zu verhindern, dass Github Dateien ignoriert, die mit einem Unterstrich anfangen. + +`_navbar.md` wird in jedem Verzeichnislevel geladen. Sollte das aktuelle Verzeichnis keine Datei namens `_navbar.md` haben, so sucht **docsify** in den übergeordneten Ordnern. Wenn du z.B. im Moment im Verzeichnis `/guide/quick-start` bist, so wird `_navbar.md` von der Datei `/guide/_navbar.md` geladen. + +## Aufbauen von Strukturen + +Du kannst untergeordnete Listen erstellen, indem du untergeordnete Punkte einem übergeordneten Punkt gegenüber einrückst. + +```markdown + + +- Getting started + - [Quick start](/quickstart) + - [Writing more pages](/more-pages) + - [Custom navbar](/custom-navbar) + - [Cover page](/cover) + +- Configuration + - [Configuration](/configuration) + - [Themes](/themes) + - [Using plugins](/plugins) + - [Markdown configuration](/markdown) + - [Language highlight](/language-highlight) +``` + +wird also wie folgt aussehen + + + +## Angepasste Navigationsleisten in Verbindung mit dem emoji Erweiterung + +Solltest du die [emoji Erweiterung](/de-de/plugins#emoji) verwenden: + +```html + + + + + +``` + +so kannst du z.B. auch die Flaggenemojis in der Markdown Datei für deine angepasste Navigationsleiste verwenden: + +```markdown + + +- [:us:, :uk:](/) +- [:de:](/de-de/) +``` diff --git a/docs/de-de/deploy.md b/docs/de-de/deploy.md new file mode 100644 index 000000000..3309f3562 --- /dev/null +++ b/docs/de-de/deploy.md @@ -0,0 +1,33 @@ +# Inbetriebnahme + +Ähnlich wie bei [GitBook](https://www.gitbook.com), kannst du deine Dateien über GitHub Pages oder VPS erstellen. + +## GitHub Pages + +Du kannst folgende drei Orte verwenden, um die Dokumentation für dein Github repository zu verwalten: + +* `docs/` Ordner +* master branch +* gh-pages branch + +Es wird empfohlen, deine Dateien im `./docs` Unterordner im `master` branch deines repository zu speichern. Wechsle dann zu den Einstellungen deines repository und wähle `master branch /docs folder` als deine Github Pages Quelle. + + + +!> Du kannst die Dateien auch im Hauptverzeichnis speichern und dann `master branch` in den Einstellungen auswählen. + +## VPS + +Verwende folgende nginx config. + +```nginx +server { + listen 80; + server_name your.domain.com; + + location / { + alias /path/to/dir/of/docs; + index index.html; + } +} +``` diff --git a/docs/de-de/helpers.md b/docs/de-de/helpers.md new file mode 100644 index 000000000..453a67a67 --- /dev/null +++ b/docs/de-de/helpers.md @@ -0,0 +1,27 @@ +# Dokumentationshelfer + +docsify erweitert die Markdownsyntax, um deine Dokumente besser lesbar zu machen. + +## Wichtiger Inhalt + +Wichtiger Inhalt wie: + +```markdown +!> **Zeit** ist Geld, mein Freund! +``` + +wird wie folgt gerendert: + +!> **Zeit** ist Geld, mein Freund! + +## Generelle Tipps + +Generelle Tipps wie: + +```markdown +?> *TODO* unit test +``` + +wird wie folgt gerendert: + +?> *TODO* unit test diff --git a/docs/de-de/language-highlight.md b/docs/de-de/language-highlight.md new file mode 100644 index 000000000..da69a45a0 --- /dev/null +++ b/docs/de-de/language-highlight.md @@ -0,0 +1,11 @@ +# Hervorheben von Sprachen + +**docsify** verwendet [Prism](https://github.com/PrismJS/prism) um Quellcodeabschnitte in deinen Seiten hervorzuheben. Als Standardeinstellung werden nur CSS, JavaScipt und HTML unterstützt. Du kannst **Prism** auch mit weiteren Sprachen verwenden: + +```html + + + +``` + +?> Vergleiche die [component files](https://github.com/PrismJS/prism/tree/gh-pages/components) Liste für weitere Optionen. diff --git a/docs/de-de/markdown.md b/docs/de-de/markdown.md new file mode 100644 index 000000000..0a70b4d38 --- /dev/null +++ b/docs/de-de/markdown.md @@ -0,0 +1,30 @@ +# Markdown Einstellungen + +**docsify** verwendet [marked](https://github.com/chjj/marked), um Markdown umzuwandeln. Du kannst einstellen, wie es deine Markdown Seiten in HTML umwandelt, indem du `renderer` konfigurierst: + +```js +window.$docsify = { + markdown: { + smartypants: true, + renderer: { + link: function() { + // ... + } + } + } +} +``` + +?> Für mögliche Einstellungen, siehe [marked Dokumentation](https://github.com/chjj/marked#options-1) + +Du kannst die Regeln auch beliebig anpassen. + +```js +window.$docsify = { + markdown: function(marked, renderer) { + // ... + + return marked + } +} +``` diff --git a/docs/de-de/more-pages.md b/docs/de-de/more-pages.md new file mode 100644 index 000000000..3748502b2 --- /dev/null +++ b/docs/de-de/more-pages.md @@ -0,0 +1,92 @@ +# Noch mehr Seiten + +Wenn du mehr Seiten für deine Dokumentation brauchst, so kannst du weitere Markdown Dateien in deinem **docsify** Ordner erstellen. Eine Datei namens `guide.md` ist dann über `/#/guide` erreichbar. + +Nehmen wir als Beispiel folgende Verzeichnisstruktur: + +```text +. +├── docs +| └── README.md +| └── guide.md +| └── de-de +| └──README.md +| └──guide.md +``` + +Die passenden Routen sind dann + +```text +docs/README.md => http://domain.com +docs/guide.md => http://domain.com/guide +docs/de-de/README.md => http://domain.com/de-de/ +docs/de-de/guide.md => http://domain.com/de-de/guide +``` + +## Seitenleiste mit Inhaltsverzeichnis anpassen + +Als Standardeinstellung wird das Inhaltsverzeichnis in der Seitenleiste automatisch basierend auf vorhandenen Markdown Dateien generiert. Wenn du das seitliche Inhaltsverzeichnis anpassen willst, kannst du eine Datei namens `_sidebar.md` erstellen (vergleiche [das seitliche Inhaltsverzeichnis für diese Dokumentation](https://github.com/QingWei-Li/docsify/blob/master/docs/de-de/_sidebar.md) als Beispiel): + +Als Erstes musst du `loadSidebar` auf **true** setzen, vergleiche [Einstellungen für das seitliche Inhaltsverzeichnis](/de-de/configuration#load-sidebar). + +```html + + + + +``` + +Als Zweites erstellst du eine Datei namens `_sidebar.md`: + +```markdown + + +- [Home](/) +- [Guide](/guide) +``` + +!> Solltest du Github Pages verwenden, musst du zusätzlich eine Datei namens `.nojekyll` in `./docs` erstellen, um zu verhindern, dass Github Dateien ignoriert, die mit einem Unterstrich anfangen. + +`_sidebar.md` wird in jedem Verzeichnislevel geladen. Sollte das aktuelle Verzeichnis keine Datei namens `_sidebar.md` haben, so sucht **docsify** in den übergeordneten Ordnern. Wenn du z.B. im Moment im Verzeichnis `/guide/quick-start` bist, so wird `_sidebar.md` von der Datei `/guide/_sidebar.md` geladen. + +## Inhaltsverzeichnis + +Eine angepasste Seitenleist kann auch automatisch ein Inhaltsverzeichnis generieren, indem ein `subMaxLevel` gesetzt wird, vergleiche [sub-max-level Einstellungen](/de-de/configuration#sub-max-level). + +```html + + + + +``` + +## Ignoring Subheaders + +When `subMaxLevel` is set, each header is automatically added to the table of contents by default. If you want to ignore a specific header, add `{docsify-ignore}` to it. + +```markdown +# Getting Started + +## Header {docsify-ignore} +This header won't appear in the sidebar table of contents. +``` + +To ignore all headers on a specific page, you can use `{docsify-ignore-all}` on the first header of the page. + +```markdown +# Getting Started {docsify-ignore-all} + +## Header +This header won't appear in the sidebar table of contents. +``` + +Both `{docsify-ignore}` and `{docsify-ignore-all}` will not be rendered on the page when used. diff --git a/docs/de-de/plugins.md b/docs/de-de/plugins.md new file mode 100644 index 000000000..f9ba36cc5 --- /dev/null +++ b/docs/de-de/plugins.md @@ -0,0 +1,95 @@ +# Liste der Erweiterungen + +## Volltextsuche + +Als Standardeinstellung werden Hyperlinks auf der aktuellen Seite erkannt und der Inhalt in `localStorage` gespeichert. Du kannst den Pfad zu den Dateien auch anpassen: + + +```html + + + +``` + +## Google Analytics + +Installiere diese Erweiterung und passe die track id an: + +```html + + + +``` + +Konfiguration über `data-ga`: + +```html + + +``` + +## front matter + +```html + +``` + +## emoji + +Als Standardeinstellung werden emojis umgewandelt. Als Beispiel wird `:100:` umgewandelt in :100:. Aber das ist nicht genau, das es keine passende Nicht-emoji Zeichenfolge gibt. Solltest du emojis richtig umwandeln wollen, musst du diese Erweiterung verwenden. + +```html + +``` + +## Externes Skript + +Wenn das Skript auf der Seite ein externes ist (eine Javascript Datei über das `src` Attribut importiert), brauchst du diese Erweiterung, damit das funktioniert. + +```html + +``` + +## Bilder zoomen + +Medium's Bilderzoom. Basierend auf [zoom-image](https://github.com/egoist/zoom-image). + +```html + +``` diff --git a/docs/sw.js b/docs/de-de/pwa.md similarity index 72% rename from docs/sw.js rename to docs/de-de/pwa.md index 92df1f45d..587547ed4 100644 --- a/docs/sw.js +++ b/docs/de-de/pwa.md @@ -1,3 +1,16 @@ +# Offline Modus + +[Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) (PWA) sind Erfahrungen die Vorzüge des Internets mit den Vorzügen von Apps verbinden. Wir können unsere Webseite verbessern, indem wir sie mit Hilfe von service workers auch **offline** und in schlechten Netzen interagierbar machen. + +Sie sind sehr einfach zu verwenden. + +## serviceWorker erstellen + +Erstelle eine Datei namens `sw.js` in deinem **docsify** Verzeichnis und kopiere folgenden Code: + +*sw.js* + +```js /* =========================================================== * docsify sw.js * =========================================================== @@ -9,7 +22,6 @@ const RUNTIME = 'docsify' const HOSTNAME_WHITELIST = [ self.location.hostname, - 'raw.githubusercontent.com', 'fonts.gstatic.com', 'fonts.googleapis.com', 'unpkg.com' @@ -82,3 +94,22 @@ self.addEventListener('fetch', event => { ) } }) +``` + +## Registrieren + +Jetzt registrieren wir die Funktion in der Datei `index.html`. Nur manche aktuellen Browser unterstützen die Funktion, wir müssen also prüfen: + +*index.html* + +```html + +``` + +## Geniessen + +Du kannst die Website jetzt veröffentlichen und Benutzer können sie dann vollständig offline verwenden, sobald sie einmal geladen wurde :ghost: Du kannst das jetzt ausprobieren, indem du deine Internetverbindung ausschaltest und diese Seite neu lädst. diff --git a/docs/de-de/quickstart.md b/docs/de-de/quickstart.md new file mode 100644 index 000000000..61e48b727 --- /dev/null +++ b/docs/de-de/quickstart.md @@ -0,0 +1,87 @@ +# Schnellstart + +Es wird empfohlen, `docsify-cli` global zu installieren, welches bei der Inbetriebnahme und der lokalen Vorschau hilft. + +```bash +npm i docsify-cli -g +``` + +## Inbetriebnahme + +Wenn du die Dokumentation in dem Unterordner `./docs` erstellen willst, kannst du den Befehl `init` verwenden. + +```bash +docsify init ./docs +``` + +## Inhalt schreiben + +Nachdem der Befehl `init` vollständig ausgeführt wurde, kannst du folgende Dateien im Unterordner `./docs` finden: + +* `index.html` als zentrale Datei +* `README.md` als die Startseite für die Dokumentation +* `.nojekyll` verhindert, dass Github Pages Dateien ignoriert, die mit einem Unterstrich beginnen. + +Du kannst die Dokumentation über die Datei `./docs/README.md` nach Belieben ändern, und natürlich [weitere Seiten](/de-de/more-pages) hinzufügen. + +## Vorschau der eigenen Seiten + +Du kannst einen lokalen Server mit dem Befehl `docsify serve` laufen lassen, und auf eine Vorschau deiner Webseite über `http://localhost:3000` zugreifen. + +```bash +docsify serve docs +``` + +?> Für weitere Informationen hinsichtlich der Verwendung von `docsify-cli`, siehe [docsify-cli Dokumentation](https://github.com/QingWei-Li/docsify-cli). + +## Manuelle Inbetriebnahme + +Wenn du `npm` nicht verwenden möchtest, oder Probleme bei der Installation des Tools hast, kannst du auch manuell die Datei namens `index.html` erstellen: + +```html + + + + + + dict. + + + + + + + +``` + +Solltest du Python installiert haben, kannst du einen statischen Server laufen lassen, um eine Vorschau deiner Webseite anzuschauen: + +```bash +cd docs && python -m SimpleHTTPServer 3000 +``` + +## Ladedialog + +Wenn du möchtest, kann **docsify** einen Ladedialog anzeigen, während es deine Dokumentation umwandelt: + +```html + + +