在 Gatsby 中使用多个布局或模板

Question

我已经尝试使用 2 种模板和布局（全页和半页）设置 gatsby 至少 2 天了，但都没有用，我只得到一个没有任何元素的白页（除了像 div#___gatsby 和脚本这样的 gatsby 元素）。这是 src/templates/half-page.jsx 代码

import React from "react";


export default class HalfPageTemplate extends React.Component {
    render() {
        return (
            <div>
                <div>Half-Page</div>
                {children()}
            </div>
        );
    }
}

这里是src/pages/index.jsx页面代码

import React from "react";
import HalfPageTemplate from "../templates/half-page"


class Index extends React.Component {
    render() {
        return (
            <Layout location={this.props.location}>
                <HalfPageTemplate>
                    <div>avc</div>
                </HalfPageTemplate>
                <div>some text</div>
            </Layout>
        );
    }
}

export default Index;

如果可以请帮忙

Answer 1

src/templates 是一个特定于 Gatsby 的文件夹（它希望那里有 gatsby-node.js 的文件）所以也许这会把事情搞砸。移动您的文件作为测试。其次你必须使用 this.props.children 而不是 children()

在 Gatsby 中使用多个布局或模板

Using multiple Layouts or Templates in Gatsby

gatsby