1. 什么是 fiddly？
fiddly 是一个基于 markdown 生成静态网站的 npm 包。它的出现极大地方便了前端工程师快速开发和部署静态网站，特别是对于个人博客、简历等小型网站，更是提供了极大的便利。
fiddly 具有以下特点：
- 提供多种主题选择，美观可定制化程度高；
- 支持代码高亮、导航栏、底部信息等功能；
- 生成的静态文件部署简单，可以上传至 CDN 或者 Github Pages 等托管平台；
- 调试方便，可以在本地预览 ；
2. fiddly 的安装和使用
安装
全局安装 fiddly：
npm i -g fiddly
初始化项目
在你的项目目录下运行以下命令：
fiddly init
该命令将询问你一些问题，包括主题、网站名称、网站描述、作者、关键字等，输入完毕后将生成模板文件。
编辑模板
打开生成的目录，你会看到 fiddly 为我们提供了以下目录结构：
/website ---- /pages --------- index.md ---- /public ---- .fiddlyrc.json
其中，index.md 是你的网站首页，你可以在这个文件中编写内容，使用 markdown 格式排版。公共资源可以放在 public 目录中，.fiddlyrc.json 是 fiddly 的配置文件，你可以根据需求修改其中的参数。
生成网站
当我们完成了编辑网站内容以及配置，就可以使用以下命令生成网站：
fiddly build
生成的文件将放在 /dist 目录下，你可以直接打开 index.html 预览网站。
部署网站
将生成的 /dist 下的静态文件上传至 CDN 或者 Github Pages 等托管平台即可。
3. fiddly 的进阶使用
主题定制
fiddly 支持多种主题，你可以在 .fiddlyrc.json 文件中修改 theme 字段，切换主题。
对于想要进一步定制主题的用户，可以在项目根目录下创建 theme.ejs 文件，fiddly 会自动寻找该文件，并将其作为模板进行渲染。此时，你可以在模板中使用 EJS 语法，进一步对主题进行定制。
导航栏和底部信息
在 .fiddlyrc.json 文件中可以设置导航栏和底部信息（footer）。你可以根据需求修改其中的参数。
插件
fiddly 支持插件，可以在 .fiddlyrc.json 文件中添加 plugins 字段，引入插件。
例如，想使用 vue 组件在网站中渲染，可以引入 fiddly-plugin-vue：
npm i fiddly-plugin-vue
然后，在 .fiddlyrc.json 文件中添加以下代码：
{
"plugins": [
"fiddly-plugin-vue"
]
}这样，你就可以在网站中使用 vue 组件了。
4. 示例代码
/website ---- /pages --------- index.md ---- /public ---- .fiddlyrc.json
.fiddlyrc.json:
-- -------------------- ---- -------
-
------- --- ---------
-------------- ----- -- -- -------- ---------
----------- ------------ ---------- --------
-------- -------------
------- -
-
------- -------
------- ------------
--
-
------- --------
------- ------------
-
--
--------- -
------- -- ---- -- --------
-
-index.md:
-- -------------------- ---- ------- - ----- ----- ---- -- -- ----- -------- -- ------- - ----- ----- ----- --- ----- ----------- ---------- ----- ----- --- ----- -- -- --------- -------- --- --- ------ ----- ---- --------- ----- -- ------- - ---- ------------ ------- ---------- --- -------- --------- ---- -- ------- ---- ------- ---- ---- --------- -------- ----------
结语
fiddly 是一个十分优秀的 npm 包，不仅使得快速搭建静态网站变得轻松，同时也提供了主题定制、插件等进阶功能，方便用户进行二次开发。希望这篇文章可以帮助大家更好地使用 fiddly。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb588b5cbfe1ea061144d