[{"data":1,"prerenderedAt":137},["ShallowReactive",2],{"legacy-question-9236680151e49ec8cc58cd118c867c1e":3,"legacy-question-author-koji-kadoma":111,"legacy-question-category-website-building":126},{"id":4,"title":5,"author":6,"body":7,"category":98,"date":99,"description":5,"extension":100,"locale":101,"meta":102,"navigation":103,"path":104,"seo":105,"slug":106,"stem":107,"tag":108,"updated":99,"__hash__":110},"legacyQuestions\u002F20210401000000-GridsomeでTOC（目次）を自動生成したい.md","GridsomeでTOC（目次）を自動生成したい","koji-kadoma",{"type":8,"value":9,"toc":92},"minimark",[10,14,18,28,31,34,38,41,52,55,61,64,70,73,77,80,86,89],[11,12,13],"h2",{"id":13},"vue-remarkを使う",[15,16,17],"p",{},"Gridsomeでマークダウンファイルを使う場合は、",[19,20,21,25],"ol",{},[22,23,24],"li",{},"@gridsome\u002Fsource-filesystem",[22,26,27],{},"@gridsome\u002Fvue-remark",[15,29,30],{},"のどちらかのプラグインを使うのが公式のやり方です。",[15,32,33],{},"Gridsomeでサイトを作る紹介ページなどでは、@gridsome\u002Fsource-filesystemを使っている例が多いですが、@gridsome\u002Fsource-filesystemはToc（目次）を自動生成する機能がないため、@gridsome\u002Fvue-remarkを使います。",[11,35,37],{"id":36},"gridsomevue-remarkでtocを自動生成する方法","@gridsome\u002Fvue-remarkでToCを自動生成する方法",[15,39,40],{},"@gridsome\u002Fvue-remark単体ではTocの作成に対応していないので、プラグインを使います。",[42,43,48],"pre",{"className":44,"code":46,"language":47},[45],"language-text","yarn add @gridsome\u002Fvue-remark remark-toc\n","text",[49,50,46],"code",{"__ignoreMap":51},"",[15,53,54],{},"プラグインを使う旨をgridsome.config.jsに記述します。",[42,56,59],{"className":57,"code":58,"language":47},[45],"module.exports = {\n  \u002F\u002F\n  \u002F\u002F 省略\n  \u002F\u002F\n  plugins: [\n    {\n      use: '@gridsome\u002Fvue-remark',\n      options: {\n        \u002F\u002F\n        \u002F\u002F 省略\n        \u002F\u002F\n        plugins: [\n          ['remark-toc']\n        ],\n      }\n    }\n  ]\n}\n",[49,60,58],{"__ignoreMap":51},[15,62,63],{},"あとはマークダウンファイルでTocパートを追記します。",[42,65,68],{"className":66,"code":67,"language":47},[45],"## toc\n\n## 見出し\n\n記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文。\n\n",[49,69,67],{"__ignoreMap":51},[15,71,72],{},"これで自動生成されます。",[11,74,76],{"id":75},"自動生成されなかったら","自動生成されなかったら？",[15,78,79],{},"なお、@gridsome\u002Fvue-remarkで複数のデータソースを読み取る場合は、gridsome.config.js内の全てのvue-remarkの設定に、",[42,81,84],{"className":82,"code":83,"language":47},[45],"plugins: [\n  ['remark-toc']\n]\n",[49,85,83],{"__ignoreMap":51},[15,87,88],{},"を入れないと、内部エラーが起こってTOC（目次）が生成されなくなります。",[15,90,91],{},"これは公式のドキュメントなどにも記載されていない条件なので要注意です。",{"title":51,"searchDepth":93,"depth":93,"links":94},2,[95,96,97],{"id":13,"depth":93,"text":13},{"id":36,"depth":93,"text":37},{"id":75,"depth":93,"text":76},"website-building","2021-04-01T00:00:00.000Z","md","ja",{},true,"\u002F20210401000000-gridsometoc",{"title":5,"description":5},"9236680151e49ec8cc58cd118c867c1e","20210401000000-GridsomeでTOC（目次）を自動生成したい",[109],"gridsome","aLaO_jaVctmM-birZtrWMQCXbbJOlfq4QukGkS1q5Lw",{"id":112,"title":113,"body":114,"date":99,"description":118,"extension":100,"locale":101,"meta":119,"name":122,"navigation":103,"path":123,"seo":124,"slug":6,"stem":6,"updated":99,"__hash__":125},"legacyAuthors\u002Fkoji-kadoma.md","Koji Kadoma",{"type":8,"value":115,"toc":116},[],{"title":51,"searchDepth":93,"depth":93,"links":117},[],"Webエンジニアです。Javascript、PHP、Ruby、Dockerなどをメインで使っています。",{"image":120,"url":121},"https:\u002F\u002Fwww.codit.work\u002Fimgs\u002Favatar\u002Fkoji-kadoma.png","https:\u002F\u002Fkoji.pages.dev\u002F",null,"\u002Fkoji-kadoma",{"title":113,"description":118},"H1yaGicrsv1CzYTbFeEXQosuYx93lIutD3_XwXMhAFk",{"id":127,"title":128,"body":129,"date":99,"description":128,"extension":100,"locale":101,"meta":133,"navigation":103,"path":134,"seo":135,"slug":98,"stem":98,"updated":99,"__hash__":136},"legacyCategories\u002Fwebsite-building.md","Webサイト構築",{"type":8,"value":130,"toc":131},[],{"title":51,"searchDepth":93,"depth":93,"links":132},[],{},"\u002Fwebsite-building",{"title":128,"description":128},"h9jPLD2mzMm3L4sFN5qWSiSirySQQLdnxLhQcvw8VlQ",1783320301797]