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

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

news 2026/4/22 13:59:36

文章目录

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

HPH构造核心图解

HPH的构造乃是理解其高效运行的关键基础所在&#xff0c;它对设备于高压环境下的稳定性以及寿命起着决定性的作用。从宏观的整体布局一直到微观的内部组件&#xff0c;其中的每一个细节均与密封性能以及能量转换效率息息相关。 HPH的核心部件有哪些 HPH主要由泵体、转子组件、定…...

编程新知 2026/4/22 13:47:38

斯坦福大学教授李飞飞团队：2026年人工智能发展报告总结！

本文约5000字&#xff0c;建议阅读5分钟关于斯坦福大学教授李飞飞联合创始的HAI团队发布的2026年人工智能发展报告《2026人工智能指数报告》的最新总结。1. 研究与开发&#xff1a;产业界垄断加剧&#xff0c;美国吸引AI人才的速度10年来最低先看一个今年很扎眼的变化。2025年&…...

编程新知 2026/4/22 13:07:49

XUnity.AutoTranslator：让Unity游戏实现多语言实时翻译的终极工具

XUnity.AutoTranslator&#xff1a;让Unity游戏实现多语言实时翻译的终极工具 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 还在为看不懂外语游戏而烦恼吗&#xff1f;XUnity.AutoTranslator为你提供了…...

编程新知 2026/4/22 12:48:29

别再死记硬背了！手把手带你用UVM实战AHB2APB Bridge验证（附完整代码与面试高频题解析）

从零构建AHB2APB桥验证环境&#xff1a;UVM实战指南与面试突破 验证工程师的成长路径上&#xff0c;总有几个关键项目会成为职业能力的试金石&#xff0c;AHB2APB桥验证正是这样一个兼具基础性与深度的经典案例。许多初学者在观看教学视频后会产生"已经掌握"的错觉&…...

编程新知 2026/4/22 11:35:30

土木工程小白也能搞定的ABAQUS盾构隧道模拟：用Python脚本实现生死单元法全流程（附完整代码）

零基础玩转ABAQUS盾构隧道模拟&#xff1a;Python脚本全流程实战指南 第一次打开ABAQUS时&#xff0c;那个布满复杂按钮的界面让我彻底懵了——作为土木工程专业的本科生&#xff0c;我的毕业设计偏偏抽中了"盾构隧道开挖模拟"这个硬骨头课题。更绝望的是&#xff0c…...

编程新知 2026/4/22 11:03:32

从入门到精通：Emoji符号的编码原理与跨平台应用指南

1. Emoji的前世今生&#xff1a;从笑脸符号到全球通用语言 2008年&#xff0c;苹果公司在iOS 2.2中首次引入Emoji键盘&#xff0c;这个看似简单的功能更新却彻底改变了数字通信的方式。你可能不知道的是&#xff0c;最早的Emoji其实诞生于1999年&#xff0c;由日本电信运营商NT…...

编程新知 2026/4/22 10:55:26

Proteus仿真翻车实录：ULN2003A驱动28BYJ-48步进电机，我的电路为什么总抖振不转？

Proteus仿真中ULN2003A驱动28BYJ-48步进电机的疑难排查指南 当你在Proteus中尝试用ULN2003A驱动28BYJ-48步进电机时&#xff0c;是否遇到过电机抖动但不旋转的情况&#xff1f;这种问题在仿真环境中尤为常见&#xff0c;往往由多个因素共同导致。本文将带你深入分析可能的原因&…...

编程新知 2026/4/22 10:25:16

从环境变量到进程握手：图解torch.distributed.init_process_group的底层通信机制

从环境变量到进程握手&#xff1a;图解torch.distributed.init_process_group的底层通信机制 当你在多台机器上启动分布式训练时&#xff0c;torch.distributed.init_process_group就像一场精心安排的舞会开场白。想象一下&#xff0c;几十个舞者&#xff08;GPU进程&#xff0…...

编程新知 2026/4/22 9:19:18

3步搞定！TranslucentTB中文界面终极设置指南：让你的Windows任务栏完美透明化

3步搞定&#xff01;TranslucentTB中文界面终极设置指南&#xff1a;让你的Windows任务栏完美透明化 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/Transluc…...

编程新知 2026/4/22 8:52:25

猫抓浏览器扩展：从网页资源嗅探到流媒体下载的全能解决方案

猫抓浏览器扩展&#xff1a;从网页资源嗅探到流媒体下载的全能解决方案 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 你是否曾经在浏览网页时&am…...

编程新知 2026/4/22 8:33:09