mirror of
https://gitee.com/docsifyjs/docsify.git
synced 2024-12-02 03:59:19 +08:00
add German docs
This commit is contained in:
Johannes Rappen
parent
1f66e61f63
commit
33393ef0f6
27
docs/de-de/README.md
Normal file
27
docs/de-de/README.md
Normal file
@ -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:
|
||||
22
docs/de-de/_sidebar.md
Normal file
22
docs/de-de/_sidebar.md
Normal file
@ -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)
|
||||
47
docs/de-de/cdn.md
Normal file
47
docs/de-de/cdn.md
Normal file
@ -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
|
||||
<!-- lade CSS -->
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
|
||||
|
||||
<!-- lade Script -->
|
||||
<script src="//unpkg.com/docsify/lib/docsify.js"></script>
|
||||
```
|
||||
|
||||
Alternativ kannst du auch die [komprimierten Dateien](#komprimierte-dateien) verwenden.
|
||||
|
||||
## Spezielle Version
|
||||
|
||||
```html
|
||||
<!-- lade CSS -->
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify@2.0.0/themes/vue.css">
|
||||
|
||||
<!-- lade Script -->
|
||||
<script src="//unpkg.com/docsify@2.0.0/lib/docsify.js"></script>
|
||||
```
|
||||
|
||||
## Komprimierte Dateien
|
||||
|
||||
```html
|
||||
<!-- lade CSS -->
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||
|
||||
<!-- lade Script -->
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- lade CSS -->
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify@2.0.0/lib/themes/vue.css">
|
||||
|
||||
<!-- lade Script -->
|
||||
<script src="//unpkg.com/docsify@2.0.0/lib/docsify.min.js"></script>
|
||||
```
|
||||
|
||||
## Andere CDN
|
||||
|
||||
[jsDelivr](http://www.jsdelivr.com/projects/docsify) ist auch verfügbar.
|
||||
307
docs/de-de/configuration.md
Normal file
307
docs/de-de/configuration.md
Normal file
@ -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
|
||||
<!-- über $docsify -->
|
||||
<script>
|
||||
window.$docsify = {
|
||||
repo: 'QingWei-Li/docsify',
|
||||
maxLevel: 3,
|
||||
coverpage: true
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- oder data-* -->
|
||||
<script
|
||||
src="//unpkg.com/docsify"
|
||||
data-repo="QingWei-Li/docsify"
|
||||
data-max-level="3"
|
||||
data-coverpage>
|
||||
</script>
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
<script>
|
||||
console.log(2333)
|
||||
</script>
|
||||
```
|
||||
|
||||
?> 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
|
||||
}
|
||||
```
|
||||
56
docs/de-de/cover.md
Normal file
56
docs/de-de/cover.md
Normal file
@ -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
|
||||
<!-- index.html -->
|
||||
|
||||
<script>
|
||||
window.$docsify = {
|
||||
coverpage: true
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
```
|
||||
|
||||
```markdown
|
||||
<!-- _coverpage.md -->
|
||||
|
||||
|
||||
|
||||
# docsify <small>3.5</small>
|
||||
|
||||
> 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
|
||||
<!-- _coverpage.md -->
|
||||
|
||||
# docsify <small>3.5</small>
|
||||
|
||||
[GitHub](https://github.com/QingWei-Li/docsify/)
|
||||
[Schnellstart](#quick-start)
|
||||
|
||||
<!-- Hintegrundbild -->
|
||||
|
||||
|
||||
<!-- Hintegrundfarbe -->
|
||||
|
||||
```
|
||||
95
docs/de-de/custom-navbar.md
Normal file
95
docs/de-de/custom-navbar.md
Normal file
@ -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
|
||||
<!-- index.html -->
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<a href="#/">EN</a>
|
||||
<a href="#/de-de/">DE</a>
|
||||
</nav>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
```
|
||||
|
||||
## 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
|
||||
<!-- index.html -->
|
||||
|
||||
<script>
|
||||
window.$docsify = {
|
||||
loadNavbar: true
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
```
|
||||
|
||||
```markdown
|
||||
<!-- _navbar.md -->
|
||||
|
||||
- [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
|
||||
<!-- _navbar.md -->
|
||||
|
||||
- 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
|
||||
<!-- index.html -->
|
||||
|
||||
<script>
|
||||
window.$docsify = {
|
||||
// ...
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
|
||||
```
|
||||
|
||||
so kannst du z.B. auch die Flaggenemojis in der Markdown Datei für deine angepasste Navigationsleiste verwenden:
|
||||
|
||||
```markdown
|
||||
<!-- _navbar.md -->
|
||||
|
||||
- [:us:, :uk:](/)
|
||||
- [:de:](/de-de/)
|
||||
```
|
||||
33
docs/de-de/deploy.md
Normal file
33
docs/de-de/deploy.md
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
```
|
||||
27
docs/de-de/helpers.md
Normal file
27
docs/de-de/helpers.md
Normal file
@ -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
|
||||
11
docs/de-de/language-highlight.md
Normal file
11
docs/de-de/language-highlight.md
Normal file
@ -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
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-php.min.js"></script>
|
||||
```
|
||||
|
||||
?> Vergleiche die [component files](https://github.com/PrismJS/prism/tree/gh-pages/components) Liste für weitere Optionen.
|
||||
30
docs/de-de/markdown.md
Normal file
30
docs/de-de/markdown.md
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
```
|
||||
70
docs/de-de/more-pages.md
Normal file
70
docs/de-de/more-pages.md
Normal file
@ -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
|
||||
<!-- index.html -->
|
||||
|
||||
<script>
|
||||
window.$docsify = {
|
||||
loadSidebar: true
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
```
|
||||
|
||||
Als Zweites erstellst du eine Datei namens `_sidebar.md`:
|
||||
|
||||
```markdown
|
||||
<!-- docs/_sidebar.md -->
|
||||
|
||||
- [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
|
||||
<!-- index.html -->
|
||||
|
||||
<script>
|
||||
window.$docsify = {
|
||||
loadSidebar: true,
|
||||
subMaxLevel: 2
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
```
|
||||
95
docs/de-de/plugins.md
Normal file
95
docs/de-de/plugins.md
Normal file
@ -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
|
||||
<script>
|
||||
window.$docsify = {
|
||||
search: 'auto', // Standard
|
||||
|
||||
search : [
|
||||
'/', // => /README.md
|
||||
'/guide', // => /guide.md
|
||||
'/get-started', // => /get-started.md
|
||||
'/de-de/', // => /de-de/README.md
|
||||
],
|
||||
|
||||
// vollständige Parameter für die Einstellungen
|
||||
search: {
|
||||
maxAge: 86400000, // Verfallszeit, als Standard ein Tag
|
||||
paths: [], // oder 'auto'
|
||||
placeholder: 'Type to search',
|
||||
|
||||
// Lokalisation
|
||||
placeholder: {
|
||||
'/de-de/': 'Suche',
|
||||
'/': 'Search'
|
||||
},
|
||||
|
||||
noData: 'No Results!',
|
||||
|
||||
// Lokalisation
|
||||
noData: {
|
||||
'/de-de/': 'Keine Ergebnisse',
|
||||
'/': 'No Results'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
|
||||
```
|
||||
|
||||
## Google Analytics
|
||||
|
||||
Installiere diese Erweiterung und passe die track id an:
|
||||
|
||||
```html
|
||||
<script>
|
||||
window.$docsify = {
|
||||
ga: 'UA-XXXXX-Y'
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
|
||||
```
|
||||
|
||||
Konfiguration über `data-ga`:
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js" data-ga="UA-XXXXX-Y"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
|
||||
```
|
||||
|
||||
## front matter
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify/lib/plugins/front-matter.min.js"></script>
|
||||
```
|
||||
|
||||
## 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
|
||||
<script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
|
||||
```
|
||||
|
||||
## 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
|
||||
<script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
|
||||
```
|
||||
|
||||
## Bilder zoomen
|
||||
|
||||
Medium's Bilderzoom. Basierend auf [zoom-image](https://github.com/egoist/zoom-image).
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
|
||||
```
|
||||
115
docs/de-de/pwa.md
Normal file
115
docs/de-de/pwa.md
Normal file
@ -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<Response> r)
|
||||
*/
|
||||
self.addEventListener('fetch', event => {
|
||||
// Skip some of cross-origin requests, like those for Google Analytics.
|
||||
if (HOSTNAME_WHITELIST.indexOf(new URL(event.request.url).hostname) > -1) {
|
||||
// Stale-while-revalidate
|
||||
// similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale
|
||||
// Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1
|
||||
const cached = caches.match(event.request)
|
||||
const fixedUrl = getFixedUrl(event.request)
|
||||
const fetched = fetch(fixedUrl, { cache: 'no-store' })
|
||||
const fetchedCopy = fetched.then(resp => resp.clone())
|
||||
|
||||
// Call respondWith() with whatever we get first.
|
||||
// If the fetch fails (e.g disconnected), wait for the cache.
|
||||
// If there’s nothing in cache, wait for the fetch.
|
||||
// If neither yields a response, return offline pages.
|
||||
event.respondWith(
|
||||
Promise.race([fetched.catch(_ => cached), cached])
|
||||
.then(resp => resp || fetched)
|
||||
.catch(_ => { /* eat any errors */ })
|
||||
)
|
||||
|
||||
// Update the cache with the version we fetched (only for ok status)
|
||||
event.waitUntil(
|
||||
Promise.all([fetchedCopy, caches.open(RUNTIME)])
|
||||
.then(([response, cache]) => response.ok && cache.put(event.request, response))
|
||||
.catch(_ => { /* eat any errors */ })
|
||||
)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 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
|
||||
<script>
|
||||
if (typeof navigator.serviceWorker !== 'undefined') {
|
||||
navigator.serviceWorker.register('sw.js')
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 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.
|
||||
87
docs/de-de/quickstart.md
Normal file
87
docs/de-de/quickstart.md
Normal file
@ -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
|
||||
<!-- index.html -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">dict.
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
</html>
|
||||
```
|
||||
|
||||
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
|
||||
<!-- index.html -->
|
||||
|
||||
<div id="app">Please wait...</div>
|
||||
```
|
||||
|
||||
Du solltest das `data-app` Attribut anpassen, wenn du `el` geändert hast:
|
||||
|
||||
```html
|
||||
<!-- index.html -->
|
||||
|
||||
<div data-app id="main">Please wait...</div>
|
||||
|
||||
<script>
|
||||
window.$docsify = {
|
||||
el: '#main'
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Vergleiche [el Einstellungen](/de-de/configuration#el).
|
||||
56
docs/de-de/themes.md
Normal file
56
docs/de-de/themes.md
Normal file
@ -0,0 +1,56 @@
|
||||
# Themes
|
||||
|
||||
Es gibt im Moment vier Themes zur Auswahl, ähnlich wie die Webseiten von [Vue](//vuejs.org) oder [buble](//buble.surge.sh), sowie eine weitere, dunkle von [@liril-net](https://github.com/liril-net).
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/pure.css">
|
||||
```
|
||||
|
||||
!> Komprimierte Dateien sind über `/lib/themes/` verfügbar.
|
||||
|
||||
```html
|
||||
<!-- komprimierte Versionen -->
|
||||
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/pure.css">
|
||||
```
|
||||
|
||||
Solltest du weitere Themes erstellen, kannst du sie gerne der Allgemeinheit mit einem [pull request](https://github.com/QingWei-Li/docsify/pulls) zur Verfügung stellen.
|
||||
|
||||
#### Klicke hier für eine Vorschau
|
||||
|
||||
<div class="demo-theme-preview">
|
||||
<a data-theme="vue">vue.css</a>
|
||||
<a data-theme="buble">buble.css</a>
|
||||
<a data-theme="dark">dark.css</a>
|
||||
<a data-theme="pure">pure.css</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.demo-theme-preview a {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.demo-theme-preview a:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var preview = Docsify.dom.find('.demo-theme-preview');
|
||||
var themes = Docsify.dom.findAll('[rel="stylesheet"]');
|
||||
|
||||
preview.onclick = function (e) {
|
||||
var title = e.target.getAttribute('data-theme')
|
||||
|
||||
themes.forEach(function (theme) {
|
||||
theme.disabled = theme.title !== title
|
||||
});
|
||||
};
|
||||
</script>
|
||||
100
docs/de-de/vue.md
Normal file
100
docs/de-de/vue.md
Normal file
@ -0,0 +1,100 @@
|
||||
# Kompatibel mit Vue
|
||||
|
||||
Du kannst Vue Komponenten direkt in den Markdown Dateien verwenden, und sie werden umgewandelt. Du kannst dies zum Beispiel verwenden, um Vue Komponenten gleichzeitig zu demonstrieren und zu dokumentieren.
|
||||
|
||||
## Einfache Verwendung
|
||||
|
||||
Lade Vue in `./index.html`.
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
|
||||
<!-- oder verwende die komprimierten Dateien -->
|
||||
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
```
|
||||
|
||||
Dann kannst du sofort Vue Code in deinen Markdown Dateien verwenden. `new Vue({ el: '#main' })` wird als Standard ausgeführt, um Instanzen zu erschaffen.
|
||||
|
||||
*README.md*
|
||||
|
||||
```markdown
|
||||
# Vue guide
|
||||
|
||||
`v-for` usage.
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li v-for="i in 10">{{ i }}</li>
|
||||
</ul>
|
||||
``
|
||||
|
||||
<ul>
|
||||
<li v-for="i in 10">{{ i }}</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Du kannst manuell eine Vue Instanz initialisieren.
|
||||
|
||||
*README.md*
|
||||
|
||||
```markdown
|
||||
# Vue demo
|
||||
|
||||
<div>hello {{ msg }}</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#main',
|
||||
data: { msg: 'Vue' }
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
!> In Markdown Dateien wird nur das Skript innerhalb des ersten script tag Blocks ausgeführt.
|
||||
|
||||
## Kombiniere Vuep um Demos zu erschaffen
|
||||
|
||||
[Vuep](https://github.com/QingWei-Li/vuep) ist eine Komponente zur Darstellung von Vue Komponenten mit einem Liveeditor und einer Vorschau.Unterstützt die Vue Komponenten spec und JSX.
|
||||
|
||||
*index.html*
|
||||
|
||||
```html
|
||||
<!-- injizieren von CSS -->
|
||||
<link rel="stylesheet" href="//unpkg.com/vuep/dist/vuep.css">
|
||||
|
||||
<!-- injizieren von JS -->
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vuep"></script>
|
||||
<script src="//unpkg.com/docsify"></script>
|
||||
|
||||
<!-- oder verwende die komprimierten Dateien -->
|
||||
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
|
||||
<script src="//unpkg.com/vuep/dist/vuep.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
```
|
||||
|
||||
*README.md*
|
||||
|
||||
```markdown
|
||||
# Vuep
|
||||
|
||||
<vuep template="#example"></vuep>
|
||||
|
||||
<script v-pre type="text/x-template" id="example">
|
||||
<template>
|
||||
<div>Hello, {{ name }}!</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data: function () {
|
||||
return { name: 'Vue' }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
```
|
||||
|
||||
?> Zum Beispiel vergleich auch die [vuep Dokumentation](https://qingwei-li.github.io/vuep/).
|
||||
70
docs/de-de/write-a-plugin.md
Normal file
70
docs/de-de/write-a-plugin.md
Normal file
@ -0,0 +1,70 @@
|
||||
# Schreiben einer Erweiterung
|
||||
|
||||
Eine Erweiterung ist schlicht eine Funktion, welche `hook` als Argument nimmt. hook unterstützt dabei das Verwalten von asynchrononen Tasks.
|
||||
|
||||
## Volle Konfiguration
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
plugins: [
|
||||
function (hook, vm) {
|
||||
hook.init(function() {
|
||||
// Called when the script starts running, only trigger once, no arguments,
|
||||
})
|
||||
|
||||
hook.beforeEach(function(content) {
|
||||
// Invoked each time before parsing the Markdown file.
|
||||
// ...
|
||||
return content
|
||||
})
|
||||
|
||||
hook.afterEach(function(html, next) {
|
||||
// Invoked each time after the Markdown file is parsed.
|
||||
// beforeEach and afterEach support asynchronous。
|
||||
// ...
|
||||
// call `next(html)` when task is done.
|
||||
next(html)
|
||||
})
|
||||
|
||||
hook.doneEach(function() {
|
||||
// Invoked each time after the data is fully loaded, no arguments,
|
||||
// ...
|
||||
})
|
||||
|
||||
hook.mounted(function() {
|
||||
// Called after initial completion. Only trigger once, no arguments.
|
||||
})
|
||||
|
||||
hook.ready(function() {
|
||||
// Called after initial completion, no arguments.
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
!> Du kannst auf interne Methoden über `window.Docsify` zugreifen. Greife auf die aktuelle Instanz über das zweite Argument zu.
|
||||
|
||||
## Beispiel
|
||||
|
||||
Füge jeder Seite eine footer Komponente hinzu:
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
plugins: [
|
||||
function (hook) {
|
||||
var footer = [
|
||||
'<hr/>',
|
||||
'<footer>',
|
||||
'<span><a href="https://github.com/QingWei-Li">cinwell</a> ©2017.</span>',
|
||||
'<span>Proudly published with <a href="https://github.com/QingWei-Li/docsify" target="_blank">docsify</a>.</span>',
|
||||
'</footer>'
|
||||
].join('')
|
||||
|
||||
hook.afterEach(function (html) {
|
||||
return html + footer
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -11,27 +11,44 @@
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" title="vue">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.css" title="dark" disabled>
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css" title="buble" disabled>
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/pure.css" title="pure" disabled>
|
||||
</head>
|
||||
<body>
|
||||
<nav data-cloak>
|
||||
<a href="#/de-de/">De</a>
|
||||
<a href="#/">En</a>
|
||||
<a href="#/zh-cn/">中文</a>
|
||||
</nav>
|
||||
<div id="app"></div>
|
||||
<div id="app">Loading ...</div>
|
||||
</body>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'docsify',
|
||||
maxLevel: 4,
|
||||
subMaxLevel: 2,
|
||||
auto2top: true,
|
||||
coverpage: true,
|
||||
loadSidebar: true,
|
||||
executeScript: true,
|
||||
alias: {
|
||||
'/de-de/changelog': '/changelog',
|
||||
'/zh-cn/changelog': '/changelog',
|
||||
'/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
|
||||
}
|
||||
},
|
||||
auto2top: true,
|
||||
coverpage: true,
|
||||
executeScript: true,
|
||||
loadSidebar: true,
|
||||
maxLevel: 4,
|
||||
name: 'docsify',
|
||||
repo: 'QingWei-Li/docsify',
|
||||
search: {
|
||||
noData: {
|
||||
'/de-de/': 'Keine Ergebnisse!',
|
||||
'/zh-cn/': '没有结果!',
|
||||
'/': 'No results!'
|
||||
},
|
||||
paths: 'auto',
|
||||
placeholder: {
|
||||
'/de-de/': 'Suche',
|
||||
'/zh-cn/': '搜索',
|
||||
'/': 'Search'
|
||||
}
|
||||
},
|
||||
subMaxLevel: 2
|
||||
}
|
||||
|
||||
if (typeof navigator.serviceWorker !== 'undefined') {
|
||||
|
||||
@ -6,6 +6,7 @@ There are currently three themes available. Copy [Vue](//vuejs.org) and [buble](
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/pure.css">
|
||||
```
|
||||
|
||||
!> Compressed files are available in `/lib/themes/`.
|
||||
@ -16,6 +17,7 @@ There are currently three themes available. Copy [Vue](//vuejs.org) and [buble](
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/pure.css">
|
||||
```
|
||||
|
||||
If you have any ideas or would like to develop a new theme, you are welcome to submit a [pull request](https://github.com/QingWei-Li/docsify/pulls).
|
||||
@ -26,6 +28,7 @@ If you have any ideas or would like to develop a new theme, you are welcome to s
|
||||
<a data-theme="vue">vue.css</a>
|
||||
<a data-theme="buble">buble.css</a>
|
||||
<a data-theme="dark">dark.css</a>
|
||||
<a data-theme="pure">pure.css</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@ -6,10 +6,18 @@
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/pure.css">
|
||||
```
|
||||
|
||||
!> CSS 的压缩文件位于 `/lib/themes/`
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/buble.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/pure.css">
|
||||
```
|
||||
|
||||
如果你有其他想法或者想开发别的主题，欢迎提 [PR](https://github.com/QingWei-Li/docsify/pulls)。
|
||||
|
||||
#### 点击切换主题
|
||||
@ -19,6 +27,7 @@
|
||||
<a data-theme="vue">vue.css</a>
|
||||
<a data-theme="buble">buble.css</a>
|
||||
<a data-theme="dark">dark.css</a>
|
||||
<a data-theme="pure">pure.css</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user