docusaurus简介及使用心得

最新推荐文章于 2024-04-02 20:57:07 发布
最新推荐文章于 2024-04-02 20:57:07 发布
阅读量260 收藏
点赞数
文章标签： docusaurus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013994400/article/details/135156084
版权

docusaurus简介

Docusaurus 是 Facebook 专门为开源项目开发者提供的一款易于维护的静态网站创建工具，使用 Markdown 即可更新网站。构建一个带有主页、文档、API、帮助以及博客页面的静态网站，只需5分钟。
同类竞品还有vuepress，docusaurus是基于react，而vuepress是基于vue的

特点

启动简单 ：Docusaurus的构建可以在很短的时间内启动和运行。Docusaurus已经构建了处理网站的过程，开发人员只需专注于项目。
本地化： Docusaurus 通过CrowdIn 提供本地化支持。通过翻译文档增强国际社区的地位。
可自定义：Docusaurus 可自定义项目需要的关键页面，包括主页，文档部分，博客和其他页面

创建项目

npx create-docusaurus@latest linux-book classic

使用心得

1、自动生成侧边栏

category.json

{
  "position": 2.5,
  "label": "Tutorial",
  "collapsible": true,
  "collapsed": false,
  "className": "red",
  "link": {
    "type": "generated-index",
    "title": "Tutorial overview"
  },
  "customProps": {
    "description": "This description can be used in the swizzled DocCard"
  }
}

2、自定义theme中的组件样式 Swizzle

npm run swizzle @docusaurus/theme-classic PaginatorNavLink

运行以上命令会在src文件夹下生成theme文件夹
在这里插入图片描述

guhy fighting
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
docusaurus-remark-plugin-codetabs:docusaurus v2插件，可轻松制作多语言代码标签
04-02
docusaurus-remark-plugin-codetabs Docusaurus v2插件可通过将代码块转换为选项卡来快速创建多语言代码选项卡。 注意：因此，这仅在与包含Tabs和TabItem组件的Docusaurus主题一起使用时才有效。 其他说明：性能可能不太理想。 欢迎公关。 安装 # npm npm install docusaurus-remark-plugin-codetabs # yarn yarn add docusaurus-remark-plugin-codetabs 用法 在docusaurus.config.js使用该插件将其添加到每个实例的Remark插件数组中 module . exports = { presets : [ [ '@docusaurus/preset-classic' , {
docusaurus
03-14
cus龙的例子 该目录是站点的简要示例，可以使用Vercel和零配置来部署该站点。 自行部署 使用Vercel部署您自己的Docusaurus项目。 我们如何创建此示例 要在Vercel上开始使用Docusaurus，可以使用初始化项目： $ npx @docusaurus/init@next init my-website classic
Docusaurus框架——快速搭建markdown文档站点介绍sora
热门推荐
编程知识分享，主打前端
02-24 2万+
大家好，我是yma16，本文分享关于Docusaurus框架——快速搭建markdown文档站点介绍sora。Docusaurus是什么？Docusaurus 是用 JavaScript 开发的，是一个开源的静态网站生成器，并使用了一些流行的 JavaScript 库和框架，如 React、Webpack 和 Babel，旨在帮助开发者快速搭建易于维护和部署的文档网站。它是由 Facebook开源并持续维护的项目。
docusaurus-protobuffet:用于Protobuf合同文档的Docusaurus工具集
04-05
Docusaurus Protobuf项目 请访问以获取Protobuffet文档。 用于Protobuf合同文档的工具集。 为Docusaurus站点提供了一组组件和MDX doc文件生成器。 这是一个项目，其中包含所有软件包。 用法 有关详细信息，请参阅 。 请参阅创建一个安装了此工具集的新Docusaurus项目。 特征 现存的 React组件，用于记录Protobuf文件描述符，包括消息，服务和枚举。 用于Markdown doc（mdx）生成。 Docusaurus侧边栏对象生成用于完整的文档工作区。 计划 对生成的边栏和mdx文件的扩展支持。 服务实施和客户端文档。 演示版 访问以获取交互式演示。 配套 Docusaurus预设可帮助安装插件并渲染所有生成的文件。 Docusaurus项目生成器使用推荐的设置安装了这些软件包，以搭建一个新站点。 Docusa
docusaurus-pdf:生成docusaurus的PDF
05-18
介绍 这是docusaurus文档的PDF生成器。 *笔记 此插件不适用于构建过程。 但是您可以将其作为生成后脚本运行。 请参阅下面的说明。 演示版 这是官方docusaurus网站生成的PDF： ://drive.google.com/file/d/19P3qSwLLUHYigrxH3QXIMXmRpTFi4pKB/view 用法 与已经托管的docusaurus实例一起使用（本地或网络中的某个位置） npx docusaurus-pdf < initialDocsUrl> [filename] 例如 npx docusaurus-pdf http://localhost:3000/myBaseUrl/docs/doc1 hoge.pdf *笔记！ initialDocsUrl是必需的。 您可以使用yarn start docusaurus的dev-webserver或使用已
docusaurus-lunr-search：本地离线搜索docusaurus
02-05
docusaurus-lunr-search 离线搜索Docusaurus V2 样品 先决条件 需要worker_thread ，建议的节点版本> 12.X对于旧版本的节点，请使用docusaurus-lunr-search版本2.1.0 （ npm i docusaurus[email protected] ） 如何使用 ？ 安装此套件 npm i docusaurus-lunr-search --save 然后运行npm install来更新，构建和链接软件包 npm install 然后运行do龙izz npm run swizzle docusaurus-lunr-sear
使用 Docusaurus 搭建个人网站项目
码农研究僧的博客
05-24 2203
目录前言1. 快速搭建 前言 参考的资料都有如下： 实践指南-快速搭建文档网站 超简单！使用 Docusaurus 搭建个人博客（一） 关于该项目，主要用来搭建公司部门的网站 原本旧网站使用的是vue的搭建的，但界面过于丑陋，现在被换成了react的一个架构 从整个框架结构来科普整个网站的诞生 1. 快速搭建 通过docusaurus的官网以及了解vue，react的一些相关知识 对于前端的知识点可以不用懂那么多 但是如果要了解，也可看我之前的文章： 安装docusaurus，本身是一个脚手架，也就是n
超简单！使用 Docusaurus 搭建个人博客（一）
张旭乾 - 全栈工程师/海归
03-05 1万+
目录历史迷茫博客有啥用？Docusaurus 简介安装运行环境安装 docusaurus运行 docusaurus项目结构配置为博客模式发表第一篇博客 B 站视频 - 点击传送 历史迷茫 我以前总也找不到一个满意的博客系统，wordpress 这个程序又大，然后配置也不方便。占用的服务器的资源也多。我就想有没有一个又简单又快速的博客平台，后来发现了一些静态的网站生成器，像 hexo 这种，但是发现...
docusaurus部署Github Pages搭建个人博客
一只努力学习IT的小碗~
05-20 2341
docusaurus部署Github Pages搭建个人博客，操作简单，容易上手，值得推荐~
React免费静态站搭建（基于Docusaurus）
量化投资助手的博客
05-22 1121
目标 做一个静态站，用于发布和储存自己的一些资料是极好的。相比于类似CSDN这种平台博客，静态站更加自由，发布内容不用受到平台限制，可以自由发挥。 选一个静态站框架 当然也可以自己重头写，但是成本太高了，我们的目标还是专注于内容，而不是站点的构建本身，所以选一个好的框架会事半功倍。由于我这几年已经完全投入了React的怀抱，所以这里只介绍跟React相关的几个框架。 next.js 官网地址：https://nextjs.org/ 鼎鼎大名，不会有人不知道吧，这是一个基于React封装的多页面前端框架，
使用docusaurus搭建个人网站
喜欢打篮球的普通人
05-07 1375
文章目录 nodejs环境搭建 apt install -y nodejs node安装 apt install nodejs-legacy -y 最好升级nodejs版本 sudo apt-get install npm sudo npm install n -g sudo n stable root@ubuntu:/home/wangji# hash -r root@ubuntu:/home/wangji# node --version v16.15.0 npm安装 Nodejs软件包管理工具
docusaurus:Cloudesire 文档网站
08-03
为了改进英语散文，请在支持的文本编辑器中使用Write Good扩展。 本地开发 $ cd website $ yarn install && yarn start 它会自动打开你的浏览器到http://localhost:3000 更新反馈小部件版本 要更新反馈小部件，请将...
使用 Docusaurus + Git 优雅地搭建自己的文档和博客站点
QAZXSDGH的博客
11-27 330
Docusaurus 是一个现代且高效的静态网页生成器，专注于文档和博客的生成。使用 Docusaurus，站长可以不必过于关注站点的外观，而专注于内容的撰写。不论是发布产品文档、维护 Minecraft 服务器维基，还是编写个人博客，Docusaurus 都可以为我们节省很多时间，同时其简约大气的外观风格也十分贴合现代网站设计审美。Docusaurus 的外观基于 React 框架构建，而编写内容则使用 Markdown 格式。
实例说明如何使用Docusaurus搭建一个静态网站
WPHunter的编程技术资料库！
01-11 970
Docusaurus就是这样一个静态网站生成器–它在开发社区中迅速得到了普及。在这篇文章中，我们将深入探讨使用Docusaurs作为静态网站生成器的好处，以及为什么它在开发人员中越来越受欢迎。
探索Docusaurus：源自Facebook的高效静态文档站点构建利器
最新发布
sinat_41212418的博客
04-02 1029
在开源世界中，优秀的文档是项目成功的重要基石。它提供了开箱即用的模板和工具链，只需几步简单的配置，就能将 Markdown 格式的文档转换为功能齐全、设计精良的静态网页。产品手册：无论是 SaaS 产品还是硬件设备，Docusaurus 都能助你打造用户友好的帮助中心，提升产品的易用性和客户满意度。个人博客：借助 Docusaurus，你可以轻松搭建专业的技术博客，专注于创作，让技术之美通过优雅的界面传递给读者。Docusaurus的确是一个非常棒的文档生成器，有需要的朋友可以用起来，这是一件很酷的事情。
从一个励志故事发现了特别牛掰的搭建静态网站的开源工具Docusaurus，很上头
OKailon的博客
03-10 1202
起初只是看到这篇CSDN推送的励志故事，突然发现Docusaurus很合我意，在末尾有视频教程，很有帮助。
docusaurus的使用曾构建过小邮助手（邮储银行交易操作文档说明）
m0_49262795的博客
04-18 260
Docusaurus 能够帮助你建立并发布 美观的文档网站。 是一个静态网站生成器。它发挥了 React 的全部功能来构建具有快速客户端导航的 单页应用，从而赋予你的网站交互性。它提供了开箱即用的 文档功能，还能用于创建任何类型的网站（例如个人网站、产品介绍、博客、营销页等等） 示例 博客主页 大概就是上面那个样子，可以设置自己的主题，分类，写自己的文章，做笔记等 需要支持docusaurus的环境，可以去docusaurus中文官网看，基本需要nodeJS14版本以上，我们这里主要就说一下项目结
探索Docusaurus：构建专业文档网站的利器
gitblog_00067的博客
03-19 350
探索Docusaurus：构建专业文档网站的利器 项目地址:https://gitcode.com/facebook/docusaurus Docusaurus 是Facebook开源的一款强大的静态站点生成器，专门用于构建和管理技术文档网站。它以其易用性、灵活性和与现代Web开发流程的良好集成而闻名，吸引了众多开发者和企业的青睐。本文将深入探讨Docusaurus的核心功能、技术实现以及应用场景...
使用docusaurus搭建网站，并部署到github
weixin_52020362的博客
11-27 1096
使用docusaurus搭建网站，并部署到github pages
docusaurus search local如何使用jieba使搜索支持中文搜索
05-26
Docusaurus是一个基于React的静态网站生成器，它使用Lunr.js作为默认的搜索引擎，而Lunr.js不支持中文搜索。因此，您需要使用其他中文分词库来支持中文搜索。 其中一个流行的中文分词库是jieba。要在Docusaurus中使用jieba进行中文搜索，您需要执行以下步骤： 1. 在您的Docusaurus项目中安装jieba： ``` npm install jieba ``` 2. 在您的Docusaurus配置文件中，将Lunr.js搜索引擎替换为自定义的中文搜索引擎。假设您的配置文件名为docusaurus.config.js，您可以将以下代码添加到该文件的module.exports对象中： ```js const jieba = require('jieba'); const lunr = require('lunr'); // 自定义中文分词器 const tokenizer = (text) => { const tokens = jieba.cut(text); return lunr.utils .stringify(tokens) .split(/[\s,-]+/) .map((token) => token.toLowerCase()); }; // 自定义中文搜索引擎 const myIndex = lunr(function () { this.tokenizer = tokenizer; this.ref('id'); this.field('title'); this.field('content'); }); module.exports = { // ... themeConfig: { // ... algolia: { appId: 'YOUR_APP_ID', apiKey: 'YOUR_API_KEY', indexName: 'YOUR_INDEX_NAME', // 将Lunr.js搜索引擎替换为自定义的中文搜索引擎 algoliaOptions: { searchClient: null, searchFunction: function (helper) { const results = myIndex.search(helper.state.query); helper.setState(results); }, }, }, }, }; ``` 在上面的代码中，我们首先引入jieba和lunr库。然后，我们定义了一个自定义的中文分词器tokenizer，它使用jieba库来对中文文本进行分词。接下来，我们定义了一个自定义的中文搜索引擎myIndex，它使用我们刚刚定义的tokenizer来进行分词。 最后，我们将Lunr.js搜索引擎替换为我们的自定义搜索引擎。具体来说，我们在algoliaOptions对象中设置了searchFunction属性，该属性覆盖了Lunr.js默认的搜索函数。我们的自定义搜索函数使用我们的自定义搜索引擎来进行搜索。 3. 在您的Docusaurus项目中，在需要进行搜索的页面中添加一个搜索框。您可以使用Docusaurus内置的SearchBar组件来实现这一点： ```jsx import React from 'react'; import SearchBar from '@theme/SearchBar'; function MyComponent() { return ( <div> <SearchBar /> {/* ... */} </div> ); } export default MyComponent; ``` 现在，当您在搜索框中输入中文字符时，您的Docusaurus站点将使用jieba库来进行中文搜索。请注意，jieba库可能无法处理所有中文字符，因此您可能需要使用其他中文分词库或对jieba库进行配置来处理您需要搜索的特殊字符。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值