docs: update examples link (#43463)

* docs: update examples link

* chore: code clean
pull/43465/head^2
MadCcc 2 years ago committed by GitHub
parent 5094710a2e
commit c3e56bc94b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -150,7 +150,7 @@ Then add the corresponding CSS file on the HTML template side:
</html>
```
Click [here](https://github.com/ant-design/create-next-app-antd/tree/generate-css-on-demand) for complete implementation.
Click [here](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand) for complete implementation.
Corresponding CSS will be generated when visiting different pages, and each CSS will have its corresponding Hash value. When the Hash hits, it means that the CSS file has been placed on the disk and can be used directly. Then, for the client, it is a normal CSS file access and also enjoys the caching capability.

@ -150,7 +150,7 @@ if (!fs.existsSync(cssFileName)) {
</html>
```
完整实现点击[此处](https://github.com/ant-design/create-next-app-antd/tree/generate-css-on-demand)查阅。
完整实现点击[此处](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand)查阅。
访问不同的页面时会生成对应的 CSS每个 CSS 都会有其对应的 Hash 值。当 Hash 命中时,则说明该 CSS 文件已经被落盘,可以直接使用。继而对于客户端而言就是一次正常的 CSS 文件访问,同样享受缓存能力。

@ -30,7 +30,7 @@ When we find relevant updates, we will install the previous version for comparis
### Schedule build
As you see, the above troubleshooting method has a certain lag. We hope to reduce additional human labor by building regularly, and at the same time allow us to find problems faster. So we reused the [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) project as the base (in this way, if something goes wrong with the template project, we can also be detected in advance). Created a `mock-project-build.yml` CI that executes every half hour, which periodically pulls [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo to build:
As you see, the above troubleshooting method has a certain lag. We hope to reduce additional human labor by building regularly, and at the same time allow us to find problems faster. So we reused the [create-next-app-antd](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style) project as the base (in this way, if something goes wrong with the template project, we can also be detected in advance). Created a `mock-project-build.yml` CI that executes every half hour, which periodically pulls [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo to build:
```yml
on:

@ -30,7 +30,7 @@ Ant Design 作为大型组件库,内部依赖十分复杂。有时候 antd 代
### 定时构建
如你所见,上述的排查方式有一定的滞后性。我们希望通过定时构建的方式减少额外的人力劳动,同时也能让我们更快的发现问题。因而我们复用了 [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) 项目作为基底(这样,如果模板项目出了问题,我们同样可以提前发现)。创建了一个每半小时执行一次的 `mock-project-build.yml` CI它会定期拉取 [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo 进行构建:
如你所见,上述的排查方式有一定的滞后性。我们希望通过定时构建的方式减少额外的人力劳动,同时也能让我们更快的发现问题。因而我们复用了 [create-next-app-antd](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style) 项目作为基底(这样,如果模板项目出了问题,我们同样可以提前发现)。创建了一个每半小时执行一次的 `mock-project-build.yml` CI它会定期拉取 [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo 进行构建:
```yml
on:

@ -411,7 +411,7 @@ fs.writeFileSync(outputPath, css);
You can choose to execute this script before starting the development command or before compiling. Running this script will generate a full antd.min.css file directly in the specified directory of the current project (e.g. public).
Take Next.js for example[example](https://github.com/ant-design/create-next-app-antd)
Take Next.js for example[example](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)
```json
// package.json
@ -605,7 +605,7 @@ export default class MyDocument extends Document {
}
```
See the demo[Export the css files on demand demo](https://github.com/ant-design/create-next-app-antd/tree/generate-css-on-demand)
See the demo[Export the css files on demand demo](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand)
### Shadow DOM Usage

@ -407,7 +407,7 @@ fs.writeFileSync(outputPath, css);
你可以选择在启动开发命令或编译前执行这个脚本,运行上述脚本将会在当前项目的指定(如: public 目录)目录下直接生成一个全量的 antd.min.css 文件。
以 Next.js 为例([参考示例](https://github.com/ant-design/create-next-app-antd)
以 Next.js 为例([参考示例](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)
```json
// package.json
@ -601,7 +601,7 @@ export default class MyDocument extends Document {
}
```
演示示例请看:[按需抽取样式示例](https://github.com/ant-design/create-next-app-antd/tree/generate-css-on-demand)
演示示例请看:[按需抽取样式示例](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand)
### 兼容旧版浏览器

@ -94,7 +94,7 @@ OK! Now that you know the basics of using antd components, you are welcome to ex
During actual real-world project development, you will most likely need a development workflow consisting of `compile/build/deploy/lint/debug/` deployment. You can read the following documents on the subject or use the following scaffolds and examples provided below:
- [Ant Design Pro](https://pro.ant.design/)
- [create-next-app](https://github.com/ant-design/create-next-app-antd)
- [create-next-app](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)
- More scaffolds at [Scaffold Market](https://scaffold.ant.design/)
## Test with Jest

@ -96,7 +96,7 @@ createRoot(document.getElementById('root')).render(<App />);
实际项目开发中,你会需要构建、调试、代理、打包部署等一系列工程化的需求。您可以阅读后面的文档或者使用以下脚手架和范例:
- [Ant Design Pro](https://pro.ant.design/)
- [create-next-app](https://github.com/ant-design/create-next-app-antd)
- [create-next-app](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)
- 更多脚手架可以查看 [脚手架市场](https://scaffold.ant.design/)
## 按需加载

@ -4,10 +4,10 @@
rm -rf ~tmpProj/
# clone project
git clone https://github.com/ant-design/create-next-app-antd.git ~tmpProj --depth=1
git clone https://github.com/ant-design/ant-design-examples.git ~tmpProj --depth=1
# change directory
cd ~tmpProj
cd ~tmpProj/examples/with-nextjs-inline-style
# install dependencies
yarn

Loading…
Cancel
Save