gpt4 book ai didi

javascript - Gatsby.js 博客在帖子中附加了两次 '/blog'

转载 作者:行者123 更新时间:2023-12-01 23:57:42 24 4
gpt4 key购买 nike

我有一个带有查看帖子链接的索引路由。在帖子页面上,帖子都显示了标题链接,但是今天当我写另一篇博文时使用 netflify CMS 我注意到现在帖子页面显示了指向 localhost:8000/blog/blog/{the-post-姓名}。如果我从 url 中删除其中一个“博客”部分,则关联的帖子会正确加载。我只是不明白为什么会发生这种情况,因为该网站之前运行良好。

这个问题似乎与 {node.fields.slug} 错误链接有关

感谢任何帮助!

Gatsby 配置

module.exports = {
siteMetadata: {
// edit below
title: `Front-end Developer`,
author: `Alex Virdee`,
description: `A starter personal blog with styled components, dark mode, and Netlify CMS.`,
siteUrl: `https://hungry-bassi-27b875.netlify.app/`,
social: {
twitter: `alex_virdee`,
},
},
plugins: [
`gatsby-plugin-netlify-cms`,
`gatsby-plugin-styled-components`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-offline`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-feed-mdx`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/blog`,
name: `blog`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets`,
name: `assets`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `img`,
path: `${__dirname}/static`
}
},
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [".mdx", ".md"],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 590,
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
{
resolve: `gatsby-remark-vscode`,
},
{
resolve: `gatsby-remark-copy-linked-files`,
},
{
resolve: `gatsby-remark-smartypants`,
},
],
plugins: [`gatsby-remark-images`],
},
},
{
resolve: `gatsby-plugin-google-analytics`,
options: {
// edit below
// trackingId: `ADD YOUR TRACKING ID HERE`,
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Gatsby Starter Blog`,
short_name: `GatsbyJS`,
start_url: `/`,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `minimal-ui`,
// edit below
icon: `content/assets/gatsby-icon.png`,
},
},
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}

Gatsby 节点

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions

const blogPost = path.resolve(`./src/templates/blog-post.js`)
return graphql(
`
{
allMdx(
sort: { fields: [frontmatter___date], order: DESC }
limit: 1000
) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`
).then(result => {
if (result.errors) {
throw result.errors
}

// Create blog posts pages.
const posts = result.data.allMdx.edges

posts.forEach((post, index) => {
const previous = index === posts.length - 1 ? null : posts[index + 1].node
const next = index === 0 ? null : posts[index - 1].node

createPage({
path: `blog${post.node.fields.slug}`,
component: blogPost,
context: {
slug: post.node.fields.slug,
previous,
next,
},
})
})

return null
})
}

exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions

if (node.internal.type === `Mdx`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}

布局.js

import React from "react"
import { Link } from "gatsby"
import styled from "styled-components"

import { rhythm, scale } from "../utils/typography"

class Layout extends React.Component {
render() {
const { location, title, children } = this.props
const rootPath = `${__PATH_PREFIX__}/`
const blogPath = `${__PATH_PREFIX__}/blog/`
let header

if (location.pathname === rootPath || location.pathname === blogPath) {
header = (
<h1
style={{
...scale(1.4),
marginBottom: rhythm(1.2),
marginTop: 0,
}}
>
<Link
style={{
boxShadow: `none`,
textDecoration: `none`,
color: `inherit`,
}}
to={location.pathname === blogPath ? `/blog/` : `/`}
>
{title}
</Link>
</h1>
)
} else {
header = (
<h3
style={{
fontFamily: `Montserrat, sans-serif`,
marginTop: 0,
}}
>
<Link
style={{
boxShadow: `none`,
textDecoration: `none`,
color: `inherit`,
}}
to={`/blog/`}
>
{title}
</Link>
</h3>
)
}
return (
<Wrapper>
<div
style={{
marginLeft: `auto`,
marginRight: `auto`,
maxWidth: rhythm(24),
padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
}}
>
<header>{header}</header>
<main>{children}</main>
</div>
<Footer>
Built by
{` `}
Alex Virdee © {new Date().getFullYear()}

</Footer>
</Wrapper>
)
}
}

const Wrapper = styled.div`
min-height: 100vh;
`

const Footer = styled.footer`
text-align: center;
margin: 24px;
`

export default Layout


显示各个帖子链接的博客页面

import React from "react"
import { Link, graphql } from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm } from "../utils/typography"
import Button from "../components/button"

class Blog extends React.Component {
render() {
const { data } = this.props
const siteTitle = data.site.siteMetadata.title
const posts = data.allMdx.edges

return (
<Layout location={this.props.location} title={siteTitle}>
<SEO title="All posts" />
<Bio />
<div style={{ margin: "20px 0 40px" }}>
{posts.map(({ node }) => {
const title = node.frontmatter.title || node.fields.slug
return (
<div key={node.fields.slug}>
<h3
style={{
marginBottom: rhythm(1 / 4),
}}
>
<Link
style={{ boxShadow: `none` }}
to={`blog${node.fields.slug}`}
>
{title}
</Link>
</h3>
<small>{node.frontmatter.date}</small>
<p
dangerouslySetInnerHTML={{
__html: node.frontmatter.description || node.excerpt,
}}
/>
</div>
)
})}
</div>
<Link to="/">
<Button marginTop="15px">Go Home</Button>
</Link>
</Layout>
)
}
}

export default Blog

export const pageQuery = graphql`
query {
site {
siteMetadata {
title
}
}
allMdx(sort: { fields: [frontmatter___date], order: DESC }) {
edges {
node {
excerpt
fields {
slug
}
frontmatter {
date(formatString: "MMMM DD, YYYY")
title
description
}
}
}
}
}
`

最佳答案

Blog类你需要一个/在你的<Link>组件位于 to={blog${node.fields.slug}}

所以 {/blog${node.fields.slug}}

如果没有它,它将采用相对路径 👍

(我省略了外花括号内的反引号,因为它会破坏堆栈溢出时的格式,但它们应该仍然存在)

关于javascript - Gatsby.js 博客在帖子中附加了两次 '/blog',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62414838/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com