SWPanel

Pour l'équipe du site

Le lecteur SWPanel, pour n'importe quel manuel en Markdown

Le même fichier Markdown que conserve la Bibliothèque de connaissances devient une page du site avec le lecteur SWPanel : sommaire qui suit la lecture, taille de police à votre mesure, notation et « J'ai lu le manuel ». Sans toucher au manuel.

Voir un manuel d'exemple Télécharger le kit
<!-- 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>

Les trois exemples

De vrais manuels, rendus à partir de leur Markdown

Trois manuels de SWPanel 2027, sans retouche. Sur la page de la communauté, ils apparaissent en gras et soulignés.

Créer une base de données MySQL ou MariaDB dans SWPanel et faire en sorte que votre application s'y connecte

Manuel 32 · Bases de données · 29 min

Ouvrir dans le lecteur

Gérer les comptes FTP de votre Hébergement dans SWPanel : qu'est-ce que le FTP, créer des comptes et se connecter avec FileZilla

Manuel 555 · FTP et fichiers · 12 min

Ouvrir dans le lecteur

Configurer dans Outlook un compte de messagerie de votre Hébergement

Manuel 214 · Messagerie · 20 min

Ouvrir dans le lecteur

Comment l'intégrer

Trois façons, le même résultat

Choisissez selon l'endroit où se trouve le manuel : dans la page, dans un fichier à part ou rendu sur le serveur pour que les moteurs de recherche le lisent.

  1. Incluez le lecteur

    Une feuille de style et un script, sans dépendances. Tout dépend de la classe .swm, il n'entre donc pas en conflit avec les styles du site.

    <!-- 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. Collez le Markdown tel quel

    Dans un bloc text/markdown, avec le thème et les liens en attributs. SWManual.auto() affiche tous les manuels de la page.

    <!-- 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. Ou affichez-le depuis votre code

    Avec le Markdown renvoyé par le serveur, et en décidant où mène chaque « Voir le manuel ».

    // 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. Et sur le serveur, pour Google

    Le même fichier fonctionne dans Node : générez le HTML du lecteur et servez-le déjà rendu. C'est ainsi que sont faites les pages d'exemple de ce site.

    // 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

Ce qu'il comprend

Le Markdown de SWPanel, avec ses conventions

En plus du Markdown habituel, le lecteur connaît les conventions des manuels de la Bibliothèque.

Conventions du Markdown de SWPanel et leur rendu
## <a id="indice"></a>Índice Les ancres de SWPanel dans les titres : le sommaire et les liens internes continuent de fonctionner.
> **Importante - …** Les citations avec étiquette sont affichées comme des avis : Important et Attention en ambre, Note et Avant de commencer en bleu, Astuce en violet et Bonne pratique en vert.
<a href="javascript:top.ver_manual('ID')"> Les liens vers d'autres manuels deviennent des liens du site, avec leur icône de livre.
Options du lecteur et à quoi sert chacune
tema · tag Thème du manuel et étiquette visible au-dessus du titre et dans la barre du haut.
minutes Minutes de lecture. Si elles ne sont pas indiquées, elles sont calculées à partir des mots du manuel.
updated Date de mise à jour affichée à côté du temps de lecture.
backHref · closeHref Où mènent « Retour », la croix et « J'ai lu le manuel, fermer ».
askHref Le lien de « Il manquait quelque chose ? Demandez à l'IA ».
resolveManual(id) Convertit les liens du Markdown de SWPanel (javascript:top.ver_manual('ID')) en une adresse du site.
resolveNumber(n) Avec autolinkManuals, convertit « le manuel 47 » du texte en lien.
imageBase Préfixe pour les images à chemin relatif. Celles de static.swpanel.com restent telles quelles.
onRate · onDone Notifications lorsque quelqu'un note le manuel ou le marque comme lu, pour l'enregistrer où vous voulez.

Le kit

Tout ce dont vous avez besoin, dans un dossier

Les fichiers du lecteur, une page d'exemple et les trois manuels d'origine.

  • JS

    swpanel-manual.js

    Le lecteur : Markdown vers HTML et le comportement. Sans dépendances.

    En préparation
  • CSS

    swpanel-manual.css

    Les styles du lecteur, tous sous .swm.

    En préparation
  • HTML

    ejemplo.html

    Une page qui affiche un manuel dans le navigateur.

    En préparation
  • MD

    README.md

    Comment l'intégrer, étape par étape.

    En préparation
  • MD

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

    Markdown d'origine du manuel 32.

    En préparation
  • MD

    M555-cuentas-ftp-hosting.md

    Markdown d'origine du manuel 555.

    En préparation
  • MD

    M214-outlook-correo-hosting.md

    Markdown d'origine du manuel 214.

    En préparation
  • ZIP

    kit-lector-manuales.zip

    Tout ce qui précède dans un seul fichier.

    En préparation

Toute la bibliothèque, ouverte

Les manuels et vidéos de SWPanel, avec recherche et par thèmes, sans entrer dans le panneau.

Commencer gratuitement Ouvrir la bibliothèque