Docusaurus MDX渲染 - 腾讯云开发者社区

文章/答案/技术大牛

发布

使用docusaurus快速搭建静态博客站点

title: 使用docusaurus快速搭建静态博客站点 description: 使用docusaurus快速搭建静态博客站点 slug: use-docusaurus-to-deploy-blog...blog │ ├── 2019-05-28-first-blog-post.md │ ├── 2019-05-29-long-blog-post.md │ ├── 2021-08-01-mdx-blog-post.mdx...create-a-document.md │ │ ├── create-a-page.md │ │ ├── deploy-your-site.md │ │ └── markdown-features.mdx...执行下面的命令，会自动打开一个浏览器窗口，并且每次修改站点内容后，页面会实时渲染出来： cd website-demo yarn start 默认效果是这样的： [01.png] 右上角有一个切换明暗模式的按钮...├── first-blog-post ├── hello-world ├── img ├── index.html ├── long-blog-post ├── markdown-page ├── mdx-blog-post

1.7K7 0

React 新官网发布，开发文档更全面更易用

新版开发文档的特点新版开发文档是基于 Docusaurus 2.0 来构建的，相比于之前的版本，有以下几个特点：更快的页面加载速度：Docusaurus 2.0 使用了预渲染技术，将 MDX 和 React...新版开发文档的内容新版开发文档不仅使用了 Docusaurus 的最新技术，还对内容进行了重新组织和更新。...主要概念：介绍 React 的核心思想和特性，包括组件、状态、生命周期、事件处理、条件渲染、列表和键等。...高级指南：深入探讨 React 的高级话题和最佳实践，包括可访问性、代码分割、错误边界、渲染属性等。 API 参考：详细说明 React 的各种 API 和钩子函数（Hooks），以及如何使用它们。...总结 React 新版官网是一个值得关注和学习的项目，不仅展示了 React 的强大功能和优雅设计，还展示了 Docusaurus 的灵活性和易用性。

9404 0

您找到你想要的搜索结果了吗？

是的

没有找到

为什么选择Docusaurus构建API文档？

为了帮助开发人员快速构建易于管理和维护的文档站点，Docusaurus应运而生。本文将深入探讨为什么选择Docusaurus构建您的文档站点是一个好的选择。 Docusaurus是什么？...Docusaurus支持Markdown和MDX格式的文档，这意味着开发者可以使用简单的文本编辑器来编写和更新文档。...此外，Docusaurus还提供了一些插件和工具，例如搜索和版本控制，使得文档站点的维护更加简单和高效。除此之外，Docusaurus还具有高度的可定制性。...此外，Docusaurus还支持多语言站点，可以满足不同语言用户的需求。为什么选择Docusaurus？...Docusaurus支持Markdown和MDX格式的文档，这意味着开发者可以使用简单的文本编辑器来编写和更新文档。

1K2 0

Docusaurus配置Gitalk评论插件

然后换到了 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

9442 0

再推送一个MDX好工具MDX Studio，并简单分享下Excel下使用MDX的场景

先有MDX Studio，才有后来的DAX Studio出现心血来潮一个周末都在研究MDX，昨天推文谈到的一些MDX资源中后，紧接着在笔记练习实操时，想起了过去接触过的这个MDX Studio工具，重新下载使用了...，非常好用，特别是关键字智能提示和格式化MDX代码方面。...普通PowerBI用户学习MDX有何用？昨天文章说到，对于专业BI从业者来说，MDX的使用场景更多，对普通自助式BI的群体来说，是否值得去跟进学习呢？...Excel环境下使用MDX查询定制透视表在Excel透视表连接PowerBI模型（广义，含AzureAS/Sqlserver SSAS），用的就是MDX查询。...上述的界面操作，如果在熟悉MDX后，可以写出更方便智能好用的计算成员、计算度量值和行列集合来使用。上述的经过MDX查询改造的透视表仍然是标准透视表，可以有透视表一切的功能保留。

3.1K3 0

几款开源文档生成框架工具

Docz 可以根据组件的注释和 JSX 代码生成文档，并支持 Markdown、MDX 和自定义主题。...Docusaurus 集成了 Markdown、React 和一些自定义配置选项，可以帮助开发人员快速创建漂亮的文档网站。...图片https://docusaurus.io/#vitepress可以说是vuepress升级版Vite & Vue Powered Static Site Generator Simple, powerful

7.2K5 1

Gatsby中怎么使用MDX？

# 安装插件及其依赖库 npm install gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react # 或 yarn...add gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-source-filesystem ：...gatsby-plugin-mdx ：转换 allFile 节点中格式为 .mdx、.md 的文件，生成新的 gatsby 数据层节点：allMdx、mdx。....mdx`, `.md`] }, }, ], } 3、增加数据源文件 gatsby 项目中，新增目录 src/mdx 和文件 src/mdx/about.mdx // src/...mdx/about.mdx This is my first blog post!

1.7K1 0

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目录即可正确匹配上了之前的效果：现在：

5853 0

MdxBuilder制作mdx文件-mdict词典

MdxBuilder制作mdx文件-mdict词典作者：matrix 被围观: 5,234 次发布时间：2013-03-03 分类：零零星星 | 一条评论 » 这是一个创建于 3469...来自掌上百科的MdxBuilder绿色汉化版下载： MdxBuilder绿色汉化版词典的最简单的制作方法就是将文本文档转换到mdx。...Phonetic Plain, Tahoma">foo bar 词条2标题词条2内容:xasd 词条3标题词条3内容:adasdas 压缩包内有本人制作的第一份mdx...为方便快速知道超市的商品称码(主要是记不到啊 :cold: ) 001.mdx为已经制作完成的词典。mdx.txt为转换源码 MdxBuilder.exe为转换程序。...如图： mdict.exe为mdx查看程序词典内的描述：本词典为家家乐超市部分商品编码收索，仅供内部使用。

1.6K1 0

MDX 让 Markdown 步入组件时代

MDX 是什么 MDX 是一种书写格式，允许你在 Markdown 文档中无缝地插入 JSX 代码。你还可以导入（import）组件，例如交互式图表或弹框，并将它们嵌入到内容当中。...@mdx-js/loader!....// … { test: /\.mdx?.../post.mdx' // Assumes an integration is used to compile MDX -> JS....，也希望 MDX 的解析也来越标准化。

2K1 0

手动给docusaurus添加一个搜索

新版博客用docusaurus重构已经有些日子了，根据docusaurus的文档上也申请了Algolia,想一劳永逸的解决博客的搜索问题。但是流水有意，落花无情。...正常情况的申请按照docusaurus官方文档上说的，当我们需要搜索的时候，打开https://docsearch.algolia.com/apply/填一下申请，提交就行了。...但是在docusaurus V3版本中已经发生了变化。...回到网站上看看，已经有数据上传上来了：好了，我们在docusaurus.config.ts中配置一下，看看效果：algolia: { // The application ID provided

2550 0

vitepress搭建markdown文档博客

但学习曲线高（React）Docusaurus - Meta 公司出品。.../mdx MDX的实现@mdx-js/react 作为 MDX 的 React 实现。...vite-plugin-mdx Vite 支持 MDX 的插件vite-plugin-react-pages 文档插件核心实现vite-pages-theme-doc 官方的文档主题。...文件式路由约定用 $ 符号的文件名结尾来识别为一个文档页面.ts|.tsx|.js|.jsx|.md|.mdx 只要 $ 是扩展名前的最后一个字符，所有文件扩展名都有效。...范围或同时指定行范围:例如{5-8}，{3-10}，{10-17}多个单行:例如{4,7,9}行范围和单行:例如{4,7-13,16,23-27,40}进阶配置VitePress 使用 markdown-it 来渲染

2.6K2 0

博客生成静态站点工具 Top 20

Next.js 是一个基于 React 框架的服务端渲染应用框架，它提供了许多功能，包括静态网站生成、服务器端渲染和动态网站生成等。...例如，Next.js官方提供了一个名为"next-mdx-blog"的插件，可以轻松地创建基于Markdown的博客网站。...6.Docusaurus star 数 42K+。 Docusaurus 是一个有趣的开源静态网站生成工具，为搭建文档类网站量身定制。它还是 Facebook 开源计划的一个项目。...Docusaurus 是用 React 构建的。你可以使用所有的基本功能，像文档版本管理、文档搜索和翻译大多是预先配置的。...它采用了 Markdown 和 Vue.js 之间的混合语法来实现动态的渲染和交互效果，从而可以快速地创建出具有良好用户体验的文档网站。

5.3K2 1

VuePress与Docusaurus：构建高效文档站点

简介 VuePress 是由 Vue.js作者尤雨溪开发的一个轻量级静态网站生成器，它利用 Vue.js 的组件系统和 Markdown 渲染来创建文档站点。2....Docusaurus1. 简介 Docusaurus 是 Facebook开发的静态站点生成器，主要用于构建开源项目的文档网站。2....代码示例初始化 Docusaurus 项目：# 安装 Docusaurus CLInpx @docusaurus/init@latest init my-website classic# 启动本地开发服务器...重新构建你的 Docusaurus 站点以应用更改：yarn build现在，你的 Docusaurus 站点应该已经有了一个功能完善的搜索框，由 Algolia 提供支持。...-->Docusaurus 插件与主题开发Docusaurus 也支持插件和自定义主题开发，但其重点更多在于配置而非直接的代码修改。

6340 0

手动给docusaurus添加一个搜索

3782 0

腾讯云 Serverless 使用，及部署 Docusaurus

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

1.6K3 0

Docusaurus2 快速建站，发布 GitHub Pages

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:

1.6K1 0

一日一技：不走常规路线，列表页1秒抓取

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

4243 0

Docusaurus v3+ 集成 Giscus 评论系统实战：打造基于 GitHub Discussions 的文档评论区

而 Docusaurus 作为 Facebook 推出的静态站点生成器，因其简洁、高性能和强大的文档支持，被众多开源项目广泛采用。然而，官方并未内置评论系统——这时，Giscus 就成了理想选择。...categoryId) { return null; // 未配置则不渲染 } const theme = colorMode === 'dark' ?...✅ 适用于文档站、博客、开源项目官网等多种场景如果你正在为 Docusaurus 站点寻找一个轻量、安全、免运维的评论方案，Giscus 无疑是当前最优解之一。...如需了解 Docusaurus v4 兼容性处理、多语言配置、自定义样式、性能优化等进阶内容，欢迎查阅完整版技术指南： https://docs.zyhorg.cn/docs/Docusaurus-Integration-Giscus-Review...作者：杖雍皓技术栈：Docusaurus · GitHub Discussions · React · 静态站点声明：本文实践方案已在生产环境验证，代码可直接复用。

2731 0

Docusaurus 3.x 到 Astro 5.x 迁移实战：利用 Islands 架构实现性能与构建速度双重提升

从Docusaurus3.x到Astro5.x：HagiCode站点迁移实战复盘本文复盘了我们将HagiCode官方网站从Docusaurus3.x迁移至Astro5.x的全过程。...为什么要放弃成熟的Docusaurus？在React生态中，Docusaurus一直是文档站点的"标准答案"。它开箱即用，插件丰富，社区活跃。...我们从Docusaurus的"全React模式"切换到了Astro的"Core+Islands"模式。...HagiCode采用了渐进式水合策略：纯静态组件：对于展示型内容（如页眉、页脚、纯文本文档），重写为Astro组件（.astro文件），在构建时直接渲染为HTML。...items}){const[activeIndex,setActiveIndex]=useState(0);//...状态逻辑return({/*渲染逻辑

951 0

点击加载更多

使用docusaurus快速搭建静态博客站点

React 新官网发布，开发文档更全面更易用

为什么选择Docusaurus构建API文档？

Docusaurus配置Gitalk评论插件

再推送一个MDX好工具MDX Studio，并简单分享下Excel下使用MDX的场景

几款开源文档生成框架工具

Gatsby中怎么使用MDX？

docusaurus国际化坑

MdxBuilder制作mdx文件-mdict词典

MDX 让 Markdown 步入组件时代

手动给docusaurus添加一个搜索

vitepress搭建markdown文档博客

博客生成静态站点工具 Top 20

VuePress与Docusaurus：构建高效文档站点

手动给docusaurus添加一个搜索

腾讯云 Serverless 使用，及部署 Docusaurus

Docusaurus2 快速建站，发布 GitHub Pages

一日一技：不走常规路线，列表页1秒抓取

Docusaurus v3+ 集成 Giscus 评论系统实战：打造基于 GitHub Discussions 的文档评论区

Docusaurus 3.x 到 Astro 5.x 迁移实战：利用 Islands 架构实现性能与构建速度双重提升

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐