資訊專欄INFORMATION COLUMN
摘要：前言簡(jiǎn)介是一個(gè)基于的靜態(tài)網(wǎng)站生成器。后來(lái)我開(kāi)始研究上了，開(kāi)發(fā)組件就得有文檔呀，我在這期間陸續(xù)試了幾個(gè)基于的文檔生成器，像但是試用了下，感覺(jué)都不如順手。于是，就誕生了。文檔的界面設(shè)計(jì)來(lái)源于的官網(wǎng)。
前言 簡(jiǎn)介
Antdsite 是一個(gè)基于 React.js 的靜態(tài)網(wǎng)站生成器。
它是由Gatsby Js驅(qū)動(dòng)的
使用 Ant Design設(shè)計(jì)構(gòu)建， 并且它的配置項(xiàng)借鑒了Vuepress
由來(lái)以前我是vuepress的用戶，在開(kāi)發(fā) vue 組件中使用它來(lái)寫(xiě)文檔感覺(jué)非常順手。 后來(lái)我開(kāi)始研究上了 react，開(kāi)發(fā) react 組件就得有文檔呀，我在這期間陸續(xù)試了幾個(gè)基于 react 的文檔生成器，像docz, docusaurus . 但是試用了下，感覺(jué)都不如 vuepree 順手。后來(lái)，我訪問(wèn)Ant Design官網(wǎng)的時(shí)候突然冒出來(lái)一個(gè)想法： 把Ant Design官網(wǎng)做成可配置可以嗎？ 答案是可以的。于是，antdsite就誕生了。
總的來(lái)說(shuō)就是：
文檔的配置模仿了 vuepress 的配置。
文檔的界面設(shè)計(jì)來(lái)源于 Ant Design 的官網(wǎng)。
說(shuō)白了就是 Ant Design 官網(wǎng)，我給它改成可配置的了，并且讓它功能更強(qiáng)大！
特點(diǎn)Vuepree 配置風(fēng)格，使用起來(lái)功能強(qiáng)大，簡(jiǎn)單方便。
支持mdx.
內(nèi)置了 Ant Design.
支持custom layout(例如自定義網(wǎng)站頭部，底部， 首頁(yè)等等).
快速開(kāi)始 安裝使用 cli 快速初始化一個(gè)項(xiàng)目
yarn global add antdsite-cli # 或者如果你使用 npm npm i antdsite-cli -g用法
使用命令行工具antdsite-cli初始化項(xiàng)目
antdsite my-docs
然后訪問(wèn)本地8000端口就可以啦,具體可以參考官網(wǎng)的快速上手.
截圖 在markdown里面使用 Ant Design兩種方法使用 Ant Design
直接在 markdown 中導(dǎo)入 antd 組件import { Button } from "antd";
;
參考鏈接和 demo：使用 antd
設(shè)置 antd 為全局組件可以在 globalComponent.js 中設(shè)置全局組件，這樣可以不用在 markdown 中頻繁導(dǎo)入 antd 就能直接使用它的 UI 組件了。
// .antdsite/globalComponent.js
import { Button } from "antd";
export default {
Button
};
直接在 markdown 中使用Button
參考鏈接和 demo：全局組件
關(guān)于 gatsbyantdsite 涉及 gatsby 還是很少的，具體只包括：
打包命令，運(yùn)行命令：gatsby build gatsby develop
在 gatsby-config 里設(shè)置主題為antdsite
// gatsby-config.js
module.exports = {
__experimentalThemes: ["antdsite"]
};
在設(shè)置了base的情況下，打包命令加上--prefix-paths參數(shù) gatsby build --prefix-paths
常見(jiàn)問(wèn)題這個(gè)和 vuepress 配置完全一樣的嗎？
大部分是模仿的 vuepress 的配置的，但也有一些不同。比如配置中沒(méi)有自定義端口，地址,PWA 等。 那些需要配置Gatsby的，交給 AntdSite 反而更加繁瑣。
我不會(huì) react 可以使用嗎？
完全可以。上手的要是是僅僅是 markdown 基礎(chǔ)知識(shí)和一點(diǎn) js 知識(shí)。
可以將自定義主題做成插件形式發(fā)布到 npm 上嗎？
這個(gè)暫時(shí)不可以，不過(guò)未來(lái)可以考慮加入這個(gè)功能。
如果還有問(wèn)題可以留言一起討論～
寫(xiě)在最后希望大家能踴躍嘗試，有好的意見(jiàn)和建議可以反饋給我
github 地址
官網(wǎng)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106386.html
摘要：它不僅從前端移動(dòng)到后端，我們也開(kāi)始看到它用于機(jī)器學(xué)習(xí)和增強(qiáng)現(xiàn)實(shí)，簡(jiǎn)稱。由于其高使用率，年的現(xiàn)狀調(diào)查將其稱為采用的安全技術(shù)。機(jī)器學(xué)習(xí)框架在年的開(kāi)發(fā)者峰會(huì)上，宣布了他們的機(jī)器學(xué)習(xí)框架的實(shí)現(xiàn)，稱為。更高級(jí)別的用于在之上構(gòu)建機(jī)器學(xué)習(xí)模型。 2019，開(kāi)發(fā)者應(yīng)該學(xué)習(xí)的16個(gè)JavaScript框架 showImg(https://segmentfault.com/img/remote/14600...
摘要：基于路由的異步組件加載本文章是一個(gè)額外的篇章，它可以在你的中，幫助加快初始的加載組件時(shí)間。但是，我們靜態(tài)地在頂部導(dǎo)入路由中的所有組件。當(dāng)然我們的程序是相當(dāng)小的，并且分離在各個(gè)部分的小組件，是不需要這樣子按需加載的。 基于 Create React App路由4.0的異步組件加載 本文章是一個(gè)額外的篇章，它可以在你的React app中，幫助加快初始的加載組件時(shí)間。當(dāng)然這個(gè)操作不是完全必...
摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...
摘要：雅虎從很早就開(kāi)始招聘和培養(yǎng)研究型人才，雅虎研究院就是在這個(gè)過(guò)程中應(yīng)運(yùn)而生的。今天我就來(lái)說(shuō)一說(shuō)雅虎研究院的歷史，以及過(guò)去十多年間取得的成就，聊一聊如何通過(guò)引進(jìn)高級(jí)人才，迅速構(gòu)建起一支世界級(jí)的研發(fā)團(tuán)隊(duì)。 showImg(https://segmentfault.com/img/remote/1460000013995512); 作者：王下邀月熊 編輯：徐川 前端每周清單專注大前端領(lǐng)域內(nèi)容，...
閱讀 667·2021-09-22 10:02
閱讀 6504·2021-09-03 10:49
閱讀 590·2021-09-02 09:47
閱讀 2178·2019-08-30 15:53
閱讀 2957·2019-08-30 15:44
閱讀 926·2019-08-30 13:20
閱讀 1841·2019-08-29 16:32
閱讀 911·2019-08-29 12:46
