无法在gatsby配置文件中添加收藏夹图标 [英] Not able to add favicon in gatsby config file

问题描述

即使在gatsby配置文件中的gatsby hello world starter项目中添加了favicon之后，它也不起作用.我尝试了Google搜索，并在stackoverflow中搜索了类似的问题，如何添加favicongatsby-config.js?.但这无济于事，或者我可能在某个地方错了.

请纠正我！

GATSBY CONFIG.JS

 /***使用此文件配置您的Gatsby网站.**请参阅:https://www.gatsbyjs.org/docs/gatsby-config/*/module.exports = {/*您的站点配置在这里*/siteMetadata:{标题:"xxxxxxx"，作者:"Subin"，}，插件:[盖茨比插件反应式头盔"，{解决:"gatsby-source-contentful"，选项: {spaceId:process.env.CONTENTFUL_SPACE_ID，accessToken:process.env.CONTENTFUL_ACCESS_TOKEN，}，}，"gatsby-plugin-sass"，//此插件将提取我们项目系统中的所有文件{解决:"gatsby-source-filesystem"，选项: {名称:"src"，路径:`$ {__ dirname}/src/`，图标:`../src/images/favicon-32x32.png`，}，}，"gatsby-plugin-sharp"，//需要REMARK插件来提取markdown文件并进行解析{解决:"gatsby-transformer-remark"，选项: {插件:["gatsby-remark-relative-images"，{解决:"gatsby-remark-images"，选项: {maxWidth:750，linkImagesOriginal:否，}，}，]，}，}，]，} 

项目目录图像

图片:我的项目结构的树层次结构

解决方案

要显示您的收藏夹图标，您需要安装gatsby-plugin-manifest，它不随Hello World Starter一起提供.

  npm install-保存gatsby-plugin-manifest 

这是您的 gatsby-config.js ，其中包含此插件的一些默认设置:

 <代码>/***使用此文件配置您的Gatsby网站.**请参阅:https://www.gatsbyjs.org/docs/gatsby-config/*/module.exports = {/*您的站点配置在这里*/siteMetadata:{标题:"xxxxxxx"，作者:"Subin"}，插件:[盖茨比插件反应式头盔"，{解决:"gatsby-source-contentful"，选项: {spaceId:process.env.CONTENTFUL_SPACE_ID，accessToken:process.env.CONTENTFUL_ACCESS_TOKEN}}，"gatsby-plugin-sass"，//此插件将提取我们项目系统中的所有文件{解决:"gatsby-source-filesystem"，选项: {名称:"src"，路径:`$ {__ dirname}/src/`，图标:`../src/images/favicon-32x32.png`}}，"gatsby-plugin-sharp"，//需要REMARK插件来提取markdown文件并进行解析{解决:"gatsby-transformer-remark"，选项: {插件:["gatsby-remark-relative-images"，{解决:"gatsby-remark-images"，选项: {maxWidth:750，linkImagesOriginal:否}}]}}，{解决:`gatsby-plugin-manifest`，选项: {名称:"xxx"，short_name:"xxxx"，start_url:"/"，background_color:#6b37bf"，theme_color:#6b37bf"，//启用添加到主屏幕"提示，并禁用浏览器用户界面(包括后退按钮)//参见https://developers.google.com/web/fundamentals/web-app-manifest/#display显示:独立"，icon:"src/images/favicon-32x32.png"//此路径是相对于网站根目录的.}}]}; 

在修改 gatsby-config.js 以查看您的更改时，请记住停止开发服务器并启动全新的服务器.

您可以尝试一下，让我知道它是否按预期工作吗?

Even after adding favicon to gatsby hello world starter project in gatsby config file, its not working. I tried googling and searched in stackoverflow for similar question, How do i add favicon gatsby-config.js?. But that doesn't help or i maybe wrong somewhere.

Please correct me!!

GATSBY CONFIG.JS

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

module.exports = {
  /* Your site config here */
  siteMetadata: {
    title: "xxxxxxx",
    author: "Subin",
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: "gatsby-source-contentful",
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
    "gatsby-plugin-sass",
    // this plugin will pull all the files in our project system
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "src",
        path: `${__dirname}/src/`,
        icon: `../src/images/favicon-32x32.png`,
      },
    },
    "gatsby-plugin-sharp",
    // REMARK plugin needed to extract the markdown files and parses
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          "gatsby-remark-relative-images",
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 750,
              linkImagesOriginal: false,
            },
          },
        ],
      },
    },
  ],
}

PROJECT DIRECTORY IMAGE

Image : Tree hierarchy of my project structure

解决方案

To display your favicon, you need to have the gatsby-plugin-manifest installed, it doesn't come with the hello world starter.

npm install --save gatsby-plugin-manifest

And here is your gatsby-config.js with some default settings to this plugin:

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

module.exports = {
  /* Your site config here */
  siteMetadata: {
    title: "xxxxxxx",
    author: "Subin"
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: "gatsby-source-contentful",
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
      }
    },
    "gatsby-plugin-sass",
    // this plugin will pull all the files in our project system
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "src",
        path: `${__dirname}/src/`,
        icon: `../src/images/favicon-32x32.png`
      }
    },
    "gatsby-plugin-sharp",
    // REMARK plugin needed to extract the markdown files and parses
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          "gatsby-remark-relative-images",
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 750,
              linkImagesOriginal: false
            }
          }
        ]
      }
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: "xxx",
        short_name: "xxxx",
        start_url: "/",
        background_color: "#6b37bf",
        theme_color: "#6b37bf",
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: "standalone",
        icon: "src/images/favicon-32x32.png" // This path is relative to the root of the site.
      }
    }
  ]
};

Remember to stop your development server and start a brand new one when modifying gatsby-config.js in order to see your changes.

Can you try this and let me know if it works as intended?

这篇关于无法在gatsby配置文件中添加收藏夹图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！