⭐前言
大家好，我是yma16，本文分享关于Docusaurus框架——快速搭建markdown文档站点介绍sora。
Docusaurus是什么？
Docusaurus 是用 JavaScript 开发的，是一个开源的静态网站生成器，并使用了一些流行的 JavaScript 库和框架，如 React、Webpack 和 Babel，旨在帮助开发者快速搭建易于维护和部署的文档网站。它是由 Facebook
开源并持续维护的项目。
Docusaurus 具有以下主要特点：
- 简单易用：Docusaurus 简化了文档网站的搭建过程，提供了易于使用的命令行工具和预设的模板，开发者只需关注文档内容而无需处理复杂的技术细节。
- 内置文档功能：Docusaurus 提供了内置的 Markdown 编辑器和文档结构，开发者可以方便地编写和组织文档内容。同时，Docusaurus 还支持多语言文档和版本控制，方便维护和更新文档。
- 自定义主题：Docusaurus 允许开发者自定义整个文档网站的主题，包括颜色、布局、字体等。开发者可以根据自己的需求和品牌风格进行定制，使文档网站更加个性化。
- 响应式布局：Docusaurus 自动生成的网站具有响应式布局，可以在不同设备上自适应显示。这使得用户可以在桌面、手机和平板电脑上方便地查看和浏览文档。
- 快速构建和部署：Docusaurus 使用现代化的前端技术构建，具有快速的编译和加载速度。同时，Docusaurus 还提供了内置的部署工具，可以轻松地将文档网站部署到各种托管平台上。
总体而言，Docusaurus
是一个功能强大且易于使用的框架，适用于构建各种类型的文档网站，如开发文档、技术文档、产品文档等。无论是个人开发者还是企业团队，都可以通过
Docusaurus 快速搭建专业、美观和易于维护的文档网站。
⭐初始化项目
安装最新版本docusaurus，需要node>=18
往期nvm管理node文章
💖 创建项目（react-js）
使用npm初始化创建项目
使用npx
npx create-docusaurus@latest yma16-doc classic
使用npm
npm create docusaurus@latest yma16-doc classic
创建成功！
💖 运行项目
使用webstorm打开创建的项目
npm启动
npm start
运行成功！
💖 目录文件
项目的目录结构如下
blog - 定义的markdown文档 docs - 定义的markdown文档 src -components -css -pages static - 静态资源 babel.config.js（babel配置） docusaurus.config.js（json配置项） package.json（依赖） siderbar.js（侧边栏）
首页jsx的语法
page/index.js页面
import clsx from 'clsx'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; import HomepageFeatures from '@site/src/components/HomepageFeatures'; import Heading from '@theme/Heading'; import styles from './index.module.css'; function HomepageHeader() { const {siteConfig} = useDocusaurusContext(); return ( <header className={clsx('hero hero--primary', styles.heroBanner)}> <div className="container"> <Heading as="h1" className="hero__title"> {siteConfig.title} </Heading> qwerqwwqre <p className="hero__subtitle">{siteConfig.tagline}</p> <div className={styles.buttons}> <Link className="button button--secondary button--lg" to="/docs/intro"> Docusaurus Tutorial - 5min ⏱️ </Link> </div> </div> </header> ); } export default function Home() { const {siteConfig} = useDocusaurusContext(); return ( <Layout title={`Hello from ${siteConfig.title}`} description="Description will go into a meta tag in <head />"> <HomepageHeader /> <main> <HomepageFeatures /> </main> </Layout> ); }
💖 创建一个jsx页面
创建第一个页面src/pages/my-react-page.js
import React from 'react'; import Layout from '@theme/Layout'; export default function MyReactPage() { return ( <Layout> <h1>My React page</h1> <p>This is a React page make by yma16</p> </Layout> ); }
编译的路由docusaurus-debug-all-content-数字.json
会自动添加docusaurus-plugin-content-pages
"docusaurus-plugin-content-pages": { "default": [ { "type": "jsx", "permalink": "/my-react-page", "source": "@site/src/pages/my-react-page.js" }... ]
访问我的jsx页面
http://localhost:3000/my-react-page
💖 创建一个md文档
创建一个docs/hello.md
# Hello This is yma16 **first Docusaurus document**! ## welcome
在侧边栏配置添加hello文件映射
sidebars.js
tutorialSidebar: [ 'intro', 'hello', { type: 'category', label: 'Tutorial', items: ['tutorial-basics/create-a-document'], }, ],
添加配置成功！
💖 创建一个介绍sora的文档
sora介绍文档如下
桌面显示的效果如下
移动端效果如下
⭐总结
目录文件和路由的映射关系
src/pages/index.js → localhost:3000/ src/pages/foo.md → localhost:3000/foo src/pages/foo/bar.js → localhost:3000/foo/bar
关于markdown的语法可以在csdn上学习
Docusaurus优势
- 简单易用
- 响应式设计
- 自定义主题
- 丰富的插件生态系统
- 多语言支持
⭐结束
本文分享到这结束，如有错误或者不足之处欢迎指出！
