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

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

⭐前言

大家好,我是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

创建成功!

💖 运行项目

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

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

⭐结束

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


目录
相关文章
|
1月前
|
前端开发
914.【前端】Taro集成towxml渲染markdown文档
914.【前端】Taro集成towxml渲染markdown文档
134 2
|
1月前
|
数据采集 数据挖掘 Python
Python之html2text: 将HTML转换为Markdown 文档示例详解
Python之html2text: 将HTML转换为Markdown 文档示例详解
27 0
|
1月前
|
存储 对象存储 C++
在 VS Code 中使用 OSS 进行 Markdown 文档编写
阿里云OSS对象存储服务是理想的存储解决方案,专门用于承载大量非结构化数据。在VSCode中编写Markdown文档时,手动上传图片至OSS并获取相应链接的过程通常复杂且耗时。为此,Aliyun OSS Uploader插件应运而生,以简化和优化此流程。它不仅能够自动将图片上传到OSS并生成可供插入的链接,还能在您需要时通过撤回链接,删除已上传的图片,极大地提升了效率和便捷性。
|
9月前
|
Rust JavaScript Docker
提升 Markdown 文档协作:Let's Markdown介绍与部署
Let's Markdown 是一个开源项目,旨在简化 Markdown 文档的创建、编辑和共享。快速、最小的网络编辑器,使标记编辑协作,每个人都可以访问。它提供了一套工具和功能,使 Markdown 文档的处理变得更加轻松和高效。使用Rust和React.js构建。有关详细信息,请参阅GitHub仓库。
267 3
提升 Markdown 文档协作:Let's Markdown介绍与部署
|
11月前
|
前端开发
软件协会第01次活动第01次任务布置:typora文档编写&markdown语法
软件协会第01次活动第01次任务布置:typora文档编写&markdown语法
88 0
|
12月前
谈一谈|Markdown转为word文档
谈一谈|Markdown转为word文档
166 0
|
JavaScript
快捷转换/互转 Markdown 文档和 TypeScript/TypeDoc 注释
作为文档工具人,经常需要把代码里面的注释转换成语义化的 Markdown 文档,有时也需要进行反向操作。以前是写正则表达式全局匹配,时间长了这种方式也变得繁琐乏味。所以写了脚本来互转,增加一些便捷性。
85 0
快捷转换/互转 Markdown 文档和 TypeScript/TypeDoc 注释
|
Python Windows
工具:语雀导出MarkDown文档后图片修复
工具:语雀导出MarkDown文档后图片修复
435 0
|
测试技术 数据库 数据安全/隐私保护
推荐一个牛逼的开源在线文档系统,支持Markdown和富文本编辑模式!
推荐一个牛逼的开源在线文档系统,支持Markdown和富文本编辑模式!
3512 0
推荐一个牛逼的开源在线文档系统,支持Markdown和富文本编辑模式!
Go --- 将Markdown格式转化为普通的文档格式
Go --- 将Markdown格式转化为普通的文档格式
Go --- 将Markdown格式转化为普通的文档格式