在 Gatsby 中隐藏/自定义父主题的插件

问题描述

我在自己的博客中使用 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,linkImagesToOriginal: false,// want to set this to true
              },],plugins: [
            {
              resolve: `gatsby-remark-images`,`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`,`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,}

解决方法

试试：

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`,`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),)}

根据this guide from the great Jason Lengstorf，gatsby-config.js 需要变成一个函数。

我不知道 .filter(Boolean) 在这种情况下在做什么，您可以尝试将其删除，因为我看不到它的定义位置。

,

由于主题中的内置选项 mdx，我能够修改插件。

我在我博客的 mdx: false 中设置了 gatsby-config.js，这将禁用核心主题中的插件，并在我博客的 gatsby-plugin-mdx 中添加了带有新选项的 gatsby-config.js。