在 Gatsby 博客中的 url 路径中附加 %20
Posted
技术标签:
【中文标题】在 Gatsby 博客中的 url 路径中附加 %20【英文标题】:Appending %20 in the path of the url in Gatsby Blog 【发布时间】:2020-05-31 15:31:52 【问题描述】:我已经使用 Gatsby 的入门模板建立了一个博客。现在,当我打开一篇文章时,它显示的网址是-http://localhost:8000/javascript:%20Behind%20The%20Scenes/
。我查找了this answer 并更改了path
属性,但是页面无法加载,它只是显示了一个具有相同url 的空页面。我不知道为什么它会在路径中附加 %20。
注意:路径其实就是文件夹名。例如,在目录/content/blog/JavaScript:Behind The Scenes/index.md
中,url 中的路径实际上是文件夹名称。我不知道为什么。路径应该是我在该文件夹的index.md
中写的标题。
index.md
---
title: 'The Execution Context'
date: '2020-02-16'
category: "JavaScript"
---
Blog Content..............
gatsby-node.js
const path = require(`path`)
const createFilePath = require(`gatsby-source-filesystem`)
exports.createPages = ( graphql, actions ) =>
const createPage = actions
const blogPostTemplate = path.resolve(`./src/templates/blog-post.js`)
return graphql(
`
allMarkdownRemark(
sort: fields: [frontmatter___date], order: DESC
limit: 1000
)
edges
node
fields
slug
frontmatter
title
category
`
).then(result =>
if (result.errors)
throw result.errors
// Create blog posts pages.
const posts = result.data.allMarkdownRemark.edges.filter(
( node ) => !!node.frontmatter.category
)
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: post.node.fields.slug,
component: blogPostTemplate,
context:
slug: post.node.fields.slug,
previous,
next,
,
)
)
)
exports.onCreateNode = ( node, actions, getNode ) =>
const createNodeField = actions
if (node.internal.type === `MarkdownRemark`)
const value = createFilePath( node, getNode )
createNodeField(
name: `slug`,
node,
value,
)
另外,我对 Github 和 Twitter 链接有一些问题。当我单击它们时,它显示找不到页面。它显示奇怪的网址:https://github.com/https://github.com/myGithubName
https://twitter.com/https://twitter.com/myTwitterName
我检查了它的位置并发现:
gatsby-meta-config.js
module.exports =
title: `My Blog`,
description: `Blog posted about ...`,
author: `myName`,
introduction: `I explain with words and code.`,
siteUrl: `https://gatsby-starter-bee.netlify.com`, // Your blog site url
social:
twitter: `https://twitter.com/myTwitterName`, // Your Twitter account
github: `https://github.com/myGithubName`,
medium: ``,
facebook: ``
,
icon: `content/assets/profile.jpeg`, // Add your favicon
keywords: [`blog`],
comment:
disqusShortName: '', // Your disqus-short-name. check disqus.com.
utterances: 'JaeYeopHan/gatsby-starter-bee', // Your repository for archive comment
,
configs:
countOfInitialPost: 10, // Config your initial count of post
,
sponsor:
buyMeACoffeeId: 'jbee',
,
share:
facebookAppId: '', // Add facebookAppId for using facebook share feature v3.2
,
ga: '', // Add your google analytics tranking ID
gatsby-meta-config.js
中的链接似乎正确。
【问题讨论】:
【参考方案1】:我不知道为什么它会在路径中附加 %20。
%20
是 html encoding 用于 url 内的空格。您的 url 中不能有空格,因此默认情况下它会被 HTML 编码转义。
url 实际上是文件夹名称。我不知道为什么。路径应该是我在该文件夹的 index.md 中编写的标题。
您没有对 gatsby-node.js
中的 slug 进行任何格式化:
createNodeField(
name: `slug`,
node,
value,
)
如果不格式化 slug,您的 url 默认为项目内的路径。
我的建议:不要格式化 slug。从文件夹路径中删除空格,您就有了一个不错的 url:/content/blog/javascript-behind-the-scenes/index.md
。 Google 也推荐使用连字符-
。拥有这样的 URL 在 SEO 中排名更好。
另外,我对 Github 和 Twitter 链接有一些问题。当我单击它们时,它显示找不到页面。它显示的奇怪网址是:https://github.com/https://github.com/myGithubNamehttps://twitter.com/https://twitter.com/myTwitterName
在您的gatsby-config.js
中仅提供您的社交网络用户名:
social:
twitter: `myTwitterName`, // remove everything before your username
github: `myGithubName`, // remove everything before your username
medium: ``,
facebook: ``
,
【讨论】:
以上是关于在 Gatsby 博客中的 url 路径中附加 %20的主要内容,如果未能解决你的问题,请参考以下文章
Gatsby GraphQL 无法在 Strapi 的“文件”类型上查询字段“url”
博客文章中的 Gatsby-js 客户端 javascript 内联
使用 Gatsby 的 Markdown 帖子中的特色图像的绝对路径
.htaccess 中的 301 重定向将旧文件路径/名称附加到新 url