research and development
View All Tags
FullscreenIframe 是一个功能强大且高度自定义的 React 组件，旨在无缝地将外部内容通过 iframe 嵌入到您的 Docusaurus 站点中。它不仅提供了优雅的全屏查看功能，还解决了 iframe 中常见的热键冲突问题（如 ESC 键），并能自动与网站的浅色/深色主题保持视觉同步，提供一致、沉浸式的用户体验。无论您是想嵌入一个在线白板、一个 CodePen 演示、一个 Figma 设计稿，还是任何需要专注模式的 web 应用，FullscreenIframe 都是您的理想选择。
通过自定义页面 (Customized Page),我们可以得到更加灵活的页面布局和功能。在这个自定义页面中，我们希望能够最大化的利用 页面空间，因此我们需要禁用默认的 Table of Contents (TOC) 组件，并使用一个自定义的悬浮 TOC 组件来提供导航功能。
本篇文章介绍了一款自主研发的 Markdown 编辑器及预览组件，支持基础 Markdown 语法、数学公式（LaTeX）、原生 HTML 标签、Mermaid 图表等多种高级功能。组件基于 react-markdown 实现，具备嵌入与浮动两种模式，支持实时预览、移动端适配、键盘与触摸操作，并对数学和图表语法错误提供友好提示。文章详细讲解了组件的功能特性、用法、依赖安装、丰富的语法示例及最佳实践，帮助开发者高效集成和使用 Markdown 编辑体验于各类文档和产品页面中。
本篇文章介绍了两个自主研发的 React 组件：纵向多媒体展示组件 VerticalMediaDisplay 和横向容器组件 HorizontalMediaContainer。VerticalMediaDisplay 支持图片、视频、表格、自定义组件等多种媒体类型的纵向排版，具备统一的缩放预览、响应式设计和丰富的样式配置。HorizontalMediaContainer 则用于将多个纵向媒体单元以灵活的宽度比例和间距进行横向排列，支持响应式断点、居中显示和多种对齐方式。文章详细展示了各类用法示例、属性说明及关键技术实现要点，为技术文档和产品展示场景提供了高效、美观的多媒体排版解决方案。
本篇文章系统介绍了两款自主研发的 React 横向多媒体展示组件：HorizontalProductDisplay 和 HorizontalMediaDisplay。它们支持图片、视频、表格等多种媒体类型的横向排版，具备自动文字环绕、响应式布局、统一宽高比、丰富的样式变体和交互功能。文章详细讲解了组件的核心特性、用法示例、API 参考及最佳实践，并展示了多媒体内容在不同宽度和布局下的专业排版效果。通过这些组件，开发者可高效构建美观、灵活的产品展示和技术文档页面，大幅提升开发效率与内容表现力。
本篇文章介绍了如何开发和使用 ProtectedCodeBlock 组件，实现对文章内容（如代码块、文本、Markdown 等）的密码保护。通过密码哈希验证机制，只有输入正确密码的用户才能查看受保护内容，适用于教学答案、课程资料等需要有条件访问的场景。文章详细说明了组件特性、用法、哈希生成方法及实际案例，帮助开发者高效集成内容保护功能，提升文档安全性与交互体验。