然后换到了 docusaurus,并没有内置评论相关的,原本是打算自己写一个评论系统,MongoDB 存储评论数据相对方便些。然后这一拖就是拖到了过年前。。。 react 编译遇到的问题 插件中会使用到浏览器的 window 对象,开发时正常,但是编译就会报错(提示 window is not defined),这边引用了 docusaurus 的BrowserOnly issues/24", "id": 1111300101, "node_id": "I_kwDOF7NJDM5CPRgF", "number": 24, "title": "Docusaurus %E9%85%8D%E7%BD%AEGitalk%E8%AF%84%E8%AE%BA%E6%8F%92%E4%BB%B6", "name": "Docusaurus配置Gitalk评论插件 author_association": "OWNER", "active_lock_reason": null, "body": "https://kuizuo.cn/develop/Docusaurus
——佚名 今天做apache-streampark文档国际化时踩到一个坑,其使用的框架docusaurus它支持多版本的管理,所以需要套一层current目录标识版本号 对应的pr: https: //github.com/apache/incubator-streampark-website/pull/256 就是将i18n/zh-CN/docusaurus-plugin-content-docs-community /移动到 i18n/zh-CN/docusaurus-plugin-content-docs-community/current/ 加了一层current目录即可正确匹配上了 之前的效果: 现在:
新版博客用docusaurus重构已经有些日子了,根据docusaurus的文档上也申请了Algolia,想一劳永逸的解决博客的搜索问题。但是流水有意,落花无情。 正常情况的申请按照docusaurus官方文档上说的,当我们需要搜索的时候,打开https://docsearch.algolia.com/apply/填一下申请,提交就行了。 但是在docusaurus V3版本中已经发生了变化。 回到网站上看看,已经有数据上传上来了:好了,我们在docusaurus.config.ts中配置一下,看看效果:algolia: { // The application ID provided
Docusaurus1. 简介 Docusaurus 是 Facebook开发的静态站点生成器,主要用于构建开源项目的文档网站。2. 代码示例 初始化 Docusaurus 项目:# 安装 Docusaurus CLInpx @docusaurus/init@latest init my-website classic# 启动本地开发服务器 Docusaurus 功能扩展:AlgoliaDocusaurus 提供了内置的 Algolia 搜索集成。 重新构建你的 Docusaurus 站点以应用更改:yarn build现在,你的 Docusaurus 站点应该已经有了一个功能完善的搜索框,由 Algolia 提供支持。 --></template>Docusaurus 插件与主题开发Docusaurus 也支持插件和自定义主题开发,但其重点更多在于配置而非直接的代码修改。
新版博客用docusaurus重构已经有些日子了,根据docusaurus的文档上也申请了Algolia,想一劳永逸的解决博客的搜索问题。但是流水有意,落花无情。 正常情况的申请 按照docusaurus官方文档上说的,当我们需要搜索的时候,打开https://docsearch.algolia.com/apply/填一下申请,提交就行了。 但是在docusaurus V3版本中已经发生了变化。 回到网站上看看,已经有数据上传上来了: 好了,我们在docusaurus.config.ts中配置一下,看看效果: algolia: { // The application ID provided
cos.ap-guangzhou.myqcloud.com/** vue-starter › Info successfully loaded 开发调试 sls dev 移除项目 sls remove 部署 Docusaurus 创建应用 npx @docusaurus/init@next init my-site classic 运行: cd my-site yarn start 部署应用 cd my-site touch
为了帮助开发人员快速构建易于管理和维护的文档站点,Docusaurus应运而生。本文将深入探讨为什么选择Docusaurus构建您的文档站点是一个好的选择。 Docusaurus是什么? Docusaurus是由Facebook开发的,最初是为React Native文档而创建的。现在,Docusaurus已经成为开发者在创建和维护文档站点时的首选工具之一。 Docusaurus是一个基于React和Node.js构建的开源工具,旨在帮助开发人员快速构建易于管理和维护的文档站点。 Docusaurus的优势之一是它的易用性。 此外,Docusaurus还提供了一些插件和工具,例如搜索和版本控制,使得文档站点的维护更加简单和高效。 除此之外,Docusaurus还具有高度的可定制性。 此外,Docusaurus还支持多语言站点,可以满足不同语言用户的需求。 为什么选择Docusaurus?
Docusaurus2 可快速搭建文档、博客、官网等网站,并发布到 GitHub Pages, Serverless 等。 代码:https://github.com/ikuokuo/start-docusaurus2 演示:https://ikuokuo.github.io/start-docusaurus2/ ? /init@latest init [name] [template] npx @docusaurus/init@latest init my-website classic 运行输出: Success 运行应用 cd my-website/ yarn start 访问 http://localhost:3000/start-docusaurus2/ 本地地址。 of my site', url: 'https://ikuokuo.github.io', baseUrl: '/start-docusaurus2/', onBrokenLinks:
title: 使用docusaurus快速搭建静态博客站点 description: 使用docusaurus快速搭建静态博客站点 slug: use-docusaurus-to-deploy-blog Blog url: https://walrus.net.cn image_url: img/walrus.jpgundefined Docusaurus是一种静态站点生成器。 --truncate--> 第一步:创建一个Docusaurus项目 在当前目录下创建一个名为website-demo的项目,website-demo可以改成任意值。 ├── undraw_docusaurus_react.svg └── undraw_docusaurus_tree.svg 现在,启动开发服务器,查看效果。 第二步:修改docusaurus.config.js 修改后的docusaurus.config.js文件内容如下: // @ts-check // Note: type annotations allow
不过国内 docusaurus 的使用者是真的少。Vuepress 都快烂大街了... 关于主题魔改可以看 Docusaurus 主题魔改 安装 下载代码,根据相应命令运行即可,在本地运行还是相对比较容易的。 修改了下个人信息,然后将之前的博客文章迁移过来即可。 额外功能页面 归档页 网址导航 评论 相关文章: Docusaurus 配置 Gitalk 评论插件 项目 部署 由于我是有个人的域名和服务器,所以之前部署项目都是直接将编译后的文件直接上传至服务器上 而且又是基于 Docusaurus,到时候是用来做一个项目的文档也方便许多。 还是要感谢下所开源的代码,同时 B 站视频教程也非常好,让我学到了一些前沿的前端技术。
Docusaurus:Facebook背书的文档工具 Docusaurus简介 Docusaurus是由Facebook开发并维护的文档工具,旨在创建美观、易于维护的文档网站。 Docusaurus的优势 易于上手:Docusaurus提供了简单的配置和Markdown编写文档,适用于不同技能水平的开发者。 插件支持:Docusaurus支持插件,允许您添加额外的功能和定制。 版本控制:Docusaurus具有版本控制功能,方便维护多个文档版本。 Docusaurus的劣势 自定义能力有限:虽然Docusaurus提供了美观的默认主题,但自定义能力相对有限,可能不适用于需要高度自定义的项目。 相对较慢的构建:与VuePress相比,Docusaurus的构建速度可能较慢。 如何选择? 选择VuePress还是Docusaurus取决于您的项目需求和个人偏好。
技术选型考虑到HagiCode是基于Docusaurus构建的(一种非常流行的React静态站点生成器),我们可以利用GitHubActions来实现这一目标。 /build#Docusaurus默认输出目录deploy:environment:name:github-pagesurl:${{steps.deployment.outputs.page_url}} 2.构建目录路径错误Docusaurus默认把构建好的静态文件放在build目录。但是有些项目(比如CreateReactApp默认是build,Vite默认是dist)可能配置不一样。 如果在Actions中报错找不到文件,记得去docusaurus.config.js里检查一下输出路径配置。 在docusaurus.config.js中:展开代码语言:JavaScriptAI代码解释module.exports={//...url:'https://HagiCode-org.github.io
Docusaurus和VuePress是两个流行的文档生成工具,它们各自有着独特的优势和适用场景。本文将深入对比Docusaurus和VuePress,帮助你选择最适合你的工具。 什么是Docusaurus? Docusaurus是Facebook开发的一个静态网站生成器,专注于构建优美的文档网站。它基于React,设计初衷是为开源项目提供一个高效、简洁的文档解决方案。 Docusaurus VS VuePress:对比分析 1. 易用性 Docusaurus Docusaurus提供了丰富的默认配置和模板,使得新手能够快速上手。 主题和插件 Docusaurus Docusaurus拥有丰富的官方和社区提供的主题和插件库。例如,你可以使用官方提供的经典主题,或是使用社区开发的自定义主题。 性能和SEO Docusaurus Docusaurus生成的静态网站性能优越,加载速度快。
而 Docusaurus 作为 Facebook 推出的静态站点生成器,因其简洁、高性能和强大的文档支持,被众多开源项目广泛采用。然而,官方并未内置评论系统——这时,Giscus 就成了理想选择。 本文将手把手教你如何在 Docusaurus v3+(JavaScript 版本) 中集成 Giscus,并实现以下高级功能:自动适配站点主题(亮色/暗色)按页面路径隔离评论通过 Markdown Front ✅ 适用于文档站、博客、开源项目官网等多种场景 如果你正在为 Docusaurus 站点寻找一个轻量、安全、免运维的评论方案,Giscus 无疑是当前最优解之一。 如需了解 Docusaurus v4 兼容性处理、多语言配置、自定义样式、性能优化 等进阶内容,欢迎查阅完整版技术指南: https://docs.zyhorg.cn/docs/Docusaurus-Integration-Giscus-Review 作者:杖雍皓 技术栈:Docusaurus · GitHub Discussions · React · 静态站点 声明:本文实践方案已在生产环境验证,代码可直接复用。
Docusaurus是一个文档框架,它的页面和目录都是JavaScript实时渲染的。 然后你会发现,目录每一项的URL是在一个js文件中的: Docusaurus还比较简单。 对于Docusaurus[3],我们只需要在它的域名后面加上/sitemap.xml,然后搜索关键词/docs/,就可以找到所有的文档URL,如下图所示: 由于Docusaurus是一个用来生成文档的框架 参考链接 [1] Docusaurus: https://docusaurus.io/docs [2] Uniswap Docs: https://docs.uniswap.org/concepts/governance /overview [3] Docusaurus: https://docusaurus.io/docs
从Docusaurus3.x到Astro5.x:HagiCode站点迁移实战复盘本文复盘了我们将HagiCode官方网站从Docusaurus3.x迁移至Astro5.x的全过程。 为什么要放弃成熟的Docusaurus?在React生态中,Docusaurus一直是文档站点的"标准答案"。它开箱即用,插件丰富,社区活跃。 我们从Docusaurus的"全React模式"切换到了Astro的"Core+Islands"模式。 在Docusaurus中,它自动处理baseUrl。但在Astro中,处理图片链接和API请求时,我们需要更小心。 总结从Docusaurus迁移到Astro,对HagiCode来说,不仅仅是一次框架升级,更是一次对"性能优先"理念的实践。
新版开发文档的特点 新版开发文档是基于 Docusaurus 2.0 来构建的,相比于之前的版本,有以下几个特点: 更快的页面加载速度:Docusaurus 2.0 使用了预渲染技术,将 MDX 和 React 更美观的页面设计:Docusaurus 2.0 提供了多种内置主题和插件,让你可以轻松地定制你的网站外观。你也可以使用 CSS 模块或者样式组件来编写自己的样式。 更易用的开发体验:Docusaurus 2.0 使用了热重载和快速刷新技术,让你可以实时地看到你的修改效果。你也可以使用 TypeScript 和 GraphQL 来编写更健壮的代码。 新版开发文档的内容 新版开发文档不仅使用了 Docusaurus 的最新技术,还对内容进行了重新组织和更新。 总结 React 新版官网是一个值得关注和学习的项目,不仅展示了 React 的强大功能和优雅设计,还展示了 Docusaurus 的灵活性和易用性。
facebook/docusaurus[1] Stars: 46.0k License: MIT Docusaurus 是一个用于轻松构建、部署和维护开源项目网站的工具。 简单易上手:Docusaurus 的设计目标是让用户能够在最短时间内快速搭建起自己的网站,它处理了大部分网站构建过程,使您可以专注于项目本身。 可本地化:Docusaurus 支持通过 CrowdIn 进行多语言支持。通过将文档进行翻译,您可以扩展并发展国际社区。 可定制化:Docusaurus 不仅提供了主页、文档页面、博客以及其他辅助页面等关键功能模块来帮助你开始使用,在此基础上也提供了丰富的可定制选项,确保每个人都拥有与众不同的网站。 题图:Photo by Ben Kolde[8] on Unsplash[9] 相关链接 [1] facebook/docusaurus: https://github.com/facebook/docusaurus
前言 最近需要把一个前端工程转交出去给其他小伙伴接手; 因为一直在内部孵化,基本除了少数维护的几个人可能知根知底; 而对于其他人来说一片空白,所以需要提供一个文档体系来辅助别人上手; 文档维护采用docusaurus 因为我们把文档做成一个monorepo 子包来维护了,所以对应的产物也在包内; 常规的Github Page只能读取工程根目录或者根目录下的docs文件夹,此时就没法直接通用了,如下图所示; 翻了翻【docusaurus Action的工作流 监听分支【一般是主干线,不过也可以自己喜好,这边采用docs】 一般更为合理的是标签(git tag)或者主干线 设置pnpm及node的版本 安装依赖 打包文档工程 推送到远端并部署 docusaurus action to deploy to GitHub Pages: # Docs: https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-docusaurus github'); const darkCodeTheme = require('prism-react-renderer/themes/dracula'); /** @type {import('@docusaurus
我的博客修改自该主题:hexo-theme-Next Docusaurus 官方地址: https://docusaurus.io/ 背书: 撰写文章此时github星数: 11815 Docusaurus 适合于开源项目的官方网站这类的需求,有很多开源项目都使用Docusaurus或者借鉴于Docusaurus对自己的开源官网上做了一些自定义的设置。 Docusaurus有以下优点: Markdown驱动-节省时间并专注于项目的文档。 只需使用Markdown 和Docusaurus 撰写文档和博客文章,就会发布一组准备服务的静态html文件。 Reat生成-通过重用React来扩展或自定义项目的布局。 Docusaurus/HUGO:因为采用Node.js和Go实现,所以虚拟空间是没有希望了。只能采用虚拟主机自己搭建Node.js运行环境或者Go运行环境来使用,相对部署成本较高。