diff --git a/docs/de-de/README.md b/docs/de-de/README.md new file mode 100644 index 00000000..303ac79a --- /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/_sidebar.md b/docs/de-de/_sidebar.md new file mode 100644 index 00000000..3d102f04 --- /dev/null +++ b/docs/de-de/_sidebar.md @@ -0,0 +1,22 @@ +- Loslegen + - [Schnellstart](/quickstart) + - [Schreiben weiterer Seiten](/more-pages) + - [Navigationsleiste anpassen](/custom-navbar) + - [Titelseite](/cover) + +- Anpassen + - [Einstellungen](/configuration) + - [Themen](/themes) + - [Liste der Erweiterungen](/plugins) + - [Schreiben eigener Erweiterungen](/write-a-plugin) + - [Markdown-Einstellungen](/markdown) + - [Hervorheben von Sprachen](/language-highlight) + +- Guide + - [Inbetriebnahme](/deploy) + - [Helfer](/helpers) + - [Vue Kompatibilität](/vue) + - [CDN](/cdn) + - [Offline Modus (PWA)](/pwa) + +- [Changelog](/changelog) diff --git a/docs/de-de/cdn.md b/docs/de-de/cdn.md new file mode 100644 index 00000000..20d44abe --- /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 00000000..8e5f6822 --- /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 00000000..8fcbbf90 --- /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 00000000..7373e5e3 --- /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 00000000..3309f356 --- /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 00000000..453a67a6 --- /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 00000000..da69a45a --- /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 00000000..0a70b4d3 --- /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 00000000..aeeabf64 --- /dev/null +++ b/docs/de-de/more-pages.md @@ -0,0 +1,70 @@ +# 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 + + + + +``` diff --git a/docs/de-de/plugins.md b/docs/de-de/plugins.md new file mode 100644 index 00000000..f9ba36cc --- /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/de-de/pwa.md b/docs/de-de/pwa.md new file mode 100644 index 00000000..587547ed --- /dev/null +++ b/docs/de-de/pwa.md @@ -0,0 +1,115 @@ +# 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 + * =========================================================== + * Copyright 2016 @huxpro + * Licensed under Apache 2.0 + * Register service worker. + * ========================================================== */ + +const RUNTIME = 'docsify' +const HOSTNAME_WHITELIST = [ + self.location.hostname, + 'fonts.gstatic.com', + 'fonts.googleapis.com', + 'unpkg.com' +] + +// The Util Function to hack URLs of intercepted requests +const getFixedUrl = (req) => { + var now = Date.now() + var url = new URL(req.url) + + // 1. fixed http URL + // Just keep syncing with location.protocol + // fetch(httpURL) belongs to active mixed content. + // And fetch(httpRequest) is not supported yet. + url.protocol = self.location.protocol + + // 2. add query for caching-busting. + // Github Pages served with Cache-Control: max-age=600 + // max-age on mutable content is error-prone, with SW life of bugs can even extend. + // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string. + // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190 + if (url.hostname === self.location.hostname) { + url.search += (url.search ? '&' : '?') + 'cache-bust=' + now + } + return url.href +} + +/** + * @Lifecycle Activate + * New one activated when old isnt being used. + * + * waitUntil(): activating ====> activated + */ +self.addEventListener('activate', event => { + event.waitUntil(self.clients.claim()) +}) + +/** + * @Functional Fetch + * All network requests are being intercepted here. + * + * void respondWith(Promise