1

我正在为我自己的博客使用 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.jslinkImagesToOriginal: 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),
}

4

2 回答 2

0

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

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

于 2021-02-14T12:42:24.680 回答
0

尝试:

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

根据伟大的 Jason Lengstorf的这份指南,gatsby-config.js需要将其转化为函数。

我不知道.filter(Boolean)在这种情况下它在做什么,你可以尝试删除它,因为我看不到在哪里定义。

于 2021-02-03T07:10:18.897 回答