贡献您自己的演示文稿
设置 remotion 项目
如果这是您的第一次贡献,请查看 CONTRIBUTING.md 文件,了解如何贡献以及设置 remotion 项目的说明。
如何进行
1 创建一个自定义过渡效果。查看 自定义演示文稿 文档,了解如何操作。
2 将您的演示文稿添加到 remotion monorepository 的 packages/transitions/src/presentations
目录下。
3 在 bundle.ts
中,将您的演示文稿添加到 presentations array
中。
tsx
const presentations = ['slide', 'flip', 'wipe', 'fade', ..., 'yourPresentation'];
tsx
const presentations = ['slide', 'flip', 'wipe', 'fade', ..., 'yourPresentation'];
4 将您的演示文稿添加到 package.json
的 exports
中,路径为 packages/transition/package.json
,同时也添加到 typesVersions
中,以便在其他 remotion 项目中正确导入。
json
"exports": {"./yourPresentation": {"module": "./dist/presentations/yourPresentation.js","import": "./dist/presentations/yourPresentation.js","require": "./dist/cjs/presentations/yourPresentation.js","types": "./dist/presentations/yourPresentation.d.ts"},},"typesVersions": {">=1.0": {"yourPresentation": ["dist/presentations/yourPresentation.d.ts"],},}
json
"exports": {"./yourPresentation": {"module": "./dist/presentations/yourPresentation.js","import": "./dist/presentations/yourPresentation.js","require": "./dist/cjs/presentations/yourPresentation.js","types": "./dist/presentations/yourPresentation.d.ts"},},"typesVersions": {">=1.0": {"yourPresentation": ["dist/presentations/yourPresentation.d.ts"],},}
确保在 remotion/packages/transitions
中运行 pnpm build
,以便您的过渡效果可以在 remotion 存储库中使用。
5 为您的演示文稿编写文档。查看演示文稿文档中链接的演示文稿,以供参考。文档应包括以下部分:
- 您的演示文稿的
简短描述
。 - 您的演示文稿的
演示
。有关说明,请查看 贡献文档 页面中的演示
段落,或查看其他演示文档([presentationType].mdx 文件)的源代码。 - 一个显示如何使用您的演示文稿的
示例代码片段
。请参阅 类型安全代码片段 文档,了解有关类型安全代码片段的说明。 - 您的演示文稿的 API。
如需了解如何编写文档,请参阅贡献文档页面。
6 将您的演示文稿添加到目录表中,位于docs/transitions/presentations,方法是创建一个<TOCItem>
,其中包含指向您文档的链接,一个<PresentationPreview
显示您的演示文稿,并描述您的演示文稿功能的一句话。
示例 TOCItemtsx
<TOCItem link="/docs/transitions/presentations/yourPresentation"><div style={row}><PresentationPreviewdurationRestThreshold={0.001}effect={yourPresentation()}/><div style={{ flex: 1, marginLeft: 10 }}><strong><code>{"yourPresentation()"}</code></strong><div>Insert one-liner describing your presentation</div></div></div></TOCItem>
示例 TOCItemtsx
<TOCItem link="/docs/transitions/presentations/yourPresentation"><div style={row}><PresentationPreviewdurationRestThreshold={0.001}effect={yourPresentation()}/><div style={{ flex: 1, marginLeft: 10 }}><strong><code>{"yourPresentation()"}</code></strong><div>Insert one-liner describing your presentation</div></div></div></TOCItem>
包含所有必需步骤和文件更改的参考拉取请求可以在此处找到。