什么是 bisheng
bisheng 是一个基于 React、Webpack 和 Node.js 的静态站点生成器。可用于构建具有良好可读性和可维护性的静态博客、文档和演示文稿站点。
bisheng 的特点：
- 组件式编写 Markdown 文档
- 支持 React 组件嵌套
- 支持主题切换
安装
使用 npm 进行安装：
npm install bisheng --save-dev
快速开始
通过 bisheng init 命令初始化一个 bisheng 项目：
cd your-project bisheng init
初始化完毕后，在 your-project 目录下会生成以下文件和目录：
-- -------------------- ---- -------
-
--- ---------
--- -----------------
--- -----------
--- ------------
--- ------------
--- ---------------------------------
--- -----------------
--- ------
- --- ----- --------
--- -----
- --- -----------------
- --- ----------
- --- ---------
- --- ------
--- ------
--- ---
--- ---------_posts 目录下的 .md 文件为文章源文件，source 目录中存放着文章的静态资产。
项目初始化完成后，运行以下命令可以开启一个本地服务器：
npm run start
启动成功后，可以在浏览器中访问 http://localhost:8000/ 查看效果。
使用 bisheng 编写文章
bisheng 使用语法高亮的 Markdown 来编写文章。示例文章：
--- title: Hello World --- ## Hello World 今天是个好日子
文章的头部使用 YAML 语法标识，其中 title 表示文章标题。文章的主体部分使用 Markdown 写法，非常方便清晰。
编写 React 组件
使用 support React 编写组件：
-- -------------------- ---- -------
---
------ ----- ------
---
-- ----- -----
------
---
- ---- -- -------- --- ----- ------------
----
-------- ------------
-------其中，用 <code> 标签来包裹 React 组件。
切换主题
bisheng 支持用户自定义主题，使用者可根据自己的喜好选择不同的主题。
切换主题只需替换 theme 目录下的主题文件即可。在 bisheng.config.js 文件中配置主题即可生效。可参考 bisheng-theme-one 来构建自己的主题。
总结
bisheng 是一个非常好用的静态网站生成器，可用于构建自己的个人博客、项目文档以及公司内部资料站点。它具备良好的组件化编程，让开发人员更好地控制和维护内容。同时，它也支持自定义主题，让网站拥有独特的外观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64156