@ builder.io/ gatsby
集成插件 构建者.io 允许与 Gatsby 一起拖放页面。 它将构建者.io 计划置于一个 allBuilderModels gatsby GraphQL 查询的字段中,如果模板地图作为选项被传递,此插件将在指定的路径上为每个页面条目动态创建 Gatsby 页面.
安装
npm install @builder.io/gatsby
如何使用
开个免费账户 构建者.io 从您的公共 API 密钥中获取 组织页面 和:
// In your gatsby-config.js
const path = require('path');
module.exports = {
plugins: [
{
resolve: '@builder.io/gatsby',
options: {
// public API Key
publicAPIKey: 'MY_PUBLIC_API_KEY',
// OPTIONAL
// Set this to `true` to rely on our cached content. Default value is `false`, always fetching the newest content from Builder.
useCache: false,
// OPTIONAL
// mapping model names to template files, the plugin will create a page for each entry of the model at its specified url
templates: {
// `page` can be any model of choice, camelCased
page: path.resolve('templates/my-page.tsx'),
},
// OPTIONAL
mapEntryToContext: async ({ entry, graphql }) => {
const result = await graphql('....');
return {
property: entry.data.property,
anotherProperty: entry.data.whatever,
dataFromQuery: result.data
/* ... */
};
},
// OPTIONAL
// to resolve a single entry to multiple, for e.g in localization
resolveDynamicEntries: async (entries) => {
const entriesToBuild = []
for entry of entries {
if (entry.data.myprop.isDynamic){
entriesToBuild.push(await myEntryResolver(entry))
}
else {
entriesToBuild.push(entry)
}
}
return entriesToBuild;
},
},
},
],
};
然后在Builder.io开始建立网页,点击发布,它们将会被录入你的Gatsby网站,在每个新的建筑上!
一个更先进的例子和开始检查 gatsby- starter- 建设器
使用编辑器中的组件
看这个 设计系统实例 使用您的 deisgn 系统+自定义组件的许多示例
👉提示: 要将页面构建限制在您的组件吗 ? 尝试 只有组件模式
注册一个组件
import { Builder } from '@builder.io/react';
class SimpleText extends React.Component {
render() {
return <h1>{this.props.text}</h1>;
}
}
Builder.registerComponent(SimpleText, {
name: 'Simple Text',
inputs: [{ name: 'text', type: 'string' }],
});
如何查询
最新完整的例子请检查 Gatsby + 构建器.io 启动器
{
allBuilderModels {
myPageModel(options: { cachebust: true }) {
content
}
}
}