antd编写出来的网页转html,AntdSite - 一个基于React.Js的静态网站生成器

前言

简介

Antdsite 是一个基于 React.js 的静态网站生成器。

使用 Ant Design设计构建， 并且它的配置项借鉴了Vuepress

由来

以前我是docz, docusaurus . 但是试用了下，感觉都不如 vuepree 顺手。后来，我访问Ant Design官网的时候突然冒出来一个想法： 把Ant Design官网做成可配置可以吗？ 答案是可以的。于是，antdsite就诞生了。

总的来说就是：

文档的配置模仿了 vuepress 的配置。

文档的界面设计来源于 Ant Design 的官网。

说白了就是 Ant Design 官网，我给它改成可配置的了，并且让它功能更强大！

特点

Vuepree 配置风格，使用起来功能强大，简单方便。

支持mdx.

支持custom layout(例如自定义网站头部，底部， 首页等等).

快速开始

安装

使用 cli 快速初始化一个项目

yarn global add antdsite-cli

# 或者如果你使用 npm

npm i antdsite-cli -g

用法

使用命令行工具antdsite-cli初始化项目

antdsite my-docs

然后访问本地8000端口就可以啦,具体可以参考官网的快速上手.

截图

在markdown里面使用 Ant Design

两种方法使用 Ant Design

直接在 markdown 中导入 antd 组件

import { Button } from 'antd';

;

参考链接和 demo：使用 antd

设置 antd 为全局组件

可以在 globalComponent.js 中设置全局组件，这样可以不用在 markdown 中频繁导入 antd 就能直接使用它的 UI 组件了。

// .antdsite/globalComponent.js

import { Button } from 'antd';

export default {

Button

};

直接在 markdown 中使用Button

参考链接和 demo：全局组件

关于 gatsby

antdsite 涉及 gatsby 还是很少的，具体只包括：

打包命令，运行命令：gatsby build gatsby develop

在 gatsby-config 里设置主题为antdsite

// gatsby-config.js

module.exports = {

__experimentalThemes: ['antdsite']

};

在设置了base的情况下，打包命令加上--prefix-paths参数 gatsby build --prefix-paths

常见问题

这个和 vuepress 配置完全一样的吗？

大部分是模仿的 vuepress 的配置的，但也有一些不同。比如配置中没有自定义端口，地址,PWA 等。 那些需要配置Gatsby的，交给 AntdSite 反而更加繁琐。

我不会 react 可以使用吗？

完全可以。上手的要是是仅仅是 markdown 基础知识和一点 js 知识。

可以将自定义主题做成插件形式发布到 npm 上吗？

这个暂时不可以，不过未来可以考虑加入这个功能。

如果还有问题可以留言一起讨论～

写在最后

希望大家能踊跃尝试，有好的意见和建议可以反馈给我