SWPanel

Für das Website-Team

Der SWPanel-Reader, für jedes Handbuch in Markdown

Dieselbe Markdown-Datei, die die Wissensbibliothek speichert, wird mit dem SWPanel-Reader zu einer Seite der Website: Verzeichnis, das dem Lesen folgt, Schriftgröße nach Maß, Bewertung und „Ich habe das Handbuch gelesen“. Ohne das Handbuch anzufassen.

Beispielhandbuch ansehen Kit herunterladen
<!-- En la cabecera de la página --> <link rel="stylesheet" href="kit-manuales/swpanel-manual.css"> <script src="kit-manuales/swpanel-manual.js"></script> <!-- El Markdown del manual, tal cual sale de SWPanel --> <script type="text/markdown" data-swm data-tema="FTP y archivos" data-tag="FTP" data-backhref="../comunidad/index.html" data-askhref="../ayuda-y-manuales/index.html"> # Gestionar las cuentas FTP de tu Hosting en SWPanel ### Qué es el FTP, cómo crear y administrar cuentas FTP… ... </script> <script>SWManual.auto();</script>

Die drei Beispiele

Echte Handbücher, aus ihrem Markdown gerendert

Drei SWPanel-2027-Handbücher, unbearbeitet. Auf der Community-Seite erscheinen sie fett und unterstrichen.

Eine MySQL- oder MariaDB-Datenbank in SWPanel erstellen und dafür sorgen, dass deine Anwendung sich verbindet

Handbuch 32 · Datenbanken · 29 Min.

Im Reader öffnen

Die FTP-Konten deines Hostings in SWPanel verwalten: was FTP ist, Konten erstellen und sich mit FileZilla verbinden

Handbuch 555 · FTP und Dateien · 12 Min.

Im Reader öffnen

Ein E-Mail-Konto deines Hostings in Outlook einrichten

Handbuch 214 · E-Mail · 20 Min.

Im Reader öffnen

So wird er integriert

Drei Wege, dasselbe Ergebnis

Wähle je nachdem, wo das Handbuch liegt: in der Seite, in einer separaten Datei oder auf dem Server gerendert, damit Suchmaschinen es lesen können.

  1. Reader einbinden

    Ein Stylesheet und ein Skript, ohne Abhängigkeiten. Alles hängt an der Klasse .swm, es kollidiert also nicht mit den Stilen der Website.

    <!-- En la cabecera de la página --> <link rel="stylesheet" href="kit-manuales/swpanel-manual.css"> <script src="kit-manuales/swpanel-manual.js"></script>

  2. Füge das Markdown unverändert ein

    In einem text/markdown-Block, mit Thema und Links als Attributen. SWManual.auto() rendert alle Handbücher der Seite.

    <!-- El Markdown del manual, tal cual sale de SWPanel --> <script type="text/markdown" data-swm data-tema="FTP y archivos" data-tag="FTP" data-backhref="../comunidad/index.html" data-askhref="../ayuda-y-manuales/index.html"> # Gestionar las cuentas FTP de tu Hosting en SWPanel ### Qué es el FTP, cómo crear y administrar cuentas FTP… ... </script> <script>SWManual.auto();</script>

  3. Oder rendere es aus deinem Code

    Mit dem vom Server gelieferten Markdown und du entscheidest, wohin jedes „Handbuch ansehen“ führt.

    // O desde tu propio código, con el Markdown que te devuelva el servidor fetch('manuales/M555.md').then(r => r.text()).then(md => { const r = SWManual.renderPage(md, { tema: 'FTP y archivos', backHref: '../comunidad/index.html', resolveManual: id => 'manual.asp?id=' + id // enlaces «Ver manual» del Markdown }); document.getElementById('lector').innerHTML = r.html; SWManual.mount(document.getElementById('lector')); });

  4. Und auf dem Server, für Google

    Dieselbe Datei funktioniert in Node: Erzeuge das HTML des Readers und liefere es bereits gerendert aus. So sind die Beispielseiten dieser Website gebaut.

    // En el servidor (Node), para servir el HTML ya pintado y que Google lo lea const SWManual = require('./kit-manuales/swpanel-manual.js'); const r = SWManual.renderPage(markdown, { tema: 'Bases de datos', minutes: 29 }); // r.html: el lector entero · r.title, r.subtitle, r.minutes, r.toc: para la ficha y el SEO

Was er versteht

Das Markdown von SWPanel, mit seinen Konventionen

Neben dem gewohnten Markdown kennt der Reader die Konventionen der Bibliotheks-Handbücher.

Konventionen des SWPanel-Markdowns und wie sie dargestellt werden
## <a id="indice"></a>Índice Die SWPanel-Anker in den Überschriften: Verzeichnis und interne Links funktionieren weiter.
> **Importante - …** Beschriftete Zitate werden als Hinweise dargestellt: Wichtig und Achtung in Bernstein, Hinweis und Bevor du beginnst in Blau, Tipp in Violett und Best Practice in Grün.
<a href="javascript:top.ver_manual('ID')"> Links zu anderen Handbüchern werden zu Links der Website, mit ihrem Buchsymbol.
Reader-Optionen und wofür jede gedacht ist
tema · tag Thema des Handbuchs und das Label, das über dem Titel und in der oberen Leiste angezeigt wird.
minutes Lesezeit in Minuten. Wird sie nicht angegeben, wird sie anhand der Wörter des Handbuchs berechnet.
updated Aktualisierungsdatum, das neben der Lesezeit angezeigt wird.
backHref · closeHref Wohin „Zurück“, das Kreuz und „Ich habe das Handbuch gelesen, schließen“ führen.
askHref Der Link zu „Fehlte etwas? Frag die KI“.
resolveManual(id) Wandelt die Links des SWPanel-Markdowns (javascript:top.ver_manual('ID')) in eine Adresse der Website um.
resolveNumber(n) Wandelt mit autolinkManuals „Handbuch 47“ im Text in einen Link um.
imageBase Präfix für Bilder mit relativem Pfad. Die von static.swpanel.com bleiben unverändert.
onRate · onDone Rückmeldungen, wenn jemand das Handbuch bewertet oder als gelesen markiert, um es zu speichern, wo du willst.

Das Kit

Alles, was du brauchst, in einem Ordner

Die Reader-Dateien, eine Beispielseite und die drei ursprünglichen Handbücher.

  • JS

    swpanel-manual.js

    Der Reader: Markdown zu HTML und das Verhalten. Ohne Abhängigkeiten.

    In Vorbereitung
  • CSS

    swpanel-manual.css

    Die Stile des Readers, alle unter .swm.

    In Vorbereitung
  • HTML

    ejemplo.html

    Eine Seite, die ein Handbuch im Browser rendert.

    In Vorbereitung
  • MD

    README.md

    So wird integriert, Schritt für Schritt.

    In Vorbereitung
  • MD

    M32-crear-base-de-datos-mysql-mariadb.md

    Original-Markdown von Handbuch 32.

    In Vorbereitung
  • MD

    M555-cuentas-ftp-hosting.md

    Original-Markdown von Handbuch 555.

    In Vorbereitung
  • MD

    M214-outlook-correo-hosting.md

    Original-Markdown von Handbuch 214.

    In Vorbereitung
  • ZIP

    kit-lector-manuales.zip

    Alles Obige in einer einzigen Datei.

    In Vorbereitung

Die ganze Bibliothek, offen

Die Handbücher und Videos von SWPanel, mit Suche und nach Themen, ohne das Panel zu betreten.

Kostenlos starten Bibliothek öffnen