简介
Bisheng 是一个基于 React 的静态页面生成工具，可以将 Markdown 编写的文档转化成静态网站，适用于技术文档、个人博客等各种场景。而 bisheng-plugin-choerodon-ui 是一个用于支持 Choerodon UI、图标库等资源的 Bisheng 插件。
本文将介绍如何使用 npm 包 bisheng-plugin-choerodon-ui 来支持在 Bisheng 中使用 Choerodon UI。
安装
在项目中使用命令行执行以下命令来安装 bisheng-plugin-choerodon-ui：
npm install bisheng-plugin-choerodon-ui --save-dev
安装完成后，在 Bisheng 的配置文件中添加以下代码：
-- -------------------- ---- -------
-
-- ----- -----------------
-------- --------------------------------
------------ -
-- ----- ----- -----------------
------------------ -
-- ---- --------- ----- -------------
---------- ----------
-- ------- -- ---- --- ---- ------
--------- -----
-- --------- -- ------- -- -- ----
-------- ---------
--
--
-其中，hljsTheme 用于配置代码高亮的主题，可选值有 default、atom-one-light、jellybeans 等，具体请查看 highlight.js 的官方演示页面；copyable 用于控制代码块是否显示“复制”按钮；version 为 Choerodon UI 的版本号。
使用
安装完插件且配置好了相关参数后，即可在 Markdown 文件中引入 Choerodon UI 的组件，并使用 Choerodon UI 的样式。
示例代码：
## Button <Button type="primary">Primary Button</Button>
代码中的 Button 是 Choerodon UI 提供的一个组件，需要在文件头部引入：
---
title: Button
---
import { Button } from 'choerodon-ui/pro/lib';需要注意的是，choerodon-ui/pro 提供了 Pro 版本的组件库，choerodon-ui 则提供了社区版的组件库，根据自己的需要进行引入。
总结
通过使用 npm 包 bisheng-plugin-choerodon-ui，我们可以非常方便地在 Bisheng 中使用 Choerodon UI 组件，从而为文档、博客等网站增加漂亮的 UI 效果。同时，也可以将本文提供的代码作为一个示例，帮助初学者了解如何操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2970f13b0ab45f74a8baa7