在Gatsby CMS上,如何将About页面设置为索引页面 [英] On Gatsby CMS how can i set the about page as a index page
问题描述
您好,我在netlify上安装了gatsby cms启动程序,该项目附带一个名为kaldi的启动模板,该模板具有基本的帖子和页面,易于创建字段并构建grapql数据,但是Im混淆了路由的工作方式,例如,我找不到将abot页面作为索引页面的方法
Hi I installed the gatsby cms starter with netlify, this project came with a started template called kaldi that have a basic post and pages, is easy to create fields and build the grapql data, but Im confuse the way that the route works, for example I can`t found the way to put the abot page as a index page
这是来自帖子字段的数据信息的索引页面
this the index page that came ith the data info from the post fields
import React from 'react'
import PropTypes from 'prop-types'
import { Link, graphql } from 'gatsby'
import Layout from '../components/Layout'
export default class IndexPage extends React.Component {
render() {
const { data } = this.props
const { edges: posts } = data.allMarkdownRemark
return (
<Layout>
<section className="section">
<div className="container">
<div className="content">
<h1 className="has-text-weight-bold is-size-2">Latest Stories</h1>
</div>
{posts
.map(({ node: post }) => (
<div
className="content"
style={{ border: '1px solid #eaecee', padding: '2em 4em' }}
key={post.id}
>
<p>
<Link className="has-text-primary" to={post.fields.slug}>
{post.frontmatter.title}
</Link>
<span> • </span>
<small>{post.frontmatter.date}</small>
</p>
<p>
{post.excerpt}
<br />
<br />
<Link className="button is-small" to={post.fields.slug}>
Keep Reading →
</Link>
</p>
</div>
))}
</div>
</section>
</Layout>
)
}
}
IndexPage.propTypes = {
data: PropTypes.shape({
allMarkdownRemark: PropTypes.shape({
edges: PropTypes.array,
}),
}),
}
export const pageQuery = graphql`
query IndexQuery {
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] },
filter: { frontmatter: { templateKey: { eq: "blog-post" } }}
) {
edges {
node {
excerpt(pruneLength: 400)
id
fields {
slug
}
frontmatter {
title
templateKey
date(formatString: "MMMM DD, YYYY")
}
}
}
}
}
`
我更改了过滤器以引用关于页面的信息,这使我获得了有关字段的所有数据形式,但是在netlify内容管理器中没有显示预览页面
I changed the filter to refer the about-page ans this bring me all the data form about fields, but in the netlify content manager is no showing the preview page
有什么主意吗?
推荐答案
默认情况下,Gatsby将基于文件名生成路径.因此,如果您在 pages/index.js
中有一个文件,它将生成一个名为 public/index.html
的文件,该文件通常将用作根目录索引.
Gatsby, by default, will generate a path based on the file name. So if you have a file at pages/index.js
it will generate a file named public/index.html
which is typically going to be served as the root directory index.
要更改此页面,您有几个选择.
To change this page, you have a few options.
- 将服务器配置为将
public/about.html
用作根目录索引,尽管这种情况并不常见,并且以后可能很难调试. - 用
pages/about.js
文件的内容替换pages/index.js
. - 将
pages/about.js
中的顶级组件从pages/index.js
中导出为默认
- Configure your server to serve
public/about.html
as the root directory index, though this is uncommon and likely to be hard to debug later. - Replace
pages/index.js
with the content of yourpages/about.js
file. - Export the top-level component from
pages/about.js
frompages/index.js
as the default
这篇关于在Gatsby CMS上,如何将About页面设置为索引页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!