gumdrop

软糖

零配置脚本将 Markdown 文档显示为静态 HTML 页面

Gumdrop被设计为一个易于使用的独立脚本，可以生成用 Markdown 编写的网站和文档。它从 CDN（包括 Markdown 解析器）动态加载其所有依赖项，并且不需要任何配置或初始化。

安装

Gumdrop不需要安装，您只需将其加载到带有script标签的 HTML 文档中即可。

 < script src =" https://cdn.jsdelivr.net/npm/gumdrop@4 " > </ script > 

用法

要使用 Markdown 创建静态网站，您只需在文件服务器上创建 HTML 模板 ( index.html ) 并将Gumdrop添加为外部脚本文件。

 < main > </ main >
< script src =" path/to/gumdrop.js " >

请注意，您必须通过http / https协议提供文件，因为file协议不支持获取请求。

可以加载pages文件夹中的Markdown文件。 Gumdrop监视 URL 的哈希片段并从pages文件夹加载相应的 Markdown 文件。解析后的 Markdown 文件将在<main> HTML 节点（如果存在）中呈现，否则在body中呈现。如果未指定文件，则加载的默认文件是pages/index.md 。要创建指向pages文件夹中另一个文件的链接，只需创建一个名称前缀为#!/链接。

 [ Link to about.md ] ( #!/about )

静态资源（例如图像）可以从文件服务器提供的任何文件夹加载，路径相对于index.html 。各种 HTTP 错误的错误页面可以放置在errors文件夹中。每个文件都应该根据它所代表的 HTTP 错误代码来命名（例如， errors/404.md ）。

可以在 YAML Front Matter 中为您的文档指定其他数据。您可以使用胡子模板在任何 Markdown 文档中访问此数据。

您还可以使用单独的文件来存储数据并将这些资源文件链接到前文中的文档。资源文件可以使用 YAML（默认）、JSON 或 Markdown 类型。文档前文中用!file类型注释的任何值都被视为文件资源。以/开头的文件路径相对于index.html ，如果缺少前导/ ，则假定data文件夹为资源位置。如果未给出文件类型（扩展名），则假定为.yaml扩展名。对于.md资源文件，返回的值将是渲染的 Markdown 文档。

 # 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}}

特征

• 零配置，无需初始化
• 没有服务器端代码，只需要一个静态文件服务器
• 没有构建/生成步骤，它只是您提供的文件
• 通过 ExtraMark 提供额外 Markdown 功能
• 通过获取请求进行导航
• 文件的本地缓存可加快加载时间
• 前面的附加数据和小胡子模板处理的数据文件
• 各种 HTTP 错误代码（404、500、300）的错误页面

语法高亮

受防护的代码块由 Prism.js 自动处理。支持的语言是 Prism.js 包中的默认语言。对于语法突出显示，您必须在index.html中包含Prism.js样式。

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css " />

与 GitHub 页面一起使用

您可以将Gumdrop与 GitHub Pages 一起使用，因为它可以充当静态文件服务器。为了防止 GitHub Pages 尝试使用 Jekyll 转换您的网站，请添加一个空的.nojekyll文件到您网站的根目录。

贡献

欢迎所有想法、建议、错误报告、拉取请求。 ？