[{"data":1,"prerenderedAt":102},["ShallowReactive",2],{"legacy-question-96dc285beb73d292e6c566b3808db487":3,"legacy-question-author-koji-kadoma":75,"legacy-question-category-website-building":91},{"id":4,"title":5,"author":6,"body":7,"category":62,"date":63,"description":5,"extension":64,"locale":65,"meta":66,"navigation":67,"path":68,"seo":69,"slug":70,"stem":71,"tag":72,"updated":63,"__hash__":74},"legacyQuestions\u002F20211028000000-Grdisomeでオリジナル設定を追加する方法.md","Grdisomeでオリジナル設定を追加する方法","koji-kadoma",{"type":8,"value":9,"toc":57},"minimark",[10,15,19,22,25,28,39,42,48,51],[11,12,14],"h2",{"id":13},"gridsomeconfigjsデータをapiloadsourceで読み込めば出来ます","gridsome.config.jsデータをapi.loadSourceで読み込めば出来ます",[16,17,18],"p",{},"Gridsomeでは、gridsome.config.jsのデータのうち、フレームワークに取り込む設定が決められているため、そのまま設定を記載しただけでは、Templateからロードが出来ません。",[16,20,21],{},"しかし、gridsome.server.jsから呼び出すapi.loadSourceには、metaデータにGridsomeのGraphQLに追加するaddMetadataというメソッドが用意されているため、そちらを使えば追加が可能です。",[11,23,24],{"id":24},"実装方法",[16,26,27],{},"まずは、gridsome.config.jsに設定を追加します。ここはただの連想配列なので、好きな値を追加できます。今回は、「settings」という連想配列で追加します。",[29,30,35],"pre",{"className":31,"code":33,"language":34},[32],"language-text","\u002F\u002F gridsome.config.js\nmodule.exports = {\n  siteName: 'SiteName',\n  icon: {\n    favicon: '.\u002Fsrc\u002Fassets\u002Ffavicon.png',\n    touchicon: '.\u002Fsrc\u002Fassets\u002Ffavicon.png'\n  },\n  siteUrl: 'https:\u002F\u002Fexample.com',\n  settings: {\n    twitter: \"https:\u002F\u002Ftwitter.com\u002Fxxx\",\n    leftnav: {\n      links: [\n        { path: '\u002Fdocs\u002F', title: 'Docs' }\n      ]\n    }\n  },\n\n","text",[36,37,33],"code",{"__ignoreMap":38},"",[16,40,41],{},"続いて、この設定値をgridsome.server.jsでGridsomeのGraphQLへ挿入します。",[29,43,46],{"className":44,"code":45,"language":34},[32],"api.loadSource(({ addCollection, addMetadata }) => {\n  addMetadata('settings', require('.\u002Fgridsome.config').settings);\n});\n",[36,47,45],{"__ignoreMap":38},[16,49,50],{},"追加したデータは、GraphQLで取得可能です。",[29,52,55],{"className":53,"code":54,"language":34},[32],"\u003Cstatic-query>\nquery Setting {\n  metadata {\n    settings {\n      twitter\n    }\n  }\n}\n\u003C\u002Fstatic-query>\n",[36,56,54],{"__ignoreMap":38},{"title":38,"searchDepth":58,"depth":58,"links":59},2,[60,61],{"id":13,"depth":58,"text":14},{"id":24,"depth":58,"text":24},"website-building","2021-10-29T01:00:00.000Z","md","ja",{},true,"\u002F20211028000000-grdisome",{"title":5,"description":5},"96dc285beb73d292e6c566b3808db487","20211028000000-Grdisomeでオリジナル設定を追加する方法",[73],"gridsome","OmlCDN1vE-2BkyFGWoqCTPqcVytm6VcVUJkalDIzRXc",{"id":76,"title":77,"body":78,"date":82,"description":83,"extension":64,"locale":65,"meta":84,"name":87,"navigation":67,"path":88,"seo":89,"slug":6,"stem":6,"updated":82,"__hash__":90},"legacyAuthors\u002Fkoji-kadoma.md","Koji Kadoma",{"type":8,"value":79,"toc":80},[],{"title":38,"searchDepth":58,"depth":58,"links":81},[],"2021-04-01T00:00:00.000Z","Webエンジニアです。Javascript、PHP、Ruby、Dockerなどをメインで使っています。",{"image":85,"url":86},"https:\u002F\u002Fwww.codit.work\u002Fimgs\u002Favatar\u002Fkoji-kadoma.png","https:\u002F\u002Fkoji.pages.dev\u002F",null,"\u002Fkoji-kadoma",{"title":77,"description":83},"H1yaGicrsv1CzYTbFeEXQosuYx93lIutD3_XwXMhAFk",{"id":92,"title":93,"body":94,"date":82,"description":93,"extension":64,"locale":65,"meta":98,"navigation":67,"path":99,"seo":100,"slug":62,"stem":62,"updated":82,"__hash__":101},"legacyCategories\u002Fwebsite-building.md","Webサイト構築",{"type":8,"value":95,"toc":96},[],{"title":38,"searchDepth":58,"depth":58,"links":97},[],{},"\u002Fwebsite-building",{"title":93,"description":93},"h9jPLD2mzMm3L4sFN5qWSiSirySQQLdnxLhQcvw8VlQ",1783320299317]