如何删除文章URL末尾的斜杠

Question

我刚刚开始学习盖茨比，我刚刚从盖茨比模板中导入了一个盖茨比项目。我的og:image显示的Open图标签有问题。我想显示文章的缩略图。

例如本文——https://www.armanism.com/blog/install-nginx-on-ubuntu当我试图从Twitter卡验证器获取数据时，它显示为重定向到"；https://www.armanism.com/blog/install-nginx-on-ubuntu"至"；https://www.armanism.com/blog/install-nginx-on-ubuntu/">

查看此屏幕截图

有人能帮我解决这个问题吗？

这是我的盖茨比SEO配置

/* Vendor imports */
import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { StaticQuery, graphql } from 'gatsby';
/* App imports */
import Config from '../../../config';
import Utils from '../../utils/pageUtils';
const detailsQuery = graphql`
query DefaultSEOQuery {
file(name: { eq: "facebook-icon" }) {
childImageSharp {
fixed(width: 600) {
...GatsbyImageSharpFixed_noBase64
}
}
}
}
`;
function SEO({
title,
description,
path,
lang,
keywords,
contentType,
imageUrl,
translations,
meta,
}) {
return (
<StaticQuery
query={detailsQuery}
render={(data) => {
const metaKeywords = keywords && keywords.length > 0
? { name: 'keywords', content: keywords.join(', ') }
: [];
const pageUrl = Utils.resolvePageUrl(
Config.siteUrl,
Config.pathPrefix,
path,
);
const fixpageUrl = pageUrl.replace('/https://', 'https://');
const metaImageUrl = Utils.resolveUrl(
Config.siteUrl,
imageUrl || data.file.childImageSharp.fixed.src,
);
const fixmetaImageUrl = metaImageUrl.replace('/https://', 'https://');
return (
<Helmet
title={title} // Page title
titleTemplate={`%s – ${Config.siteTitle}`}
meta={
[
{ name: 'description', content: `${description.substring(0, 160)}...` }, // Page description
/* Open Graph */
{ property: 'og:title', content: title },
{ property: 'og:type', content: contentType || 'website' },
{ property: 'og:url', content: fixpageUrl },
{ property: 'og:description', content: `${description.substring(0, 160)}...` },
{ property: 'og:image', content: fixmetaImageUrl },
{ property: 'og:image:alt', content: title },
{ property: 'og:site_name', content: Config.siteTitle },
{ property: 'og:locale', content: lang || 'en_US' },
/* Twitter card */
{ name: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:title', content: title },
{ name: 'twitter:description', content: `${description.substring(0, 160)}...` },
{ name: 'twitter:image', content: fixmetaImageUrl },
{ name: 'twitter:image:alt', content: title },
{ name: 'twitter:site', content: Config.author },
{ name: 'twitter:creator', content: Config.author },
]
.concat(metaKeywords) // Keywords
.concat(meta || []) // Other provided metadata
}
link={[
{ rel: 'canonical', href: fixpageUrl }, // Canonical url
]
// Translated versions of page
.concat(
translations
? translations.map((obj) => ({
rel: 'alternate',
hreflang: obj.hreflang,
href: Utils.resolvePageUrl(
Config.siteUrl,
Config.pathPrefix,
obj.path,
),
}))
: [],
)}
/>
);
}}
/>
);
}
SEO.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
lang: PropTypes.string,
contentType: PropTypes.oneOf(['article', 'website']),
imageUrl: PropTypes.string,
keywords: PropTypes.arrayOf(PropTypes.string),
translations: PropTypes.arrayOf(
PropTypes.shape({
hreflang: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
}),
),
meta: PropTypes.arrayOf(
PropTypes.shape({
property: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
}),
),
};
SEO.defaultProps = {
lang: 'en_US',
contentType: 'website',
imageUrl: null,
keywords: [],
translations: [],
meta: [],
};
export default SEO;

这是我的PageUtils代码

/* eslint-disable no-param-reassign */
const Config = require('../../config');
const Utils = {
/**
* Join provided url paths.
* @param {...string} paths Provided paths. It doesn't matter if they have trailing slash.
* @return {string} Resolved url without trailing slash.
*/
resolveUrl: (...paths) => paths.reduce((resolvedUrl, path) => {
const urlPath = path.toString().trim();
if (urlPath) {
// eslint-disable-next-line no-param-reassign
resolvedUrl
+= (resolvedUrl === '' ? '' : '/') + urlPath.replace(/^/|/$/g, '');
}
resolvedUrl = resolvedUrl[0] !== '/' ? `/${resolvedUrl}` : resolvedUrl;
return resolvedUrl;
}, ''),
/**
* Resolve a page url adding a trailing slash.
* Needed to prevent 301 redirects cause of Gatsby.js' folder structure.
* @param {...string} path Provided paths. It doesn't matter if they have trailing slash.
* @return {string} Resolved url with trailing slash.
*/
resolvePageUrl: (...path) => {
const resolvedUrl = Utils.resolveUrl(...path);
return resolvedUrl;
},
/**
* Get an ordered list of suggested posts for a single post.
* @param {Object} post The single post of which to find the related posts.
* It's the returned object from Graphql's query `markdownRemark`
* @param {Array} postList The list where find related posts. It's the returned
* object from Graphql's query `allMarkdownRemark`
* @param {number} limit The maximum number of suggested posts to get
* @return {Array} The `postList` object sorted according to the best match with the `post` object
*/
getSuggestedPosts: (post, postList, limit) => {
// Get the number of common tags with provided post.
const getTagScore = (edge) => {
let commonTags = 0;
edge.node.frontmatter.tags.forEach((tag) => {
commonTags += post.frontmatter.tags.indexOf(tag) !== -1 ? 1 : 0;
});
return commonTags;
};
return postList.edges
.sort((edgeA, edgeB) => getTagScore(edgeB) - getTagScore(edgeA))
.slice(0, limit);
},
/**
* Pass a post and retrieve a list of related translations.
* @param {Object} post The post of which retrieve its translations.
* It accepts a `node` object from Graphql's query `allMarkdownRemark`
* @param {Object} postList The list of posts where search translations.
* It accepts a `edges` array from Graphql's query `allMarkdownRemark`
* @return {Object} An array of objects with languages as keys (ISO 639-1) and
* translated post's paths as values.
*/
getRelatedTranslations: (post, postList) => postList
.filter(({ node }) =>
// Get posts in the same folder of provided post
// eslint-disable-next-line implicit-arrow-linebreak
(
node.fileAbsolutePath.split('/').slice(-2, -1)[0]
=== post.fileAbsolutePath.split('/').slice(-2, -1)[0]
))
.map(({ node }) => {
const lang = node.fileAbsolutePath.split('.').slice(-2, -1)[0];
return {
hreflang: lang.slice(-5) !== 'index' ? lang : Config.defaultLanguage,
path: Utils.resolvePageUrl(node.frontmatter.path),
};
}),
/**
* Capitalize passed string
* @param {string} str string to capitalize
* @return {string} string with first letter to uppercase
*/
capitalize: (str) => str[0].toUpperCase() + str.slice(1),
};
module.exports = Utils;

如果你需要任何其他信息，请告诉我

提前感谢

Answer 1

我认为您的问题与SEO组件或项目函数本身无关。我认为您的问题依赖于文章创建(gatsby-node.js(，因为它创建的URL带有尾部斜杠，所以附加到该逻辑的所有配置和参数都继承了它

在检查如何在path参数中创建文章中：

result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug.replace(//$/, ''); // original code: node.fields.slug,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
slug: node.fields.slug.replace(//$/, '')
},
})
})

注意：基于盖茨比的教程。调整它以使其适应您的需求

作为replace函数的替代，您可以使用许多多字符串操作函数中的一个，例如：

(node.fields.slug.charAt(node.fields.slug.length - 1) === '/') ? node.fields.slug.slice(0, -1) : node.fields.slug;

或者：

node.fields.slug.endsWith('/') ? node.fields.slug.slice(0, -1) : node.fields.slug;

此外，您还可以使用gatsby-plugin-remove-trailing-slashes插件。