简介
lucid-styledocco 是一个基于 Styledocco 的 gulp 插件，用于生成类似于 lucid UI 风格的文档。
安装
在项目根目录下安装 gulp 和 lucid-styledocco：
npm install gulp lucid-styledocco --save-dev
基本使用
在 gulpfile.js 中引入 gulp 和 lucid-styledocco：
var gulp = require('gulp');
var styledocco = require('lucid-styledocco');然后创建一个任务，并在任务中使用 styledocco 方法，像这样：
-- -------------------- ---- -------
----------------- -------- -- -
---------------------------
------------------
---- ---------
----- --- ---------
------------ -----
------------- ----
----
---上面的代码做了如下的事情：
- 将
./src/**/*.styl下的所有 .styl 文件作为输入； - 使用
out选项指定输出生成的 HTML 文档的目录； - 使用
name选项指定生成的 HTML 文档中项目的名称； - 使用
no-minify选项禁用 CSS 压缩； - 使用
no-flexbox选项禁用 Flexbox。
最后运行该任务即可生成 HTML 文档。
进阶使用
添加自定义主题
如果你想要更换主题，可以在 gulpfile.js 文件中使用 theme 选项。首先，安装 lucid-styledocco-themes：
npm install lucid-styledocco-themes --save-dev
添加以下代码到 gulpfile.js：
-- -------------------- ---- -------
--- ----- - ----------------
--- ---------------- - -----------------------------------
----------------------- -------- -- -
------ ---------------------------
------------------------
---- ---------------
----- --- ---------
------ ------ -- ------- -- ---- ---- ------- -----
------------- ----------- -- ---- -- ------ --- -- ---- ---- ----- ---- ---- ----- --- --- ----- ------ ----- -------- -- --- -----
-------- -----------
----
---在主题包的 styles 目录中提供了自定义 CSS 样式，如果我们需要扩展或者覆盖主题包的样式，只需要在自定义样式表中覆盖即可。
-- -------------------- ---- -------
-- -------------------- --
- -
------ ----
-
--- -
----------------- --------
------- --- ----- -----
-------- -----
-添加示例代码
你也可以给你的文档添加用于演示的示例代码。只需要使用 @example 标记，这是一个含有 @example 标记的示例：
-- -------------------- ---- ------- --- - ----- ------------ - - -------- - --- ----- - --- --------- ---- - - ------ -------- - - ------ -------- - - ---- ------ --
在这个示例中，在文档中对应构造函数的位置就会出现一个演示区域，可以通过这个演示区域执行代码来进行实时的代码调试。
添加注释
在标准风格的代码注释中，为了保证文档的正确性和完整性，我们应该添加注释来解释代码功能和用途。在注释中，我们不仅仅可以添加 @example 标记，还支持设置属性、方法、类等，让文档更加完整。以下是一个含有完整属性列表和示例代码的示例：
-- -------------------- ---- -------
---
- ------ ------------
-
- --------
- --- --- - --- ------------- ----
-
- --------- -------- ---- --- -------- -----
- --------- -------- --- --- -------- ----
--
-------- ------------ ---- -
--------- - -----
-------- - ----
-总结
lucid-styledocco 是一个方便的文档生成工具，为开发者提供了一种简单快捷的方式来生成美观易读的文档。如有更多需要，请查看 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74417