SWPanel

Per il team del sito

Il lettore di SWPanel, per qualsiasi manuale in Markdown

Lo stesso file Markdown che conserva la Biblioteca della Conoscenza diventa una pagina del sito con il lettore di SWPanel: indice che segue la lettura, carattere a tua misura, valutazione e «Ho letto il manuale». Senza toccare il manuale.

Vedi un manuale di esempio Scarica il 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>

I tre esempi

Manuali reali, resi dal loro Markdown

Tre manuali di SWPanel 2027, senza ritocchi. Nella pagina della community compaiono in grassetto e sottolineati.

Creare un database MySQL o MariaDB in SWPanel e far connettere la tua applicazione

Manuale 32 · Database · 29 min

Apri nel lettore

Gestire gli account FTP del tuo Hosting in SWPanel: cos'è l'FTP, creare account e connettersi con FileZilla

Manuale 555 · FTP e file · 12 min

Apri nel lettore

Configurare in Outlook un account di posta del tuo Hosting

Manuale 214 · Posta elettronica · 20 min

Apri nel lettore

Come si integra

Tre modi, lo stesso risultato

Scegli in base a dove vive il manuale: dentro la pagina, in un file a parte o reso sul server perché lo leggano i motori di ricerca.

  1. Includi il lettore

    Un foglio di stile e uno script, senza dipendenze. Tutto dipende dalla classe .swm, quindi non confligge con gli stili del sito.

    <!-- 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. Incolla il Markdown così com'è

    Dentro un blocco text/markdown, con l'argomento e i link negli attributi. SWManual.auto() rende tutti i manuali della pagina.

    <!-- 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 rendilo dal tuo codice

    Con il Markdown restituito dal server, e decidendo dove porta ogni «Vedi manuale».

    // 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. E sul server, per Google

    Lo stesso file funziona in Node: genera l'HTML del lettore e servilo già reso. È così che sono fatte le pagine di esempio di questo sito.

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

Cosa capisce

Il Markdown di SWPanel, con le sue convenzioni

Oltre al Markdown di sempre, il lettore conosce le convenzioni dei manuali della Biblioteca.

Convenzioni del Markdown di SWPanel e come vengono rese
## <a id="indice"></a>Índice Le ancore di SWPanel nei titoli: l'indice e i link interni continuano a funzionare.
> **Importante - …** Le citazioni con etichetta vengono rese come avvisi: Importante e Attenzione in ambra, Nota e Prima di iniziare in blu, Suggerimento in viola e Buona pratica in verde.
<a href="javascript:top.ver_manual('ID')"> I link ad altri manuali diventano link del sito, con la loro icona di libro.
Opzioni del lettore e a cosa serve ciascuna
tema · tag Argomento del manuale e l'etichetta che si vede sopra il titolo e nella barra in alto.
minutes Minuti di lettura. Se non indicati, vengono calcolati con le parole del manuale.
updated Data di aggiornamento mostrata accanto al tempo di lettura.
backHref · closeHref Dove portano «Indietro», la croce e «Ho letto il manuale, chiudi».
askHref Il link di «Mancava qualcosa? Chiedilo all'IA».
resolveManual(id) Converte i link del Markdown di SWPanel (javascript:top.ver_manual('ID')) in un indirizzo del sito.
resolveNumber(n) Con autolinkManuals, converte «il manuale 47» del testo in un link.
imageBase Prefisso per le immagini con percorso relativo. Quelle di static.swpanel.com restano come sono.
onRate · onDone Avvisi quando qualcuno valuta il manuale o lo segna come letto, per salvarlo dove vuoi.

Il kit

Tutto ciò che ti serve, in una cartella

I file del lettore, una pagina di esempio e i tre manuali originali.

  • JS

    swpanel-manual.js

    Il lettore: da Markdown a HTML e il comportamento. Senza dipendenze.

    In preparazione
  • CSS

    swpanel-manual.css

    Gli stili del lettore, tutti sotto .swm.

    In preparazione
  • HTML

    ejemplo.html

    Una pagina che rende un manuale nel browser.

    In preparazione
  • MD

    README.md

    Come si integra, passo dopo passo.

    In preparazione
  • MD

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

    Markdown originale del manuale 32.

    In preparazione
  • MD

    M555-cuentas-ftp-hosting.md

    Markdown originale del manuale 555.

    In preparazione
  • MD

    M214-outlook-correo-hosting.md

    Markdown originale del manuale 214.

    In preparazione
  • ZIP

    kit-lector-manuales.zip

    Tutto quanto sopra in un solo file.

    In preparazione

Tutta la biblioteca, aperta

I manuali e i video di SWPanel, con ricerca e per argomenti, senza entrare nel pannello.

Inizia gratis Apri la biblioteca