在 Gatsby CMS 上,我如何将关于页面设置为索引页面
On Gatsby CMS how can i set the about page as a index page
你好,我用 netlify 安装了 gatsby cms starter,这个项目附带了一个名为 kaldi 的启动模板,它有一个基本的 post 和页面,很容易创建字段和构建 grapql 数据,但我很困惑路由的工作方式,例如我找不到将 abot 页面作为索引页面的方法
这是包含来自 post 个字段的数据信息的索引页
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 内容管理器中没有显示预览页面
有什么想法吗?
默认情况下,Gatsby 会根据文件名生成路径。因此,如果您在 pages/index.js
处有一个文件,它将生成一个名为 public/index.html
的文件,该文件通常用作根目录索引。
要更改此页面,您有几种选择。
- 将您的服务器配置为
public/about.html
作为根目录索引,尽管这种情况并不常见并且以后可能难以调试。
- 将
pages/index.js
替换为您的 pages/about.js
文件的内容。
- 默认从
pages/index.js
导出pages/about.js
的顶级组件
你好,我用 netlify 安装了 gatsby cms starter,这个项目附带了一个名为 kaldi 的启动模板,它有一个基本的 post 和页面,很容易创建字段和构建 grapql 数据,但我很困惑路由的工作方式,例如我找不到将 abot 页面作为索引页面的方法
这是包含来自 post 个字段的数据信息的索引页
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 内容管理器中没有显示预览页面
有什么想法吗?
默认情况下,Gatsby 会根据文件名生成路径。因此,如果您在 pages/index.js
处有一个文件,它将生成一个名为 public/index.html
的文件,该文件通常用作根目录索引。
要更改此页面,您有几种选择。
- 将您的服务器配置为
public/about.html
作为根目录索引,尽管这种情况并不常见并且以后可能难以调试。 - 将
pages/index.js
替换为您的pages/about.js
文件的内容。 - 默认从
pages/index.js
导出pages/about.js
的顶级组件