Para el equipo de la web
El lector de SWPanel, para cualquier manual en Markdown
El mismo fichero Markdown que guarda la Biblioteca de Conocimiento se convierte en una página de la web con el lector de SWPanel: índice que sigue la lectura, letra a tu medida, valoración y «He leído el manual». Sin tocar el manual.
Los tres ejemplos
Manuales reales, pintados desde su Markdown
Tres manuales de SWPanel 2027, sin retocar. En la página de la comunidad salen en negrita y subrayados.
Crear una base de datos MySQL o MariaDB en SWPanel y conseguir que tu aplicación conecte con ella
Manual 32 · Bases de datos · 29 min
Abrir en el lectorGestionar las cuentas FTP de tu Hosting en SWPanel: qué es el FTP, crear cuentas y conectarte con FileZilla
Manual 555 · FTP y archivos · 12 min
Abrir en el lectorConfigurar en Outlook una cuenta de correo de tu Hosting
Manual 214 · Correo electrónico · 20 min
Abrir en el lectorCómo se integra
Tres maneras, el mismo resultado
Elige según dónde viva el manual: dentro de la página, en un fichero aparte o pintado en el servidor para que lo lean los buscadores.
-
Incluye el lector
Una hoja de estilos y un script, sin dependencias. Todo cuelga de la clase
.swm, así que no choca con los estilos 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> -
Pega el Markdown tal cual
Dentro de un bloque
text/markdown, con el tema y los enlaces en atributos.SWManual.auto()pinta todos los manuales 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> -
O píntalo desde tu código
Con el Markdown que devuelva el servidor, y decidiendo a dónde lleva cada «Ver 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')); }); -
Y en el servidor, para Google
El mismo fichero funciona en Node: genera el HTML del lector y sírvelo ya pintado. Es como están hechas las páginas de ejemplo de esta 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é entiende
El Markdown de SWPanel, con sus costumbres
Además del Markdown de siempre, el lector conoce las convenciones de los manuales de la Biblioteca.
| En el Markdown | En la página |
|---|---|
## <a id="indice"></a>Índice
|
Las anclas de SWPanel en los títulos: el índice y los enlaces internos siguen funcionando. |
> **Importante - …**
|
Las citas con etiqueta se pintan como avisos: Importante y Ojo en ámbar, Nota y Antes de empezar en azul, Tip en violeta y Buena práctica en verde. |
<a href="javascript:top.ver_manual('ID')">
|
Los enlaces a otros manuales se convierten en enlaces de la web, con su icono de libro. |
| Opción | Para qué sirve |
|---|---|
tema · tag
|
Tema del manual y la etiqueta que se ve sobre el título y en la barra de arriba. |
minutes
|
Minutos de lectura. Si no se indica, se calculan con las palabras del manual. |
updated
|
Fecha de actualización que se muestra junto al tiempo de lectura. |
backHref · closeHref
|
A dónde llevan «Volver», la cruz y «He leído el manual, cerrar». |
askHref
|
El enlace de «¿Faltaba algo? Pregúntaselo a la IA». |
resolveManual(id)
|
Convierte los enlaces del Markdown de SWPanel (javascript:top.ver_manual('ID')) en una dirección de la web. |
resolveNumber(n)
|
Con autolinkManuals, convierte «el manual 47» del texto en un enlace. |
imageBase
|
Prefijo para las imágenes con ruta relativa. Las de static.swpanel.com se quedan como están. |
onRate · onDone
|
Avisos cuando alguien valora el manual o lo marca como leído, para guardarlo donde quieras. |
El kit
Todo lo que necesitas, en una carpeta
Los ficheros del lector, una página de ejemplo y los tres manuales originales.
-
JS
swpanel-manual.js
El lector: Markdown a HTML y el comportamiento. Sin dependencias.
En preparación -
CSS
swpanel-manual.css
Los estilos del lector, todos bajo .swm.
En preparación -
HTML
ejemplo.html
Una página que pinta un manual en el navegador.
En preparación -
MD
README.md
Cómo se integra, paso a paso.
En preparación -
MD
M32-crear-base-de-datos-mysql-mariadb.md
Markdown original del manual 32.
En preparación -
MD
M555-cuentas-ftp-hosting.md
Markdown original del manual 555.
En preparación -
MD
M214-outlook-correo-hosting.md
Markdown original del manual 214.
En preparación -
ZIP
kit-lector-manuales.zip
Todo lo anterior en un solo fichero.
En preparación
Toda la biblioteca, abierta
Los manuales y vídeos de SWPanel, con buscador y por temas, sin entrar en el panel.