Javascript 在盖茨比博客的url路径中追加%20

我用盖茨比的入门模板建立了一个博客。现在，当我打开一篇文章时，它显示的url是-

http://localhost:8000/JavaScript:%20Behind%20The%20Scenes/

。我查找并更改了

路径

属性，但是页面无法加载，它只是显示了一个具有相同url的空页面。我不知道为什么它会在路径中附加%20

注意：路径实际上是文件夹名。例如，在目录

/content/blog/JavaScript:Behind the Scenes/index.md

中，url中的路径实际上是文件夹名。我不知道为什么。路径应该是我在该文件夹的

index.md

中编写的标题

index.md

---
标题：“执行上下文”
日期：2020-02-16
类别：“JavaScript”
---
博客内容。。。。。。。。。。。。。。

gatsby node.js

const path=require（`path`）
const{createFilePath}=require（`gatsby源文件系统`）
exports.createPages=（{graphql，actions}）=>{
const{createPage}=actions
const blogpostemplate=path.resolve（`./src/templates/blog post.js`）
返回图(
`
{
所有的标记(
排序：{fields:[frontmatter\uuuuuuuuuu date]，顺序：DESC}
限额：1000
) {
边缘{
节点{
田地{
鼻涕虫
}
前沿物质{
标题
类别
}
}
}
}
}
`
)。然后（结果=>{
if（result.errors）{
抛出结果错误
}
//创建博客文章页面。
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]。节点
const next=index==0？null:发布[index-1]。节点
创建页面({
路径：post.node.fields.slug，
组件：blogPostTemplate，
背景：{
slug:post.node.fields.slug，
以前的
下一个
},
})
})
})
}
exports.onCreateNode=（{node，actions，getNode}）=>{
const{createNodeField}=操作
if（node.internal.type==`MarkdownRemark`）{
const value=createFilePath（{node，getNode}）
createNodeField({
名称：`slug`，
节点，
价值
})
}
}

另外，我对Github和Twitter链接也有一些问题。当我点击它们时，它显示页面未找到。它显示了奇怪的url:

https://github.com/https://github.com/myGithubName

https://twitter.com/https://twitter.com/myTwitterName

我查了一下它的位置，发现：

gatsby meta-config.js

module.exports={
标题：`我的博客'，
描述：`Blog发布关于…`，
作者：`myName`，
引言：`我用文字和代码解释。`，
站点URL：`https://gatsby-starter-bee.netlify.com`，//您的博客站点url
社会：{
推特：`https://twitter.com/myTwitterName`，//您的Twitter帐户
github：`https://github.com/myGithubName`,
中：``，
facebook：``
},
图标：`content/assets/profile.jpeg`，//添加您的favicon
关键词：[`blog`]，
评论：{
disqusShortName:“”，//您的Disqs短名称。请访问disqs.com。
话语：“JaeYeopHan/gatsby starter bee”//您的存档评论存储库
},
配置：{
countOfInitialPost:10，//配置您的初始post计数
},
赞助商：{
buyMeACoffeeId:“jbee”，
},
分享：{
facebookAppId:“”，//添加facebookAppId以使用facebook共享功能v3.2
},
ga:“”，//添加您的google analytics交易ID
}

这些链接在

gatsby meta-config.js

中似乎是正确的

我不知道它为什么在路径中附加%20

%20

是url内空间的默认值。url中不能有空格，因此默认情况下，它由HTML编码转义

url实际上是文件夹名。我不知道为什么。路径应该是我在该文件夹的index.md中编写的标题

在

gatsby node.js

中，您不需要对slug进行任何格式化：

    createNodeField({
      name: `slug`, 
      node,
      value,
    })

  social: {
    twitter: `myTwitterName`, // remove everything before your username
    github: `myGithubName`, // remove everything before your username
    medium: ``,
    facebook: ``
  },

在不格式化slug的情况下，url默认为项目内的路径

我的建议是：不要格式化slug。从文件夹路径中删除空格，您就有了一个漂亮的url:

/content/blog/javascript幕后/index.md

。谷歌也建议使用催眠字符

-

。拥有这样的URL在SEO中排名更好

另外，我对Github和Twitter链接也有一些问题。当我点击它们时，它显示页面未找到。它显示的奇怪url是：

在您的

gatsby config.js

中仅提供社交网络的用户名：

    createNodeField({
      name: `slug`, 
      node,
      value,
    })

  social: {
    twitter: `myTwitterName`, // remove everything before your username
    github: `myGithubName`, // remove everything before your username
    medium: ``,
    facebook: ``
  },