15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > AntdSite - 一个基于React.Js的静态网站生成器

AntdSite - 一个基于React.Js的静态网站生成器

时间:2023-07-21 11:21:01 | 来源:网站运营

时间:2023-07-21 11:21:01 来源:网站运营

AntdSite - 一个基于React.Js的静态网站生成器:

前言

简介

由来

以前我是vuepress的用户,在开发 vue 组件中使用它来写文档感觉非常顺手。 后来我开始研究上了 react,开发 react 组件就得有文档呀,我在这期间陆续试了几个基于 react 的文档生成器,像docz, docusaurus . 但是试用了下,感觉都不如 vuepree 顺手。后来,我访问Ant Design官网的时候突然冒出来一个想法: 把Ant Design官网做成可配置可以吗? 答案是可以的。于是,antdsite就诞生了。

总的来说就是:

特点

快速开始

安装

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

yarn global add antdsite-cli# 或者如果你使用 npmnpm i antdsite-cli -g

用法

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

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

截图







在markdown里面使用 Ant Design

两种方法使用 Ant Design

直接在 markdown 中导入 antd 组件

import { Button } from 'antd';<Button />;参考链接和 demo:使用 antd

设置 antd 为全局组件

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

// .antdsite/globalComponent.jsimport { Button } from 'antd';export default { Button};直接在 markdown 中使用Button

<Button />参考链接和 demo:全局组件

关于 gatsby

antdsite 涉及 gatsby 还是很少的,具体只包括:

// gatsby-config.jsmodule.exports = { __experimentalThemes: ['antdsite']};

常见问题

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

我不会 react 可以使用吗?
完全可以。上手的要是是仅仅是 markdown 基础知识和一点 js 知识。

可以将自定义主题做成插件形式发布到 npm 上吗?
这个暂时不可以,不过未来可以考虑加入这个功能。

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

写在最后

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

关键词:静态,成器

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭