javascript - 在 Gatsby CMS 上,我如何将关于页面设置为索引页面
问题描述
嗨,我用 netlify 安装了 gatsby cms 启动器,这个项目带有一个名为 kaldi 的启动模板,它有一个基本的帖子和页面,很容易创建字段和构建 grapql 数据,但我混淆了路由的工作方式,例如我找不到将 abot 页面作为索引页面的方法
这是来自帖子字段的数据信息的索引页面
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
文件的内容。 - 默认导出顶级组件 from
pages/about.js
frompages/index.js
推荐阅读
- java - 如何将我的 9 个 if 语句压缩为一个
- r - 向集群添加标签
- javascript - onclick 第一次需要点击两次
- javascript - 根据响应在 vue 中重定向
- python - 计算两个 csv 文件之间差异的更快方法
- angular - NavCtrl Ionic 3 有问题吗?
- c# - ServiceStack.Redis - 哨兵模式是否支持分片?
- javascript - Quill JS - 检查表单提交上的文本是否更改
- c# - 是否可以在 Visual Studio 2017 中使用 MVC 5 做 MVC 3/4 (VS 2013/2015) 类型的脚手架?
- javascript - import velocity.ui 总是返回 'Velocity 必须首先加载。中止。