【实践出真知】使用Docusaurus将md文档组织起来就是一个网站(写API文档,写教程、写日记、写博客的有福了)

news2024/9/17 9:05:58

文章目录

  • 前言
  • 一、Docusaurus 是什么?
  • 二、一键生成网站框架并预览
    • 1. 系统需求
    • 2. 脚手架项目网站(一键生成网站框架)
    • 3. 生成的目录内容
    • 4. 网站运行与展示
  • 总结


前言

前段时间,学习Flet,访问到Flet中文网,被其简洁的风格吸引,就想着以后将自己的内容也整理一下。最终发现该网站是用Docusaurus这个工具实现的。以后写API文档,写教程、写日记、写博客有福了,只要写出markdown文档即可。现在包括csdn等很多平台都是md文档。这样移植也非常方便。下面就让我们来认识一下吧。


一、Docusaurus 是什么?

Docusaurus 官网:https://docusaurus.io/
Docusaurus 中文网简介:
⚡️ Docusaurus 能够帮助您快速创建一个 精美的文档网站。

💸 定制一套技术栈是非常昂贵的。相反,Docusaurus 让您只需专注于内容,编写 Markdown 文件即可。

💥 准备好迎接更多功能了吗?还有版本控制、i18n、搜索和主题定制等高级功能。

💅 借鉴 最好的 Docusaurus 网站 以获取灵感;还有更多推荐您阅读的内容。

🧐 Docusaurus 是一款静态网站生成器。它利用 React 的全部功能来构建具有快速客户端导航功能的 单页应用程序(single-page application),从而使您的网站具有交互性。它提供了开箱即用的 文档功能,也可用于创建 任何类型的网站(例如 个人网站、产品展示、博客、营销落地页面等)。

二、一键生成网站框架并预览

1. 系统需求

安装Docusaurus需要Node.js,所以提前下载安装好。官方提示:
Node.js 18.0 或更高版本(可以通过执行 node -v 命令来查看当前所用的 Node.js 版本)。你可以使用 nvm 管理同一台计算机上安装的多个 Node 版本。
当安装 Node.js 时,建议选中与依赖项相关的所有复选框。

2. 脚手架项目网站(一键生成网站框架)

安装 Docusaurus 的最简单方法是使用命令行工具,该工具可帮助您搭建 Docusaurus 网站的雏形。您可以在新的空仓库中或已有的仓库中的运行此命令,它将创建一个包含脚手架文件的新目录。

npx create-docusaurus@latest my-website classic

my-website是你的网站目录名称,建议先转到自己的目录,然后再运行以上目录。

(base) C:\Users\Administrator>d:

(base) D:\>cd pythonrun

(base) D:\pythonrun>npx create-docusaurus@latest ktquant-doc classic
Need to install the following packages:
create-docusaurus@3.4.0
Ok to proceed? (y) y
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
√ Which language do you want to use? » JavaScript
[INFO] Creating new Docusaurus project...
[INFO] Installing dependencies with npm...
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported

added 1192 packages, and audited 1193 packages in 7m

296 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
[SUCCESS] Created ktquant-doc.
[INFO] Inside that directory, you can run several commands:

  `npm start`
    Starts the development server.

  `npm run build`
    Bundles your website into static files for production.

  `npm run serve`
    Serves the built website locally.

  `npm run deploy`
    Publishes the website to GitHub pages.

We recommend that you begin by typing:

  `cd ktquant-doc`
  `npm start`

Happy building awesome websites!

npm notice
npm notice New major version of npm available! 9.8.1 -> 10.8.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.2
npm notice Run npm install -g npm@10.8.2 to update!
npm notice

3. 生成的目录内容

打开刚才指定的目录,即可看到对应的内容。
在这里插入图片描述
打开docs目录,可以看到有如下三个目录和文件,这就是以后网站将展示的内容:
在这里插入图片描述

4. 网站运行与展示

(base) D:\pythonrun>cd ktquant-doc

(base) D:\pythonrun\ktquant-doc>npm run start

> ktquant-doc@0.0.0 start
> docusaurus start

[INFO] Starting the development server...
[SUCCESS] Docusaurus website is running at: http://localhost:3000/

√ Client
  Compiled successfully in 18.61s

client (webpack 5.93.0) compiled successfully

等看到Docusaurus website is running at: http://localhost:3000/即表示已经生成好并运行成功。
访问网页后可以看到如下内容。

在这里插入图片描述
如上图,是不是和docs目录内容一样啊!到这里就已经完成了网站的生成和展示。下面就是根据自己的需要修改md文档喽!


总结

初步探索,后面就可以根据自己的需要补充完善了。不得不说,Docusaurus是真方便,还免费,而且功能强大,是一个不可多得的利器。

以上只是部署到内网给自己用的,最终要部署到公网还需要build为静态网页,并通过Nginx等服务器托管,添加域名等方可以使用。具体可以自己百度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1962906.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

魔方财务新版QRuser用户中心主题

本主题支持魔方财务3.5.7版本!可自由切换魔方财务3.5.7版本与其他版本。本主题基于官方default开发,主要面向企业,三端自适应,支持并完美适配多语言。界面精美,简洁清新,主题内新增多处bootstrap-select的调…

软考系统架构师-计算机网络基础

目录 3.1 网络的基本概念 3.2 通信技术 3.3 网络技术 3.4 组网技术 1.网络设备及其工作层级 2.网络协议 (1)应用层协议。 (2)传输层协议。 (3)网络层协议。 3.交换机 4&#xff0e…

Speckly:基于Speckle文档的RAG智能问答机器人

前言 Speckly 是一个基于 检索增强生成 (RAG) 技术的智能问答机器人,它能像一位经验丰富的工程师,理解你的问题,并从 Speckle 文档中精准地找到答案。更厉害的是,它甚至可以帮你生成代码片段! 🚀 本文将详…

linux:基本权限

1、权限与用户之间的关系 在Linux系统中,针对文件定义了三种身份,分别是属主(owner)、属组(group)、其他人(others),每一种身份又对应三种权限,分别是可读(readable)、可写(writable)、可执行(excutable)。 2、如何修改一个文件的…

快团团等社区团购类小区物资团购怎么按商品批量退款?

疫情期间,小区物资团的配送需要达到一定的起送件数,对于一些没有达到起送件数的商品,如何快速地批量退款呢?按照下列操作,只需四步,就可以对某一商品批量退款。 第1步:进入团购页面&#xff0c…

JavaScript(二)变量

一、两种注释方式 // 这是当行注释/* 这是多行注释 这是多行注释 */二、变量是什么 变量就是一个可以存放“数值”的容器,这个“数值”可以是数字、字符串、函数等。 变量不是数值本身,它是一个用于存储数值的容器,你可以把变量想象成一个个…

解决断点问题导致项目没有完全启动bug

场景: 项目启动正常,启动日志也正常打印,但是无法判断是否启动完毕,访问接口也进不了服务 原因: 启动前调试项目打断点时 不晓得打到了某个层面的断点 具体是哪忘了,导致项目没有完全启动,启…

WIFI7:引领智能驾驶新未来

近年来,智能驾驶技术飞速发展,从最初的初级的辅助驾驶逐步迈向高度自动驾驶,这一变化历程深刻依赖的是高效、稳定且前沿的无线通信技术的支撑。WIFI7,作为无线通信领域的最新里程碑,凭借其前所未有的性能提升与功能拓展…

一级指针和一维数组

文章目录 🍊自我介绍🍊一级指针和一维数组🍊a , &a[0]和&a之间的关系 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以:点赞关注评论收藏(一键四连)哦~ 🍊自我介绍 Hello,大家好…

Tugraph的安装部署

文章目录 一、安装Docker二、拉取TuGraph镜像三、访问web端 一、安装Docker http://t.csdnimg.cn/djJYX 二、拉取TuGraph镜像 https://hub.docker.com/search?qtugraph 拉取的时间会有些长 docker pull tugraph/tugraph-compile-ubuntu18.04如docker镜像拉取失败&#xff…

IDEA管理远程仓库Git

1、模拟项目 新建一个文件夹,用来这次演示 用IDEA来打开文件夹 2、创建仓库 在IDEA中给该文件夹创建本地仓库和远程仓库 在菜单栏找到VCS选择Share project on Gitee 在弹窗中输入描述信息 接下来会出现以下弹窗 点击ADD后,在gitee上会创建远程仓库 …

敏捷产品经理实训:助力产品负责人掌握敏捷方法,提升产品开发效率

在当今快节奏的市场环境中,产品经理和产品负责人需要快速响应市场变化,推动产品创新,以满足用户不断变化的需求。敏捷产品经理实训课程专为产品经理和产品负责人设计,旨在帮助他们掌握敏捷方法,提高团队协作和产品开发…

python dash框架

Dash 是一个用于创建数据分析型 web 应用的 Python 框架。它由 Plotly 团队开发,并且可以用来构建交互式的 web 应用程序,这些应用能够包含图表、表格、地图等多种数据可视化组件。 Dash 的特点: 易于使用:Dash 使用 Python 语法…

二叉树的介绍及其顺序结构的实现

Hello, 亲爱的小伙伴们,你们的作者菌又回来了,之前我们学习了链表、顺序表、栈等常见的数据结构,今天我们将紧跟之前的脚步,继续学习二叉树。 好,咱们废话不多说,开始我们今天的正题。 1.树 1.1树的概念和…

Vue3+.NET6前后端分离式管理后台实战(三十二)

1,Vue3.NET6前后端分离式管理后台实战(三十二)

Java上门做饭平台系统小程序源码

🍽️解锁新生活方式!揭秘“上门做饭平台系统”的五大魅力🌟 🏠【懒人福音,美食直达家门】 在这个快节奏的时代,谁不想下班后直接享受热腾腾的家常美味呢?上门做饭平台系统就是你的私人厨师团队…

java基础概念07-switch语句

一、switch定义 二、基本语法 switch (expression) { case value1: // 当expression的值等于value1时执行的代码 break; // 可选 case value2: // 当expression的值等于value2时执行的代码 break; // 可选 // 你可以有任意数量的case语句 default: // 可选 // 当没有…

【Android驱动06】GMS兼容性测试CTS --环境搭建、测试执行、结果分析

CTS即Compatibility Test Suite意为兼容性测试,是Google推出的Android平台兼容性测试机制。其目的是尽早发现不兼容性,并确保软件在整个开发过程中保持兼容性。只有通过CTS认证的设备才能合法的安装并使用Google market等Google应用。 一,搭…

leetcode 二叉树专题——java实现

1. 二叉树中序遍历 给一棵树,输出中序遍历。 树已经给你建好了,按照一下形式: /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* Tree…