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

news/2024/5/20 13:55:17/文章来源:https://blog.csdn.net/weixin_39622587/article/details/118450051

前言

简介

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端口就可以啦,具体可以参考官网的快速上手.

截图

1460000020055048?w=1445&h=414

在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 上吗?

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

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

写在最后

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_751682.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机组成原理中断控制器,中断控制器8259-计算机组成原理与汇编语言-电子发烧友网站...

5.2.3 中断控制器8259弄清芯片外部引线以便将它们连接到系统中;了解它们的工作方式和工作特点,以便有选择地应用它们的某些工作方式;理解芯片内部的控制字、命令字,以便对它们进行编程;了解每块芯片所占的地址&#xf…

Python编程:socket实现简单的网站服务器

通过:127.0.0.1:8000 来访问 发送字符串 # 用socket实现一个简单的服务器,可以通过浏览器来访问import socketdef handle(conn): # 请求处理函数data conn.recv(1024)print(data)conn.send(bytes("HTTP/1.1 200 OK\r\n\r\n",encoding"…

整合营销系统推荐乐云seo_整合营销是什么意思 整合营销的特点

【整合营销】整合营销是什么意思 整合营销的特点整合营销的特点①在整合营销传播中,消费者处于核心地位。②对消费者深刻全面地了解,是以建立资料库为基础的。③整合营销传播的核心工作是培养真正的"消费者价值"观,与那些最有价值的…

服务器知识网站,分享5个服务器的知识点

企业常常在租用服务器时面对一堆的服务器配置数据感到无所适从,配置中的数据是什么意思,能够为我的需求提供何种帮助,这都是企业在租用服务器时考虑的问题。今天以问答的方式为大家解读一下:1 双路等于双核么?答案:不是无论服务器…

我的家乡html网页设计,创作一个以“我的家乡”为主题的网站

任务流程第一步明确任务目标第二步明确任务内容第三步根据辅导资料完成相应学习第四步完成任务第五步复习(任务/课程)任务目标创作一个以“我的家乡”为主题的网站,首页命名为“index.html”,保存到网站根目录下,其他子页(至少5个)以对应内容拼音命名&am…

支持html5的视频网站吗,检测浏览器是否支持html5视频的代码

在http://www.w3school.com.cn学习html5的时候,看到一个检测您的浏览器是否支持 html5 视频的方法:运行效果:1.在editplus中运行2.在chrome浏览器中运行代码部分:复制代码代码如下:function checkvideo(){if(!!document.createele…

18个常用的网站性能测试工具

网站的加载速度是决定网站等级的重要因素,值得站长特别关注。原因很简单,没有人愿意为了打开一个网页而等老半天,换句话说,如果你的网站打开速度 很慢,将流失大量的访客,甚至出现多米诺效应的不良影响。在埋…

18个常用的网站性能测试工具

网站的加载速度是决定网站等级的重要因素,值得站长特别关注。原因很简单,没有人愿意为了打开一个网页而等老半天,换句话说,如果你的网站打开速度 很慢,将流失大量的访客,甚至出现多米诺效应的不良影响。在埋…

分享:ThinkPHP和Webpack前后端结合构建SEO多页应用的一个思路

有时候遇到的需求是这样的: 部分页面,如详情页,需要做SEO优化,而部分页面需要实现复杂的交互,如用户后台,可发布信息。 之前采用过一次,Nuxt.js 等前后端同构的方案。 优点就是一套js代码&…

最好用的临时邮箱网站

做为一个经常在网上瞎逛的人,就避免不了需要注册一些账号,有些小网站总是令人不放心的,所以我们总是会陷入纠结,注册吧,怕泄露个人隐私,不注册吧还总好奇里面的东西。现在不用纠结了!一次性邮箱…

推荐一个临时邮箱生成网站,专门用于各种注册用途

很多时候我们访问某些论坛或者网站,需要注册一个用户才能使用完整功能,而现在用户注册除了手机外,大多数还是需要一个电子邮箱才行。 而我们注册这些论坛,可能注册完使用了网站的功能之后,以后就不会再用到了。如果使…

大型网站的灵魂——性能

前言 在前一篇随笔《大型网站系统架构的演化》中,介绍了大型网站的演化过程,期间穿插了一些技术和手段,我们可以从中看出一个大型网站的轮廓,但想要掌握设计开发维护大型网站的技术,需要我们一步一步去研究实践。所以我…

那些你可能需要的音乐聚合网站

我平常用网易云来听音乐 http://music.163.com/ ,网易云除了歌好听,评论更有故事。之前已经写过网易云音乐了,有兴趣看看之前的文章那些你可能不知道的网易云音乐奇技淫巧可惜周杰伦的大部分歌曲网易没有版权,还好我保存了一份杰伦…

那些有意思的网站

最近微博上发现一个狗屁不通文章生成器,试了下,有点意思,接着又发现了不少类似有意思的网站,正好做个整理分享下。狗屁不通文章生成器写文章没有思路,来教你一本正经的胡说八道https://suulnnka.github.io/BullshitGen…

那些有趣的网站

之前分享过那些有意思的网站 ,这里继续分享一波,也许你用得上。福利单词一边背单词一边看妹子的网站,用电脑打开,配合ctrlw 关闭新窗口,不知不觉就背了百来个词了 https://easychen.gitee.io/foxdict/工资计算器简单、…

那些好玩的生成器网站

2019 年时间不多了,还有6天就彻底告别2019进入2020了。这张图片通过网站 https://c.yonghuigj.com/cx3/2088/ 生成的,是不很应景,下面整理几个好玩的生成器网站。Logo 生成器一个简单的 Logo 生成器,可以让你快速制作 Pornhub、Yo…

那些有意思的网站彩蛋

苏生不惑第 88 篇原创文章很多电影会在结尾留下彩蛋,比如电影《无问西东》片尾的一段七分钟读懂中国大师的彩蛋,还有去年周杰伦新歌《说好不哭》,知乎网友挖出的一系列彩蛋 。在一些网站和app里也会隐藏一些彩蛋,第一次见的时候还…

那些有意思的网站(二)

苏生不惑第 98 篇原创文章之前写过 那些有意思的网站 和 那些有趣的网站 ,这里继续分享那些有意思的网站。苹果档案这是一个苹果公司档案网站(非官方),收集了苹果公司从成立以来的所有广告、海报和宣传材料 https://www.applearch…

分析你的浏览器历史记录,看看你喜欢访问哪些网站

苏生不惑第 103 篇原创文章,将本公众号设为星标,及时看最新文章。浏览器都有访问历史记录,Chrome 浏览器点击右上角。进入 chrome://history/ 可以看到你访问过的所有网页。除了本地记录,谷歌还帮你保存在云端,前提是你…

那些好玩的生成器网站(二)

苏生不惑第105 篇原创文章,将本公众号设为星标,第一时间看最新文章。之前写过 那些好玩的生成器网站 ,这里继续整理些好玩的生成器网站。生成小瓶子最近微博上的话题 #小瓶子涂鸦大赛#很火。小瓶子的状态代表你对事物喜好的程度,喜…