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

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

news 2026/2/8 16:47:43

文章目录

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

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2026/2/5 2:28:27

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2026/1/25 9:08:41

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2026/1/25 10:13:29

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2026/2/6 2:16:18

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/12/11 0:27:15

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2026/2/1 4:23:19

深入浅出Diffusion模型：从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

编程新知 2025/9/12 5:25:46

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...

编程新知 2026/2/6 22:31:04