SWPanel

Para a equipe do site

O leitor do SWPanel, para qualquer manual em Markdown

O mesmo arquivo Markdown que guarda a Biblioteca de Conhecimento se converte em uma página do site com o leitor do SWPanel: índice que acompanha a leitura, letra no seu tamanho, avaliação e «Li o manual». Sem tocar no manual.

Ver um manual de exemplo Baixar o 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>

Os três exemplos

Manuais reais, renderizados a partir do seu Markdown

Três manuais do SWPanel 2027, sem retoques. Na página da comunidade aparecem em negrito e sublinhados.

Criar um banco de dados MySQL ou MariaDB no SWPanel e fazer a sua aplicação se conectar a ele

Manual 32 · Bancos de dados · 29 min

Abrir no leitor

Gerenciar as contas FTP da sua Hospedagem no SWPanel: o que é o FTP, criar contas e conectar-se com o FileZilla

Manual 555 · FTP e arquivos · 12 min

Abrir no leitor

Configurar no Outlook uma conta de e-mail da sua Hospedagem

Manual 214 · E-mail · 20 min

Abrir no leitor

Como se integra

Três maneiras, o mesmo resultado

Escolha conforme onde o manual vive: dentro da página, em um arquivo à parte ou renderizado no servidor para que os buscadores o leiam.

  1. Inclua o leitor

    Uma folha de estilos e um script, sem dependências. Tudo pende da classe .swm, então não conflita com os estilos do 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. Cole o Markdown como está

    Dentro de um bloco text/markdown, com o tema e os links em atributos. SWManual.auto() renderiza todos os manuais da 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. Ou renderize-o a partir do seu código

    Com o Markdown que o servidor devolver, e decidindo para onde leva 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')); });

  4. E no servidor, para o Google

    O mesmo arquivo funciona no Node: gere o HTML do leitor e sirva-o já renderizado. É assim que as páginas de exemplo deste site são feitas.

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

O que entende

O Markdown do SWPanel, com os seus costumes

Além do Markdown de sempre, o leitor conhece as convenções dos manuais da Biblioteca.

Convenções do Markdown do SWPanel e como são renderizadas
## <a id="indice"></a>Índice As âncoras do SWPanel nos títulos: o índice e os links internos continuam funcionando.
> **Importante - …** As citações com etiqueta são renderizadas como avisos: Importante e Atenção em âmbar, Nota e Antes de começar em azul, Dica em violeta e Boa prática em verde.
<a href="javascript:top.ver_manual('ID')"> Os links para outros manuais se convertem em links do site, com o seu ícone de livro.
Opções do leitor e para que serve cada uma
tema · tag Tema do manual e a etiqueta que aparece sobre o título e na barra superior.
minutes Minutos de leitura. Se não forem indicados, são calculados com as palavras do manual.
updated Data de atualização exibida ao lado do tempo de leitura.
backHref · closeHref Para onde levam «Voltar», a cruz e «Li o manual, fechar».
askHref O link de «Faltou algo? Pergunte à IA».
resolveManual(id) Converte os links do Markdown do SWPanel (javascript:top.ver_manual('ID')) em um endereço do site.
resolveNumber(n) Com autolinkManuals, converte «o manual 47» do texto em um link.
imageBase Prefixo para as imagens com caminho relativo. As de static.swpanel.com ficam como estão.
onRate · onDone Avisos quando alguém avalia o manual ou o marca como lido, para guardar onde você quiser.

O kit

Tudo o que você precisa, em uma pasta

Os arquivos do leitor, uma página de exemplo e os três manuais originais.

  • JS

    swpanel-manual.js

    O leitor: Markdown para HTML e o comportamento. Sem dependências.

    Em preparação
  • CSS

    swpanel-manual.css

    Os estilos do leitor, todos sob .swm.

    Em preparação
  • HTML

    ejemplo.html

    Uma página que renderiza um manual no navegador.

    Em preparação
  • MD

    README.md

    Como se integra, passo a passo.

    Em preparação
  • MD

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

    Markdown original do manual 32.

    Em preparação
  • MD

    M555-cuentas-ftp-hosting.md

    Markdown original do manual 555.

    Em preparação
  • MD

    M214-outlook-correo-hosting.md

    Markdown original do manual 214.

    Em preparação
  • ZIP

    kit-lector-manuales.zip

    Tudo o anterior em um só arquivo.

    Em preparação

Toda a biblioteca, aberta

Os manuais e vídeos do SWPanel, com busca e por temas, sem entrar no painel.

Começar grátis Abrir a biblioteca