Skip to main content

贡献您自己的演示文稿

设置 remotion 项目

如果这是您的第一次贡献,请查看 CONTRIBUTING.md 文件,了解如何贡献以及设置 remotion 项目的说明。

如何进行

创建一个自定义过渡效果。查看 自定义演示文稿 文档,了解如何操作。
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'];

将您的演示文稿添加到 package.jsonexports 中,路径为 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 存储库中使用。

为您的演示文稿编写文档。查看演示文稿文档中链接的演示文稿,以供参考。文档应包括以下部分:

  • 您的演示文稿的 简短描述
  • 您的演示文稿的 演示。有关说明,请查看 贡献文档 页面中的 演示 段落,或查看其他演示文档([presentationType].mdx 文件)的源代码。
  • 一个显示如何使用您的演示文稿的 示例代码片段。请参阅 类型安全代码片段 文档,了解有关类型安全代码片段的说明。
  • 您的演示文稿的 API。

    如需了解如何编写文档,请参阅贡献文档页面。

将您的演示文稿添加到目录表中,位于docs/transitions/presentations,方法是创建一个<TOCItem>,其中包含指向您文档的链接,一个<PresentationPreview显示您的演示文稿,并描述您的演示文稿功能的一句话。

示例 TOCItem
tsx
<TOCItem link="/docs/transitions/presentations/yourPresentation">
<div style={row}>
<PresentationPreview
durationRestThreshold={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>
示例 TOCItem
tsx
<TOCItem link="/docs/transitions/presentations/yourPresentation">
<div style={row}>
<PresentationPreview
durationRestThreshold={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>

包含所有必需步骤和文件更改的参考拉取请求可以在此处找到。

另请参阅