当前位置： 首页 > news >正文

Docusaurus框架——快速搭建markdown文档站点介绍sora

news 2026/1/27 19:55:52

文章目录

    • ⭐前言
    • ⭐初始化项目
      • 💖 创建项目（react-js）
      • 💖 运行项目
      • 💖 目录文件
      • 💖 创建一个jsx页面
      • 💖 创建一个md文档
      • 💖 创建一个介绍sora的文档
    • ⭐总结
    • ⭐结束

yma16-logo

⭐前言

大家好，我是yma16，本文分享关于Docusaurus框架——快速搭建markdown文档站点介绍sora。
Docusaurus是什么？

Docusaurus 是用 JavaScript 开发的，是一个开源的静态网站生成器，并使用了一些流行的 JavaScript 库和框架，如 React、Webpack 和 Babel，旨在帮助开发者快速搭建易于维护和部署的文档网站。它是由 Facebook
开源并持续维护的项目。

Docusaurus 具有以下主要特点：

  1. 简单易用：Docusaurus 简化了文档网站的搭建过程，提供了易于使用的命令行工具和预设的模板，开发者只需关注文档内容而无需处理复杂的技术细节。

  2. 内置文档功能：Docusaurus 提供了内置的 Markdown 编辑器和文档结构，开发者可以方便地编写和组织文档内容。同时，Docusaurus 还支持多语言文档和版本控制，方便维护和更新文档。

  3. 自定义主题：Docusaurus 允许开发者自定义整个文档网站的主题，包括颜色、布局、字体等。开发者可以根据自己的需求和品牌风格进行定制，使文档网站更加个性化。

  4. 响应式布局：Docusaurus 自动生成的网站具有响应式布局，可以在不同设备上自适应显示。这使得用户可以在桌面、手机和平板电脑上方便地查看和浏览文档。

  5. 快速构建和部署：Docusaurus 使用现代化的前端技术构建，具有快速的编译和加载速度。同时，Docusaurus 还提供了内置的部署工具，可以轻松地将文档网站部署到各种托管平台上。

总体而言，Docusaurus
是一个功能强大且易于使用的框架，适用于构建各种类型的文档网站，如开发文档、技术文档、产品文档等。无论是个人开发者还是企业团队，都可以通过
Docusaurus 快速搭建专业、美观和易于维护的文档网站。

⭐初始化项目

安装最新版本docusaurus，需要node>=18
往期nvm管理node文章
node笔记_安装nvm管理node版本

💖 创建项目（react-js）

使用npm初始化创建项目
使用npx

npx create-docusaurus@latest yma16-doc classic

使用npm

npm create docusaurus@latest yma16-doc classic

创建成功！
npx-create-success

💖 运行项目

使用webstorm打开创建的项目
project
npm启动

npm start

运行成功！
npm create success

💖 目录文件

项目的目录结构如下

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}><LinkclassName="button button--secondary button--lg"to="/docs/intro">Docusaurus Tutorial - 5min ⏱️</Link></div></div></header>);
}export default function Home() {const {siteConfig} = useDocusaurusContext();return (<Layouttitle={`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"}...]

router

访问我的jsx页面
http://localhost:3000/my-react-page
jsx-page

💖 创建一个md文档

创建一个docs/hello.md

# HelloThis is yma16 **first Docusaurus document**!
## welcome

在侧边栏配置添加hello文件映射
sidebars.js

  tutorialSidebar: ['intro','hello',{type: 'category',label: 'Tutorial',items: ['tutorial-basics/create-a-document'],},],

sidebar
添加配置成功！
md-file

💖 创建一个介绍sora的文档

sora介绍文档如下

sora-md

桌面显示的效果如下
sorasetting
移动端效果如下
mobile

⭐总结

目录文件和路由的映射关系

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优势

  • 简单易用
  • 响应式设计
  • 自定义主题
  • 丰富的插件生态系统
  • 多语言支持

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！
woman

👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的方向！
✏️ 评论，是我进步的财富！
💖 最后，感谢你的阅读！

相关文章：

Docusaurus框架——快速搭建markdown文档站点介绍sora

文章目录 ⭐前言⭐初始化项目&#x1f496; 创建项目&#xff08;react-js&#xff09;&#x1f496; 运行项目&#x1f496; 目录文件&#x1f496; 创建一个jsx页面&#x1f496; 创建一个md文档&#x1f496; 创建一个介绍sora的文档 ⭐总结⭐结束 ⭐前言 大家好&#xff0…...

编程日记 2024/2/27 21:19:07

Prompt 编程的优化技巧

一、为什么要优化 一&#xff09;上下文限制 目前 GPT-3.5 以及 GPT-4最大支持 16K 上下文&#xff0c;比如你输入超过 16k 的长文本&#xff0c;ChatGPT 会提示文本过大&#xff0c;为了避免 GPT 无法回复&#xff0c;需要限制 上下文在16k 以内 上下文对于 GPT 来说是非常重…...

编程日记 2024/2/27 21:18:06

React PureComponent 和 React.memo()区别

1 注意 ● PureComponent和memo仅作为性能优化的方式存在 ● 不要依赖它来阻止渲染&#xff0c;会产生BUG ● PureComponnet 和memo 都是通过对 props 值的浅比较来决定该组件是否需要更新的。 2 PureComponent 和React.memo() 区别 PureComponent 和React.memo()都是React优化…...

编程日记 2024/2/27 21:16:03

CentOS 7全系列免费

CentOS 7 全系列免费&#xff1a;桌面版、工作站版、服务器版等等………… 上文&#xff0c;关于CentOS 7这句话&#xff0c;被忽略了。 注意版本&#xff1a;知识产权、网络安全。...

编程日记 2024/2/27 21:14:00

【Spring连载】使用Spring Data访问 MongoDB----Aggregation Framework支持

【Spring连载】使用Spring Data访问 MongoDB----聚合框架支持 一、基础槪念二、投影表达式Projection Expressions三、分面分类法Faceted Classification3.1 桶Buckets3.2 多方面的聚合Multi-faceted Aggregation3.3 按计数排序Sort By Count3.4 投影表达式中的Spring表达式支持…...

编程日记 2024/2/27 21:07:54

【深入理解设计模式】适配器设计模式

适配器设计模式 适配器设计模式是一种结构型设计模式&#xff0c;用于将一个类的接口转换成客户端所期望的另一个接口&#xff0c;从而使得原本由于接口不兼容而不能一起工作的类能够一起工作。适配器模式通常用于以下场景&#xff1a; 现有接口与需求不匹配&#xff1a;当需要…...

编程日记 2024/2/27 21:04:51

ASP.NET-实现图形验证码

ASP.NET 实现图形验证码能够增强网站安全性&#xff0c;防止机器人攻击。通过生成随机验证码并将其绘制成图像&#xff0c;用户在输入验证码时增加了人机交互的难度。本文介绍了如何使用 C# 和 ASP.NET 创建一个简单而有效的图形验证码系统&#xff0c;包括生成随机验证码、绘制…...

编程日记 2024/2/27 21:03:50

解决Maven爆红以及解决 Idea 卡在 Resolving问题

关于 Idea 卡在 Resolving&#xff08;前提是Maven的setting.xml中配置好了阿里云和仓库&#xff09; 参考文章https://blog.csdn.net/jiangyu1013/article/details/95042611 解决Maven爆红参考文章https://devpress.csdn.net/beijing/656d993b76f0791b6eca7bb0.html?dp_toke…...

编程日记 2024/2/27 20:59:47

MySQL集群 双主架构（配置命令）

CSDN 成就一亿技术人&#xff01; 今天刚开学第一天给大家分享一期&#xff1a;MySQL集群双主的配置需求和命令 CSDN 成就一亿技术人&#xff01; 神秘泣男子主页&#xff1a;作者首页 <———— MySQL专栏 &#xff1a;MySQL数据库专栏<———— MySQL双主是一…...

编程日记 2024/2/27 20:57:44

网络安全之安全事件监测

随着人们对技术和智能互联网设备依赖程度的提高&#xff0c;网络安全的重要性也在不断提升。因此&#xff0c;我们需要不断加强网络安全意识和措施&#xff0c;确保网络环境的安全和稳定。 网络安全的重要性包含以下几点&#xff1a; 1、保护数据安全&#xff1a;数据是组织和…...

编程日记 2024/2/27 20:56:43

【BUG 记录】MyBatis-Plus 处理枚举字段和 JSON 字段

【BUG 记录】MyBatis-Plus 处理枚举字段和JSON字段 一、枚举字段&#xff08;mysql环境已测、postgresql环境已测&#xff09;1.1 场景1.2 定义枚举常量1.3 配置枚举处理器1.4 测试 二、JSON字段&#xff08;mysql环境已测&#xff09;2.1 导包2.2 使用对象接受2.3 测试 三、JS…...

编程日记 2024/2/27 20:49:36

Web性能优化-详细讲解与实用方法-MDN文档学习笔记

Web性能优化 查看更多学习笔记&#xff1a;GitHub&#xff1a;LoveEmiliaForever MDN中文官网 性能优良的网站能够提高访问者留存和用户满意度&#xff0c;减少客户端和服务器之间传输的数据量可降低各方的成本 不同的业务目标和用户需求需要不同的性能度量&#xff0c;要提高…...

编程日记 2024/2/27 20:46:32

组态王连接施耐德M580PLC

组态王连接施耐德M580 网络架构 网线连接PLC和装组态王软件的PC组态设置帮助 可先查看帮助&#xff1a;菜单栏点击【帮助】->【驱动帮助】&#xff0c;在弹出窗口中PLC系列选择莫迪康PLC的“modbusRtu\ASSCII\TCP”查看组态配置流程&#xff1a; 相关说明&#xff1a; 1、…...

编程日记 2024/2/27 20:45:30

pop链构造 [NISACTF 2022]babyserialize

打开题目 题目源代码如下 <?php include "waf.php"; class NISA{public $fun"show_me_flag";public $txw4ever;public function __wakeup(){if($this->fun"show_me_flag"){hint();}}function __call($from,$val){$this->fun$val[0];…...

编程日记 2024/2/27 20:44:29

【VIP专属】Python应用案例——基于Keras, OpenCV和MobileNet口罩佩戴识别

目录 1、导入所需库 2、加载人脸口罩检测数据集 3、对标签进行独热编码...

编程日记 2024/2/27 20:43:28

Doris——荔枝微课统一实时数仓建设实践

目录 一、业务介绍 二、早期架构及痛点 2.1 早期架构 2.2 架构痛点 三、技术选型 四、新的架构及方案 五、搭建经验 5.1 数据建模 5.2 数据开发 5.3 库表设计 5.4 数据管理 5.4.1 监控告警 5.4.2 数据备份与恢复 六、收益总结 七、未来规划 原文大佬这篇Doris腾…...

编程日记 2024/2/27 20:42:27

Stable Diffusion 绘画入门教程（webui）-ControlNet(Inpaint）

上篇文章介绍了语义分割Tile/Blur&#xff0c;这篇文章介绍下Inpaint&#xff08;重绘&#xff09; Inpaint类似于图生图的局部重绘&#xff0c;但是Inpain效果要更好一点&#xff0c;和原图融合会更加融洽&#xff0c;下面是案例&#xff0c;可以看下效果&#xff08;左侧原图…...

编程日记 2024/2/27 20:41:26

LeetCode146: LRU缓存

题目描述 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存 int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c;否则…...

编程日记 2024/2/27 20:38:23

【ArcGIS】基于DEM/LUCC等数据统计得到各集水区流域特征

基于DEM/LUCC等数据统计得到各集水区流域特征 提取不同集水区各类土地利用类型比例步骤1&#xff1a;划分集水区为独立面单元步骤2&#xff1a;批量掩膜提取得到各集水区土地利用类型比例步骤3&#xff1a;导入各集水区LUCC数据并统计得到各类型占比 提取坡度特征流域面坡度河道…...

编程日记 2024/2/27 20:37:22

vue3中安装并使用CSS预处理器Sass的方法介绍

文章目录 Sass是什么&#xff1f;为什么使用Sass?安装sass1、安装sass2、编写全局css变量/全局mixin3、vite引入并使用4、按需引入并使用 sass语法1、变量创建一个变量使用变量变量作用域 2、数学计算两个Sass有关于数学计算的“陷阱” 3、嵌套4、Imports sass中文官网 Sass是…...

编程日记 2024/2/27 20:30:15

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2026/1/25 12:58:16

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2026/1/15 7:07:44

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2026/1/24 11:16:28

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2026/1/24 22:21:03

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/11/2 1:48:43

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

编程新知 2026/1/21 17:44:45

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

编程新知 2025/8/25 19:51:15