[{"data":1,"prerenderedAt":5727},["ShallowReactive",2],{"series-nuxt-content-blog-3":3},{"doc":4,"prev":2260,"next":3969},{"id":5,"title":6,"body":7,"category":2243,"createdAt":2245,"description":2246,"extension":2247,"index":145,"meta":2248,"navigation":285,"path":2249,"publish":285,"seo":2250,"series":2251,"seriesTitle":2252,"stem":2253,"tag":2254,"thumbnail":2257,"updatedAt":2258,"__hash__":2259},"series\u002Fseries\u002Fnuxt-content-blog-3.md","Nuxt Content × SSG で作る静的ブログ。３：記事一覧ページとページング実装",{"type":8,"value":9,"toc":2230},"minimark",[10,20,30,33,37,41,44,55,70,76,85,88,98,527,552,566,581,596,599,602,613,619,629,1873,1876,1880,1900,1903,1962,1967,1970,1973,1981,1984,2170,2175,2178,2183,2194,2197,2201,2211,2217,2220,2223,2226],[11,12,13,14,19],"p",{},"こんにちはjunです。",[15,16,18],"a",{"href":17},"\u002Fseries\u002Fnuxt-content-blog\u002F2","前回の記事","は詳細ページの実装と静的書き出しを行いました。今回の記事では",[21,22,23,27],"ul",{},[24,25,26],"li",{},"記事一覧ページの作成",[24,28,29],{},"ページング機能",[11,31,32],{},"について解説していきます。それでは早速いきましょう。",[34,35,36],"h2",{"id":36},"articlesの一覧ページを作る",[38,39,40],"h3",{"id":40},"pagesディレクトリを設定する",[11,42,43],{},"詳細ページのルーティングを作るために以前は以下のようなディレクトリの設定をしました。",[45,46,51],"pre",{"className":47,"code":49,"language":50},[48],"language-text","├── pages\n│ ├── articles\n│ 　 ├── _slug.vue\n","text",[52,53,49],"code",{"__ignoreMap":54},"",[11,56,57,58,61,62,65,66,69],{},"この場合、",[52,59,60],{},"\u002Farticles\u002F{sulg}","というURLが有効になります。一覧ページは",[52,63,64],{},"\u002Farticles\u002F","というルートで",[52,67,68],{},"content\u002Farticles\u002F","配下の原稿が一覧となって見れるページです。しかし上記の設定では表示されないので以下のようにします。",[45,71,74],{"className":72,"code":73,"language":50},[48],"├── pages\n│ ├── articles\n│ 　 ├── index.vue #追加\n│ 　 ├── _slug.vue\n",[52,75,73],{"__ignoreMap":54},[11,77,78,81,82,84],{},[52,79,80],{},"index.vue","というものを足しました。このファイルは",[52,83,64],{},"というルートに対応しています。ディレクトリの設定は以上となります。",[38,86,87],{"id":87},"一覧のデータを取得してレンダーする",[11,89,90,91,93,94,97],{},"それでは",[52,92,80],{},"にソースを書いていきましょう。詳細ページでは特定のパスに対応するコンテンツを取得していましたが、一覧ページでは",[52,95,96],{},"articles","のコンテンツを15件ほど取得するようにしましょう。とりあえずソースを載せます。",[45,99,104],{"className":100,"code":101,"filename":102,"language":103,"meta":54,"style":54},"language-vue shiki shiki-themes material-theme-ocean","\u003Ctemplate>\n \u003Cdiv class=\"\">\n \u003Ch1>記事一覧\u003C\u002Fh1>\n \u003Cul>\n \u003Cli v-for=\"(c,index) in content\" :key=\"index\">\n \u003Cnuxt-link :to=\"c.path\">{{c.title}}\u003C\u002Fnuxt-link>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n async asyncData({ store,$content, params }) {\n const content = await $content('articles')\n .only(['title','path'])\n .sortBy('createdAt', 'desc')\n .skip(0).limit(15)\n .fetch();\n\n return {\n content,\n }\n }\n}\n\u003C\u002Fscript>\n","page\u002Farticles\u002Findex.vue","vue",[52,105,106,122,143,166,175,210,242,252,261,271,280,287,297,310,342,374,405,434,464,478,483,491,500,506,512,518],{"__ignoreMap":54},[107,108,111,115,119],"span",{"class":109,"line":110},"line",1,[107,112,114],{"class":113},"sAklC","\u003C",[107,116,118],{"class":117},"s-wAU","template",[107,120,121],{"class":113},">\n",[107,123,125,128,131,135,138,141],{"class":109,"line":124},2,[107,126,127],{"class":113}," \u003C",[107,129,130],{"class":117},"div",[107,132,134],{"class":133},"sJ14y"," class",[107,136,137],{"class":113},"=",[107,139,140],{"class":113},"\"\"",[107,142,121],{"class":113},[107,144,146,149,152,155,159,162,164],{"class":109,"line":145},3,[107,147,148],{"class":113}," \u003C",[107,150,151],{"class":117},"h1",[107,153,154],{"class":113},">",[107,156,158],{"class":157},"s0W1g","記事一覧",[107,160,161],{"class":113},"\u003C\u002F",[107,163,151],{"class":117},[107,165,121],{"class":113},[107,167,169,171,173],{"class":109,"line":168},4,[107,170,148],{"class":113},[107,172,21],{"class":117},[107,174,121],{"class":113},[107,176,178,180,182,185,187,190,194,196,199,201,203,206,208],{"class":109,"line":177},5,[107,179,148],{"class":113},[107,181,24],{"class":117},[107,183,184],{"class":133}," v-for",[107,186,137],{"class":113},[107,188,189],{"class":113},"\"",[107,191,193],{"class":192},"sfyAc","(c,index) in content",[107,195,189],{"class":113},[107,197,198],{"class":133}," :key",[107,200,137],{"class":113},[107,202,189],{"class":113},[107,204,205],{"class":192},"index",[107,207,189],{"class":113},[107,209,121],{"class":113},[107,211,213,216,219,222,224,226,229,231,233,236,238,240],{"class":109,"line":212},6,[107,214,215],{"class":113}," \u003C",[107,217,218],{"class":117},"nuxt-link",[107,220,221],{"class":133}," :to",[107,223,137],{"class":113},[107,225,189],{"class":113},[107,227,228],{"class":192},"c.path",[107,230,189],{"class":113},[107,232,154],{"class":113},[107,234,235],{"class":157},"{{c.title}}",[107,237,161],{"class":113},[107,239,218],{"class":117},[107,241,121],{"class":113},[107,243,245,248,250],{"class":109,"line":244},7,[107,246,247],{"class":113}," \u003C\u002F",[107,249,24],{"class":117},[107,251,121],{"class":113},[107,253,255,257,259],{"class":109,"line":254},8,[107,256,247],{"class":113},[107,258,21],{"class":117},[107,260,121],{"class":113},[107,262,264,267,269],{"class":109,"line":263},9,[107,265,266],{"class":113}," \u003C\u002F",[107,268,130],{"class":117},[107,270,121],{"class":113},[107,272,274,276,278],{"class":109,"line":273},10,[107,275,161],{"class":113},[107,277,118],{"class":117},[107,279,121],{"class":113},[107,281,283],{"class":109,"line":282},11,[107,284,286],{"emptyLinePlaceholder":285},true,"\n",[107,288,290,292,295],{"class":109,"line":289},12,[107,291,114],{"class":113},[107,293,294],{"class":117},"script",[107,296,121],{"class":113},[107,298,300,304,307],{"class":109,"line":299},13,[107,301,303],{"class":302},"s6cf3","export",[107,305,306],{"class":302}," default",[107,308,309],{"class":113}," {\n",[107,311,313,316,319,322,326,329,332,334,337,340],{"class":109,"line":312},14,[107,314,315],{"class":133}," async",[107,317,318],{"class":117}," asyncData",[107,320,321],{"class":113},"({",[107,323,325],{"class":324},"s7ZW3"," store",[107,327,328],{"class":113},",",[107,330,331],{"class":324},"$content",[107,333,328],{"class":113},[107,335,336],{"class":324}," params",[107,338,339],{"class":113}," })",[107,341,309],{"class":113},[107,343,345,348,351,354,357,361,364,367,369,371],{"class":109,"line":344},15,[107,346,347],{"class":133}," const",[107,349,350],{"class":157}," content",[107,352,353],{"class":113}," =",[107,355,356],{"class":302}," await",[107,358,360],{"class":359},"sdLwU"," $content",[107,362,363],{"class":117},"(",[107,365,366],{"class":113},"'",[107,368,96],{"class":192},[107,370,366],{"class":113},[107,372,373],{"class":117},")\n",[107,375,377,380,383,386,388,391,393,395,397,400,402],{"class":109,"line":376},16,[107,378,379],{"class":113}," .",[107,381,382],{"class":359},"only",[107,384,385],{"class":117},"([",[107,387,366],{"class":113},[107,389,390],{"class":192},"title",[107,392,366],{"class":113},[107,394,328],{"class":113},[107,396,366],{"class":113},[107,398,399],{"class":192},"path",[107,401,366],{"class":113},[107,403,404],{"class":117},"])\n",[107,406,408,410,413,415,417,420,422,424,427,430,432],{"class":109,"line":407},17,[107,409,379],{"class":113},[107,411,412],{"class":359},"sortBy",[107,414,363],{"class":117},[107,416,366],{"class":113},[107,418,419],{"class":192},"createdAt",[107,421,366],{"class":113},[107,423,328],{"class":113},[107,425,426],{"class":113}," '",[107,428,429],{"class":192},"desc",[107,431,366],{"class":113},[107,433,373],{"class":117},[107,435,437,439,442,444,448,451,454,457,459,462],{"class":109,"line":436},18,[107,438,379],{"class":113},[107,440,441],{"class":359},"skip",[107,443,363],{"class":117},[107,445,447],{"class":446},"sx098","0",[107,449,450],{"class":117},")",[107,452,453],{"class":113},".",[107,455,456],{"class":359},"limit",[107,458,363],{"class":117},[107,460,461],{"class":446},"15",[107,463,373],{"class":117},[107,465,467,469,472,475],{"class":109,"line":466},19,[107,468,379],{"class":113},[107,470,471],{"class":359},"fetch",[107,473,474],{"class":117},"()",[107,476,477],{"class":113},";\n",[107,479,481],{"class":109,"line":480},20,[107,482,286],{"emptyLinePlaceholder":285},[107,484,486,489],{"class":109,"line":485},21,[107,487,488],{"class":302}," return",[107,490,309],{"class":113},[107,492,494,497],{"class":109,"line":493},22,[107,495,496],{"class":157}," content",[107,498,499],{"class":113},",\n",[107,501,503],{"class":109,"line":502},23,[107,504,505],{"class":113}," }\n",[107,507,509],{"class":109,"line":508},24,[107,510,511],{"class":113}," }\n",[107,513,515],{"class":109,"line":514},25,[107,516,517],{"class":113},"}\n",[107,519,521,523,525],{"class":109,"line":520},26,[107,522,161],{"class":113},[107,524,294],{"class":117},[107,526,121],{"class":113},[11,528,529,530,533,534,536,537,540,541,544,545,548,549,551],{},"まずは",[52,531,532],{},"$content('articles')","で",[52,535,96],{},"配下のコンテンツを読む指定をします。そして",[52,538,539],{},".only(['title','path'])","を使用することでtitleとpathのみのデータを取得することができます。この",[52,542,543],{},"only()","を指定しない場合、",[52,546,547],{},"body","プロパティという原稿内容も取得してしまいます。原稿がボリューミーなほど取得コストが大きくなり、静的書き出しなどにも影響されます。そのため一覧などでは",[52,550,543],{},"を使用して必要最低限のプロパティを使用した方がいいです。",[11,553,554,557,558,561,562,565],{},[52,555,556],{},"sortBy()","にて特定プロパティでソートし、後のページングで使いますが",[52,559,560],{},".skip(0).limit(15)","にて15件の記事を取得します。",[52,563,564],{},"asyncData()","内で記事を取得して、それをリストで出力します。",[130,567,571,574,575,580],{"className":568},[569,570],"alert","alert-info",[52,572,573],{},"$content()","に対して加えることが可能なメソッドは",[15,576,579],{"href":577,"target":578},"https:\u002F\u002Fcontent.nuxtjs.org\u002Fja\u002Ffetching","_blank","こちら","で確認できます。\n",[11,582,583,584,587,588,591,592,595],{},"Nuxt.jsで内部リンクを作成する時は",[52,585,586],{},"\u003Cnuxt-link>","を使用します。",[52,589,590],{},"to","に",[52,593,594],{},"content.path","を指定することで詳細ページに移動できるようになります。",[11,597,598],{},"一覧ページはこれぐらいで実装できます。今は最初から15件しか取得しないので、大量にある時はページングができるようにしましょう。",[34,600,601],{"id":601},"ページングを実装する",[11,603,604,605,608,609,612],{},"私のサイトでは",[52,606,607],{},"\u002Farticles\u002Fpage\u002F2","の様なルートで対応しています。この様なルートを設定する場合は以下のように",[52,610,611],{},"pages\u002F","を設定します。",[45,614,617],{"className":615,"code":616,"language":50},[48],"├── pages\n│ ├── articles\n│ 　 ├── index.vue \n│ 　 ├── _slug.vue\n│ 　 ├── pages #追加\n│ 　 ├──_id.vue #追加\n",[52,618,616],{"__ignoreMap":54},[11,620,621,624,625,628],{},[52,622,623],{},"_id.vue","を作成することで",[52,626,627],{},"\u002Farticles\u002Fpage\u002F{n}","という動的ルートが作成されます。そこでは以下のように設定します。",[45,630,633],{"className":100,"code":631,"filename":632,"language":103,"meta":54,"style":54},"\u003Ctemplate>\n \u003Cdiv class=\"\">\n \u003Ch1>記事一覧\u003C\u002Fh1>\n \u003Cul>\n \u003Cli v-for=\"(c,index) in content\" :key=\"index\">\n \u003Cnuxt-link :to=\"c.path\">{{c.title}}\u003C\u002Fnuxt-link>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003Cul class=\"p-pagenation-container\">\n \u003Cli class=\"c-pagenation-unit\" v-for=\"(pg) in num\" :key=\"pg.num\">\n \u003Cnuxt-link v-if=\"pg.pg\" :to=\"'\u002Farticles\u002Fpage\u002F'+pg.num\" :class=\"(current == pg.num)?'is-current':''\">\n {{pg.num}}\n \u003C\u002Fnuxt-link>\n \u003Cspan v-else>\n {{pg.num}}\n \u003C\u002Fspan>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n validate({ redirect,params }) {\n if(\u002F[0-9]+\u002F.test(params.id)) return true;\n return redirect('\u002Farticles')\n },\n async asyncData({ store,$content, params }) {\n const count = await $content('articles').only('title').fetch();\n const current = params.id;\n if(current > Math.ceil( count.length \u002F store.state.indexPerPage)) redirect('\u002Farticles');\n\n const from = store.state.indexPerPage * (params.id - 1);\n const to = store.state.indexPerPage * params.id;\n\n const content = await $content('articles')\n .only(['title','path'])\n .sortBy('createdAt', 'desc')\n .skip(from).limit(to)\n .fetch();\n\n return {\n content,\n current,\n count:count.length\n }\n },\n computed:{\n max(){\n return Math.ceil( this.$route.params.id \u002F 15);\n },\n num(){\n let tmp = [];\n for(let n=1; n\u003C=this.max;n++){\n if(n == 1 || n == this.max){\n tmp.push({pg:true,num:n});\n continue;\n }\n if((this.current - 2 \u003C= n) && (n \u003C= this.current + 2)){\n tmp.push({pg:true,num:n})\n continue;\n }\n if((this.current - 2 - 1 == n) || (n == this.current + 2 + 1) ){\n tmp.push({pg:false,num:\"...\"})\n continue;\n }\n }\n return tmp;\n }\n },\n}\n\u003C\u002Fscript>\n","page\u002Farticles\u002Fpage\u002F_id.vue",[52,634,635,643,657,673,681,709,736,745,753,772,813,856,861,870,881,885,893,901,909,917,925,929,937,945,964,1006,1024,1030,1054,1101,1119,1183,1188,1230,1260,1265,1288,1314,1339,1363,1374,1379,1386,1394,1402,1418,1424,1429,1438,1447,1484,1490,1498,1514,1557,1588,1628,1636,1642,1690,1721,1728,1733,1784,1822,1829,1834,1840,1849,1854,1859,1864],{"__ignoreMap":54},[107,636,637,639,641],{"class":109,"line":110},[107,638,114],{"class":113},[107,640,118],{"class":117},[107,642,121],{"class":113},[107,644,645,647,649,651,653,655],{"class":109,"line":124},[107,646,127],{"class":113},[107,648,130],{"class":117},[107,650,134],{"class":133},[107,652,137],{"class":113},[107,654,140],{"class":113},[107,656,121],{"class":113},[107,658,659,661,663,665,667,669,671],{"class":109,"line":145},[107,660,148],{"class":113},[107,662,151],{"class":117},[107,664,154],{"class":113},[107,666,158],{"class":157},[107,668,161],{"class":113},[107,670,151],{"class":117},[107,672,121],{"class":113},[107,674,675,677,679],{"class":109,"line":168},[107,676,148],{"class":113},[107,678,21],{"class":117},[107,680,121],{"class":113},[107,682,683,685,687,689,691,693,695,697,699,701,703,705,707],{"class":109,"line":177},[107,684,215],{"class":113},[107,686,24],{"class":117},[107,688,184],{"class":133},[107,690,137],{"class":113},[107,692,189],{"class":113},[107,694,193],{"class":192},[107,696,189],{"class":113},[107,698,198],{"class":133},[107,700,137],{"class":113},[107,702,189],{"class":113},[107,704,205],{"class":192},[107,706,189],{"class":113},[107,708,121],{"class":113},[107,710,711,714,716,718,720,722,724,726,728,730,732,734],{"class":109,"line":212},[107,712,713],{"class":113}," \u003C",[107,715,218],{"class":117},[107,717,221],{"class":133},[107,719,137],{"class":113},[107,721,189],{"class":113},[107,723,228],{"class":192},[107,725,189],{"class":113},[107,727,154],{"class":113},[107,729,235],{"class":157},[107,731,161],{"class":113},[107,733,218],{"class":117},[107,735,121],{"class":113},[107,737,738,741,743],{"class":109,"line":244},[107,739,740],{"class":113}," \u003C\u002F",[107,742,24],{"class":117},[107,744,121],{"class":113},[107,746,747,749,751],{"class":109,"line":254},[107,748,247],{"class":113},[107,750,21],{"class":117},[107,752,121],{"class":113},[107,754,755,757,759,761,763,765,768,770],{"class":109,"line":263},[107,756,148],{"class":113},[107,758,21],{"class":117},[107,760,134],{"class":133},[107,762,137],{"class":113},[107,764,189],{"class":113},[107,766,767],{"class":192},"p-pagenation-container",[107,769,189],{"class":113},[107,771,121],{"class":113},[107,773,774,776,778,780,782,784,787,789,791,793,795,798,800,802,804,806,809,811],{"class":109,"line":273},[107,775,215],{"class":113},[107,777,24],{"class":117},[107,779,134],{"class":133},[107,781,137],{"class":113},[107,783,189],{"class":113},[107,785,786],{"class":192},"c-pagenation-unit",[107,788,189],{"class":113},[107,790,184],{"class":133},[107,792,137],{"class":113},[107,794,189],{"class":113},[107,796,797],{"class":192},"(pg) in num",[107,799,189],{"class":113},[107,801,198],{"class":133},[107,803,137],{"class":113},[107,805,189],{"class":113},[107,807,808],{"class":192},"pg.num",[107,810,189],{"class":113},[107,812,121],{"class":113},[107,814,815,817,819,822,824,826,829,831,833,835,837,840,842,845,847,849,852,854],{"class":109,"line":282},[107,816,713],{"class":113},[107,818,218],{"class":117},[107,820,821],{"class":133}," v-if",[107,823,137],{"class":113},[107,825,189],{"class":113},[107,827,828],{"class":192},"pg.pg",[107,830,189],{"class":113},[107,832,221],{"class":133},[107,834,137],{"class":113},[107,836,189],{"class":113},[107,838,839],{"class":192},"'\u002Farticles\u002Fpage\u002F'+pg.num",[107,841,189],{"class":113},[107,843,844],{"class":133}," :class",[107,846,137],{"class":113},[107,848,189],{"class":113},[107,850,851],{"class":192},"(current == pg.num)?'is-current':''",[107,853,189],{"class":113},[107,855,121],{"class":113},[107,857,858],{"class":109,"line":289},[107,859,860],{"class":157}," {{pg.num}}\n",[107,862,863,866,868],{"class":109,"line":299},[107,864,865],{"class":113}," \u003C\u002F",[107,867,218],{"class":117},[107,869,121],{"class":113},[107,871,872,874,876,879],{"class":109,"line":312},[107,873,713],{"class":113},[107,875,107],{"class":117},[107,877,878],{"class":133}," v-else",[107,880,121],{"class":113},[107,882,883],{"class":109,"line":344},[107,884,860],{"class":157},[107,886,887,889,891],{"class":109,"line":376},[107,888,865],{"class":113},[107,890,107],{"class":117},[107,892,121],{"class":113},[107,894,895,897,899],{"class":109,"line":407},[107,896,740],{"class":113},[107,898,24],{"class":117},[107,900,121],{"class":113},[107,902,903,905,907],{"class":109,"line":436},[107,904,247],{"class":113},[107,906,21],{"class":117},[107,908,121],{"class":113},[107,910,911,913,915],{"class":109,"line":466},[107,912,266],{"class":113},[107,914,130],{"class":117},[107,916,121],{"class":113},[107,918,919,921,923],{"class":109,"line":480},[107,920,161],{"class":113},[107,922,118],{"class":117},[107,924,121],{"class":113},[107,926,927],{"class":109,"line":485},[107,928,286],{"emptyLinePlaceholder":285},[107,930,931,933,935],{"class":109,"line":493},[107,932,114],{"class":113},[107,934,294],{"class":117},[107,936,121],{"class":113},[107,938,939,941,943],{"class":109,"line":502},[107,940,303],{"class":302},[107,942,306],{"class":302},[107,944,309],{"class":113},[107,946,947,950,952,955,957,960,962],{"class":109,"line":508},[107,948,949],{"class":117}," validate",[107,951,321],{"class":113},[107,953,954],{"class":324}," redirect",[107,956,328],{"class":113},[107,958,959],{"class":324},"params",[107,961,339],{"class":113},[107,963,309],{"class":113},[107,965,966,969,971,974,977,980,982,985,987,989,991,994,997,1000,1004],{"class":109,"line":514},[107,967,968],{"class":302}," if",[107,970,363],{"class":117},[107,972,973],{"class":113},"\u002F[",[107,975,976],{"class":192},"0-9",[107,978,979],{"class":113},"]+\u002F",[107,981,453],{"class":113},[107,983,984],{"class":359},"test",[107,986,363],{"class":117},[107,988,959],{"class":157},[107,990,453],{"class":113},[107,992,993],{"class":157},"id",[107,995,996],{"class":117},")) ",[107,998,999],{"class":302},"return",[107,1001,1003],{"class":1002},"sbqyR"," true",[107,1005,477],{"class":113},[107,1007,1008,1011,1013,1015,1017,1020,1022],{"class":109,"line":520},[107,1009,1010],{"class":302}," return",[107,1012,954],{"class":359},[107,1014,363],{"class":117},[107,1016,366],{"class":113},[107,1018,1019],{"class":192},"\u002Farticles",[107,1021,366],{"class":113},[107,1023,373],{"class":117},[107,1025,1027],{"class":109,"line":1026},27,[107,1028,1029],{"class":113}," },\n",[107,1031,1033,1036,1038,1040,1042,1044,1046,1048,1050,1052],{"class":109,"line":1032},28,[107,1034,1035],{"class":133}," async",[107,1037,318],{"class":117},[107,1039,321],{"class":113},[107,1041,325],{"class":324},[107,1043,328],{"class":113},[107,1045,331],{"class":324},[107,1047,328],{"class":113},[107,1049,336],{"class":324},[107,1051,339],{"class":113},[107,1053,309],{"class":113},[107,1055,1057,1060,1063,1065,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089,1091,1093,1095,1097,1099],{"class":109,"line":1056},29,[107,1058,1059],{"class":133}," const",[107,1061,1062],{"class":157}," count",[107,1064,353],{"class":113},[107,1066,356],{"class":302},[107,1068,360],{"class":359},[107,1070,363],{"class":117},[107,1072,366],{"class":113},[107,1074,96],{"class":192},[107,1076,366],{"class":113},[107,1078,450],{"class":117},[107,1080,453],{"class":113},[107,1082,382],{"class":359},[107,1084,363],{"class":117},[107,1086,366],{"class":113},[107,1088,390],{"class":192},[107,1090,366],{"class":113},[107,1092,450],{"class":117},[107,1094,453],{"class":113},[107,1096,471],{"class":359},[107,1098,474],{"class":117},[107,1100,477],{"class":113},[107,1102,1104,1106,1109,1111,1113,1115,1117],{"class":109,"line":1103},30,[107,1105,1059],{"class":133},[107,1107,1108],{"class":157}," current",[107,1110,353],{"class":113},[107,1112,336],{"class":157},[107,1114,453],{"class":113},[107,1116,993],{"class":157},[107,1118,477],{"class":113},[107,1120,1122,1124,1126,1129,1132,1135,1137,1140,1143,1146,1148,1151,1154,1156,1158,1161,1163,1166,1168,1171,1173,1175,1177,1179,1181],{"class":109,"line":1121},31,[107,1123,968],{"class":302},[107,1125,363],{"class":117},[107,1127,1128],{"class":157},"current",[107,1130,1131],{"class":113}," >",[107,1133,1134],{"class":157}," Math",[107,1136,453],{"class":113},[107,1138,1139],{"class":359},"ceil",[107,1141,1142],{"class":117},"( ",[107,1144,1145],{"class":157},"count",[107,1147,453],{"class":113},[107,1149,1150],{"class":157},"length",[107,1152,1153],{"class":113}," \u002F",[107,1155,325],{"class":157},[107,1157,453],{"class":113},[107,1159,1160],{"class":157},"state",[107,1162,453],{"class":113},[107,1164,1165],{"class":157},"indexPerPage",[107,1167,996],{"class":117},[107,1169,1170],{"class":359},"redirect",[107,1172,363],{"class":117},[107,1174,366],{"class":113},[107,1176,1019],{"class":192},[107,1178,366],{"class":113},[107,1180,450],{"class":117},[107,1182,477],{"class":113},[107,1184,1186],{"class":109,"line":1185},32,[107,1187,286],{"emptyLinePlaceholder":285},[107,1189,1191,1193,1196,1198,1200,1202,1204,1206,1208,1211,1214,1216,1218,1220,1223,1226,1228],{"class":109,"line":1190},33,[107,1192,1059],{"class":133},[107,1194,1195],{"class":157}," from",[107,1197,353],{"class":113},[107,1199,325],{"class":157},[107,1201,453],{"class":113},[107,1203,1160],{"class":157},[107,1205,453],{"class":113},[107,1207,1165],{"class":157},[107,1209,1210],{"class":113}," *",[107,1212,1213],{"class":117}," (",[107,1215,959],{"class":157},[107,1217,453],{"class":113},[107,1219,993],{"class":157},[107,1221,1222],{"class":113}," -",[107,1224,1225],{"class":446}," 1",[107,1227,450],{"class":117},[107,1229,477],{"class":113},[107,1231,1233,1235,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258],{"class":109,"line":1232},34,[107,1234,1059],{"class":133},[107,1236,1237],{"class":157}," to",[107,1239,353],{"class":113},[107,1241,325],{"class":157},[107,1243,453],{"class":113},[107,1245,1160],{"class":157},[107,1247,453],{"class":113},[107,1249,1165],{"class":157},[107,1251,1210],{"class":113},[107,1253,336],{"class":157},[107,1255,453],{"class":113},[107,1257,993],{"class":157},[107,1259,477],{"class":113},[107,1261,1263],{"class":109,"line":1262},35,[107,1264,286],{"emptyLinePlaceholder":285},[107,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286],{"class":109,"line":1267},36,[107,1269,1059],{"class":133},[107,1271,350],{"class":157},[107,1273,353],{"class":113},[107,1275,356],{"class":302},[107,1277,360],{"class":359},[107,1279,363],{"class":117},[107,1281,366],{"class":113},[107,1283,96],{"class":192},[107,1285,366],{"class":113},[107,1287,373],{"class":117},[107,1289,1291,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312],{"class":109,"line":1290},37,[107,1292,1293],{"class":113}," .",[107,1295,382],{"class":359},[107,1297,385],{"class":117},[107,1299,366],{"class":113},[107,1301,390],{"class":192},[107,1303,366],{"class":113},[107,1305,328],{"class":113},[107,1307,366],{"class":113},[107,1309,399],{"class":192},[107,1311,366],{"class":113},[107,1313,404],{"class":117},[107,1315,1317,1319,1321,1323,1325,1327,1329,1331,1333,1335,1337],{"class":109,"line":1316},38,[107,1318,1293],{"class":113},[107,1320,412],{"class":359},[107,1322,363],{"class":117},[107,1324,366],{"class":113},[107,1326,419],{"class":192},[107,1328,366],{"class":113},[107,1330,328],{"class":113},[107,1332,426],{"class":113},[107,1334,429],{"class":192},[107,1336,366],{"class":113},[107,1338,373],{"class":117},[107,1340,1342,1344,1346,1348,1351,1353,1355,1357,1359,1361],{"class":109,"line":1341},39,[107,1343,1293],{"class":113},[107,1345,441],{"class":359},[107,1347,363],{"class":117},[107,1349,1350],{"class":157},"from",[107,1352,450],{"class":117},[107,1354,453],{"class":113},[107,1356,456],{"class":359},[107,1358,363],{"class":117},[107,1360,590],{"class":157},[107,1362,373],{"class":117},[107,1364,1366,1368,1370,1372],{"class":109,"line":1365},40,[107,1367,1293],{"class":113},[107,1369,471],{"class":359},[107,1371,474],{"class":117},[107,1373,477],{"class":113},[107,1375,1377],{"class":109,"line":1376},41,[107,1378,286],{"emptyLinePlaceholder":285},[107,1380,1382,1384],{"class":109,"line":1381},42,[107,1383,1010],{"class":302},[107,1385,309],{"class":113},[107,1387,1389,1392],{"class":109,"line":1388},43,[107,1390,1391],{"class":157}," content",[107,1393,499],{"class":113},[107,1395,1397,1400],{"class":109,"line":1396},44,[107,1398,1399],{"class":157}," current",[107,1401,499],{"class":113},[107,1403,1405,1408,1411,1413,1415],{"class":109,"line":1404},45,[107,1406,1407],{"class":117}," count",[107,1409,1410],{"class":113},":",[107,1412,1145],{"class":157},[107,1414,453],{"class":113},[107,1416,1417],{"class":157},"length\n",[107,1419,1421],{"class":109,"line":1420},46,[107,1422,1423],{"class":113}," }\n",[107,1425,1427],{"class":109,"line":1426},47,[107,1428,1029],{"class":113},[107,1430,1432,1435],{"class":109,"line":1431},48,[107,1433,1434],{"class":117}," computed",[107,1436,1437],{"class":113},":{\n",[107,1439,1441,1444],{"class":109,"line":1440},49,[107,1442,1443],{"class":117}," max",[107,1445,1446],{"class":113},"(){\n",[107,1448,1450,1453,1455,1457,1459,1461,1464,1467,1469,1471,1473,1475,1477,1480,1482],{"class":109,"line":1449},50,[107,1451,1452],{"class":302}," return",[107,1454,1134],{"class":157},[107,1456,453],{"class":113},[107,1458,1139],{"class":359},[107,1460,1142],{"class":117},[107,1462,1463],{"class":113},"this.",[107,1465,1466],{"class":157},"$route",[107,1468,453],{"class":113},[107,1470,959],{"class":157},[107,1472,453],{"class":113},[107,1474,993],{"class":157},[107,1476,1153],{"class":113},[107,1478,1479],{"class":446}," 15",[107,1481,450],{"class":117},[107,1483,477],{"class":113},[107,1485,1487],{"class":109,"line":1486},51,[107,1488,1489],{"class":113}," },\n",[107,1491,1493,1496],{"class":109,"line":1492},52,[107,1494,1495],{"class":117}," num",[107,1497,1446],{"class":113},[107,1499,1501,1504,1507,1509,1512],{"class":109,"line":1500},53,[107,1502,1503],{"class":133}," let",[107,1505,1506],{"class":157}," tmp",[107,1508,353],{"class":113},[107,1510,1511],{"class":117}," []",[107,1513,477],{"class":113},[107,1515,1517,1520,1522,1525,1528,1530,1533,1536,1538,1541,1544,1546,1549,1552,1554],{"class":109,"line":1516},54,[107,1518,1519],{"class":302}," for",[107,1521,363],{"class":117},[107,1523,1524],{"class":133},"let",[107,1526,1527],{"class":157}," n",[107,1529,137],{"class":113},[107,1531,1532],{"class":446},"1",[107,1534,1535],{"class":113},";",[107,1537,1527],{"class":157},[107,1539,1540],{"class":113},"\u003C=this.",[107,1542,1543],{"class":157},"max",[107,1545,1535],{"class":113},[107,1547,1548],{"class":157},"n",[107,1550,1551],{"class":113},"++",[107,1553,450],{"class":117},[107,1555,1556],{"class":113},"{\n",[107,1558,1560,1563,1565,1567,1570,1572,1575,1577,1579,1582,1584,1586],{"class":109,"line":1559},55,[107,1561,1562],{"class":302}," if",[107,1564,363],{"class":117},[107,1566,1548],{"class":157},[107,1568,1569],{"class":113}," ==",[107,1571,1225],{"class":446},[107,1573,1574],{"class":113}," ||",[107,1576,1527],{"class":157},[107,1578,1569],{"class":113},[107,1580,1581],{"class":113}," this.",[107,1583,1543],{"class":157},[107,1585,450],{"class":117},[107,1587,1556],{"class":113},[107,1589,1591,1594,1596,1599,1601,1604,1607,1609,1612,1614,1617,1619,1621,1624,1626],{"class":109,"line":1590},56,[107,1592,1593],{"class":157}," tmp",[107,1595,453],{"class":113},[107,1597,1598],{"class":359},"push",[107,1600,363],{"class":117},[107,1602,1603],{"class":113},"{",[107,1605,1606],{"class":117},"pg",[107,1608,1410],{"class":113},[107,1610,1611],{"class":1002},"true",[107,1613,328],{"class":113},[107,1615,1616],{"class":117},"num",[107,1618,1410],{"class":113},[107,1620,1548],{"class":157},[107,1622,1623],{"class":113},"}",[107,1625,450],{"class":117},[107,1627,477],{"class":113},[107,1629,1631,1634],{"class":109,"line":1630},57,[107,1632,1633],{"class":302}," continue",[107,1635,477],{"class":113},[107,1637,1639],{"class":109,"line":1638},58,[107,1640,1641],{"class":113}," }\n",[107,1643,1645,1647,1650,1652,1654,1656,1659,1662,1664,1667,1670,1672,1674,1676,1678,1680,1683,1685,1688],{"class":109,"line":1644},59,[107,1646,1562],{"class":302},[107,1648,1649],{"class":117},"((",[107,1651,1463],{"class":113},[107,1653,1128],{"class":157},[107,1655,1222],{"class":113},[107,1657,1658],{"class":446}," 2",[107,1660,1661],{"class":113}," \u003C=",[107,1663,1527],{"class":157},[107,1665,1666],{"class":117},") ",[107,1668,1669],{"class":113},"&&",[107,1671,1213],{"class":117},[107,1673,1548],{"class":157},[107,1675,1661],{"class":113},[107,1677,1581],{"class":113},[107,1679,1128],{"class":157},[107,1681,1682],{"class":113}," +",[107,1684,1658],{"class":446},[107,1686,1687],{"class":117},"))",[107,1689,1556],{"class":113},[107,1691,1693,1695,1697,1699,1701,1703,1705,1707,1709,1711,1713,1715,1717,1719],{"class":109,"line":1692},60,[107,1694,1593],{"class":157},[107,1696,453],{"class":113},[107,1698,1598],{"class":359},[107,1700,363],{"class":117},[107,1702,1603],{"class":113},[107,1704,1606],{"class":117},[107,1706,1410],{"class":113},[107,1708,1611],{"class":1002},[107,1710,328],{"class":113},[107,1712,1616],{"class":117},[107,1714,1410],{"class":113},[107,1716,1548],{"class":157},[107,1718,1623],{"class":113},[107,1720,373],{"class":117},[107,1722,1724,1726],{"class":109,"line":1723},61,[107,1725,1633],{"class":302},[107,1727,477],{"class":113},[107,1729,1731],{"class":109,"line":1730},62,[107,1732,1641],{"class":113},[107,1734,1736,1738,1740,1742,1744,1746,1748,1750,1752,1754,1756,1758,1761,1763,1765,1767,1769,1771,1773,1775,1777,1779,1782],{"class":109,"line":1735},63,[107,1737,1562],{"class":302},[107,1739,1649],{"class":117},[107,1741,1463],{"class":113},[107,1743,1128],{"class":157},[107,1745,1222],{"class":113},[107,1747,1658],{"class":446},[107,1749,1222],{"class":113},[107,1751,1225],{"class":446},[107,1753,1569],{"class":113},[107,1755,1527],{"class":157},[107,1757,1666],{"class":117},[107,1759,1760],{"class":113},"||",[107,1762,1213],{"class":117},[107,1764,1548],{"class":157},[107,1766,1569],{"class":113},[107,1768,1581],{"class":113},[107,1770,1128],{"class":157},[107,1772,1682],{"class":113},[107,1774,1658],{"class":446},[107,1776,1682],{"class":113},[107,1778,1225],{"class":446},[107,1780,1781],{"class":117},") )",[107,1783,1556],{"class":113},[107,1785,1787,1790,1792,1794,1796,1798,1800,1802,1805,1807,1809,1811,1813,1816,1818,1820],{"class":109,"line":1786},64,[107,1788,1789],{"class":157}," tmp",[107,1791,453],{"class":113},[107,1793,1598],{"class":359},[107,1795,363],{"class":117},[107,1797,1603],{"class":113},[107,1799,1606],{"class":117},[107,1801,1410],{"class":113},[107,1803,1804],{"class":1002},"false",[107,1806,328],{"class":113},[107,1808,1616],{"class":117},[107,1810,1410],{"class":113},[107,1812,189],{"class":113},[107,1814,1815],{"class":192},"...",[107,1817,189],{"class":113},[107,1819,1623],{"class":113},[107,1821,373],{"class":117},[107,1823,1825,1827],{"class":109,"line":1824},65,[107,1826,1633],{"class":302},[107,1828,477],{"class":113},[107,1830,1832],{"class":109,"line":1831},66,[107,1833,1641],{"class":113},[107,1835,1837],{"class":109,"line":1836},67,[107,1838,1839],{"class":113}," }\n",[107,1841,1843,1845,1847],{"class":109,"line":1842},68,[107,1844,1452],{"class":302},[107,1846,1506],{"class":157},[107,1848,477],{"class":113},[107,1850,1852],{"class":109,"line":1851},69,[107,1853,1423],{"class":113},[107,1855,1857],{"class":109,"line":1856},70,[107,1858,1029],{"class":113},[107,1860,1862],{"class":109,"line":1861},71,[107,1863,517],{"class":113},[107,1865,1867,1869,1871],{"class":109,"line":1866},72,[107,1868,161],{"class":113},[107,1870,294],{"class":117},[107,1872,121],{"class":113},[11,1874,1875],{},"詳細を解説します。",[38,1877,1879],{"id":1878},"idの値とページ数をチェック","{id}の値とページ数をチェック",[11,1881,1882,1885,1886,1889,1890,1893,1894,533,1897,1899],{},[52,1883,1884],{},"\u002Farciles\u002Fpage\u002F{id}","において",[52,1887,1888],{},"{id}","が数値のみ許可するようにします。そこでNuxt SSRでは",[52,1891,1892],{},"validate()","というものを使用できます。",[52,1895,1896],{},"params.id",[52,1898,1888],{},"の値が取得できますので、そこで数値であることを確認します。もしそうでなければ、１ページ目にリダイレクトさせます。",[11,1901,1902],{},"数値であっても提供するページを超えた数を指定されては困ります。その時のために{id}のページ数が存在するかをチェックしておきます。もし存在しなければ１ページ目にリダイレクトさせます。",[45,1904,1908],{"className":1905,"code":1906,"language":1907,"meta":54,"style":54},"language-javascript shiki shiki-themes material-theme-ocean","if(current > Math.ceil( count.length \u002F store.state.indexPerPage)) redirect('\u002Farticles');\n","javascript",[52,1909,1910],{"__ignoreMap":54},[107,1911,1912,1915,1918,1920,1922,1924,1926,1929,1931,1934,1937,1939,1941,1943,1945,1948,1950,1952,1954,1956,1958,1960],{"class":109,"line":110},[107,1913,1914],{"class":302},"if",[107,1916,1917],{"class":157},"(current ",[107,1919,154],{"class":113},[107,1921,1134],{"class":157},[107,1923,453],{"class":113},[107,1925,1139],{"class":359},[107,1927,1928],{"class":157},"( count",[107,1930,453],{"class":113},[107,1932,1933],{"class":157},"length ",[107,1935,1936],{"class":113},"\u002F",[107,1938,325],{"class":157},[107,1940,453],{"class":113},[107,1942,1160],{"class":157},[107,1944,453],{"class":113},[107,1946,1947],{"class":157},"indexPerPage)) ",[107,1949,1170],{"class":359},[107,1951,363],{"class":157},[107,1953,366],{"class":113},[107,1955,1019],{"class":192},[107,1957,366],{"class":113},[107,1959,450],{"class":157},[107,1961,477],{"class":113},[130,1963,1966],{"className":1964},[569,1965],"alert-warning","\nSSRであれば上記の設定は必須ですが、静的書き出しでは正直入りません。なぜなら静的書き出し時にはこのページング分だけのルートしか提供されないためです。静的HTMLで提供する時は存在しないルートにアクセスした時、404のページにリダイレクトさせておくといいです。\n",[38,1968,1969],{"id":1969},"ページングに必要な値を取得する",[11,1971,1972],{},"これはページングを実装するために必要なロジックのな話になるので、一部省略しますが必要な値は",[21,1974,1975,1978],{},[24,1976,1977],{},"何件目から(from)",[24,1979,1980],{},"何件目まで(to)",[11,1982,1983],{},"が必要となります。ソースでは以下のように使用しています。",[45,1985,1987],{"className":1905,"code":1986,"language":1907,"meta":54,"style":54},"const from = store.state.indexPerPage * (params.id - 1); \u002F\u002F何件目から\nconst to = store.state.indexPerPage * params.id; \u002F\u002F何件目まで\n\nconst content = await $content('articles')\n.only(['title','path'])\n.sortBy('createdAt', 'desc')\n.skip(from).limit(to) \u002F\u002F ページング取得\n.fetch();\n",[52,1988,1989,2034,2066,2070,2093,2117,2141,2160],{"__ignoreMap":54},[107,1990,1991,1994,1997,1999,2001,2003,2005,2007,2010,2013,2016,2018,2021,2024,2026,2028,2030],{"class":109,"line":110},[107,1992,1993],{"class":133},"const",[107,1995,1996],{"class":157}," from ",[107,1998,137],{"class":113},[107,2000,325],{"class":157},[107,2002,453],{"class":113},[107,2004,1160],{"class":157},[107,2006,453],{"class":113},[107,2008,2009],{"class":157},"indexPerPage ",[107,2011,2012],{"class":113},"*",[107,2014,2015],{"class":157}," (params",[107,2017,453],{"class":113},[107,2019,2020],{"class":157},"id ",[107,2022,2023],{"class":113},"-",[107,2025,1225],{"class":446},[107,2027,450],{"class":157},[107,2029,1535],{"class":113},[107,2031,2033],{"class":2032},"sC9rS"," \u002F\u002F何件目から\n",[107,2035,2036,2038,2041,2043,2045,2047,2049,2051,2053,2055,2057,2059,2061,2063],{"class":109,"line":124},[107,2037,1993],{"class":133},[107,2039,2040],{"class":157}," to ",[107,2042,137],{"class":113},[107,2044,325],{"class":157},[107,2046,453],{"class":113},[107,2048,1160],{"class":157},[107,2050,453],{"class":113},[107,2052,2009],{"class":157},[107,2054,2012],{"class":113},[107,2056,336],{"class":157},[107,2058,453],{"class":113},[107,2060,993],{"class":157},[107,2062,1535],{"class":113},[107,2064,2065],{"class":2032}," \u002F\u002F何件目まで\n",[107,2067,2068],{"class":109,"line":145},[107,2069,286],{"emptyLinePlaceholder":285},[107,2071,2072,2074,2077,2079,2081,2083,2085,2087,2089,2091],{"class":109,"line":168},[107,2073,1993],{"class":133},[107,2075,2076],{"class":157}," content ",[107,2078,137],{"class":113},[107,2080,356],{"class":302},[107,2082,360],{"class":359},[107,2084,363],{"class":157},[107,2086,366],{"class":113},[107,2088,96],{"class":192},[107,2090,366],{"class":113},[107,2092,373],{"class":157},[107,2094,2095,2097,2099,2101,2103,2105,2107,2109,2111,2113,2115],{"class":109,"line":177},[107,2096,453],{"class":113},[107,2098,382],{"class":359},[107,2100,385],{"class":157},[107,2102,366],{"class":113},[107,2104,390],{"class":192},[107,2106,366],{"class":113},[107,2108,328],{"class":113},[107,2110,366],{"class":113},[107,2112,399],{"class":192},[107,2114,366],{"class":113},[107,2116,404],{"class":157},[107,2118,2119,2121,2123,2125,2127,2129,2131,2133,2135,2137,2139],{"class":109,"line":212},[107,2120,453],{"class":113},[107,2122,412],{"class":359},[107,2124,363],{"class":157},[107,2126,366],{"class":113},[107,2128,419],{"class":192},[107,2130,366],{"class":113},[107,2132,328],{"class":113},[107,2134,426],{"class":113},[107,2136,429],{"class":192},[107,2138,366],{"class":113},[107,2140,373],{"class":157},[107,2142,2143,2145,2147,2150,2152,2154,2157],{"class":109,"line":244},[107,2144,453],{"class":113},[107,2146,441],{"class":359},[107,2148,2149],{"class":157},"(from)",[107,2151,453],{"class":113},[107,2153,456],{"class":359},[107,2155,2156],{"class":157},"(to) ",[107,2158,2159],{"class":2032},"\u002F\u002F ページング取得\n",[107,2161,2162,2164,2166,2168],{"class":109,"line":254},[107,2163,453],{"class":113},[107,2165,471],{"class":359},[107,2167,474],{"class":157},[107,2169,477],{"class":113},[11,2171,2172,2174],{},[52,2173,1896],{},"が現在のページ数となっていますので、それを参考にしてページングによるコンテンツ取得をします。",[38,2176,2177],{"id":2177},"最大ページと表示ページ範囲を設定してレンダーする",[11,2179,2180,2182],{},[52,2181,564],{},"での設定は以上でOKです。params.idから現在ページ数を用いてページングのレンダーを構築します。私のページングでは",[21,2184,2185,2188,2191],{},[24,2186,2187],{},"１ページ目と最後のページは常に表示",[24,2189,2190],{},"現在ページから2ページ分だけ表示",[24,2192,2193],{},"範囲外のページは「...」で表示する",[11,2195,2196],{},"という仕様で実装されています。詳細な仕組みは上記のソースをみてください。必要分のページのリンクを作成してページングは完成です。",[34,2198,2200],{"id":2199},"静的書き出しの際には特に気にせず大丈夫","静的書き出しの際には特に気にせず大丈夫。",[11,2202,2203,2204,2207,2208,2210],{},"ページングの設定して次は静的書き出しを行います。ただし前回のようにルートをnuxtに伝えるということは不要です。どうやら",[52,2205,2206],{},"\u002Farticles\u002Findex","を書き出す時にページングの",[52,2209,218],{},"を辿ってルートを解決してくれているそうです。実際の書き出しでも",[45,2212,2215],{"className":2213,"code":2214,"language":50},[48],"✔ Generated route \"\u002Farticles\u002Fpage\n✔ Generated route \"\u002Farticles\u002Fpage\u002F1\" \n✔ Generated route \"\u002Farticles\u002Fpage\u002F2\" \n",[52,2216,2214],{"__ignoreMap":54},[11,2218,2219],{},"以上のようなログが確認できました。",[34,2221,2222],{"id":2222},"次回は",[11,2224,2225],{},"以上で一覧ページの作成とページングが実装終了しました。ページングとページリストはコンポーネント化しておいた方が後々の開発が楽になります。次回はカテゴリーとタグ機能の解説を行います。",[2227,2228,2229],"style",{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}",{"title":54,"searchDepth":145,"depth":145,"links":2231},[2232,2236,2241,2242],{"id":36,"depth":124,"text":36,"children":2233},[2234,2235],{"id":40,"depth":145,"text":40},{"id":87,"depth":145,"text":87},{"id":601,"depth":124,"text":601,"children":2237},[2238,2239,2240],{"id":1878,"depth":145,"text":1879},{"id":1969,"depth":145,"text":1969},{"id":2177,"depth":145,"text":2177},{"id":2199,"depth":124,"text":2200},{"id":2222,"depth":124,"text":2222},[2244],"devstack","2021-05-06","Nuxt Content × SSG で作る静的ブログ。記事一覧ページとページング機能ついて説明。","md",{},"\u002Fseries\u002Fnuxt-content-blog-3",{"title":6,"description":2246},"nuxt-content-blog","Nuxt Content × SSG で作る静的ブログ。","series\u002Fnuxt-content-blog-3",[2255,2256],"js","nuxt","_mix\u002Flogo-dark.jpg",null,"A6PomFr-zdk_yRRjUN1XT-Qhy330_OwrjwFmZaj63C8",{"id":2261,"title":2262,"body":2263,"category":3960,"createdAt":3961,"description":3962,"extension":2247,"index":124,"meta":3963,"navigation":285,"path":3964,"publish":285,"seo":3965,"series":2251,"seriesTitle":2252,"stem":3966,"tag":3967,"thumbnail":2257,"updatedAt":2258,"__hash__":3968},"series\u002Fseries\u002Fnuxt-content-blog-2.md","Nuxt Content × SSG で作る静的ブログ。２：基本的な記事項目のレンダリングと静的書き出し",{"type":8,"value":2264,"toc":3944},[2265,2271,2282,2284,2287,2290,2302,2313,2319,2336,2340,2346,2351,2374,2378,2384,2518,2533,2539,2556,2559,2568,2571,2574,2585,2596,2643,2656,2659,2908,2916,2933,2940,2944,2947,2967,2971,2974,2977,2983,2990,3049,3052,3055,3066,3072,3075,3078,3081,3672,3675,3690,3861,3877,3880,3885,3891,3898,3904,3910,3916,3925,3928,3941],[11,2266,13,2267,2270],{},[15,2268,18],{"href":2269},"\u002Fseries\u002Fnuxt-content-blog\u002F1","は概念と基本的なコンテンツの作成・取得・表示について解説しました。今回の記事では",[21,2272,2273,2276,2279],{},[24,2274,2275],{},"nuxt.jsにおけるpage構成の設定",[24,2277,2278],{},"目次生成、画像のレンダリング、どんな項目をレンダリングできるのか？",[24,2280,2281],{},"静的書き出しの設定",[11,2283,32],{},[34,2285,2286],{"id":2286},"サイトのルーティングを考えてpagesの構成を設定する",[38,2288,2289],{"id":2289},"何をどう設定すればいいか",[11,2291,2292,2293,2295,2296,2298,2299,2301],{},"Nuxt.jsは",[52,2294,611],{},"というディレクトリ配下にファイルを作ることで、vue-routerの設定が自動で行われURLが生成されます。私のブログでは",[52,2297,60],{},"というURLで対象の記事を呼び出します。そのURLが有効になるには",[52,2300,611],{},"ディレクトリの構築をする必要があります。",[11,2303,2304,2305,2308,2309,2312],{},"一方、Nuxt Contentで任意の記事データを取得してみると",[52,2306,2307],{},"path:","というプロパティがあります。それは",[52,2310,2311],{},"content\u002F","ディレクトリをルートとしたパスになっています。以下のような構成の場合、",[45,2314,2317],{"className":2315,"code":2316,"language":50},[48],"├── content\n│ ├── articles\n│ │ ├── aaaaaa.md\n",[52,2318,2316],{"__ignoreMap":54},[11,2320,2321,2324,2325,2328,2329,2332,2333,2335],{},[52,2322,2323],{},"aaaaaa.md","のデータのパスは",[52,2326,2327],{},"\u002Farticles\u002Faaaaaa","となります。つまり",[52,2330,2331],{},"https:\u002F\u002Fexample.com\u002Farticles\u002Faaaaaa","というルートに対して、",[52,2334,2323],{},"が呼び出されるように設定します。",[38,2337,2339],{"id":2338},"ひとまず以下のようにpageを作成","ひとまず以下のようにpage\u002Fを作成",[11,2341,2342,2343,2345],{},"ひとまず以下のように",[52,2344,611],{},"配下に作成してください。",[45,2347,2349],{"className":2348,"code":49,"language":50},[48],[52,2350,49],{"__ignoreMap":54},[11,2352,2353,2356,2357,2363,2364,2366,2367,533,2370,2373],{},[52,2354,2355],{},"_slug.vue","といものを作ることで",[15,2358,2362],{"href":2359,"rel":2360},"https:\u002F\u002Fja.nuxtjs.org\u002Fdocs\u002F2.x\u002Fdirectory-structure\u002Fpages",[2361],"nofollow","公式にある通り","、",[52,2365,60],{},"のルートに対して",[52,2368,2369],{},"params.sulg",[52,2371,2372],{},"{sulg}","の値を取得できるようになります。",[38,2375,2377],{"id":2376},"paramssulgで指定されたsulgのファイルfetchする","params.sulgで指定されたsulgのファイルfetchする",[11,2379,90,2380,2383],{},[52,2381,2382],{},"_sulg.vue","で以下のように記述します。",[45,2385,2388],{"className":100,"code":2386,"filename":2387,"language":103,"meta":54,"style":54},"\u003Ctemplate>\n \u003Carticle>\n \u003Cnuxt-content :document=\"content\" \u002F>\n \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n\u003Cscirpt>\nexport default {\n async asyncData({ $content, params,redirect }) {\n const content = await $content('articles').where({path:\"\u002Farticles\u002F\"+params.slug}).fetch();\n if(content.length > 0){\n return {\n content:content[0],\n }\n }else{\n redirect('\u002Farticles')\n }\n }\n}\n\u003C\u002Fscript>\n\n","\u002Farticles\u002F_sulg.vue",[52,2389,2390,2398,2408,2430,2439,2447,2456,2461,2466,2471,2476,2481,2486,2491,2496,2501,2505,2509,2513],{"__ignoreMap":54},[107,2391,2392,2394,2396],{"class":109,"line":110},[107,2393,114],{"class":113},[107,2395,118],{"class":117},[107,2397,121],{"class":113},[107,2399,2400,2403,2406],{"class":109,"line":124},[107,2401,2402],{"class":113}," \u003C",[107,2404,2405],{"class":117},"article",[107,2407,121],{"class":113},[107,2409,2410,2412,2415,2418,2420,2422,2425,2427],{"class":109,"line":145},[107,2411,127],{"class":113},[107,2413,2414],{"class":117},"nuxt-content",[107,2416,2417],{"class":133}," :document",[107,2419,137],{"class":113},[107,2421,189],{"class":113},[107,2423,2424],{"class":192},"content",[107,2426,189],{"class":113},[107,2428,2429],{"class":113}," \u002F>\n",[107,2431,2432,2435,2437],{"class":109,"line":168},[107,2433,2434],{"class":113}," \u003C\u002F",[107,2436,2405],{"class":117},[107,2438,121],{"class":113},[107,2440,2441,2443,2445],{"class":109,"line":177},[107,2442,161],{"class":113},[107,2444,118],{"class":117},[107,2446,121],{"class":113},[107,2448,2449,2451,2454],{"class":109,"line":212},[107,2450,114],{"class":113},[107,2452,2453],{"class":117},"scirpt",[107,2455,121],{"class":113},[107,2457,2458],{"class":109,"line":244},[107,2459,2460],{"class":157},"export default {\n",[107,2462,2463],{"class":109,"line":254},[107,2464,2465],{"class":157}," async asyncData({ $content, params,redirect }) {\n",[107,2467,2468],{"class":109,"line":263},[107,2469,2470],{"class":157}," const content = await $content('articles').where({path:\"\u002Farticles\u002F\"+params.slug}).fetch();\n",[107,2472,2473],{"class":109,"line":273},[107,2474,2475],{"class":157}," if(content.length > 0){\n",[107,2477,2478],{"class":109,"line":282},[107,2479,2480],{"class":157}," return {\n",[107,2482,2483],{"class":109,"line":289},[107,2484,2485],{"class":157}," content:content[0],\n",[107,2487,2488],{"class":109,"line":299},[107,2489,2490],{"class":157}," }\n",[107,2492,2493],{"class":109,"line":312},[107,2494,2495],{"class":157}," }else{\n",[107,2497,2498],{"class":109,"line":344},[107,2499,2500],{"class":157}," redirect('\u002Farticles')\n",[107,2502,2503],{"class":109,"line":376},[107,2504,505],{"class":157},[107,2506,2507],{"class":109,"line":407},[107,2508,511],{"class":157},[107,2510,2511],{"class":109,"line":436},[107,2512,517],{"class":157},[107,2514,2515],{"class":109,"line":466},[107,2516,2517],{"class":157},"\u003C\u002Fscript>\n",[11,2519,2520,2522,2523,2525,2526,533,2529,2532],{},[52,2521,564],{},"中で",[52,2524,573],{},"をフェッチします。そして",[52,2527,2528],{},"where()",[52,2530,2531],{},"\"\u002Farticles\u002F\"+params.slug","に一致するコンテンツを引っ張るようにします。",[11,2534,2535,2538],{},[52,2536,2537],{},"where","クエリを使用すると配列で結果が返るので、あれば一致した結果、なければ一覧ページにリダイレクトするようにします。以上でNuxtにおけるpagesディレクトリの設定は完了です。",[130,2540,2542,2544,2545,2548,2549,2551,2552],{"className":2541},[569,570],[52,2543,564],{},"はSSRの時の",[52,2546,2547],{},"page\u002F","配下のファイルで使用できます。サーバーサイドで処理される箇所であり、そこで$contentをfetchします。静的書き出しを行うと、",[52,2550,564],{},"内の処理は書き出し中に実行されます。\n",[15,2553,2555],{"href":2554,"target":578},"https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Ffeatures\u002Fdata-fetching","公式：Data Fetching",[34,2557,2558],{"id":2558},"コンテンツの作成",[11,2560,2561,2562,2567],{},"ブログ記事は単に文章だけでなく、太字、リンク、画像、見出し、目次が大体必要になります。文章の修飾はマークダウンの記述を行えば問題ありません。マークダウン記法は今回は解説しません。",[15,2563,2566],{"href":2564,"rel":2565},"https:\u002F\u002Fqiita.com\u002Fkamorits\u002Fitems\u002F6f342da395ad57468ae3",[2361],"こちらの記事","がお世話になりました。",[38,2569,2570],{"id":2570},"画像をレンダリングする場合",[11,2572,2573],{},"マークダウンで画像を表示する場合は基本的に以下のように記述します。",[45,2575,2579],{"className":2576,"code":2577,"language":2578,"meta":54,"style":54},"language-markdown shiki shiki-themes material-theme-ocean","![image alt text](\u002Fimage\u002Fsample.jpg)\n","markdown",[52,2580,2581],{"__ignoreMap":54},[107,2582,2583],{"class":109,"line":110},[107,2584,2577],{},[11,2586,2587,2588,2591,2592,2595],{},"Nuxtの場合は画像を",[52,2589,2590],{},"asset","あたりに入れておき、",[52,2593,2594],{},"require('~\u002Fasset\u002Fsample.jpg')","という感じで依存性を解決できます。しかしマークダウンでは以下のパターンで画像パスの解決ができません。",[45,2597,2599],{"className":2576,"code":2598,"language":2578,"meta":54,"style":54},"\n\u002F\u002F パターン１\n![image alt text](~\u002Fasset\u002Fsample.jpg)\n\n\u002F\u002F パターン２\n![image alt text](\u002Fasset\u002Fsample.jpg)\n\n\u002F\u002F パターン３\n![image alt text](require(~\u002Fasset\u002Fsample.jpg))\n\n",[52,2600,2601,2605,2610,2615,2619,2624,2629,2633,2638],{"__ignoreMap":54},[107,2602,2603],{"class":109,"line":110},[107,2604,286],{"emptyLinePlaceholder":285},[107,2606,2607],{"class":109,"line":124},[107,2608,2609],{},"\u002F\u002F パターン１\n",[107,2611,2612],{"class":109,"line":145},[107,2613,2614],{},"![image alt text](~\u002Fasset\u002Fsample.jpg)\n",[107,2616,2617],{"class":109,"line":168},[107,2618,286],{"emptyLinePlaceholder":285},[107,2620,2621],{"class":109,"line":177},[107,2622,2623],{},"\u002F\u002F パターン２\n",[107,2625,2626],{"class":109,"line":212},[107,2627,2628],{},"![image alt text](\u002Fasset\u002Fsample.jpg)\n",[107,2630,2631],{"class":109,"line":244},[107,2632,286],{"emptyLinePlaceholder":285},[107,2634,2635],{"class":109,"line":254},[107,2636,2637],{},"\u002F\u002F パターン３\n",[107,2639,2640],{"class":109,"line":263},[107,2641,2642],{},"![image alt text](require(~\u002Fasset\u002Fsample.jpg))\n",[11,2644,2645,2646,2649,2650,2655],{},"画像のレンダリングは",[52,2647,2648],{},"\"@nuxt\u002Fcontent\": \"^1.14.0\"","時点で特段に対応されておらず、ドキュメントにも書かれていませんでした。",[15,2651,2654],{"href":2652,"rel":2653},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcontent\u002Fissues\u002F106",[2361],"Githubのissueでも報告されているよう","に議論となっています。",[11,2657,2658],{},"一応解決策としてはマークダウンファイルそのものにVueコンポーネントを書いてしまうことです。最初に画像レンダリング用のコンポーネントを作成します。",[45,2660,2663],{"className":100,"code":2661,"filename":2662,"language":103,"meta":54,"style":54},"\u003Ctemplate>\n \u003Cimg :src=\"imgSrc()\" :alt=\"alt\"\u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n props: {\n src: {\n type: String,\n required: true\n },\n alt: {\n type: String,\n },\n },\n methods: {\n imgSrc() {\n try {\n return require(`~\u002Fassets\u002Fimage\u002F${this.src}`)\n } catch (error) {\n return null\n }\n }\n },\n}\n\u003C\u002Fscript>\n","components\u002FimageRender.vue",[52,2664,2665,2673,2707,2715,2719,2727,2735,2744,2753,2765,2775,2779,2788,2798,2802,2807,2816,2825,2832,2860,2877,2884,2888,2892,2896,2900],{"__ignoreMap":54},[107,2666,2667,2669,2671],{"class":109,"line":110},[107,2668,114],{"class":113},[107,2670,118],{"class":117},[107,2672,121],{"class":113},[107,2674,2675,2677,2680,2683,2685,2687,2690,2692,2695,2697,2699,2702,2704],{"class":109,"line":124},[107,2676,2402],{"class":113},[107,2678,2679],{"class":117},"img",[107,2681,2682],{"class":133}," :src",[107,2684,137],{"class":113},[107,2686,189],{"class":113},[107,2688,2689],{"class":192},"imgSrc()",[107,2691,189],{"class":113},[107,2693,2694],{"class":133}," :alt",[107,2696,137],{"class":113},[107,2698,189],{"class":113},[107,2700,2701],{"class":192},"alt",[107,2703,189],{"class":113},[107,2705,2706],{"class":113},"\u002F>\n",[107,2708,2709,2711,2713],{"class":109,"line":145},[107,2710,161],{"class":113},[107,2712,118],{"class":117},[107,2714,121],{"class":113},[107,2716,2717],{"class":109,"line":168},[107,2718,286],{"emptyLinePlaceholder":285},[107,2720,2721,2723,2725],{"class":109,"line":177},[107,2722,114],{"class":113},[107,2724,294],{"class":117},[107,2726,121],{"class":113},[107,2728,2729,2731,2733],{"class":109,"line":212},[107,2730,303],{"class":302},[107,2732,306],{"class":302},[107,2734,309],{"class":113},[107,2736,2737,2740,2742],{"class":109,"line":244},[107,2738,2739],{"class":117}," props",[107,2741,1410],{"class":113},[107,2743,309],{"class":113},[107,2745,2746,2749,2751],{"class":109,"line":254},[107,2747,2748],{"class":117}," src",[107,2750,1410],{"class":113},[107,2752,309],{"class":113},[107,2754,2755,2758,2760,2763],{"class":109,"line":263},[107,2756,2757],{"class":117}," type",[107,2759,1410],{"class":113},[107,2761,2762],{"class":157}," String",[107,2764,499],{"class":113},[107,2766,2767,2770,2772],{"class":109,"line":273},[107,2768,2769],{"class":117}," required",[107,2771,1410],{"class":113},[107,2773,2774],{"class":1002}," true\n",[107,2776,2777],{"class":109,"line":282},[107,2778,1029],{"class":113},[107,2780,2781,2784,2786],{"class":109,"line":289},[107,2782,2783],{"class":117}," alt",[107,2785,1410],{"class":113},[107,2787,309],{"class":113},[107,2789,2790,2792,2794,2796],{"class":109,"line":299},[107,2791,2757],{"class":117},[107,2793,1410],{"class":113},[107,2795,2762],{"class":157},[107,2797,499],{"class":113},[107,2799,2800],{"class":109,"line":312},[107,2801,1029],{"class":113},[107,2803,2804],{"class":109,"line":344},[107,2805,2806],{"class":113}," },\n",[107,2808,2809,2812,2814],{"class":109,"line":376},[107,2810,2811],{"class":117}," methods",[107,2813,1410],{"class":113},[107,2815,309],{"class":113},[107,2817,2818,2821,2823],{"class":109,"line":407},[107,2819,2820],{"class":117}," imgSrc",[107,2822,474],{"class":113},[107,2824,309],{"class":113},[107,2826,2827,2830],{"class":109,"line":436},[107,2828,2829],{"class":302}," try",[107,2831,309],{"class":113},[107,2833,2834,2836,2839,2841,2844,2847,2850,2852,2855,2858],{"class":109,"line":466},[107,2835,1010],{"class":302},[107,2837,2838],{"class":359}," require",[107,2840,363],{"class":117},[107,2842,2843],{"class":113},"`",[107,2845,2846],{"class":192},"~\u002Fassets\u002Fimage\u002F",[107,2848,2849],{"class":113},"${",[107,2851,1463],{"class":113},[107,2853,2854],{"class":157},"src",[107,2856,2857],{"class":113},"}`",[107,2859,373],{"class":117},[107,2861,2862,2865,2868,2870,2873,2875],{"class":109,"line":480},[107,2863,2864],{"class":113}," }",[107,2866,2867],{"class":302}," catch",[107,2869,1213],{"class":117},[107,2871,2872],{"class":157},"error",[107,2874,1666],{"class":117},[107,2876,1556],{"class":113},[107,2878,2879,2881],{"class":109,"line":485},[107,2880,1010],{"class":302},[107,2882,2883],{"class":113}," null\n",[107,2885,2886],{"class":109,"line":493},[107,2887,2490],{"class":113},[107,2889,2890],{"class":109,"line":502},[107,2891,505],{"class":113},[107,2893,2894],{"class":109,"line":508},[107,2895,2806],{"class":113},[107,2897,2898],{"class":109,"line":514},[107,2899,517],{"class":113},[107,2901,2902,2904,2906],{"class":109,"line":520},[107,2903,161],{"class":113},[107,2905,294],{"class":117},[107,2907,121],{"class":113},[11,2909,2910,2911,2915],{},"上記のコンポーネントを ",[2912,2913,2914],"strong",{},"マークダウン"," に記述します。",[45,2917,2921],{"className":2918,"code":2919,"language":2920,"meta":54,"style":54},"language-sample.md shiki shiki-themes material-theme-ocean","以下のようにします。\n\u003CimageRender src=\"sample.jpg\"\u002F>\n","sample.md",[52,2922,2923,2928],{"__ignoreMap":54},[107,2924,2925],{"class":109,"line":110},[107,2926,2927],{},"以下のようにします。\n",[107,2929,2930],{"class":109,"line":124},[107,2931,2932],{},"\u003CimageRender src=\"sample.jpg\"\u002F>\n",[11,2934,2935,2936,2939],{},"上記の記述はNuxt Contentがåいい感じにvueコンポーネントとして扱ってくれます。パスの解決はコンポーネント内の",[52,2937,2938],{},"require()","が行います。あまりかっこいい方法ではありませんが、一応これで画像をレンダリングできます。",[38,2941,2943],{"id":2942},"html要素をレンダリングする","HTML要素をレンダリングする",[11,2945,2946],{},"Nuxt Contentはマークダウン内のHTMLをHTMLとして扱ってくれますので、カスタムな要素を記述できます。",[45,2948,2950],{"className":2918,"code":2949,"language":2920,"meta":54,"style":54},"\u003Cdiv class=\"alert alert-warning\">\nこのアラートもこのようにHTMLをマークダウンに書いています！\n\u003C\u002Fdiv>\n",[52,2951,2952,2957,2962],{"__ignoreMap":54},[107,2953,2954],{"class":109,"line":110},[107,2955,2956],{},"\u003Cdiv class=\"alert alert-warning\">\n",[107,2958,2959],{"class":109,"line":124},[107,2960,2961],{},"このアラートもこのようにHTMLをマークダウンに書いています！\n",[107,2963,2964],{"class":109,"line":145},[107,2965,2966],{},"\u003C\u002Fdiv>\n",[130,2968,2970],{"className":2969},[569,1965],"\nこのアラートもこのようにHTMLをマークダウンに書いています！\n",[38,2972,2973],{"id":2973},"シンタックスハイライトを有効にする",[11,2975,2976],{},"Nuxt Contentは一応開発者向けなのか、簡単にコードブロックに対してシンタックスハイライトを有効にすることができます。prismJSを使用するのでまずはインストールします。",[45,2978,2981],{"className":2979,"code":2980,"language":50},[48],"npm install prism-themes\n\n",[52,2982,2980],{"__ignoreMap":54},[11,2984,2985,2986,2989],{},"そして",[52,2987,2988],{},"nuxt.config.js","で以下のようにテーマのCSSを設定します。",[45,2991,2993],{"className":1905,"code":2992,"filename":2988,"language":1907,"meta":54,"style":54},"content: {\n markdown: {\n prism: {\n theme: 'prism-themes\u002Fthemes\u002Fprism-material-oceanic.css'\n }\n }\n },\n",[52,2994,2995,3004,3013,3022,3037,3041,3045],{"__ignoreMap":54},[107,2996,2997,3000,3002],{"class":109,"line":110},[107,2998,2424],{"class":2999},"s5Dmg",[107,3001,1410],{"class":113},[107,3003,309],{"class":113},[107,3005,3006,3009,3011],{"class":109,"line":124},[107,3007,3008],{"class":2999}," markdown",[107,3010,1410],{"class":113},[107,3012,309],{"class":113},[107,3014,3015,3018,3020],{"class":109,"line":145},[107,3016,3017],{"class":2999}," prism",[107,3019,1410],{"class":113},[107,3021,309],{"class":113},[107,3023,3024,3027,3029,3031,3034],{"class":109,"line":168},[107,3025,3026],{"class":2999}," theme",[107,3028,1410],{"class":113},[107,3030,426],{"class":113},[107,3032,3033],{"class":192},"prism-themes\u002Fthemes\u002Fprism-material-oceanic.css",[107,3035,3036],{"class":113},"'\n",[107,3038,3039],{"class":109,"line":177},[107,3040,2490],{"class":113},[107,3042,3043],{"class":109,"line":212},[107,3044,505],{"class":113},[107,3046,3047],{"class":109,"line":244},[107,3048,2806],{"class":113},[11,3050,3051],{},"以上でコードブロック内にてシンタックスハイライトが有効になります。",[38,3053,3054],{"id":3054},"目次の作成",[11,3056,3057,3058,3061,3062,3065],{},"目次の作成、もとい見出しのデータの取得は簡単です。",[52,3059,3060],{},"const content = $content().fetch()","で取得した ",[52,3063,3064],{},"content.toc","で見出しのデータが取得できます。",[45,3067,3070],{"className":3068,"code":3069,"language":50},[48],"toc:Array[8]\n 0:Object\n depth:2\n id:\"サイトのルーティングを考えてpagesの構成を設定する\"\n text:\"サイトのルーティングを考えてpagesの構成を設定する\"\n 1:Object\n",[52,3071,3069],{"__ignoreMap":54},[11,3073,3074],{},"私のブログの左サイドにある目次も、上記のようなオブジェクトを利用して作っています。",[38,3076,3077],{"id":3077},"その他の項目や要素について",[11,3079,3080],{},"以上がブログに必要であろう要素をNuxt Contentで記述しました。私の一般記事のtemplateは以下ようになっていますので、是非参考にしてください。",[45,3082,3085],{"className":100,"code":3083,"filename":3084,"language":103,"meta":54,"style":54},"\u003Ctemplate>\n \u003Cdiv class=\"p-main-container\">\n \u003Cdiv class=\"p-main-wrapper\">\n \u002F\u002F目次のコンポーネント\n \u003Ctoc :toc=\"content.toc\"\u002F>\n\n \u002F\u002Fメインのエリア\n \u003Cdiv id=\"l-center-area\">\n\n \u002F\u002Fサムネイル\n \u003Cimg v-if=\"thumbnail\" class=\"c-article-thumbnail\" :src=\"thumbnail\" :alt=\"content.title\">\n\n \u002F\u002Fタグとカテゴリーのバッチ\n \u003Cdiv class=\"p-article-badge p-badge-container\">\n \u003Cnuxt-link class=\"c-tag-badge u-blue\" v-for=\"(c,index) in content.category\" :key=\"'category-'+index\" :to=\"'\u002Fcategory\u002F'+c\">\n \u003Cspan>{{$store.getters['getCategoryTextBySlug'](c)}}\u003C\u002Fspan>\n \u003C\u002Fnuxt-link>\n \u003Cnuxt-link class=\"c-tag-badge\" v-for=\"(t,index) in content.tag\" :key=\"'tag-'+index\" :to=\"'\u002Ftag\u002F'+t\">\n \u003Cspan>{{$store.getters['getTagTextBySlug'](t)}}\u003C\u002Fspan>\n \u003C\u002Fnuxt-link>\n \u003C\u002Fdiv>\n\n \u003Ch1 class=\"c-article-header\">{{ content.title }}\u003C\u002Fh1>\n\n \u002F\u002F 更新一時など\n \u003Cdiv class=\"p-articler-date\">\n \u003Cspan class=\"c-date\">\u003Cfa-icon :icon=\"['fa', 'history']\"\u002F>{{ updateAt }}\u003C\u002Fspan>\n \u003Cspan class=\"c-date\">\u003Cfa-icon :icon=\"['far', 'clock']\"\u002F>{{ createdAt }}\u003C\u002Fspan>\n \u003C\u002Fdiv>\n\n \u002F\u002F マークダウンのレンダリング箇所\n \u003Cnuxt-content :document=\"content\" \u002F>\n \u003C\u002Fdiv>\n\n \u002F\u002Fサイドメニュー\n \u003Csidemenu\u002F>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002Farticles\u002F_slug.vue",[52,3086,3087,3095,3114,3133,3138,3158,3162,3167,3187,3191,3196,3247,3251,3256,3275,3327,3345,3353,3405,3422,3430,3438,3442,3470,3474,3479,3498,3545,3587,3595,3599,3604,3622,3630,3634,3639,3648,3656,3664],{"__ignoreMap":54},[107,3088,3089,3091,3093],{"class":109,"line":110},[107,3090,114],{"class":113},[107,3092,118],{"class":117},[107,3094,121],{"class":113},[107,3096,3097,3099,3101,3103,3105,3107,3110,3112],{"class":109,"line":124},[107,3098,2402],{"class":113},[107,3100,130],{"class":117},[107,3102,134],{"class":133},[107,3104,137],{"class":113},[107,3106,189],{"class":113},[107,3108,3109],{"class":192},"p-main-container",[107,3111,189],{"class":113},[107,3113,121],{"class":113},[107,3115,3116,3118,3120,3122,3124,3126,3129,3131],{"class":109,"line":145},[107,3117,127],{"class":113},[107,3119,130],{"class":117},[107,3121,134],{"class":133},[107,3123,137],{"class":113},[107,3125,189],{"class":113},[107,3127,3128],{"class":192},"p-main-wrapper",[107,3130,189],{"class":113},[107,3132,121],{"class":113},[107,3134,3135],{"class":109,"line":168},[107,3136,3137],{"class":157}," \u002F\u002F目次のコンポーネント\n",[107,3139,3140,3142,3145,3148,3150,3152,3154,3156],{"class":109,"line":177},[107,3141,148],{"class":113},[107,3143,3144],{"class":117},"toc",[107,3146,3147],{"class":133}," :toc",[107,3149,137],{"class":113},[107,3151,189],{"class":113},[107,3153,3064],{"class":192},[107,3155,189],{"class":113},[107,3157,2706],{"class":113},[107,3159,3160],{"class":109,"line":212},[107,3161,286],{"emptyLinePlaceholder":285},[107,3163,3164],{"class":109,"line":244},[107,3165,3166],{"class":157}," \u002F\u002Fメインのエリア\n",[107,3168,3169,3171,3173,3176,3178,3180,3183,3185],{"class":109,"line":254},[107,3170,148],{"class":113},[107,3172,130],{"class":117},[107,3174,3175],{"class":133}," id",[107,3177,137],{"class":113},[107,3179,189],{"class":113},[107,3181,3182],{"class":192},"l-center-area",[107,3184,189],{"class":113},[107,3186,121],{"class":113},[107,3188,3189],{"class":109,"line":263},[107,3190,286],{"emptyLinePlaceholder":285},[107,3192,3193],{"class":109,"line":273},[107,3194,3195],{"class":157}," \u002F\u002Fサムネイル\n",[107,3197,3198,3200,3202,3204,3206,3208,3211,3213,3215,3217,3219,3222,3224,3226,3228,3230,3232,3234,3236,3238,3240,3243,3245],{"class":109,"line":282},[107,3199,215],{"class":113},[107,3201,2679],{"class":117},[107,3203,821],{"class":133},[107,3205,137],{"class":113},[107,3207,189],{"class":113},[107,3209,3210],{"class":192},"thumbnail",[107,3212,189],{"class":113},[107,3214,134],{"class":133},[107,3216,137],{"class":113},[107,3218,189],{"class":113},[107,3220,3221],{"class":192},"c-article-thumbnail",[107,3223,189],{"class":113},[107,3225,2682],{"class":133},[107,3227,137],{"class":113},[107,3229,189],{"class":113},[107,3231,3210],{"class":192},[107,3233,189],{"class":113},[107,3235,2694],{"class":133},[107,3237,137],{"class":113},[107,3239,189],{"class":113},[107,3241,3242],{"class":192},"content.title",[107,3244,189],{"class":113},[107,3246,121],{"class":113},[107,3248,3249],{"class":109,"line":289},[107,3250,286],{"emptyLinePlaceholder":285},[107,3252,3253],{"class":109,"line":299},[107,3254,3255],{"class":157}," \u002F\u002Fタグとカテゴリーのバッチ\n",[107,3257,3258,3260,3262,3264,3266,3268,3271,3273],{"class":109,"line":312},[107,3259,215],{"class":113},[107,3261,130],{"class":117},[107,3263,134],{"class":133},[107,3265,137],{"class":113},[107,3267,189],{"class":113},[107,3269,3270],{"class":192},"p-article-badge p-badge-container",[107,3272,189],{"class":113},[107,3274,121],{"class":113},[107,3276,3277,3279,3281,3283,3285,3287,3290,3292,3294,3296,3298,3301,3303,3305,3307,3309,3312,3314,3316,3318,3320,3323,3325],{"class":109,"line":344},[107,3278,713],{"class":113},[107,3280,218],{"class":117},[107,3282,134],{"class":133},[107,3284,137],{"class":113},[107,3286,189],{"class":113},[107,3288,3289],{"class":192},"c-tag-badge u-blue",[107,3291,189],{"class":113},[107,3293,184],{"class":133},[107,3295,137],{"class":113},[107,3297,189],{"class":113},[107,3299,3300],{"class":192},"(c,index) in content.category",[107,3302,189],{"class":113},[107,3304,198],{"class":133},[107,3306,137],{"class":113},[107,3308,189],{"class":113},[107,3310,3311],{"class":192},"'category-'+index",[107,3313,189],{"class":113},[107,3315,221],{"class":133},[107,3317,137],{"class":113},[107,3319,189],{"class":113},[107,3321,3322],{"class":192},"'\u002Fcategory\u002F'+c",[107,3324,189],{"class":113},[107,3326,121],{"class":113},[107,3328,3329,3332,3334,3336,3339,3341,3343],{"class":109,"line":376},[107,3330,3331],{"class":113}," \u003C",[107,3333,107],{"class":117},[107,3335,154],{"class":113},[107,3337,3338],{"class":157},"{{$store.getters['getCategoryTextBySlug'](c)}}",[107,3340,161],{"class":113},[107,3342,107],{"class":117},[107,3344,121],{"class":113},[107,3346,3347,3349,3351],{"class":109,"line":407},[107,3348,865],{"class":113},[107,3350,218],{"class":117},[107,3352,121],{"class":113},[107,3354,3355,3357,3359,3361,3363,3365,3368,3370,3372,3374,3376,3379,3381,3383,3385,3387,3390,3392,3394,3396,3398,3401,3403],{"class":109,"line":436},[107,3356,713],{"class":113},[107,3358,218],{"class":117},[107,3360,134],{"class":133},[107,3362,137],{"class":113},[107,3364,189],{"class":113},[107,3366,3367],{"class":192},"c-tag-badge",[107,3369,189],{"class":113},[107,3371,184],{"class":133},[107,3373,137],{"class":113},[107,3375,189],{"class":113},[107,3377,3378],{"class":192},"(t,index) in content.tag",[107,3380,189],{"class":113},[107,3382,198],{"class":133},[107,3384,137],{"class":113},[107,3386,189],{"class":113},[107,3388,3389],{"class":192},"'tag-'+index",[107,3391,189],{"class":113},[107,3393,221],{"class":133},[107,3395,137],{"class":113},[107,3397,189],{"class":113},[107,3399,3400],{"class":192},"'\u002Ftag\u002F'+t",[107,3402,189],{"class":113},[107,3404,121],{"class":113},[107,3406,3407,3409,3411,3413,3416,3418,3420],{"class":109,"line":466},[107,3408,3331],{"class":113},[107,3410,107],{"class":117},[107,3412,154],{"class":113},[107,3414,3415],{"class":157},"{{$store.getters['getTagTextBySlug'](t)}}",[107,3417,161],{"class":113},[107,3419,107],{"class":117},[107,3421,121],{"class":113},[107,3423,3424,3426,3428],{"class":109,"line":480},[107,3425,865],{"class":113},[107,3427,218],{"class":117},[107,3429,121],{"class":113},[107,3431,3432,3434,3436],{"class":109,"line":485},[107,3433,740],{"class":113},[107,3435,130],{"class":117},[107,3437,121],{"class":113},[107,3439,3440],{"class":109,"line":493},[107,3441,286],{"emptyLinePlaceholder":285},[107,3443,3444,3446,3448,3450,3452,3454,3457,3459,3461,3464,3466,3468],{"class":109,"line":502},[107,3445,215],{"class":113},[107,3447,151],{"class":117},[107,3449,134],{"class":133},[107,3451,137],{"class":113},[107,3453,189],{"class":113},[107,3455,3456],{"class":192},"c-article-header",[107,3458,189],{"class":113},[107,3460,154],{"class":113},[107,3462,3463],{"class":157},"{{ content.title }}",[107,3465,161],{"class":113},[107,3467,151],{"class":117},[107,3469,121],{"class":113},[107,3471,3472],{"class":109,"line":508},[107,3473,286],{"emptyLinePlaceholder":285},[107,3475,3476],{"class":109,"line":514},[107,3477,3478],{"class":157}," \u002F\u002F 更新一時など\n",[107,3480,3481,3483,3485,3487,3489,3491,3494,3496],{"class":109,"line":520},[107,3482,215],{"class":113},[107,3484,130],{"class":117},[107,3486,134],{"class":133},[107,3488,137],{"class":113},[107,3490,189],{"class":113},[107,3492,3493],{"class":192},"p-articler-date",[107,3495,189],{"class":113},[107,3497,121],{"class":113},[107,3499,3500,3502,3504,3506,3508,3510,3513,3515,3518,3521,3524,3526,3528,3531,3533,3536,3539,3541,3543],{"class":109,"line":1026},[107,3501,713],{"class":113},[107,3503,107],{"class":117},[107,3505,134],{"class":133},[107,3507,137],{"class":113},[107,3509,189],{"class":113},[107,3511,3512],{"class":192},"c-date",[107,3514,189],{"class":113},[107,3516,3517],{"class":113},">\u003C",[107,3519,3520],{"class":117},"fa-icon",[107,3522,3523],{"class":133}," :icon",[107,3525,137],{"class":113},[107,3527,189],{"class":113},[107,3529,3530],{"class":192},"['fa', 'history']",[107,3532,189],{"class":113},[107,3534,3535],{"class":113},"\u002F>",[107,3537,3538],{"class":157},"{{ updateAt }}",[107,3540,161],{"class":113},[107,3542,107],{"class":117},[107,3544,121],{"class":113},[107,3546,3547,3549,3551,3553,3555,3557,3559,3561,3563,3565,3567,3569,3571,3574,3576,3578,3581,3583,3585],{"class":109,"line":1032},[107,3548,713],{"class":113},[107,3550,107],{"class":117},[107,3552,134],{"class":133},[107,3554,137],{"class":113},[107,3556,189],{"class":113},[107,3558,3512],{"class":192},[107,3560,189],{"class":113},[107,3562,3517],{"class":113},[107,3564,3520],{"class":117},[107,3566,3523],{"class":133},[107,3568,137],{"class":113},[107,3570,189],{"class":113},[107,3572,3573],{"class":192},"['far', 'clock']",[107,3575,189],{"class":113},[107,3577,3535],{"class":113},[107,3579,3580],{"class":157},"{{ createdAt }}",[107,3582,161],{"class":113},[107,3584,107],{"class":117},[107,3586,121],{"class":113},[107,3588,3589,3591,3593],{"class":109,"line":1056},[107,3590,740],{"class":113},[107,3592,130],{"class":117},[107,3594,121],{"class":113},[107,3596,3597],{"class":109,"line":1103},[107,3598,286],{"emptyLinePlaceholder":285},[107,3600,3601],{"class":109,"line":1121},[107,3602,3603],{"class":157}," \u002F\u002F マークダウンのレンダリング箇所\n",[107,3605,3606,3608,3610,3612,3614,3616,3618,3620],{"class":109,"line":1185},[107,3607,215],{"class":113},[107,3609,2414],{"class":117},[107,3611,2417],{"class":133},[107,3613,137],{"class":113},[107,3615,189],{"class":113},[107,3617,2424],{"class":192},[107,3619,189],{"class":113},[107,3621,2429],{"class":113},[107,3623,3624,3626,3628],{"class":109,"line":1190},[107,3625,247],{"class":113},[107,3627,130],{"class":117},[107,3629,121],{"class":113},[107,3631,3632],{"class":109,"line":1232},[107,3633,286],{"emptyLinePlaceholder":285},[107,3635,3636],{"class":109,"line":1262},[107,3637,3638],{"class":157}," \u002F\u002Fサイドメニュー\n",[107,3640,3641,3643,3646],{"class":109,"line":1267},[107,3642,148],{"class":113},[107,3644,3645],{"class":117},"sidemenu",[107,3647,2706],{"class":113},[107,3649,3650,3652,3654],{"class":109,"line":1290},[107,3651,266],{"class":113},[107,3653,130],{"class":117},[107,3655,121],{"class":113},[107,3657,3658,3660,3662],{"class":109,"line":1316},[107,3659,2434],{"class":113},[107,3661,130],{"class":117},[107,3663,121],{"class":113},[107,3665,3666,3668,3670],{"class":109,"line":1341},[107,3667,161],{"class":113},[107,3669,118],{"class":117},[107,3671,121],{"class":113},[34,3673,3674],{"id":3674},"静的書き出しをしてみる",[11,3676,3677,3678,3683,3684,533,3686,3689],{},"それではpagesファイル、マークダウンも作成したのでとりあえずある分だけ静的書き出ししてみましょう。",[15,3679,3682],{"href":3680,"rel":3681},"https:\u002F\u002Fcontent.nuxtjs.org\u002Fja\u002Fadvanced#%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E7%94%9F%E6%88%90",[2361],"公式の説明","がありますが",[52,3685,2988],{},[52,3687,3688],{},"generate","オプションを設定必要があります。では以下のように設定します。",[45,3691,3693],{"className":1905,"code":3692,"filename":2988,"language":1907,"meta":54,"style":54},"generate: {\n async routes () {\n const { $content } = require('@nuxt\u002Fcontent')\n const files = await $content({ deep: true }).only(['path']).fetch()\n return files.map(file => file.path === '\u002Findex' ? '\u002F' : file.path);\n }\n},\n",[52,3694,3695,3703,3715,3743,3793,3852,3856],{"__ignoreMap":54},[107,3696,3697,3699,3701],{"class":109,"line":110},[107,3698,3688],{"class":2999},[107,3700,1410],{"class":113},[107,3702,309],{"class":113},[107,3704,3705,3707,3710,3713],{"class":109,"line":124},[107,3706,1035],{"class":157},[107,3708,3709],{"class":359}," routes",[107,3711,3712],{"class":117}," () ",[107,3714,1556],{"class":113},[107,3716,3717,3720,3723,3725,3728,3730,3732,3734,3736,3739,3741],{"class":109,"line":145},[107,3718,3719],{"class":133}," const",[107,3721,3722],{"class":113}," {",[107,3724,360],{"class":157},[107,3726,3727],{"class":113}," }",[107,3729,353],{"class":113},[107,3731,2838],{"class":359},[107,3733,363],{"class":117},[107,3735,366],{"class":113},[107,3737,3738],{"class":192},"@nuxt\u002Fcontent",[107,3740,366],{"class":113},[107,3742,373],{"class":117},[107,3744,3745,3747,3750,3752,3754,3756,3758,3760,3763,3765,3767,3769,3771,3773,3775,3777,3779,3781,3783,3786,3788,3790],{"class":109,"line":168},[107,3746,3719],{"class":133},[107,3748,3749],{"class":157}," files",[107,3751,353],{"class":113},[107,3753,356],{"class":302},[107,3755,360],{"class":359},[107,3757,363],{"class":117},[107,3759,1603],{"class":113},[107,3761,3762],{"class":117}," deep",[107,3764,1410],{"class":113},[107,3766,1003],{"class":1002},[107,3768,3727],{"class":113},[107,3770,450],{"class":117},[107,3772,453],{"class":113},[107,3774,382],{"class":359},[107,3776,385],{"class":117},[107,3778,366],{"class":113},[107,3780,399],{"class":192},[107,3782,366],{"class":113},[107,3784,3785],{"class":117},"])",[107,3787,453],{"class":113},[107,3789,471],{"class":359},[107,3791,3792],{"class":117},"()\n",[107,3794,3795,3798,3800,3802,3805,3807,3810,3813,3816,3818,3820,3823,3825,3828,3830,3833,3835,3837,3839,3842,3844,3846,3848,3850],{"class":109,"line":177},[107,3796,3797],{"class":302}," return",[107,3799,3749],{"class":157},[107,3801,453],{"class":113},[107,3803,3804],{"class":359},"map",[107,3806,363],{"class":117},[107,3808,3809],{"class":324},"file",[107,3811,3812],{"class":133}," =>",[107,3814,3815],{"class":157}," file",[107,3817,453],{"class":113},[107,3819,399],{"class":157},[107,3821,3822],{"class":113}," ===",[107,3824,426],{"class":113},[107,3826,3827],{"class":192},"\u002Findex",[107,3829,366],{"class":113},[107,3831,3832],{"class":113}," ?",[107,3834,426],{"class":113},[107,3836,1936],{"class":192},[107,3838,366],{"class":113},[107,3840,3841],{"class":113}," :",[107,3843,3815],{"class":157},[107,3845,453],{"class":113},[107,3847,399],{"class":157},[107,3849,450],{"class":117},[107,3851,477],{"class":113},[107,3853,3854],{"class":109,"line":212},[107,3855,505],{"class":113},[107,3857,3858],{"class":109,"line":244},[107,3859,3860],{"class":113},"},\n",[11,3862,3863,3864,3867,3868,3870,3871,3873,3874,3876],{},"これは何をやっているかというと、",[52,3865,3866],{},"$content({ deep: true })","を使用してcontent配下にあるマークダウン一式とそのパスを全て取得して、Nuxtに生成すべきルートを伝えています。なぜこれを行う必要があるのかという理由ですが、Nuxt.jsは",[52,3869,611],{},"配下の構成を元にして必要なページを生成します。しかしどんなルート名になるかわからない",[52,3872,2382],{},"というファイル（動的ルート）がある場合は、とりうるルートを",[52,3875,3688],{},"オプション内で明示的に指定する必要があります。",[11,3878,3879],{},"Nuxt.js自身はcontents配下の構成とパスがどうなっているのかわからないので、Nuxt Contentから取得します。",[11,3881,3882,3884],{},[52,3883,2988],{},"でSSGができる設定にしたら",[45,3886,3889],{"className":3887,"code":3888,"language":50},[48],"npm run generate\n",[52,3890,3888],{"__ignoreMap":54},[11,3892,3893,3894,3897],{},"を叩くことで静的書き出しが行われます。書き出し後には",[52,3895,3896],{},"dist\u002F","というビルドファイルが作成されます。",[45,3899,3902],{"className":3900,"code":3901,"language":50},[48],"npm run start\n",[52,3903,3901],{"__ignoreMap":54},[11,3905,3906,3907,3909],{},"でひとまずローカル環境で",[52,3908,3896],{},"をドキュメントルートとしてみることができます。以下のような構成で作っていた場合、",[45,3911,3914],{"className":3912,"code":3913,"language":50},[48],"├── content\n│ ├── articles\n│ │ ├── sample.md\n│\n├── pages\n│ ├── articles\n│ 　 ├── _slug.vue\n",[52,3915,3913],{"__ignoreMap":54},[11,3917,3918,3921,3922,3924],{},[52,3919,3920],{},"http:\u002F\u002Flocalhost:3000\u002Farticles\u002Fsample","にアクセスすると内容が見れると思います。curlで",[52,3923,3920],{},"でアクセスしてきちんと静的HTMLが書き出されているかを確認してみましょう。",[34,3926,3927],{"id":3927},"以上で基本的な構成の作成が完了",[11,3929,3930,3931,3934,3935,3937,3938,3940],{},"スタイルとかの問題はあるかもしれませんが、ひとまず",[52,3932,3933],{},"pages","・",[52,3936,2424],{},"ディレクトリ、",[52,3939,2988],{},"の設定を行えばブログ的な構成とCMSとしての機能が実装できました。次回は記事の一覧ページとページング処理について解説していきます。",[2227,3942,3943],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}",{"title":54,"searchDepth":145,"depth":145,"links":3945},[3946,3951,3958,3959],{"id":2286,"depth":124,"text":2286,"children":3947},[3948,3949,3950],{"id":2289,"depth":145,"text":2289},{"id":2338,"depth":145,"text":2339},{"id":2376,"depth":145,"text":2377},{"id":2558,"depth":124,"text":2558,"children":3952},[3953,3954,3955,3956,3957],{"id":2570,"depth":145,"text":2570},{"id":2942,"depth":145,"text":2943},{"id":2973,"depth":145,"text":2973},{"id":3054,"depth":145,"text":3054},{"id":3077,"depth":145,"text":3077},{"id":3674,"depth":124,"text":3674},{"id":3927,"depth":124,"text":3927},[2244],"2021-05-05","Nuxt Content × SSG で作る静的ブログ。目次、記事内画像、どんな項目を記事にレンダーできるかと静的書き出しについて説明。",{},"\u002Fseries\u002Fnuxt-content-blog-2",{"title":2262,"description":3962},"series\u002Fnuxt-content-blog-2",[2255,2256],"G0AV4H-Vu8cOAUAeRcjFkqt5-eZKAcs9pHDQjdPhG4E",{"id":3970,"title":3971,"body":3972,"category":5718,"createdAt":5719,"description":5720,"extension":2247,"index":168,"meta":5721,"navigation":285,"path":5722,"publish":285,"seo":5723,"series":2251,"seriesTitle":2252,"stem":5724,"tag":5725,"thumbnail":2257,"updatedAt":2258,"__hash__":5726},"series\u002Fseries\u002Fnuxt-content-blog-4.md","Nuxt Content × SSG で作る静的ブログ。４：カテゴリーとタグ機能",{"type":8,"value":3973,"toc":5709},[3974,3984,3987,3990,3993,3996,4000,4003,4117,4126,4133,4137,4144,4817,4823,5195,5202,5249,5252,5256,5259,5266,5271,5277,5284,5288,5294,5651,5665,5668,5671,5683,5687,5690,5703,5706],[11,3975,13,3976,3979,3980,3983],{},[15,3977,18],{"href":3978},"\u002Fseries\u002Fnuxt-content-blog\u002F3","は詳細ページの実装と静的書き出しを行いました。今回の記事では ",[2912,3981,3982],{},"カテゴリーとタグ機能","　について解説します。",[34,3985,3986],{"id":3986},"カテゴリーとタグについて",[11,3988,3989],{},"まず最初にカテゴリーとタグ機能について念のため定義しておきます。基本的にはwordpressのものと概念は似ています。カテゴリーは基本的に記事に一つだけ設定して大まかな分類を行います。タグは記事に対して複数個設定できます。",[11,3991,3992],{},"機能としては上記の通りですが、記事がどんなコンテンツであるか整理されてリスト化されることでサイト訪問者がコンテンツを探しやすくなります。実際私のサイトもわかりやすくありませんか笑？",[11,3994,3995],{},"そのためブログを作るのならば、このカテゴリーとタグの機能はかなり重要です。それでは早速解説します。",[34,3997,3999],{"id":3998},"各記事にカテゴリータグを設定する","各記事にカテゴリー・タグを設定する",[11,4001,4002],{},"Nuxt Contentはマークダウンで原稿を作成します。マークダウン上部には以下のような記事のメタデータを記述します。",[45,4004,4008],{"className":4005,"code":4006,"language":4007,"meta":54,"style":54},"language-yml shiki shiki-themes material-theme-ocean","---\ntitle: Nuxt Content × SSG で作る静的ブログ。４：カテゴリーとタグ機能\ndescription: Nuxt Content × SSG で作る静的ブログ。カテゴリーとタグ機能\ncategory: [devstack]\ntag: [js,nuxt]\nseries: nuxt-content-blog\nseriesTitle: Nuxt Content × SSG で作る静的ブログ。\nindex: 4\npublish: true\nthumbnail: _mix\u002Flogo-dark.jpg\n---\n","yml",[52,4009,4010,4015,4024,4034,4049,4066,4076,4086,4095,4104,4113],{"__ignoreMap":54},[107,4011,4012],{"class":109,"line":110},[107,4013,4014],{"class":2999},"---\n",[107,4016,4017,4019,4021],{"class":109,"line":124},[107,4018,390],{"class":117},[107,4020,1410],{"class":113},[107,4022,4023],{"class":192}," Nuxt Content × SSG で作る静的ブログ。４：カテゴリーとタグ機能\n",[107,4025,4026,4029,4031],{"class":109,"line":145},[107,4027,4028],{"class":117},"description",[107,4030,1410],{"class":113},[107,4032,4033],{"class":192}," Nuxt Content × SSG で作る静的ブログ。カテゴリーとタグ機能\n",[107,4035,4036,4039,4041,4044,4046],{"class":109,"line":168},[107,4037,4038],{"class":117},"category",[107,4040,1410],{"class":113},[107,4042,4043],{"class":113}," [",[107,4045,2244],{"class":192},[107,4047,4048],{"class":113},"]\n",[107,4050,4051,4054,4056,4058,4060,4062,4064],{"class":109,"line":177},[107,4052,4053],{"class":117},"tag",[107,4055,1410],{"class":113},[107,4057,4043],{"class":113},[107,4059,2255],{"class":192},[107,4061,328],{"class":113},[107,4063,2256],{"class":192},[107,4065,4048],{"class":113},[107,4067,4068,4071,4073],{"class":109,"line":212},[107,4069,4070],{"class":117},"series",[107,4072,1410],{"class":113},[107,4074,4075],{"class":192}," nuxt-content-blog\n",[107,4077,4078,4081,4083],{"class":109,"line":244},[107,4079,4080],{"class":117},"seriesTitle",[107,4082,1410],{"class":113},[107,4084,4085],{"class":192}," Nuxt Content × SSG で作る静的ブログ。\n",[107,4087,4088,4090,4092],{"class":109,"line":254},[107,4089,205],{"class":117},[107,4091,1410],{"class":113},[107,4093,4094],{"class":446}," 4\n",[107,4096,4097,4100,4102],{"class":109,"line":263},[107,4098,4099],{"class":117},"publish",[107,4101,1410],{"class":113},[107,4103,2774],{"class":1002},[107,4105,4106,4108,4110],{"class":109,"line":273},[107,4107,3210],{"class":117},[107,4109,1410],{"class":113},[107,4111,4112],{"class":192}," _mix\u002Flogo-dark.jpg\n",[107,4114,4115],{"class":109,"line":282},[107,4116,4014],{"class":2999},[11,4118,4119,4120,2363,4122,4125],{},"ここで設定する値は基本的に自由につけることができます。そしてこの例の",[52,4121,4038],{},[52,4123,4124],{},"tags","に注目してみてください。各記事のカテゴリーとタグはここで定義されています。そして配列形式で設定します。このようにメタデータに配列で設定することで記事のカテゴリー・タグを配列で取得できます。配列なので複数個設定することができます。",[11,4127,4128,4129,4132],{},"この時気をつけたいのが、例えば",[52,4130,4131],{},"[開発スタック,メモ]","と日本語（ラベル）を入力するのでなく、プログラム的なキー・スラグで入力した方が良いです。理由は後述します。",[34,4134,4136],{"id":4135},"カテゴリータグ設定ファイルを作成する","カテゴリー、タグ設定ファイルを作成する",[11,4138,4139,4140,4143],{},"プロジェクトルートに",[52,4141,4142],{},"taxonomy.js","というようなカテゴリー、タグを管理するファイルを作成します。中身は以下のようになっています。",[45,4145,4147],{"className":1905,"code":4146,"filename":4142,"language":1907,"meta":54,"style":54},"module.exports = {\n category:[\n {text:'技術スタック',slug:'devstack'},\n {text:'プログラミング学習',slug:'learning'},\n {text:'メモ',slug:'ministack'},\n ],\n tags:[\n {text:'HTML',slug:'html'},\n {text:'CSS',slug:'css'},\n {text:'Javascript',slug:'js'},\n {text:'jquery',slug:'jquery'},\n {text:'Vue.js',slug:'vue'},\n {text:'Nuxt.js',slug:'nuxt'},\n {text:'webpack',slug:'webpack'},\n {text:'PHP',slug:'php'},\n {text:'Laravel',slug:'laravel'},\n {text:'Python',slug:'python'},\n {text:'Django',slug:'django'},\n {text:'HeadlessCMS',slug:'headlesscms'},\n {text:'wordpress',slug:'wordpress'},\n {text:'concrete5',slug:'concrete5'},\n {text:'ZOOM',slug:'zoom'},\n {text:'インフラ',slug:'infrastructure'},\n {text:'ネットワーク',slug:'network'},\n {text:'Docker',slug:'docker'},\n ]\n}\n",[52,4148,4149,4158,4168,4199,4229,4259,4266,4275,4305,4335,4364,4393,4422,4451,4480,4510,4540,4570,4600,4630,4659,4688,4718,4748,4778,4808,4813],{"__ignoreMap":54},[107,4150,4151,4154,4156],{"class":109,"line":110},[107,4152,4153],{"class":113},"module.exports",[107,4155,353],{"class":113},[107,4157,309],{"class":113},[107,4159,4160,4163,4165],{"class":109,"line":124},[107,4161,4162],{"class":117}," category",[107,4164,1410],{"class":113},[107,4166,4167],{"class":157},"[\n",[107,4169,4170,4173,4175,4177,4179,4182,4184,4186,4189,4191,4193,4195,4197],{"class":109,"line":145},[107,4171,4172],{"class":113}," {",[107,4174,50],{"class":117},[107,4176,1410],{"class":113},[107,4178,366],{"class":113},[107,4180,4181],{"class":192},"技術スタック",[107,4183,366],{"class":113},[107,4185,328],{"class":113},[107,4187,4188],{"class":117},"slug",[107,4190,1410],{"class":113},[107,4192,366],{"class":113},[107,4194,2244],{"class":192},[107,4196,366],{"class":113},[107,4198,3860],{"class":113},[107,4200,4201,4203,4205,4207,4209,4212,4214,4216,4218,4220,4222,4225,4227],{"class":109,"line":168},[107,4202,4172],{"class":113},[107,4204,50],{"class":117},[107,4206,1410],{"class":113},[107,4208,366],{"class":113},[107,4210,4211],{"class":192},"プログラミング学習",[107,4213,366],{"class":113},[107,4215,328],{"class":113},[107,4217,4188],{"class":117},[107,4219,1410],{"class":113},[107,4221,366],{"class":113},[107,4223,4224],{"class":192},"learning",[107,4226,366],{"class":113},[107,4228,3860],{"class":113},[107,4230,4231,4233,4235,4237,4239,4242,4244,4246,4248,4250,4252,4255,4257],{"class":109,"line":177},[107,4232,4172],{"class":113},[107,4234,50],{"class":117},[107,4236,1410],{"class":113},[107,4238,366],{"class":113},[107,4240,4241],{"class":192},"メモ",[107,4243,366],{"class":113},[107,4245,328],{"class":113},[107,4247,4188],{"class":117},[107,4249,1410],{"class":113},[107,4251,366],{"class":113},[107,4253,4254],{"class":192},"ministack",[107,4256,366],{"class":113},[107,4258,3860],{"class":113},[107,4260,4261,4264],{"class":109,"line":212},[107,4262,4263],{"class":157}," ]",[107,4265,499],{"class":113},[107,4267,4268,4271,4273],{"class":109,"line":244},[107,4269,4270],{"class":117}," tags",[107,4272,1410],{"class":113},[107,4274,4167],{"class":157},[107,4276,4277,4279,4281,4283,4285,4288,4290,4292,4294,4296,4298,4301,4303],{"class":109,"line":254},[107,4278,4172],{"class":113},[107,4280,50],{"class":117},[107,4282,1410],{"class":113},[107,4284,366],{"class":113},[107,4286,4287],{"class":192},"HTML",[107,4289,366],{"class":113},[107,4291,328],{"class":113},[107,4293,4188],{"class":117},[107,4295,1410],{"class":113},[107,4297,366],{"class":113},[107,4299,4300],{"class":192},"html",[107,4302,366],{"class":113},[107,4304,3860],{"class":113},[107,4306,4307,4309,4311,4313,4315,4318,4320,4322,4324,4326,4328,4331,4333],{"class":109,"line":263},[107,4308,4172],{"class":113},[107,4310,50],{"class":117},[107,4312,1410],{"class":113},[107,4314,366],{"class":113},[107,4316,4317],{"class":192},"CSS",[107,4319,366],{"class":113},[107,4321,328],{"class":113},[107,4323,4188],{"class":117},[107,4325,1410],{"class":113},[107,4327,366],{"class":113},[107,4329,4330],{"class":192},"css",[107,4332,366],{"class":113},[107,4334,3860],{"class":113},[107,4336,4337,4339,4341,4343,4345,4348,4350,4352,4354,4356,4358,4360,4362],{"class":109,"line":273},[107,4338,4172],{"class":113},[107,4340,50],{"class":117},[107,4342,1410],{"class":113},[107,4344,366],{"class":113},[107,4346,4347],{"class":192},"Javascript",[107,4349,366],{"class":113},[107,4351,328],{"class":113},[107,4353,4188],{"class":117},[107,4355,1410],{"class":113},[107,4357,366],{"class":113},[107,4359,2255],{"class":192},[107,4361,366],{"class":113},[107,4363,3860],{"class":113},[107,4365,4366,4368,4370,4372,4374,4377,4379,4381,4383,4385,4387,4389,4391],{"class":109,"line":282},[107,4367,4172],{"class":113},[107,4369,50],{"class":117},[107,4371,1410],{"class":113},[107,4373,366],{"class":113},[107,4375,4376],{"class":192},"jquery",[107,4378,366],{"class":113},[107,4380,328],{"class":113},[107,4382,4188],{"class":117},[107,4384,1410],{"class":113},[107,4386,366],{"class":113},[107,4388,4376],{"class":192},[107,4390,366],{"class":113},[107,4392,3860],{"class":113},[107,4394,4395,4397,4399,4401,4403,4406,4408,4410,4412,4414,4416,4418,4420],{"class":109,"line":289},[107,4396,4172],{"class":113},[107,4398,50],{"class":117},[107,4400,1410],{"class":113},[107,4402,366],{"class":113},[107,4404,4405],{"class":192},"Vue.js",[107,4407,366],{"class":113},[107,4409,328],{"class":113},[107,4411,4188],{"class":117},[107,4413,1410],{"class":113},[107,4415,366],{"class":113},[107,4417,103],{"class":192},[107,4419,366],{"class":113},[107,4421,3860],{"class":113},[107,4423,4424,4426,4428,4430,4432,4435,4437,4439,4441,4443,4445,4447,4449],{"class":109,"line":299},[107,4425,4172],{"class":113},[107,4427,50],{"class":117},[107,4429,1410],{"class":113},[107,4431,366],{"class":113},[107,4433,4434],{"class":192},"Nuxt.js",[107,4436,366],{"class":113},[107,4438,328],{"class":113},[107,4440,4188],{"class":117},[107,4442,1410],{"class":113},[107,4444,366],{"class":113},[107,4446,2256],{"class":192},[107,4448,366],{"class":113},[107,4450,3860],{"class":113},[107,4452,4453,4455,4457,4459,4461,4464,4466,4468,4470,4472,4474,4476,4478],{"class":109,"line":312},[107,4454,4172],{"class":113},[107,4456,50],{"class":117},[107,4458,1410],{"class":113},[107,4460,366],{"class":113},[107,4462,4463],{"class":192},"webpack",[107,4465,366],{"class":113},[107,4467,328],{"class":113},[107,4469,4188],{"class":117},[107,4471,1410],{"class":113},[107,4473,366],{"class":113},[107,4475,4463],{"class":192},[107,4477,366],{"class":113},[107,4479,3860],{"class":113},[107,4481,4482,4484,4486,4488,4490,4493,4495,4497,4499,4501,4503,4506,4508],{"class":109,"line":344},[107,4483,4172],{"class":113},[107,4485,50],{"class":117},[107,4487,1410],{"class":113},[107,4489,366],{"class":113},[107,4491,4492],{"class":192},"PHP",[107,4494,366],{"class":113},[107,4496,328],{"class":113},[107,4498,4188],{"class":117},[107,4500,1410],{"class":113},[107,4502,366],{"class":113},[107,4504,4505],{"class":192},"php",[107,4507,366],{"class":113},[107,4509,3860],{"class":113},[107,4511,4512,4514,4516,4518,4520,4523,4525,4527,4529,4531,4533,4536,4538],{"class":109,"line":376},[107,4513,4172],{"class":113},[107,4515,50],{"class":117},[107,4517,1410],{"class":113},[107,4519,366],{"class":113},[107,4521,4522],{"class":192},"Laravel",[107,4524,366],{"class":113},[107,4526,328],{"class":113},[107,4528,4188],{"class":117},[107,4530,1410],{"class":113},[107,4532,366],{"class":113},[107,4534,4535],{"class":192},"laravel",[107,4537,366],{"class":113},[107,4539,3860],{"class":113},[107,4541,4542,4544,4546,4548,4550,4553,4555,4557,4559,4561,4563,4566,4568],{"class":109,"line":407},[107,4543,4172],{"class":113},[107,4545,50],{"class":117},[107,4547,1410],{"class":113},[107,4549,366],{"class":113},[107,4551,4552],{"class":192},"Python",[107,4554,366],{"class":113},[107,4556,328],{"class":113},[107,4558,4188],{"class":117},[107,4560,1410],{"class":113},[107,4562,366],{"class":113},[107,4564,4565],{"class":192},"python",[107,4567,366],{"class":113},[107,4569,3860],{"class":113},[107,4571,4572,4574,4576,4578,4580,4583,4585,4587,4589,4591,4593,4596,4598],{"class":109,"line":436},[107,4573,4172],{"class":113},[107,4575,50],{"class":117},[107,4577,1410],{"class":113},[107,4579,366],{"class":113},[107,4581,4582],{"class":192},"Django",[107,4584,366],{"class":113},[107,4586,328],{"class":113},[107,4588,4188],{"class":117},[107,4590,1410],{"class":113},[107,4592,366],{"class":113},[107,4594,4595],{"class":192},"django",[107,4597,366],{"class":113},[107,4599,3860],{"class":113},[107,4601,4602,4604,4606,4608,4610,4613,4615,4617,4619,4621,4623,4626,4628],{"class":109,"line":466},[107,4603,4172],{"class":113},[107,4605,50],{"class":117},[107,4607,1410],{"class":113},[107,4609,366],{"class":113},[107,4611,4612],{"class":192},"HeadlessCMS",[107,4614,366],{"class":113},[107,4616,328],{"class":113},[107,4618,4188],{"class":117},[107,4620,1410],{"class":113},[107,4622,366],{"class":113},[107,4624,4625],{"class":192},"headlesscms",[107,4627,366],{"class":113},[107,4629,3860],{"class":113},[107,4631,4632,4634,4636,4638,4640,4643,4645,4647,4649,4651,4653,4655,4657],{"class":109,"line":480},[107,4633,4172],{"class":113},[107,4635,50],{"class":117},[107,4637,1410],{"class":113},[107,4639,366],{"class":113},[107,4641,4642],{"class":192},"wordpress",[107,4644,366],{"class":113},[107,4646,328],{"class":113},[107,4648,4188],{"class":117},[107,4650,1410],{"class":113},[107,4652,366],{"class":113},[107,4654,4642],{"class":192},[107,4656,366],{"class":113},[107,4658,3860],{"class":113},[107,4660,4661,4663,4665,4667,4669,4672,4674,4676,4678,4680,4682,4684,4686],{"class":109,"line":485},[107,4662,4172],{"class":113},[107,4664,50],{"class":117},[107,4666,1410],{"class":113},[107,4668,366],{"class":113},[107,4670,4671],{"class":192},"concrete5",[107,4673,366],{"class":113},[107,4675,328],{"class":113},[107,4677,4188],{"class":117},[107,4679,1410],{"class":113},[107,4681,366],{"class":113},[107,4683,4671],{"class":192},[107,4685,366],{"class":113},[107,4687,3860],{"class":113},[107,4689,4690,4692,4694,4696,4698,4701,4703,4705,4707,4709,4711,4714,4716],{"class":109,"line":493},[107,4691,4172],{"class":113},[107,4693,50],{"class":117},[107,4695,1410],{"class":113},[107,4697,366],{"class":113},[107,4699,4700],{"class":192},"ZOOM",[107,4702,366],{"class":113},[107,4704,328],{"class":113},[107,4706,4188],{"class":117},[107,4708,1410],{"class":113},[107,4710,366],{"class":113},[107,4712,4713],{"class":192},"zoom",[107,4715,366],{"class":113},[107,4717,3860],{"class":113},[107,4719,4720,4722,4724,4726,4728,4731,4733,4735,4737,4739,4741,4744,4746],{"class":109,"line":502},[107,4721,4172],{"class":113},[107,4723,50],{"class":117},[107,4725,1410],{"class":113},[107,4727,366],{"class":113},[107,4729,4730],{"class":192},"インフラ",[107,4732,366],{"class":113},[107,4734,328],{"class":113},[107,4736,4188],{"class":117},[107,4738,1410],{"class":113},[107,4740,366],{"class":113},[107,4742,4743],{"class":192},"infrastructure",[107,4745,366],{"class":113},[107,4747,3860],{"class":113},[107,4749,4750,4752,4754,4756,4758,4761,4763,4765,4767,4769,4771,4774,4776],{"class":109,"line":508},[107,4751,4172],{"class":113},[107,4753,50],{"class":117},[107,4755,1410],{"class":113},[107,4757,366],{"class":113},[107,4759,4760],{"class":192},"ネットワーク",[107,4762,366],{"class":113},[107,4764,328],{"class":113},[107,4766,4188],{"class":117},[107,4768,1410],{"class":113},[107,4770,366],{"class":113},[107,4772,4773],{"class":192},"network",[107,4775,366],{"class":113},[107,4777,3860],{"class":113},[107,4779,4780,4782,4784,4786,4788,4791,4793,4795,4797,4799,4801,4804,4806],{"class":109,"line":514},[107,4781,4172],{"class":113},[107,4783,50],{"class":117},[107,4785,1410],{"class":113},[107,4787,366],{"class":113},[107,4789,4790],{"class":192},"Docker",[107,4792,366],{"class":113},[107,4794,328],{"class":113},[107,4796,4188],{"class":117},[107,4798,1410],{"class":113},[107,4800,366],{"class":113},[107,4802,4803],{"class":192},"docker",[107,4805,366],{"class":113},[107,4807,3860],{"class":113},[107,4809,4810],{"class":109,"line":520},[107,4811,4812],{"class":157}," ]\n",[107,4814,4815],{"class":109,"line":1026},[107,4816,517],{"class":113},[11,4818,4819,4822],{},[52,4820,4821],{},"module export"," としているのは静的書き出しの際にこのファイルを使用するからです。そしてNuxtで制御しやすいようにStoreに入れておきます。このように管理する時、キー（スラグ）とラベル（カテゴリ名）を分けてオブジェクトにしておいた方が良いです。キーを使用することで重複を避けたり、そのままURLの一部として使用することも可能です。",[45,4824,4827],{"className":1905,"code":4825,"filename":4826,"language":1907,"meta":54,"style":54},"import taxonomy from '..\u002Ftaxonomy';\nexport const state = () => ({\n category:[\n ...taxonomy.category\n ],\n tags:[\n ...taxonomy.tags\n ]\n })\n\nexport const getters ={\n getTagTextBySlug(state){\n return (slug)=>{\n const idx = state.tags.findIndex(tag=>{\n return tag.slug === slug;\n })\n return (idx > -1)?state.tags[idx].text:undefined;\n }\n },\n getCategoryTextBySlug(state){\n return (slug)=>{\n const idx = state.category.findIndex(tag=>{\n return tag.slug === slug;\n })\n return (idx > -1)?state.category[idx].text:undefined;\n }\n }\n}\n","store\u002Findex.js",[52,4828,4829,4848,4869,4877,4890,4896,4904,4915,4919,4926,4930,4942,4954,4969,4999,5018,5025,5066,5070,5074,5085,5099,5125,5141,5147,5183,5187,5191],{"__ignoreMap":54},[107,4830,4831,4834,4837,4839,4841,4844,4846],{"class":109,"line":110},[107,4832,4833],{"class":302},"import",[107,4835,4836],{"class":157}," taxonomy ",[107,4838,1350],{"class":302},[107,4840,426],{"class":113},[107,4842,4843],{"class":192},"..\u002Ftaxonomy",[107,4845,366],{"class":113},[107,4847,477],{"class":113},[107,4849,4850,4852,4855,4858,4860,4863,4865,4867],{"class":109,"line":124},[107,4851,303],{"class":302},[107,4853,4854],{"class":133}," const",[107,4856,4857],{"class":157}," state ",[107,4859,137],{"class":113},[107,4861,4862],{"class":113}," ()",[107,4864,3812],{"class":133},[107,4866,1213],{"class":157},[107,4868,1556],{"class":113},[107,4870,4871,4873,4875],{"class":109,"line":145},[107,4872,4162],{"class":117},[107,4874,1410],{"class":113},[107,4876,4167],{"class":157},[107,4878,4879,4882,4885,4887],{"class":109,"line":168},[107,4880,4881],{"class":113}," ...",[107,4883,4884],{"class":157},"taxonomy",[107,4886,453],{"class":113},[107,4888,4889],{"class":157},"category\n",[107,4891,4892,4894],{"class":109,"line":177},[107,4893,4263],{"class":157},[107,4895,499],{"class":113},[107,4897,4898,4900,4902],{"class":109,"line":212},[107,4899,4270],{"class":117},[107,4901,1410],{"class":113},[107,4903,4167],{"class":157},[107,4905,4906,4908,4910,4912],{"class":109,"line":244},[107,4907,4881],{"class":113},[107,4909,4884],{"class":157},[107,4911,453],{"class":113},[107,4913,4914],{"class":157},"tags\n",[107,4916,4917],{"class":109,"line":254},[107,4918,4812],{"class":157},[107,4920,4921,4924],{"class":109,"line":263},[107,4922,4923],{"class":113}," }",[107,4925,373],{"class":157},[107,4927,4928],{"class":109,"line":273},[107,4929,286],{"emptyLinePlaceholder":285},[107,4931,4932,4934,4936,4939],{"class":109,"line":282},[107,4933,303],{"class":302},[107,4935,4854],{"class":133},[107,4937,4938],{"class":157}," getters ",[107,4940,4941],{"class":113},"={\n",[107,4943,4944,4947,4949,4951],{"class":109,"line":289},[107,4945,4946],{"class":117}," getTagTextBySlug",[107,4948,363],{"class":113},[107,4950,1160],{"class":324},[107,4952,4953],{"class":113},"){\n",[107,4955,4956,4958,4960,4962,4964,4967],{"class":109,"line":299},[107,4957,1010],{"class":302},[107,4959,1213],{"class":113},[107,4961,4188],{"class":324},[107,4963,450],{"class":113},[107,4965,4966],{"class":133},"=>",[107,4968,1556],{"class":113},[107,4970,4971,4974,4977,4979,4982,4984,4986,4988,4991,4993,4995,4997],{"class":109,"line":312},[107,4972,4973],{"class":133}," const",[107,4975,4976],{"class":157}," idx",[107,4978,353],{"class":113},[107,4980,4981],{"class":157}," state",[107,4983,453],{"class":113},[107,4985,4124],{"class":157},[107,4987,453],{"class":113},[107,4989,4990],{"class":359},"findIndex",[107,4992,363],{"class":117},[107,4994,4053],{"class":324},[107,4996,4966],{"class":133},[107,4998,1556],{"class":113},[107,5000,5001,5004,5007,5009,5011,5013,5016],{"class":109,"line":344},[107,5002,5003],{"class":302}," return",[107,5005,5006],{"class":157}," tag",[107,5008,453],{"class":113},[107,5010,4188],{"class":157},[107,5012,3822],{"class":113},[107,5014,5015],{"class":157}," slug",[107,5017,477],{"class":113},[107,5019,5020,5023],{"class":109,"line":376},[107,5021,5022],{"class":113}," }",[107,5024,373],{"class":117},[107,5026,5027,5029,5031,5034,5036,5038,5040,5042,5045,5047,5049,5051,5054,5056,5059,5061,5063],{"class":109,"line":407},[107,5028,1452],{"class":302},[107,5030,1213],{"class":117},[107,5032,5033],{"class":157},"idx",[107,5035,1131],{"class":113},[107,5037,1222],{"class":113},[107,5039,1532],{"class":446},[107,5041,450],{"class":117},[107,5043,5044],{"class":113},"?",[107,5046,1160],{"class":157},[107,5048,453],{"class":113},[107,5050,4124],{"class":157},[107,5052,5053],{"class":117},"[",[107,5055,5033],{"class":157},[107,5057,5058],{"class":117},"]",[107,5060,453],{"class":113},[107,5062,50],{"class":157},[107,5064,5065],{"class":113},":undefined;\n",[107,5067,5068],{"class":109,"line":436},[107,5069,1423],{"class":113},[107,5071,5072],{"class":109,"line":466},[107,5073,1029],{"class":113},[107,5075,5076,5079,5081,5083],{"class":109,"line":480},[107,5077,5078],{"class":117}," getCategoryTextBySlug",[107,5080,363],{"class":113},[107,5082,1160],{"class":324},[107,5084,4953],{"class":113},[107,5086,5087,5089,5091,5093,5095,5097],{"class":109,"line":485},[107,5088,1010],{"class":302},[107,5090,1213],{"class":113},[107,5092,4188],{"class":324},[107,5094,450],{"class":113},[107,5096,4966],{"class":133},[107,5098,1556],{"class":113},[107,5100,5101,5103,5105,5107,5109,5111,5113,5115,5117,5119,5121,5123],{"class":109,"line":493},[107,5102,4973],{"class":133},[107,5104,4976],{"class":157},[107,5106,353],{"class":113},[107,5108,4981],{"class":157},[107,5110,453],{"class":113},[107,5112,4038],{"class":157},[107,5114,453],{"class":113},[107,5116,4990],{"class":359},[107,5118,363],{"class":117},[107,5120,4053],{"class":324},[107,5122,4966],{"class":133},[107,5124,1556],{"class":113},[107,5126,5127,5129,5131,5133,5135,5137,5139],{"class":109,"line":502},[107,5128,5003],{"class":302},[107,5130,5006],{"class":157},[107,5132,453],{"class":113},[107,5134,4188],{"class":157},[107,5136,3822],{"class":113},[107,5138,5015],{"class":157},[107,5140,477],{"class":113},[107,5142,5143,5145],{"class":109,"line":508},[107,5144,5022],{"class":113},[107,5146,373],{"class":117},[107,5148,5149,5151,5153,5155,5157,5159,5161,5163,5165,5167,5169,5171,5173,5175,5177,5179,5181],{"class":109,"line":514},[107,5150,1452],{"class":302},[107,5152,1213],{"class":117},[107,5154,5033],{"class":157},[107,5156,1131],{"class":113},[107,5158,1222],{"class":113},[107,5160,1532],{"class":446},[107,5162,450],{"class":117},[107,5164,5044],{"class":113},[107,5166,1160],{"class":157},[107,5168,453],{"class":113},[107,5170,4038],{"class":157},[107,5172,5053],{"class":117},[107,5174,5033],{"class":157},[107,5176,5058],{"class":117},[107,5178,453],{"class":113},[107,5180,50],{"class":157},[107,5182,5065],{"class":113},[107,5184,5185],{"class":109,"line":520},[107,5186,1423],{"class":113},[107,5188,5189],{"class":109,"line":1026},[107,5190,505],{"class":113},[107,5192,5193],{"class":109,"line":1032},[107,5194,517],{"class":113},[11,5196,5197,5198,5201],{},"カテゴリー、タグはサイドメニューにあるようにバッチで表示しています。その時は以下のような",[52,5199,5200],{},"v-for","のコンポーネントで表示しています。",[45,5203,5205],{"className":100,"code":5204,"language":103,"meta":54,"style":54},"\u003Cdiv class=\"p-badge-container\">\n \u003Cnuxt-link class=\"c-tag-badge\" v-for=\"(t,index) in $store.state.category\" :key=\"'tag-'+index\" :to=\"'\u002Ftag\u002F'+t\">\n \u003Cspan>{{t.text}}\u003C\u002Fspan>\n \u003C\u002Fnuxt-link>\n\u003C\u002Fdiv>\n",[52,5206,5207,5226,5231,5236,5241],{"__ignoreMap":54},[107,5208,5209,5211,5213,5215,5217,5219,5222,5224],{"class":109,"line":110},[107,5210,114],{"class":113},[107,5212,130],{"class":117},[107,5214,134],{"class":133},[107,5216,137],{"class":113},[107,5218,189],{"class":113},[107,5220,5221],{"class":192},"p-badge-container",[107,5223,189],{"class":113},[107,5225,121],{"class":113},[107,5227,5228],{"class":109,"line":124},[107,5229,5230],{"class":157}," \u003Cnuxt-link class=\"c-tag-badge\" v-for=\"(t,index) in $store.state.category\" :key=\"'tag-'+index\" :to=\"'\u002Ftag\u002F'+t\">\n",[107,5232,5233],{"class":109,"line":145},[107,5234,5235],{"class":157}," \u003Cspan>{{t.text}}\u003C\u002Fspan>\n",[107,5237,5238],{"class":109,"line":168},[107,5239,5240],{"class":157}," \u003C\u002Fnuxt-link>\n",[107,5242,5243,5245,5247],{"class":109,"line":177},[107,5244,161],{"class":113},[107,5246,130],{"class":117},[107,5248,121],{"class":113},[11,5250,5251],{},"カテゴリー、タグを管理、使用、設定ができるようになりましたので、次はカテゴリー・タグ一覧を作成していきましょう。",[34,5253,5255],{"id":5254},"カテゴリータグ一覧ページのためのpages構成","カテゴリー、タグ一覧ページのためのpages構成",[11,5257,5258],{},"カテゴリーとタグ一覧ページの構成は互いに同じなので、タグ一覧だけ解説します。",[11,5260,5261,5262,5265],{},"タグ一覧はそのタグのバッチをクリックすると閲覧できるページです。そのタグがついた記事を全て見ることが可能です。そして",[52,5263,5264],{},"\u002Ftag\u002F{tag_key}","というURLでルーティングされています。",[11,5267,5268,5269,612],{},"そのようなルーティングを行うために以下のように",[52,5270,611],{},[45,5272,5275],{"className":5273,"code":5274,"language":50},[48],"pages\n└── tag\n └── _slug\n ├── index.vue\n └── page\n └── _id.vue\n",[52,5276,5274],{"__ignoreMap":54},[11,5278,5279,5280,5283],{},"こうすうることで",[52,5281,5282],{},"{tag_key}","という動的ルートに対応できます。またページングのためのページコンポーネントも作成しておきます。",[34,5285,5287],{"id":5286},"特定のタグを持つ投稿のみを取得する","特定のタグを持つ投稿のみを取得する。",[11,5289,90,5290,5293],{},[52,5291,5292],{},"\u002Ftag\u002F_slug\u002Findex.vue","の中身を見ていきましょう。",[45,5295,5298],{"className":1905,"code":5296,"filename":5297,"language":1907,"meta":54,"style":54},"export default {\n async asyncData({ store,$content, params }) {\n const count = await $content({ deep: true }).only('title').where({ tag:{ $contains:params.slug}}).fetch();\n\n const content = await $content({ deep: true })\n .only(['title','description','thumbnail','path','category','tag','updatedAt','series','index'])\n .sortBy('createdAt', 'desc')\n .where({tag:{ $contains:params.slug}}) \u002F\u002F ここ\n .skip(0).limit(store.state.indexPerPage)\n .fetch();\n\n return {\n` content,\n count:count.length`\n }\n },\n}\n","pages\u002Ftag\u002F_slug\u002Findex.vue",[52,5299,5300,5308,5330,5407,5411,5437,5518,5542,5573,5604,5614,5618,5624,5631,5639,5643,5647],{"__ignoreMap":54},[107,5301,5302,5304,5306],{"class":109,"line":110},[107,5303,303],{"class":302},[107,5305,306],{"class":302},[107,5307,309],{"class":113},[107,5309,5310,5312,5314,5316,5318,5320,5322,5324,5326,5328],{"class":109,"line":124},[107,5311,1035],{"class":133},[107,5313,318],{"class":117},[107,5315,321],{"class":113},[107,5317,325],{"class":324},[107,5319,328],{"class":113},[107,5321,331],{"class":324},[107,5323,328],{"class":113},[107,5325,336],{"class":324},[107,5327,339],{"class":113},[107,5329,309],{"class":113},[107,5331,5332,5334,5336,5338,5340,5342,5344,5346,5348,5350,5352,5354,5356,5358,5360,5362,5364,5366,5368,5370,5372,5374,5376,5378,5380,5383,5386,5388,5390,5392,5394,5397,5399,5401,5403,5405],{"class":109,"line":145},[107,5333,1059],{"class":133},[107,5335,1062],{"class":157},[107,5337,353],{"class":113},[107,5339,356],{"class":302},[107,5341,360],{"class":359},[107,5343,363],{"class":117},[107,5345,1603],{"class":113},[107,5347,3762],{"class":117},[107,5349,1410],{"class":113},[107,5351,1003],{"class":1002},[107,5353,3727],{"class":113},[107,5355,450],{"class":117},[107,5357,453],{"class":113},[107,5359,382],{"class":359},[107,5361,363],{"class":117},[107,5363,366],{"class":113},[107,5365,390],{"class":192},[107,5367,366],{"class":113},[107,5369,450],{"class":117},[107,5371,453],{"class":113},[107,5373,2537],{"class":359},[107,5375,363],{"class":117},[107,5377,1603],{"class":113},[107,5379,5006],{"class":117},[107,5381,5382],{"class":113},":{",[107,5384,5385],{"class":117}," $contains",[107,5387,1410],{"class":113},[107,5389,959],{"class":157},[107,5391,453],{"class":113},[107,5393,4188],{"class":157},[107,5395,5396],{"class":113},"}}",[107,5398,450],{"class":117},[107,5400,453],{"class":113},[107,5402,471],{"class":359},[107,5404,474],{"class":117},[107,5406,477],{"class":113},[107,5408,5409],{"class":109,"line":168},[107,5410,286],{"emptyLinePlaceholder":285},[107,5412,5413,5415,5417,5419,5421,5423,5425,5427,5429,5431,5433,5435],{"class":109,"line":177},[107,5414,1059],{"class":133},[107,5416,350],{"class":157},[107,5418,353],{"class":113},[107,5420,356],{"class":302},[107,5422,360],{"class":359},[107,5424,363],{"class":117},[107,5426,1603],{"class":113},[107,5428,3762],{"class":117},[107,5430,1410],{"class":113},[107,5432,1003],{"class":1002},[107,5434,3727],{"class":113},[107,5436,373],{"class":117},[107,5438,5439,5441,5443,5445,5447,5449,5451,5453,5455,5457,5459,5461,5463,5465,5467,5469,5471,5473,5475,5477,5479,5481,5483,5485,5487,5489,5491,5493,5495,5498,5500,5502,5504,5506,5508,5510,5512,5514,5516],{"class":109,"line":212},[107,5440,1293],{"class":113},[107,5442,382],{"class":359},[107,5444,385],{"class":117},[107,5446,366],{"class":113},[107,5448,390],{"class":192},[107,5450,366],{"class":113},[107,5452,328],{"class":113},[107,5454,366],{"class":113},[107,5456,4028],{"class":192},[107,5458,366],{"class":113},[107,5460,328],{"class":113},[107,5462,366],{"class":113},[107,5464,3210],{"class":192},[107,5466,366],{"class":113},[107,5468,328],{"class":113},[107,5470,366],{"class":113},[107,5472,399],{"class":192},[107,5474,366],{"class":113},[107,5476,328],{"class":113},[107,5478,366],{"class":113},[107,5480,4038],{"class":192},[107,5482,366],{"class":113},[107,5484,328],{"class":113},[107,5486,366],{"class":113},[107,5488,4053],{"class":192},[107,5490,366],{"class":113},[107,5492,328],{"class":113},[107,5494,366],{"class":113},[107,5496,5497],{"class":192},"updatedAt",[107,5499,366],{"class":113},[107,5501,328],{"class":113},[107,5503,366],{"class":113},[107,5505,4070],{"class":192},[107,5507,366],{"class":113},[107,5509,328],{"class":113},[107,5511,366],{"class":113},[107,5513,205],{"class":192},[107,5515,366],{"class":113},[107,5517,404],{"class":117},[107,5519,5520,5522,5524,5526,5528,5530,5532,5534,5536,5538,5540],{"class":109,"line":244},[107,5521,1293],{"class":113},[107,5523,412],{"class":359},[107,5525,363],{"class":117},[107,5527,366],{"class":113},[107,5529,419],{"class":192},[107,5531,366],{"class":113},[107,5533,328],{"class":113},[107,5535,426],{"class":113},[107,5537,429],{"class":192},[107,5539,366],{"class":113},[107,5541,373],{"class":117},[107,5543,5544,5546,5548,5550,5552,5554,5556,5558,5560,5562,5564,5566,5568,5570],{"class":109,"line":254},[107,5545,1293],{"class":113},[107,5547,2537],{"class":359},[107,5549,363],{"class":117},[107,5551,1603],{"class":113},[107,5553,4053],{"class":117},[107,5555,5382],{"class":113},[107,5557,5385],{"class":117},[107,5559,1410],{"class":113},[107,5561,959],{"class":157},[107,5563,453],{"class":113},[107,5565,4188],{"class":157},[107,5567,5396],{"class":113},[107,5569,1666],{"class":117},[107,5571,5572],{"class":2032},"\u002F\u002F ここ\n",[107,5574,5575,5577,5579,5581,5583,5585,5587,5589,5591,5594,5596,5598,5600,5602],{"class":109,"line":263},[107,5576,1293],{"class":113},[107,5578,441],{"class":359},[107,5580,363],{"class":117},[107,5582,447],{"class":446},[107,5584,450],{"class":117},[107,5586,453],{"class":113},[107,5588,456],{"class":359},[107,5590,363],{"class":117},[107,5592,5593],{"class":157},"store",[107,5595,453],{"class":113},[107,5597,1160],{"class":157},[107,5599,453],{"class":113},[107,5601,1165],{"class":157},[107,5603,373],{"class":117},[107,5605,5606,5608,5610,5612],{"class":109,"line":273},[107,5607,1293],{"class":113},[107,5609,471],{"class":359},[107,5611,474],{"class":117},[107,5613,477],{"class":113},[107,5615,5616],{"class":109,"line":282},[107,5617,286],{"emptyLinePlaceholder":285},[107,5619,5620,5622],{"class":109,"line":289},[107,5621,1010],{"class":302},[107,5623,309],{"class":113},[107,5625,5626,5628],{"class":109,"line":299},[107,5627,2843],{"class":113},[107,5629,5630],{"class":117}," content,\n",[107,5632,5633,5636],{"class":109,"line":312},[107,5634,5635],{"class":117}," count:count.length",[107,5637,5638],{"class":113},"`\n",[107,5640,5641],{"class":109,"line":344},[107,5642,1423],{"class":117},[107,5644,5645],{"class":109,"line":376},[107,5646,1029],{"class":117},[107,5648,5649],{"class":109,"line":407},[107,5650,517],{"class":117},[11,5652,5653,5654,5657,5658,587,5661,5664],{},"まずしっかりと記事のデータとして",[52,5655,5656],{},"'tag'","を指定して、",[52,5659,5660],{},".where({tag:{ $contains:params.slug}})",[52,5662,5663],{},"params.slug","からURLのスラグを取得して、それが配列内に含まれているかを確かめています。その条件に合致した投稿、すなわち目的のタグを持っている記事のみを取得することができます。",[11,5666,5667],{},"後は一覧ページの実装で説明した通りにテンプレートを記述するなり、ページングを実装すれば完了です。",[34,5669,5670],{"id":5670},"静的書き出しの時はどうなるのか",[11,5672,5673,5674,5676,5677,5679,5680,5682],{},"このカテゴリーのルートはNuxtが知らないので、nuxt.config.jsで追加ルートとして記述しておく必要があります。ただし、私のサイトのようにサイドメニューにずっとリンクがある場合はとくに対策はしなくてもいいです。Nuxtの静的書き出しは",[52,5675,218],{},"を辿ってルートを解決しているそうで、自動的にタグ・カテゴリーのルートを書き出してくれました。なので",[52,5678,218],{},"でタグのリンクを貼って、",[52,5681,611],{}," の構成が正しければ特に心配ありません。",[34,5684,5686],{"id":5685},"以上でカテゴリータグ機能を実装","以上でカテゴリー。タグ機能を実装",[11,5688,5689],{},"前回までの記事詳細→一覧の作成と似ていましたが、",[21,5691,5692,5695,5700],{},[24,5693,5694],{},"記事に新しいメタデータを設定",[24,5696,5697,5699],{},[52,5698,2528],{},"で特定のタグ・カテゴリーを取得する",[24,5701,5702],{},"store・外部ファイルで管理する",[11,5704,5705],{},"という点で少し違っていました。今回はカテゴリー・タグといったものですが使い方によってはいろんな分類方法があると思います。ぜひチャレンジしてみてください。次回は最後で、ブログとしてデプロイする前に設定すべきこと、アナリティクスやアドセンスの貼り方について解説します。",[2227,5707,5708],{},"html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}",{"title":54,"searchDepth":145,"depth":145,"links":5710},[5711,5712,5713,5714,5715,5716,5717],{"id":3986,"depth":124,"text":3986},{"id":3998,"depth":124,"text":3999},{"id":4135,"depth":124,"text":4136},{"id":5254,"depth":124,"text":5255},{"id":5286,"depth":124,"text":5287},{"id":5670,"depth":124,"text":5670},{"id":5685,"depth":124,"text":5686},[2244],"2021-05-09","Nuxt Content × SSG で作る静的ブログ。カテゴリーとタグ機能",{},"\u002Fseries\u002Fnuxt-content-blog-4",{"title":3971,"description":5720},"series\u002Fnuxt-content-blog-4",[2255,2256],"SRildu2cH6w8PGbcMmWirBzP0VR8lSIzk3eFtii40vY",1780987144865]