介绍
Jekyll Styleguide 是一个基于 Jekyll 搭建的前端样式指南生成器，它可以自动生成类似于 CSS 框架文档的样式指南，方便团队内部沟通和协作。本篇文章将向大家介绍如何使用 npm 包 jekyll-styleguide 来快速生成自己的样式指南。
安装
为使用 jekyll-styleguide，我们需要先安装 Jekyll。打开终端（macOS / Linux）或命令提示符（Windows），输入以下命令安装 Jekyll：
gem install bundler jekyll
安装完成后，我们可以使用 npm 来安装 jekyll-styleguide：
npm install -g jekyll-styleguide
配置
在使用 jekyll-styleguide 之前，我们需要先在项目根目录下创建一个 _styleguide 目录，并将需要展示的样式文档放置在这个目录下。接着，在根目录下新建一个名为 _config.yml 的文件，配置好需要读取的文件路径和样式分类等信息：
-- -------------------- ---- -------
-----------
----------- -----------
----------- ---------------
----------- ------------
------ -- ----- -----
-----------
- -----
- ----------
- -------其中，source_dir 表示样式文档所在目录，output_dir 表示生成文件存放目录，stylesheet 表示样式指南使用的 CSS 文件，title 表示样式指南标题，categories 表示样式分类。
接着，在 _styleguide 目录下新建一个名为 README.md 的文件，书写样式文档。每个分类的样式文档需要以 H2 开头，如下所示：
-- -------------------- ---- ------- -- ---------- --- ------- ----- ---- -- ---- -- --- ------- -------- ---- -- ---- -- - -------- ------- -------- ---- -- ---- -- -- ---- ------- -------- ---- -- ---- -- -- ---- ------- --------
生成
完成上述配置后，我们可以输入以下命令生成样式指南：
jekyll-styleguide serve
执行该命令后，我们在浏览器中打开 http://localhost:8080 即可查看生成的样式指南。
模板
如果你想要个性化你的样式指南，可以使用 jekyll-styleguide 的模板功能。覆盖 jekyll-styleguide 默认模板，可以在根目录下创建名为 _includes 的文件夹，并在其中新建名为 styleguide 的文件夹，然后在其中放置你的模板文件即可。
优化
我们可以使用 Grunt 或 Gulp 等自动化工具来优化 jekyll-styleguide 的生成流程。以 Grunt 为例，我们可以使用 grunt-shell 插件执行生成命令：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
------ -
----------- -
-------- ------------------ ------
-
-
---
----------------------------------
-------------------------------------- ----------------------
--然后在终端中输入 grunt serve-styleguide 即可自动执行生成流程。
结论
jekyll-styleguide 是一个简单易用的前端样式指南生成器，它可以帮助我们更好地协作和交流。借助 npm 包 jekyll-styleguide，在搭建自己的样式指南时，我们可以省去许多繁琐的配置和构建过程，更加高效地生成样式指南。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005523a81e8991b448cfc2c