上海外贸论坛,在哪里可以免费自学seo课程,企业推广专员招聘,wordpress文章限时文章目录 ⭐前言⭐初始化项目#x1f496; 创建项目#xff08;react-js#xff09;#x1f496; 运行项目#x1f496; 目录文件#x1f496; 创建一个jsx页面#x1f496; 创建一个md文档#x1f496; 创建一个介绍sora的文档 ⭐总结⭐结束 ⭐前言
大家好#xff0… 文章目录 ⭐前言⭐初始化项目 创建项目react-js 运行项目 目录文件 创建一个jsx页面 创建一个md文档 创建一个介绍sora的文档 ⭐总结⭐结束 ⭐前言
大家好我是yma16本文分享关于Docusaurus框架——快速搭建markdown文档站点介绍sora。 Docusaurus是什么 Docusaurus 是用 JavaScript 开发的是一个开源的静态网站生成器并使用了一些流行的 JavaScript 库和框架如 React、Webpack 和 Babel旨在帮助开发者快速搭建易于维护和部署的文档网站。它是由 Facebook 开源并持续维护的项目。 Docusaurus 具有以下主要特点 简单易用Docusaurus 简化了文档网站的搭建过程提供了易于使用的命令行工具和预设的模板开发者只需关注文档内容而无需处理复杂的技术细节。 内置文档功能Docusaurus 提供了内置的 Markdown 编辑器和文档结构开发者可以方便地编写和组织文档内容。同时Docusaurus 还支持多语言文档和版本控制方便维护和更新文档。 自定义主题Docusaurus 允许开发者自定义整个文档网站的主题包括颜色、布局、字体等。开发者可以根据自己的需求和品牌风格进行定制使文档网站更加个性化。 响应式布局Docusaurus 自动生成的网站具有响应式布局可以在不同设备上自适应显示。这使得用户可以在桌面、手机和平板电脑上方便地查看和浏览文档。 快速构建和部署Docusaurus 使用现代化的前端技术构建具有快速的编译和加载速度。同时Docusaurus 还提供了内置的部署工具可以轻松地将文档网站部署到各种托管平台上。 总体而言Docusaurus 是一个功能强大且易于使用的框架适用于构建各种类型的文档网站如开发文档、技术文档、产品文档等。无论是个人开发者还是企业团队都可以通过 Docusaurus 快速搭建专业、美观和易于维护的文档网站。 ⭐初始化项目
安装最新版本docusaurus需要node18 往期nvm管理node文章 node笔记_安装nvm管理node版本 创建项目react-js
使用npm初始化创建项目 使用npx
npx create-docusauruslatest yma16-doc classic使用npm
npm create docusauruslatest yma16-doc classic创建成功 运行项目
使用webstorm打开创建的项目 npm启动
npm start 运行成功 目录文件
项目的目录结构如下
blog- 定义的markdown文档
docs- 定义的markdown文档
src-components-css-pages
static- 静态资源
babel.config.jsbabel配置
docusaurus.config.jsjson配置项
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 classNamecontainerHeading ash1 classNamehero__title{siteConfig.title}/Headingqwerqwwqrep classNamehero__subtitle{siteConfig.tagline}/pdiv className{styles.buttons}LinkclassNamebutton button--secondary button--lgto/docs/introDocusaurus Tutorial - 5min ⏱️/Link/div/div/header);
}export default function Home() {const {siteConfig} useDocusaurusContext();return (Layouttitle{Hello from ${siteConfig.title}}descriptionDescription will go into a meta tag in head /HomepageHeader /mainHomepageFeatures //main/Layout);
} 创建一个jsx页面
创建第一个页面src/pages/my-react-page.js
import React from react;
import Layout from theme/Layout;export default function MyReactPage() {return (Layouth1My React page/h1pThis 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
# HelloThis 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优势
简单易用响应式设计自定义主题丰富的插件生态系统多语言支持
⭐结束
本文分享到这结束如有错误或者不足之处欢迎指出 点赞是我创作的动力 ⭐️ 收藏是我努力的方向 ✏️ 评论是我进步的财富 最后感谢你的阅读
