简介
Bisheng-x 是一个基于 Bisheng 的轻量化 React 静态网站生成器。它适合于搭建个人博客、技术文档以及小型网站。本文将介绍 Bisheng-x 的使用方法，并结合示例代码进行详细的解释。
安装
你可以使用 npm 或 yarn 进行安装:
# npm 安装 npm install bisheng-x --save # yarn 安装 yarn add bisheng-x
创建项目
使用 Bisheng-x 创建一个新项目非常简单。你可以通过 bisheng-x init [projectName] 命令来进行初始化。其中，projectName 是你的项目名称。在执行该命令后，命令行界面将出现向导式的操作，你只需要按照提示进行操作即可。
# 初始化一个名为 "blog" 的项目 bisheng-x init blog
配置
在项目的根目录中，可以找到一个名为 bisheng.config.js 的文件。该文件是 Bisheng-x 的配置文件，用于配置项目所需要的参数。下面是一个简单的示例：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------- ----------
------- ---------
------ ----------
-------- -
----------------------
--
--source: 项目源代码的目录。默认值是./posts。output: 项目的输出目录。默认值是./dist。theme: 项目的主题目录。默认值是./theme。plugins: 插件列表。默认值是[]。
写文章
在项目的 source 目录中，你可以添加 Markdown 格式的文章。该文件夹下的结构将被保持不变。例如，倘若有如下目录结构：
source
├── about.md
├── index.md
└── posts
├── how-to-use-bisheng-x.md
└── introduce-bisheng-x.md在生成你的网站时，网址为 http://localhost:8000/ 的首页将直接渲染 source/index.md 这个文件，网址为 http://localhost:8000/about 将渲染 source/about.md，网址为 http://localhost:8000/posts/how-to-use-bisheng-x 将渲染 source/posts/how-to-use-bisheng-x.md。
使用插件
Bisheng-x 支持自定义插件。你只需要在配置文件中的 plugins 字段添加你需要的插件即可。下面将介绍一个常用的插件。
Ant Design 插件
Ant Design 插件会自动引入所需的样式和脚本。要使用它，你需要在配置文件中的 plugins 字段添加 'bisheng-plugin-antd'。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------- ----------
------- ---------
------ ----------
-------- -
----------------------
--
--在你的文章中，你可以使用 Ant Design 中的组件。例如：
--- title: 一个示例页面 --- # 一个示例页面 <Alert message="欢迎使用 Bisheng-x!" type="info" />
在渲染页面时，Bisheng-x 将自动引入 Ant Design 的样式和脚本文件。渲染后的页面如下所示：
运行
在配置文件设置完成后，你可以使用 bisheng-x start 命令来启动 Bisheng-x。该命令将启动一个本地服务器，你可以在浏览器中通过网址 http://localhost:8000 访问你的网站。
# 启动网站 bisheng-x start
构建
使用 bisheng-x build 命令可以将网站构建到 output 目录中。
# 构建网站 bisheng-x build
总结
Bisheng-x 是一个轻量化的 React 静态网站生成器。它非常适合搭建个人博客、技术文档以及小型网站。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8e81e8991b448d9350