AntdSite-React.Jsに基づく静的なウェブサイト生成器

前言
概要

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']
};

はベースが設定されている場合、パッケージコマンドに--prefix-pathsパラメータgatsby build --prefix-paths

を付加する.
よくある問題
これとvuepressの配置は全く同じですか?
ほとんどは模倣のvuepressの配置ですが、いくつかの違いがあります.例えば設定にはカスタムポート、アドレス、PWAなどがありません.それらはGatsbyを配置する必要があります.AntdSiteに任せるのはむしろもっと煩わしいです.
私はreactができませんが、使えますか?
全く大丈夫です.上手なのは単にmarkdown基礎知識と少しjs知識だけです.
ユーザー定義のテーマをプラグインとしてnpmに投稿してもいいですか?
これはちょっとだめですが、これからはこの機能を入れることも考えられます.
また問題があればメッセージを残して検討してもいいです.
最後に書く
みんなが積極的に試してみてください.いい意見と提案があれば、フィードバックしてください.

ギthubアドレス

公式サイト