Q. Grdisomeでオリジナル設定を追加する方法

gridsome.config.jsデータをapi.loadSourceで読み込めば出来ます

Gridsomeでは、gridsome.config.jsのデータのうち、フレームワークに取り込む設定が決められているため、そのまま設定を記載しただけでは、Templateからロードが出来ません。

しかし、gridsome.server.jsから呼び出すapi.loadSourceには、metaデータにGridsomeのGraphQLに追加するaddMetadataというメソッドが用意されているため、そちらを使えば追加が可能です。

実装方法

まずは、gridsome.config.jsに設定を追加します。ここはただの連想配列なので、好きな値を追加できます。今回は、「settings」という連想配列で追加します。

// gridsome.config.js
module.exports = {
  siteName: 'SiteName',
  icon: {
    favicon: './src/assets/favicon.png',
    touchicon: './src/assets/favicon.png'
  },
  siteUrl: 'https://example.com',
  settings: {
    twitter: "https://twitter.com/xxx",
    leftnav: {
      links: [
        { path: '/docs/', title: 'Docs' }
      ]
    }
  },

続いて、この設定値をgridsome.server.jsでGridsomeのGraphQLへ挿入します。

api.loadSource(({ addCollection, addMetadata }) => {
  addMetadata('settings', require('./gridsome.config').settings);
});

追加したデータは、GraphQLで取得可能です。

<static-query>
query Setting {
  metadata {
    settings {
      twitter
    }
  }
}
</static-query>