前言
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:
--- ------- ------------------------- ----------
使用 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 的核心代码就是:
----------------
在 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