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

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

news 2025/11/13 12:00:58

文章目录

    • ⭐前言
    • ⭐初始化项目
      • 💖 创建项目（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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/11/12 5:39:24

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/11/7 19:59:15

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/11/12 19:50:10

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/11/8 3:51:02

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/11/11 1:56:04

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/10/20 1:24:05

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2025/11/12 15:18:30

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2025/7/8 18:12:44

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2025/11/9 1:49:00

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/17 8:16:30