我正在为我自己的博客使用 Gatsby 主题@lekoarts/gatsby-theme-minimal- blog。该主题还有一个父核心主题@lekoarts/gatsby-theme-minimal-blog-core,它使用了gatsby-plugin-mdx插件。
在我自己的博客中,我想更改插件gatsby-plugin-mdx
的选项,例如设置
options: {
maxWidth: 960,
quality: 90,
linkImagesToOriginal: true, // set to true from false
}
我尝试gatsby-plugin-mdx
在我自己的博客中导入,gatsby-config.js
但它不起作用我在解析现有.mdx
文件时遇到错误。
还试图通过使用相同的内容创建但没有效果来隐藏gatsby-config.js
核心主题的文件。src/@lekoarts/gatsby-theme-minimal-blog-core/gatsby-config.js
linkImagesToOriginal: true
如何更改父主题的插件选项?
核心主题的gatsby-config.js
文件如下:
const withDefaults = require(`./utils/default-options`)
module.exports = (themeOptions) => {
const options = withDefaults(themeOptions)
const { mdx = true } = themeOptions
return {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: options.postsPath,
path: options.postsPath,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: options.pagesPath,
path: options.pagesPath,
},
},
mdx && {
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.mdx`, `.md`],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 960,
quality: 90,
linkImagesToOriginal: false, // want to set this to true
},
},
],
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 960,
quality: 90,
linkImagesToOriginal: false,
},
},
],
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-typescript`,
].filter(Boolean),
}
}
gatsby-config.js
我的博客
require(`dotenv`).config({
path: `.env`,
})
const newsletterFeed = require(`./src/@lekoarts/gatsby-theme-minimal-blog/utils/newsletterFeed`)
const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
module.exports = {
siteMetadata: {
siteTitle: 'Kaan Uzdoğan',
siteTitleAlt: `Kaan Uzdoğan - Personal Site`,
siteHeadline: 'Kaan Uzdoğan - Personal Site',
siteUrl: `https://kaanuzdogan.com`,
author: `@kaanuzdogan`,
siteLanguage: 'en',
siteImage: '/banner.jpg',
siteDescription: 'Personal Blog and Website of Kaan Uzdogan',
},
plugins: [
{
resolve: `@lekoarts/gatsby-theme-minimal-blog`,
// See the theme's README for all available options
options: {
feedTitle: 'Kaan Uzdoğan\'s Personal Site',
navigation: [
{
title: `Blog`,
slug: `/blog`,
},
{
title: `About`,
slug: `/about`,
},
],
externalLinks: [
{
name: `Twitter`,
url: `https://twitter.com/kaanuzdogan`,
},
{
name: `Instagram`,
url: `https://www.instagram.com/kuzdogan`,
},
{
name: `Github`,
url: `https://github.com/kuzdogan`
}
],
formatString: 'DD MMMM YYYY'
},
},
{
resolve: `gatsby-plugin-feed`,
options: newsletterFeed('Kaan Uzdoğan\'s Personal Site'),
},
{
resolve: `gatsby-plugin-disqus`,
options: {
shortname: `kaanuzdogan`
}
},
{
resolve: `gatsby-plugin-google-gtag`,
options: {
trackingIds: [
process.env.GOOGLE_MEASUREMENT_ID, // Google Analytics / GA
],
},
},
`gatsby-plugin-sitemap`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `minimal-blog - @lekoarts/gatsby-theme-minimal-blog`,
short_name: `minimal-blog`,
description: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and code highlighting.`,
start_url: `/`,
background_color: `#fff`,
theme_color: `#6B46C1`,
display: `standalone`,
icons: [
{
src: `/android-chrome-192x192.png`,
sizes: `192x192`,
type: `image/png`,
},
{
src: `/android-chrome-512x512.png`,
sizes: `512x512`,
type: `image/png`,
},
],
},
},
`gatsby-plugin-offline`,
`gatsby-plugin-netlify`,
shouldAnalyseBundle && {
resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
options: {
analyzerMode: `static`,
reportFilename: `_bundle.html`,
openAnalyzer: false,
},
},
{
resolve: 'gatsby-plugin-mailchimp',
options: {
endpoint: '<hiding the endpoint url>',
timeout: 3500,
},
},
].filter(Boolean),
}