如何解决如何删除文章网址末尾的斜杠
我刚刚开始学习 Gatsby，我刚刚从 gatsby 模板导入了一个 gatsby 项目。我的 og:image 显示不同的 Open graph 标签有问题，我想显示文章的缩略图。
例如这篇文章 - https://www.armanism.com/blog/install-nginx-on-ubuntu 当我尝试从 Twitter 卡验证器获取数据时，它显示重定向到“https://www.armanism.com/blog/install-Nginx-on-ubuntu”到“https://www.armanism.com/博客/install-Nginx-on-ubuntu/"
有人可以帮我解决这个问题吗？
这是我的 gatsby 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,);
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',{ property: 'og:image',content: fixMetaImageUrl },{ property: 'og:image:alt',{ 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',{ name: 'twitter:description',{ name: 'twitter:image',{ name: 'twitter:image:alt',{ name: 'twitter:site',content: Config.author },{ name: 'twitter:creator',]
.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,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,}),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;
如果您需要任何其他信息，请告诉我
提前致谢
解决方法
我认为您的问题与您的 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(/\/$/,'')
},})
})
注意：基于 Gatsby's tutorial。调整它以适应您的需求。
替代 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 插件。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
