SWPanel

Per a l'equip de la web

El lector de SWPanel, per a qualsevol manual en Markdown

El mateix fitxer Markdown que desa la Biblioteca de Coneixement es converteix en una pàgina de la web amb el lector de SWPanel: índex que segueix la lectura, lletra a la teva mida, valoració i «He llegit el manual». Sense tocar el manual.

Veure un manual d'exemple Descarregar el 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>

Els tres exemples

Manuals reals, pintats des del seu Markdown

Tres manuals de SWPanel 2027, sense retocar. A la pàgina de la comunitat surten en negreta i subratllats.

Crear una base de dades MySQL o MariaDB a SWPanel i aconseguir que la teva aplicació s'hi connecti

Manual 32 · Bases de dades · 29 min

Obrir al lector

Gestionar els comptes FTP del teu Hosting a SWPanel: què és l'FTP, crear comptes i connectar-te amb FileZilla

Manual 555 · FTP i arxius · 12 min

Obrir al lector

Configurar a Outlook un compte de correu del teu Hosting

Manual 214 · Correu electrònic · 20 min

Obrir al lector

Com s'integra

Tres maneres, el mateix resultat

Tria segons on visqui el manual: dins de la pàgina, en un fitxer a part o pintat al servidor perquè el llegeixin els cercadors.

  1. Inclou el lector

    Un full d'estils i un script, sense dependències. Tot penja de la classe .swm, així que no xoca amb els estils de la web.

    <!-- 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. Enganxa el Markdown tal qual

    Dins d'un bloc text/markdown, amb el tema i els enllaços en atributs. SWManual.auto() pinta tots els manuals de la pàgina.

    <!-- 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. O pinta'l des del teu codi

    Amb el Markdown que torni el servidor, i decidint on porta cada «Veure manual».

    // 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. I al servidor, per a Google

    El mateix fitxer funciona a Node: genera l'HTML del lector i serveix-lo ja pintat. Així estan fetes les pàgines d'exemple d'aquesta web.

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

Què entén

El Markdown de SWPanel, amb les seves costums

A més del Markdown de sempre, el lector coneix les convencions dels manuals de la Biblioteca.

Convencions del Markdown de SWPanel i com es pinten
## <a id="indice"></a>Índice Les àncores de SWPanel als títols: l'índex i els enllaços interns segueixen funcionant.
> **Importante - …** Les cites amb etiqueta es pinten com a avisos: Important i Ull en ambre, Nota i Abans de començar en blau, Tip en violeta i Bona pràctica en verd.
<a href="javascript:top.ver_manual('ID')"> Els enllaços a altres manuals es converteixen en enllaços de la web, amb la seva icona de llibre.
Opcions del lector i per a què serveix cadascuna
tema · tag Tema del manual i l'etiqueta que es veu sobre el títol i a la barra de dalt.
minutes Minuts de lectura. Si no s'indica, es calculen amb les paraules del manual.
updated Data d'actualització que es mostra al costat del temps de lectura.
backHref · closeHref On porten «Tornar», la creu i «He llegit el manual, tancar».
askHref L'enllaç de «Faltava alguna cosa? Pregunta-ho a la IA».
resolveManual(id) Converteix els enllaços del Markdown de SWPanel (javascript:top.ver_manual('ID')) en una adreça de la web.
resolveNumber(n) Amb autolinkManuals, converteix «el manual 47» del text en un enllaç.
imageBase Prefix per a les imatges amb ruta relativa. Les de static.swpanel.com es queden com estan.
onRate · onDone Avisos quan algú valora el manual o el marca com a llegit, per desar-ho on vulguis.

El kit

Tot el que necessites, en una carpeta

Els fitxers del lector, una pàgina d'exemple i els tres manuals originals.

  • JS

    swpanel-manual.js

    El lector: Markdown a HTML i el comportament. Sense dependències.

    En preparació
  • CSS

    swpanel-manual.css

    Els estils del lector, tots sota .swm.

    En preparació
  • HTML

    ejemplo.html

    Una pàgina que pinta un manual al navegador.

    En preparació
  • MD

    README.md

    Com s'integra, pas a pas.

    En preparació
  • MD

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

    Markdown original del manual 32.

    En preparació
  • MD

    M555-cuentas-ftp-hosting.md

    Markdown original del manual 555.

    En preparació
  • MD

    M214-outlook-correo-hosting.md

    Markdown original del manual 214.

    En preparació
  • ZIP

    kit-lector-manuales.zip

    Tot l'anterior en un sol fitxer.

    En preparació

Tota la biblioteca, oberta

Els manuals i vídeos de SWPanel, amb cercador i per temes, sense entrar al panell.

Començar gratis Obrir la biblioteca