简介
blezer 是一个基于 Node.js 的实现的静态站点生成器。使用者可以通过编写 Markdown 文档,快速地生成具有美观易读的网页。blezer 还提供了一些可定制化的功能,让使用者能够根据自己的需求构建出更加适合自己网站的生成器。
安装
使用 npm 安装 blezer:
npm install -g blezer
快速开始
在使用 blezer 前,需要先准备好 Markdown 文档以及生成器的配置文件。配置文件命名为 blezer-config.js
,可以放在项目的根目录下。以下是一个简单的配置文件示例:
module.exports = { title: '我的网站', description: '这是我的静态网站', sourceDir: 'docs', outDir: 'dist' }
配置项说明:
title
:网站标题,会显示在页面的<title>
标签中。description
:网站的描述,会显示在页面的<meta>
标签中。sourceDir
:Markdown 文档所在的目录。outDir
:生成的网站文件保存的目录。
创建一个 Markdown 文档,例如 docs/index.md
:
# 欢迎来到我的网站 这是我的第一篇文章。欢迎大家访问我的网站。
然后,在项目的根目录下运行以下命令:
blezer
这会默认读取 blezer-config.js
配置文件,并根据其中的配置将 Markdown 文档转换为 HTML 文件,并保存在指定的 outDir
目录下。
现在,你可以在浏览器中打开 dist/index.html
来查看生成的网站了。
自定义样式
blezer 提供了一些内置样式,可以直接在 HTML 文件中引用。同时,也支持使用自定义的样式文件。以下是一个示例配置:
module.exports = { title: '我的网站', description: '这是我的静态网站', sourceDir: 'docs', outDir: 'dist', theme: 'custom-theme' }
在项目的根目录下创建 themes/custom-theme/styles.css
文件,用于定义自定义的样式:
body { background-color: #f0f0f0; }
然后在 HTML 文件中引用该样式文件:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------- ----- ---------------- -------------------------------------- ------- ------ ---- --- --- ------- -------
插件系统
blezer 支持使用插件来扩展其功能。以下是一个示例配置:
-- -------------------- ---- ------- -------------- - - ------ ------- ------------ ----------- ---------- ------- ------- ------- -------- - ------------------------- - -
在此示例中,我们使用了名为 blezer-plugin-highlight
的插件。该插件可以自动为 Markdown 中的代码块添加语法高亮。在项目的根目录下安装该插件:
npm install blezer-plugin-highlight
然后,在 blezer-config.js
中添加插件:
module.exports = { // ... plugins: [ 'blezer-plugin-highlight' ] }
插件会自动处理 Markdown 中的代码块,并加上对应语言的高亮显示效果。
结语
以上是 blezer 的简单使用教程。希望可以对大家的前端开发工作有所帮助。如果你想了解更多关于 blezer 的信息,可以去 GitHub 上查看官方文档。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056cd581e8991b448e66e3