前言
gulp-blogger-html-preview 是一个能够快速将 markdown 转换为 HTML 静态文件的 gulp 插件，极大简化了博客站点的搭建过程。使用 gulp-blogger-html-preview 之前，需要了解以下技术:
- Node.js
- Gulp
本文将详细介绍如何使用 gulp-blogger-html-preview 插件。
安装 gulp-blogger-html-preview
在项目的根目录下执行以下命令安装 gulp-blogger-html-preview：
npm install gulp-blogger-html-preview --save-dev
使用 gulp-blogger-html-preview
以下是一个基本的 gulpfile.js 的样例。
-- -------------------- ---- -------
--- ---- - ----------------
--- -------- - -------------------------
--- --------- - --------------------------
--- ------------ - ------------------------------
--- --- - --------------------
--- --- - --------------------------
--- ------- - ---------------------------------------
--------------- ---------- -
------ ----------------------------
-----------------
----------------
------------------
---------------------
----------------------------------
---
---------------- ------- ---------- -
------ ---------------------------
------------------ - -------------
----------------------------
---
-------------------- ---------
在 markdown 文件夹中编写 markdown 文件并在 gulpfile.js 中使用 gulp-md 将其转换为 HTML 文件，而使用 gulp-blogger-html-preview 插件可以快速将文章头部的元数据插入到生成的 HTML 中。
-- -------------------- ---- ------- --- ------ -- ------- ---- ----------- --- --- ----- --- --- --- ---- ------------- --- - ----- ------- --- ---- -------------- ---
gulp-blogger-html-preview 配置
-- -------------------- ---- -------
---
--------------- ---------- -
------ ----------------------------
-----------------
----------------
------------------
---------------------
----------------------------------
---
---------------- ------- ---------- -
------ ---------------------------
------------------ - -------------
----------------------------
---
---使用 gulp-blogger-html-preview 的核心代码就是：
.pipe(preview())
在 markdown 头部添加自定义参数：
-- -------------------- ---- ------- --- ------ -- ------- ---- ----------- --- --- ----- --- --- ----- ---------- ----- --- ---- -------- ---
gulp-blogger-html-preview 就会自动将自定义参数转化为 HTML 代码并加入到 html 中。
结语
gulp-blogger-html-preview 让博客开发变得简单和快速。只需要添加头部的元数据就可以自动生成分类、标签等信息。此外，使用 gulp-blogger-html-preview 也能提高开发效率和标准化程度，非常值得尝试。
参考资料
gulp-blogger-html-preview 官方文档
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1c81e8991b448dab4e