Использование нескольких макетов или шаблонов в Гэтсби

Question

Я пытался настроить gatsby с 2-мя шаблонами и макетами (на всю страницу и на полстраницы) уже как минимум 2 дня, но ни один из них не работает, я получаю только белую страницу без элементов вообще (кроме gatsby такие элементы, как div #___ 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()