Docusaurus高效的网站生成器，轻松打造出个人、产品和营销网站！
Docusaurus 一个静态网站生成器，它可以帮助构建出具有快速客户端导航功能、交互性强的单页应用程序。它采用了 React 技术，可以让网站变得更加生动活泼。此外，Docusaurus 还提供了文档功能，方便快速创建和发布文档。除此之外，它还可以用来创建其他类型的网站，例如个人网站、产品介绍、博客、营销页面等等。
设计原则
- Docusaurus 易于学习和使用，大多数事情仍然可以由用户实现，即使需要更多的代码和更多的时间来编写。
- 用户在查看 Docusaurus 项目的项目目录或添加新功能时不会感到不知所措，设计更加直观且易于构建。
- 堆栈的每一层（内容/主题/样式）之间的关注点分离应该是清晰的——抽象良好且模块化。
- 默认值将为用户完成常见和流行的性能优化和配置，也可以选择覆盖它们。
主要特点
「由 MDX 提供支持」节省时间并专注于文本文档，只需使用 MDX 编写文档和博客文章，Docusaurus 就会将它们构建成静态 HTML 文件随时可供使用。
「使用 React 构建」通过编写 React 组件来扩展和自定义项目的布局。利用可插入架构，设计站点，同时重用由 Docusaurus 插件创建的相同数据。
「简化翻译」本地化是开箱即用的。使用 git、Crowdin 或任何其他翻译管理器来翻译文档并单独部署它们。
「文档版本控制」支持用户项目的所有版本。文档版本控制可帮助用户使文档与项目发布保持同步。
创建页面
该@docusaurus/plugin-content-pages 插件能够创建一次性的独立页面，例如展示页面、娱乐页面或支持页面，可以使用 React 组件或 Markdown。
添加 React 页面
React 用作创建页面的 UI 库。每个页面组件都应该导出一个 React 组件，可以利用 React 的表现力来构建丰富的交互式内容。
import React from react;
import Layout from @theme/Layout;
export default function Hello() {
return (
<Layout title="Hello" description="Hello React Page">
<div
style={{
display: flex,
justifyContent: center,
alignItems: center,
height: 50vh,
fontSize: 20px,
}}>
<p>
Edit <code>pages/helloReact.js</code> and save to reload.
</p>
</div>
</Layout>
);
}保存文件后，开发服务器将自动重新加载更改。现在打开http://localhost:3000/helloReact，会看到刚刚创建的新页面。
添加 Markdown
创建/src/pages/helloMarkdown.md:
---
title: my hello page title
description: my hello page description
hide_table_of_contents: true
---
# Hello
How are you?替换上述文件路径为 helloMarkdown 将创建一个页面。
搜索引擎优化 (SEO)
全局元数据
通过站点配置为整个站点提供全局元属性。元数据将全部呈现在 HTML 中，使用键值对作为属性名称和值。
module.exports = {
themeConfig: {
metadata: [{name: keywords, content: cooking, blog}],
// This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
},
};Docusaurus 添加了一些开箱即用的元数据。例如，如果配置了 i18n，将获得一个 hreflang 备用链接。
单页元数据
与全局元数据类似，Docusaurus 还允许向单个页面添加元信息。按照本指南配置标签。简而言之：
# A cooking guide
<head>
<meta name="keywords" content="cooking, blog">
</head>
Some content...Docusaurus 自动将 description、title、规范 URL 链接和其他有用的元数据添加到每个 Markdown 页面。它们可以通过 front matter 进行配置：
---
title: Title for search engines; can be different from the actual heading
description: A short description of this page
image: a thumbnail image to be shown in social media cards
keywords: [keywords, describing, the main topics]
---在创建 React 页面时，添加这些字段 Layout 也可以改善 SEO。
安装
脚手架项目
安装 Docusaurus 的最简单方法是使用命令行工具，该工具可搭建骨架 Docusaurus 网站。还在新的空存储库或现有存储库中的任何位置运行此命令，它将创建一个包含脚手架文件的新目录。
npx create-docusaurus@latest my-website classic还可以通过传递标志来使用模板的 TypeScript 变体。
npx create-docusaurus@latest my-website classic --typescript运行开发
要在编辑文件时预览更改，可以运行本地开发服务器来为网站提供服务并反映最新的更改。
cd my-website
npm run start默认浏览器窗口在http://localhost:3000打开。
案例展示
传送门
开源协议：MIT
开源地址：https://github.com/facebook/docusaurus
项目合集：https://github.com/OpenTechCol/OpenTechCol
扫一扫，关注我们
