Storybook AMP Html · 
Storybook 的 AMP (Accelerated Mobile Pages) 插件。允许在你的故事中显示使用 React 生成的 AMP Html 组件。
功能
- 在每个故事中提供 SSR 产生的输出代码（AMP 就绪）。
- 支持 AMP 网站、AMP 电子邮件和 AMP 广告
- 实时 AMP 验证。
- 添加插件面板，用于验证故事（使用在线 AMP 验证器）并查看输出代码。
- 使用自定义渲染函数支持 Styled Components
演示
入门
安装
npm install -D storybook-amp
配置
接下来，将 .storybook/main.js 更新为以下内容
// .storybook/main.js
module.exports = {
stories: [
// ...
],
addons: [
// Other Storybook addons
'storybook-amp', // 👈 The addon registered here
],
};
使用
要设置自定义设置，请使用 amp 参数。
// .storybook/preview.js
const scripts = '';
const styles = '';
export const parameters = {
// Other defined parameters
amp: { // 👈 The addon parameters here
isEnabled: true, // Enable the addon, false by default (boolean)
scripts, // Global scripts to add, empty by default (string)
styles, // Custom css styles, empty by default (string)
},
};
你可以使用 amp 参数单独覆盖每个故事的设置
// Story example
export default {
title: "Components/amp-youtube",
parameters: {
amp: {
scripts: // 👈 Script needed by the story
`<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>`,
},
},
};
export const Story = (args) => (
<amp-youtube
width="480"
height="270"
layout="responsive"
data-videoid='lBTCB7yLs8Y'
></amp-youtube>
)
示例
路线图
- 使其与 Chromatic 插件兼容
- 使其与 Accessibility 插件兼容
- 与 Docs 插件一起使用时调整 UI 细节
- 更多针对 AMP 广告和 AMP 电子邮件的工具
- 添加更多示例测试
- 添加测试
- 使 CI 集成成为可能
贡献
Storybook AMP Html 插件是一个开源项目。我们致力于完全透明的开发过程，并高度赞赏任何贡献。无论你是帮助我们修复错误、提出新功能、改进文档还是传播信息——我们都非常希望你成为社区的一员。
许可证
Storybook AMP Html 插件根据 MIT 许可证授权 — 有关详细信息，请参阅 LICENSE 文件。
