Script de configuración cero para mostrar documentos de Markdown como páginas HTML estáticas
GumDrop está diseñado para ser un script fácil de usar y independiente que puede generar sitios web y documentos escritos en Markdown. Carga dinámicamente todas sus dependencias de un CDN (incluido el analizador de Markdown) y no requiere ninguna configuración o inicialización.
Gumdrop no requiere la instalación, solo tiene que cargarlo en un documento HTML con una etiqueta script
.
< script src =" https://cdn.jsdelivr.net/npm/gumdrop@4 " > </ script >
Para crear un sitio web estático con Markdown, todo lo que necesita es crear una plantilla HTML ( index.html
) en su servidor de archivos y agregar gumdrop como un archivo de script externo.
< main > </ main >
< script src =" path/to/gumdrop.js " >
Tenga en cuenta que debe servir sus archivos a través del protocolo
http
/https
, ya que el protocolofile
no admite solicitudes de búsqueda.
Se pueden cargar archivos de Markdown en la carpeta pages
. Gumdrop observa el fragmento hash de la URL y carga el archivo de reducción correspondiente de la carpeta pages
. Los archivos de Markdown analizados se representan en el nodo <main>
HTML si están presentes, en body
de lo contrario. El archivo predeterminado que se carga si no se especifica ningún archivo es pages/index.md
. Para crear un enlace a otro archivo en la carpeta pages
, simplemente cree un enlace con su nombre prefijo por #!/
.
[ Link to about.md ] ( #!/about )
Los recursos estáticos (por ejemplo, imágenes) se pueden cargar desde cualquier carpeta que sea atendida por su servidor de archivos, las rutas son relativas a index.html
. Las páginas de error para varios errores HTTP se pueden colocar en la carpeta de errors
. Cada archivo debe nombrarse de acuerdo con el código de error HTTP que representa (por ejemplo, errors/404.md
).
Se pueden especificar datos adicionales para sus documentos en una materia frontal YAML. Puede acceder a estos datos en cualquiera de sus documentos de Markdown con plantillas de bigote.
También puede usar archivos separados para almacenar datos y vincular estos archivos de recursos a un documento en la materia frontal. Los archivos de recursos pueden usar el tipo YAML (predeterminado), JSON o Markdown. Cualquier valor en el asunto frontal de un documento que se anote con el tipo !file
Se considera un recurso de archivo. Las rutas de archivo que comienzan con un liderazgo /
son relativos a index.html
, si el liderazgo /
está falta, entonces la carpeta data
se supone como la ubicación de recursos. Si no se proporciona ningún tipo de archivo (extensión), se supone la extensión .yaml
. Para archivos de recursos .md
el valor devuelto será el documento de Markdown renderizado.
# data/todo.yaml
todos :
- title : First todo
text : Complete your first assignment
completed : true
- title : YAML
text : Learn more about YAML Front Matters
completed : false
---
todos: !file todo.yaml
---
{{#todos}}
- **{{title}}**: {{text}} {{#completed}}(✔){{/completed}}
{{/todos}}
Los bloques de código cercados son procesados automáticamente por Prism.js. Los idiomas admitidos son los idiomas predeterminados en el paquete Prism.js. Para resaltar sintaxis, debe incluir un estilo prisma.js en su index.html
.
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css " />
Puede usar GumDrop con páginas GitHub, ya que puede servir como un servidor de archivos estáticos. Para evitar que las páginas de GitHub intenten transformar su sitio con Jekyll, agregue un archivo .nojekyll
vacío a la raíz de su sitio.
Todas las ideas, recomendaciones, informes de errores, solicitudes de extracción son bienvenidas. ?