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

jlanglang 发布于2019-08-26 10:34 / 2604人阅读

摘要：前言简介是一个基于的静态网站生成器。后来我开始研究上了，开发组件就得有文档呀，我在这期间陆续试了几个基于的文档生成器，像但是试用了下，感觉都不如顺手。于是，就诞生了。文档的界面设计来源于的官网。

前言简介

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

它是由Gatsby Js驱动的

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

由来

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

总的来说就是：

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

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

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

特点

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

支持mdx.

内置了 Ant Design.

支持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 上吗？

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

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

写在最后

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

github 地址

官网

云服务器 GPU云服务器基于存储搭建静态网站基于python的网站生成静态生成静态文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106386.html

2019，开发者应该学习的16个JavaScript框架

摘要：它不仅从前端移动到后端，我们也开始看到它用于机器学习和增强现实，简称。由于其高使用率，年的现状调查将其称为采用的安全技术。机器学习框架在年的开发者峰会上，宣布了他们的机器学习框架的实现，称为。更高级别的用于在之上构建机器学习模型。 2019，开发者应该学习的16个JavaScript框架 showImg(https://segmentfault.com/img/remote/14600...

Harpsichord1207 2019-08-23 16:45 评论0 收藏0
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting

摘要：基于路由的异步组件加载本文章是一个额外的篇章，它可以在你的中，帮助加快初始的加载组件时间。但是，我们静态地在顶部导入路由中的所有组件。当然我们的程序是相当小的，并且分离在各个部分的小组件，是不需要这样子按需加载的。基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章，它可以在你的React app中，帮助加快初始的加载组件时间。当然这个操作不是完全必...

fredshare 2019-08-20 17:46 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
前端每周清单第 56 期: D3 5.0，深入 React 事件系统，SketchCode 界面生成

摘要：雅虎从很早就开始招聘和培养研究型人才，雅虎研究院就是在这个过程中应运而生的。今天我就来说一说雅虎研究院的历史，以及过去十多年间取得的成就，聊一聊如何通过引进高级人才，迅速构建起一支世界级的研发团队。 showImg(https://segmentfault.com/img/remote/1460000013995512); 作者：王下邀月熊编辑：徐川前端每周清单专注大前端领域内容，...

lavnFan 2019-08-22 15:45 评论0 收藏0