[{"data":1,"prerenderedAt":4031},["ShallowReactive",2],{"series-nuxt-content-blog-4":3},{"doc":4,"prev":1915,"next":1913},{"id":5,"title":6,"body":7,"category":1901,"createdAt":1902,"description":1903,"extension":1904,"index":92,"meta":1905,"navigation":1043,"path":1906,"publish":1043,"seo":1907,"series":1908,"seriesTitle":1909,"stem":1910,"tag":1911,"thumbnail":1912,"updatedAt":1913,"__hash__":1914},"series\u002Fseries\u002Fnuxt-content-blog-4.md","Nuxt Content × SSG で作る静的ブログ。４：カテゴリーとタグ機能",{"type":8,"value":9,"toc":1892},"minimark",[10,25,29,32,35,38,42,45,190,200,207,211,218,918,924,1325,1332,1386,1389,1393,1396,1403,1410,1417,1424,1428,1435,1828,1843,1846,1849,1862,1866,1869,1885,1888],[11,12,13,14,19,20,24],"p",{},"こんにちはjunです。",[15,16,18],"a",{"href":17},"\u002Fseries\u002Fnuxt-content-blog\u002F3","前回の記事","は詳細ページの実装と静的書き出しを行いました。今回の記事では ",[21,22,23],"strong",{},"カテゴリーとタグ機能","　について解説します。",[26,27,28],"h2",{"id":28},"カテゴリーとタグについて",[11,30,31],{},"まず最初にカテゴリーとタグ機能について念のため定義しておきます。基本的にはwordpressのものと概念は似ています。カテゴリーは基本的に記事に一つだけ設定して大まかな分類を行います。タグは記事に対して複数個設定できます。",[11,33,34],{},"機能としては上記の通りですが、記事がどんなコンテンツであるか整理されてリスト化されることでサイト訪問者がコンテンツを探しやすくなります。実際私のサイトもわかりやすくありませんか笑？",[11,36,37],{},"そのためブログを作るのならば、このカテゴリーとタグの機能はかなり重要です。それでは早速解説します。",[26,39,41],{"id":40},"各記事にカテゴリータグを設定する","各記事にカテゴリー・タグを設定する",[11,43,44],{},"Nuxt Contentはマークダウンで原稿を作成します。マークダウン上部には以下のような記事のメタデータを記述します。",[46,47,52],"pre",{"className":48,"code":49,"language":50,"meta":51,"style":51},"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","",[53,54,55,64,79,90,107,128,139,150,162,174,185],"code",{"__ignoreMap":51},[56,57,60],"span",{"class":58,"line":59},"line",1,[56,61,63],{"class":62},"s5Dmg","---\n",[56,65,67,71,75],{"class":58,"line":66},2,[56,68,70],{"class":69},"s-wAU","title",[56,72,74],{"class":73},"sAklC",":",[56,76,78],{"class":77},"sfyAc"," Nuxt Content × SSG で作る静的ブログ。４：カテゴリーとタグ機能\n",[56,80,82,85,87],{"class":58,"line":81},3,[56,83,84],{"class":69},"description",[56,86,74],{"class":73},[56,88,89],{"class":77}," Nuxt Content × SSG で作る静的ブログ。カテゴリーとタグ機能\n",[56,91,93,96,98,101,104],{"class":58,"line":92},4,[56,94,95],{"class":69},"category",[56,97,74],{"class":73},[56,99,100],{"class":73}," [",[56,102,103],{"class":77},"devstack",[56,105,106],{"class":73},"]\n",[56,108,110,113,115,117,120,123,126],{"class":58,"line":109},5,[56,111,112],{"class":69},"tag",[56,114,74],{"class":73},[56,116,100],{"class":73},[56,118,119],{"class":77},"js",[56,121,122],{"class":73},",",[56,124,125],{"class":77},"nuxt",[56,127,106],{"class":73},[56,129,131,134,136],{"class":58,"line":130},6,[56,132,133],{"class":69},"series",[56,135,74],{"class":73},[56,137,138],{"class":77}," nuxt-content-blog\n",[56,140,142,145,147],{"class":58,"line":141},7,[56,143,144],{"class":69},"seriesTitle",[56,146,74],{"class":73},[56,148,149],{"class":77}," Nuxt Content × SSG で作る静的ブログ。\n",[56,151,153,156,158],{"class":58,"line":152},8,[56,154,155],{"class":69},"index",[56,157,74],{"class":73},[56,159,161],{"class":160},"sx098"," 4\n",[56,163,165,168,170],{"class":58,"line":164},9,[56,166,167],{"class":69},"publish",[56,169,74],{"class":73},[56,171,173],{"class":172},"sbqyR"," true\n",[56,175,177,180,182],{"class":58,"line":176},10,[56,178,179],{"class":69},"thumbnail",[56,181,74],{"class":73},[56,183,184],{"class":77},"  _mix\u002Flogo-dark.jpg\n",[56,186,188],{"class":58,"line":187},11,[56,189,63],{"class":62},[11,191,192,193,195,196,199],{},"ここで設定する値は基本的に自由につけることができます。そしてこの例の",[53,194,95],{},"、",[53,197,198],{},"tags","に注目してみてください。各記事のカテゴリーとタグはここで定義されています。そして配列形式で設定します。このようにメタデータに配列で設定することで記事のカテゴリー・タグを配列で取得できます。配列なので複数個設定することができます。",[11,201,202,203,206],{},"この時気をつけたいのが、例えば",[53,204,205],{},"[開発スタック,メモ]","と日本語（ラベル）を入力するのでなく、プログラム的なキー・スラグで入力した方が良いです。理由は後述します。",[26,208,210],{"id":209},"カテゴリータグ設定ファイルを作成する","カテゴリー、タグ設定ファイルを作成する",[11,212,213,214,217],{},"プロジェクトルートに",[53,215,216],{},"taxonomy.js","というようなカテゴリー、タグを管理するファイルを作成します。中身は以下のようになっています。",[46,219,223],{"className":220,"code":221,"filename":216,"language":222,"meta":51,"style":51},"language-javascript shiki shiki-themes material-theme-ocean","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","javascript",[53,224,225,236,247,281,311,341,349,358,388,418,447,476,507,537,567,598,629,660,691,722,752,782,813,844,875,906,912],{"__ignoreMap":51},[56,226,227,230,233],{"class":58,"line":59},[56,228,229],{"class":73},"module.exports",[56,231,232],{"class":73}," =",[56,234,235],{"class":73}," {\n",[56,237,238,241,243],{"class":58,"line":66},[56,239,240],{"class":69},"    category",[56,242,74],{"class":73},[56,244,246],{"class":245},"s0W1g","[\n",[56,248,249,252,255,257,260,263,265,267,270,272,274,276,278],{"class":58,"line":81},[56,250,251],{"class":73},"        {",[56,253,254],{"class":69},"text",[56,256,74],{"class":73},[56,258,259],{"class":73},"'",[56,261,262],{"class":77},"技術スタック",[56,264,259],{"class":73},[56,266,122],{"class":73},[56,268,269],{"class":69},"slug",[56,271,74],{"class":73},[56,273,259],{"class":73},[56,275,103],{"class":77},[56,277,259],{"class":73},[56,279,280],{"class":73},"},\n",[56,282,283,285,287,289,291,294,296,298,300,302,304,307,309],{"class":58,"line":92},[56,284,251],{"class":73},[56,286,254],{"class":69},[56,288,74],{"class":73},[56,290,259],{"class":73},[56,292,293],{"class":77},"プログラミング学習",[56,295,259],{"class":73},[56,297,122],{"class":73},[56,299,269],{"class":69},[56,301,74],{"class":73},[56,303,259],{"class":73},[56,305,306],{"class":77},"learning",[56,308,259],{"class":73},[56,310,280],{"class":73},[56,312,313,315,317,319,321,324,326,328,330,332,334,337,339],{"class":58,"line":109},[56,314,251],{"class":73},[56,316,254],{"class":69},[56,318,74],{"class":73},[56,320,259],{"class":73},[56,322,323],{"class":77},"メモ",[56,325,259],{"class":73},[56,327,122],{"class":73},[56,329,269],{"class":69},[56,331,74],{"class":73},[56,333,259],{"class":73},[56,335,336],{"class":77},"ministack",[56,338,259],{"class":73},[56,340,280],{"class":73},[56,342,343,346],{"class":58,"line":130},[56,344,345],{"class":245},"    ]",[56,347,348],{"class":73},",\n",[56,350,351,354,356],{"class":58,"line":141},[56,352,353],{"class":69},"    tags",[56,355,74],{"class":73},[56,357,246],{"class":245},[56,359,360,362,364,366,368,371,373,375,377,379,381,384,386],{"class":58,"line":152},[56,361,251],{"class":73},[56,363,254],{"class":69},[56,365,74],{"class":73},[56,367,259],{"class":73},[56,369,370],{"class":77},"HTML",[56,372,259],{"class":73},[56,374,122],{"class":73},[56,376,269],{"class":69},[56,378,74],{"class":73},[56,380,259],{"class":73},[56,382,383],{"class":77},"html",[56,385,259],{"class":73},[56,387,280],{"class":73},[56,389,390,392,394,396,398,401,403,405,407,409,411,414,416],{"class":58,"line":164},[56,391,251],{"class":73},[56,393,254],{"class":69},[56,395,74],{"class":73},[56,397,259],{"class":73},[56,399,400],{"class":77},"CSS",[56,402,259],{"class":73},[56,404,122],{"class":73},[56,406,269],{"class":69},[56,408,74],{"class":73},[56,410,259],{"class":73},[56,412,413],{"class":77},"css",[56,415,259],{"class":73},[56,417,280],{"class":73},[56,419,420,422,424,426,428,431,433,435,437,439,441,443,445],{"class":58,"line":176},[56,421,251],{"class":73},[56,423,254],{"class":69},[56,425,74],{"class":73},[56,427,259],{"class":73},[56,429,430],{"class":77},"Javascript",[56,432,259],{"class":73},[56,434,122],{"class":73},[56,436,269],{"class":69},[56,438,74],{"class":73},[56,440,259],{"class":73},[56,442,119],{"class":77},[56,444,259],{"class":73},[56,446,280],{"class":73},[56,448,449,451,453,455,457,460,462,464,466,468,470,472,474],{"class":58,"line":187},[56,450,251],{"class":73},[56,452,254],{"class":69},[56,454,74],{"class":73},[56,456,259],{"class":73},[56,458,459],{"class":77},"jquery",[56,461,259],{"class":73},[56,463,122],{"class":73},[56,465,269],{"class":69},[56,467,74],{"class":73},[56,469,259],{"class":73},[56,471,459],{"class":77},[56,473,259],{"class":73},[56,475,280],{"class":73},[56,477,479,481,483,485,487,490,492,494,496,498,500,503,505],{"class":58,"line":478},12,[56,480,251],{"class":73},[56,482,254],{"class":69},[56,484,74],{"class":73},[56,486,259],{"class":73},[56,488,489],{"class":77},"Vue.js",[56,491,259],{"class":73},[56,493,122],{"class":73},[56,495,269],{"class":69},[56,497,74],{"class":73},[56,499,259],{"class":73},[56,501,502],{"class":77},"vue",[56,504,259],{"class":73},[56,506,280],{"class":73},[56,508,510,512,514,516,518,521,523,525,527,529,531,533,535],{"class":58,"line":509},13,[56,511,251],{"class":73},[56,513,254],{"class":69},[56,515,74],{"class":73},[56,517,259],{"class":73},[56,519,520],{"class":77},"Nuxt.js",[56,522,259],{"class":73},[56,524,122],{"class":73},[56,526,269],{"class":69},[56,528,74],{"class":73},[56,530,259],{"class":73},[56,532,125],{"class":77},[56,534,259],{"class":73},[56,536,280],{"class":73},[56,538,540,542,544,546,548,551,553,555,557,559,561,563,565],{"class":58,"line":539},14,[56,541,251],{"class":73},[56,543,254],{"class":69},[56,545,74],{"class":73},[56,547,259],{"class":73},[56,549,550],{"class":77},"webpack",[56,552,259],{"class":73},[56,554,122],{"class":73},[56,556,269],{"class":69},[56,558,74],{"class":73},[56,560,259],{"class":73},[56,562,550],{"class":77},[56,564,259],{"class":73},[56,566,280],{"class":73},[56,568,570,572,574,576,578,581,583,585,587,589,591,594,596],{"class":58,"line":569},15,[56,571,251],{"class":73},[56,573,254],{"class":69},[56,575,74],{"class":73},[56,577,259],{"class":73},[56,579,580],{"class":77},"PHP",[56,582,259],{"class":73},[56,584,122],{"class":73},[56,586,269],{"class":69},[56,588,74],{"class":73},[56,590,259],{"class":73},[56,592,593],{"class":77},"php",[56,595,259],{"class":73},[56,597,280],{"class":73},[56,599,601,603,605,607,609,612,614,616,618,620,622,625,627],{"class":58,"line":600},16,[56,602,251],{"class":73},[56,604,254],{"class":69},[56,606,74],{"class":73},[56,608,259],{"class":73},[56,610,611],{"class":77},"Laravel",[56,613,259],{"class":73},[56,615,122],{"class":73},[56,617,269],{"class":69},[56,619,74],{"class":73},[56,621,259],{"class":73},[56,623,624],{"class":77},"laravel",[56,626,259],{"class":73},[56,628,280],{"class":73},[56,630,632,634,636,638,640,643,645,647,649,651,653,656,658],{"class":58,"line":631},17,[56,633,251],{"class":73},[56,635,254],{"class":69},[56,637,74],{"class":73},[56,639,259],{"class":73},[56,641,642],{"class":77},"Python",[56,644,259],{"class":73},[56,646,122],{"class":73},[56,648,269],{"class":69},[56,650,74],{"class":73},[56,652,259],{"class":73},[56,654,655],{"class":77},"python",[56,657,259],{"class":73},[56,659,280],{"class":73},[56,661,663,665,667,669,671,674,676,678,680,682,684,687,689],{"class":58,"line":662},18,[56,664,251],{"class":73},[56,666,254],{"class":69},[56,668,74],{"class":73},[56,670,259],{"class":73},[56,672,673],{"class":77},"Django",[56,675,259],{"class":73},[56,677,122],{"class":73},[56,679,269],{"class":69},[56,681,74],{"class":73},[56,683,259],{"class":73},[56,685,686],{"class":77},"django",[56,688,259],{"class":73},[56,690,280],{"class":73},[56,692,694,696,698,700,702,705,707,709,711,713,715,718,720],{"class":58,"line":693},19,[56,695,251],{"class":73},[56,697,254],{"class":69},[56,699,74],{"class":73},[56,701,259],{"class":73},[56,703,704],{"class":77},"HeadlessCMS",[56,706,259],{"class":73},[56,708,122],{"class":73},[56,710,269],{"class":69},[56,712,74],{"class":73},[56,714,259],{"class":73},[56,716,717],{"class":77},"headlesscms",[56,719,259],{"class":73},[56,721,280],{"class":73},[56,723,725,727,729,731,733,736,738,740,742,744,746,748,750],{"class":58,"line":724},20,[56,726,251],{"class":73},[56,728,254],{"class":69},[56,730,74],{"class":73},[56,732,259],{"class":73},[56,734,735],{"class":77},"wordpress",[56,737,259],{"class":73},[56,739,122],{"class":73},[56,741,269],{"class":69},[56,743,74],{"class":73},[56,745,259],{"class":73},[56,747,735],{"class":77},[56,749,259],{"class":73},[56,751,280],{"class":73},[56,753,755,757,759,761,763,766,768,770,772,774,776,778,780],{"class":58,"line":754},21,[56,756,251],{"class":73},[56,758,254],{"class":69},[56,760,74],{"class":73},[56,762,259],{"class":73},[56,764,765],{"class":77},"concrete5",[56,767,259],{"class":73},[56,769,122],{"class":73},[56,771,269],{"class":69},[56,773,74],{"class":73},[56,775,259],{"class":73},[56,777,765],{"class":77},[56,779,259],{"class":73},[56,781,280],{"class":73},[56,783,785,787,789,791,793,796,798,800,802,804,806,809,811],{"class":58,"line":784},22,[56,786,251],{"class":73},[56,788,254],{"class":69},[56,790,74],{"class":73},[56,792,259],{"class":73},[56,794,795],{"class":77},"ZOOM",[56,797,259],{"class":73},[56,799,122],{"class":73},[56,801,269],{"class":69},[56,803,74],{"class":73},[56,805,259],{"class":73},[56,807,808],{"class":77},"zoom",[56,810,259],{"class":73},[56,812,280],{"class":73},[56,814,816,818,820,822,824,827,829,831,833,835,837,840,842],{"class":58,"line":815},23,[56,817,251],{"class":73},[56,819,254],{"class":69},[56,821,74],{"class":73},[56,823,259],{"class":73},[56,825,826],{"class":77},"インフラ",[56,828,259],{"class":73},[56,830,122],{"class":73},[56,832,269],{"class":69},[56,834,74],{"class":73},[56,836,259],{"class":73},[56,838,839],{"class":77},"infrastructure",[56,841,259],{"class":73},[56,843,280],{"class":73},[56,845,847,849,851,853,855,858,860,862,864,866,868,871,873],{"class":58,"line":846},24,[56,848,251],{"class":73},[56,850,254],{"class":69},[56,852,74],{"class":73},[56,854,259],{"class":73},[56,856,857],{"class":77},"ネットワーク",[56,859,259],{"class":73},[56,861,122],{"class":73},[56,863,269],{"class":69},[56,865,74],{"class":73},[56,867,259],{"class":73},[56,869,870],{"class":77},"network",[56,872,259],{"class":73},[56,874,280],{"class":73},[56,876,878,880,882,884,886,889,891,893,895,897,899,902,904],{"class":58,"line":877},25,[56,879,251],{"class":73},[56,881,254],{"class":69},[56,883,74],{"class":73},[56,885,259],{"class":73},[56,887,888],{"class":77},"Docker",[56,890,259],{"class":73},[56,892,122],{"class":73},[56,894,269],{"class":69},[56,896,74],{"class":73},[56,898,259],{"class":73},[56,900,901],{"class":77},"docker",[56,903,259],{"class":73},[56,905,280],{"class":73},[56,907,909],{"class":58,"line":908},26,[56,910,911],{"class":245},"    ]\n",[56,913,915],{"class":58,"line":914},27,[56,916,917],{"class":73},"}\n",[11,919,920,923],{},[53,921,922],{},"module export"," としているのは静的書き出しの際にこのファイルを使用するからです。そしてNuxtで制御しやすいようにStoreに入れておきます。このように管理する時、キー（スラグ）とラベル（カテゴリ名）を分けてオブジェクトにしておいた方が良いです。キーを使用することで重複を避けたり、そのままURLの一部として使用することも可能です。",[46,925,928],{"className":220,"code":926,"filename":927,"language":222,"meta":51,"style":51},"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",[53,929,930,953,980,988,1002,1008,1016,1027,1031,1039,1045,1057,1072,1089,1120,1140,1147,1192,1197,1202,1213,1227,1253,1269,1275,1311,1315,1320],{"__ignoreMap":51},[56,931,932,936,939,942,945,948,950],{"class":58,"line":59},[56,933,935],{"class":934},"s6cf3","import",[56,937,938],{"class":245}," taxonomy ",[56,940,941],{"class":934},"from",[56,943,944],{"class":73}," '",[56,946,947],{"class":77},"..\u002Ftaxonomy",[56,949,259],{"class":73},[56,951,952],{"class":73},";\n",[56,954,955,958,962,965,968,971,974,977],{"class":58,"line":66},[56,956,957],{"class":934},"export",[56,959,961],{"class":960},"sJ14y"," const",[56,963,964],{"class":245}," state ",[56,966,967],{"class":73},"=",[56,969,970],{"class":73}," ()",[56,972,973],{"class":960}," =>",[56,975,976],{"class":245}," (",[56,978,979],{"class":73},"{\n",[56,981,982,984,986],{"class":58,"line":81},[56,983,240],{"class":69},[56,985,74],{"class":73},[56,987,246],{"class":245},[56,989,990,993,996,999],{"class":58,"line":92},[56,991,992],{"class":73},"        ...",[56,994,995],{"class":245},"taxonomy",[56,997,998],{"class":73},".",[56,1000,1001],{"class":245},"category\n",[56,1003,1004,1006],{"class":58,"line":109},[56,1005,345],{"class":245},[56,1007,348],{"class":73},[56,1009,1010,1012,1014],{"class":58,"line":130},[56,1011,353],{"class":69},[56,1013,74],{"class":73},[56,1015,246],{"class":245},[56,1017,1018,1020,1022,1024],{"class":58,"line":141},[56,1019,992],{"class":73},[56,1021,995],{"class":245},[56,1023,998],{"class":73},[56,1025,1026],{"class":245},"tags\n",[56,1028,1029],{"class":58,"line":152},[56,1030,911],{"class":245},[56,1032,1033,1036],{"class":58,"line":164},[56,1034,1035],{"class":73},"  }",[56,1037,1038],{"class":245},")\n",[56,1040,1041],{"class":58,"line":176},[56,1042,1044],{"emptyLinePlaceholder":1043},true,"\n",[56,1046,1047,1049,1051,1054],{"class":58,"line":187},[56,1048,957],{"class":934},[56,1050,961],{"class":960},[56,1052,1053],{"class":245}," getters ",[56,1055,1056],{"class":73},"={\n",[56,1058,1059,1062,1065,1069],{"class":58,"line":478},[56,1060,1061],{"class":69},"    getTagTextBySlug",[56,1063,1064],{"class":73},"(",[56,1066,1068],{"class":1067},"s7ZW3","state",[56,1070,1071],{"class":73},"){\n",[56,1073,1074,1077,1079,1081,1084,1087],{"class":58,"line":509},[56,1075,1076],{"class":934},"        return",[56,1078,976],{"class":73},[56,1080,269],{"class":1067},[56,1082,1083],{"class":73},")",[56,1085,1086],{"class":960},"=>",[56,1088,979],{"class":73},[56,1090,1091,1094,1097,1099,1102,1104,1106,1108,1112,1114,1116,1118],{"class":58,"line":539},[56,1092,1093],{"class":960},"            const",[56,1095,1096],{"class":245}," idx",[56,1098,232],{"class":73},[56,1100,1101],{"class":245}," state",[56,1103,998],{"class":73},[56,1105,198],{"class":245},[56,1107,998],{"class":73},[56,1109,1111],{"class":1110},"sdLwU","findIndex",[56,1113,1064],{"class":69},[56,1115,112],{"class":1067},[56,1117,1086],{"class":960},[56,1119,979],{"class":73},[56,1121,1122,1125,1128,1130,1132,1135,1138],{"class":58,"line":569},[56,1123,1124],{"class":934},"                return",[56,1126,1127],{"class":245}," tag",[56,1129,998],{"class":73},[56,1131,269],{"class":245},[56,1133,1134],{"class":73}," ===",[56,1136,1137],{"class":245}," slug",[56,1139,952],{"class":73},[56,1141,1142,1145],{"class":58,"line":600},[56,1143,1144],{"class":73},"            }",[56,1146,1038],{"class":69},[56,1148,1149,1152,1154,1157,1160,1163,1166,1168,1171,1173,1175,1177,1180,1182,1185,1187,1189],{"class":58,"line":631},[56,1150,1151],{"class":934},"            return",[56,1153,976],{"class":69},[56,1155,1156],{"class":245},"idx",[56,1158,1159],{"class":73}," >",[56,1161,1162],{"class":73}," -",[56,1164,1165],{"class":160},"1",[56,1167,1083],{"class":69},[56,1169,1170],{"class":73},"?",[56,1172,1068],{"class":245},[56,1174,998],{"class":73},[56,1176,198],{"class":245},[56,1178,1179],{"class":69},"[",[56,1181,1156],{"class":245},[56,1183,1184],{"class":69},"]",[56,1186,998],{"class":73},[56,1188,254],{"class":245},[56,1190,1191],{"class":73},":undefined;\n",[56,1193,1194],{"class":58,"line":662},[56,1195,1196],{"class":73},"        }\n",[56,1198,1199],{"class":58,"line":693},[56,1200,1201],{"class":73},"    },\n",[56,1203,1204,1207,1209,1211],{"class":58,"line":724},[56,1205,1206],{"class":69},"    getCategoryTextBySlug",[56,1208,1064],{"class":73},[56,1210,1068],{"class":1067},[56,1212,1071],{"class":73},[56,1214,1215,1217,1219,1221,1223,1225],{"class":58,"line":754},[56,1216,1076],{"class":934},[56,1218,976],{"class":73},[56,1220,269],{"class":1067},[56,1222,1083],{"class":73},[56,1224,1086],{"class":960},[56,1226,979],{"class":73},[56,1228,1229,1231,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251],{"class":58,"line":784},[56,1230,1093],{"class":960},[56,1232,1096],{"class":245},[56,1234,232],{"class":73},[56,1236,1101],{"class":245},[56,1238,998],{"class":73},[56,1240,95],{"class":245},[56,1242,998],{"class":73},[56,1244,1111],{"class":1110},[56,1246,1064],{"class":69},[56,1248,112],{"class":1067},[56,1250,1086],{"class":960},[56,1252,979],{"class":73},[56,1254,1255,1257,1259,1261,1263,1265,1267],{"class":58,"line":815},[56,1256,1124],{"class":934},[56,1258,1127],{"class":245},[56,1260,998],{"class":73},[56,1262,269],{"class":245},[56,1264,1134],{"class":73},[56,1266,1137],{"class":245},[56,1268,952],{"class":73},[56,1270,1271,1273],{"class":58,"line":846},[56,1272,1144],{"class":73},[56,1274,1038],{"class":69},[56,1276,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309],{"class":58,"line":877},[56,1278,1151],{"class":934},[56,1280,976],{"class":69},[56,1282,1156],{"class":245},[56,1284,1159],{"class":73},[56,1286,1162],{"class":73},[56,1288,1165],{"class":160},[56,1290,1083],{"class":69},[56,1292,1170],{"class":73},[56,1294,1068],{"class":245},[56,1296,998],{"class":73},[56,1298,95],{"class":245},[56,1300,1179],{"class":69},[56,1302,1156],{"class":245},[56,1304,1184],{"class":69},[56,1306,998],{"class":73},[56,1308,254],{"class":245},[56,1310,1191],{"class":73},[56,1312,1313],{"class":58,"line":908},[56,1314,1196],{"class":73},[56,1316,1317],{"class":58,"line":914},[56,1318,1319],{"class":73},"    }\n",[56,1321,1323],{"class":58,"line":1322},28,[56,1324,917],{"class":73},[11,1326,1327,1328,1331],{},"カテゴリー、タグはサイドメニューにあるようにバッチで表示しています。その時は以下のような",[53,1329,1330],{},"v-for","のコンポーネントで表示しています。",[46,1333,1336],{"className":1334,"code":1335,"language":502,"meta":51,"style":51},"language-vue shiki shiki-themes material-theme-ocean","\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",[53,1337,1338,1362,1367,1372,1377],{"__ignoreMap":51},[56,1339,1340,1343,1346,1349,1351,1354,1357,1359],{"class":58,"line":59},[56,1341,1342],{"class":73},"\u003C",[56,1344,1345],{"class":69},"div",[56,1347,1348],{"class":960}," class",[56,1350,967],{"class":73},[56,1352,1353],{"class":73},"\"",[56,1355,1356],{"class":77},"p-badge-container",[56,1358,1353],{"class":73},[56,1360,1361],{"class":73},">\n",[56,1363,1364],{"class":58,"line":66},[56,1365,1366],{"class":245},"    \u003Cnuxt-link class=\"c-tag-badge\" v-for=\"(t,index) in $store.state.category\" :key=\"'tag-'+index\" :to=\"'\u002Ftag\u002F'+t\">\n",[56,1368,1369],{"class":58,"line":81},[56,1370,1371],{"class":245},"        \u003Cspan>{{t.text}}\u003C\u002Fspan>\n",[56,1373,1374],{"class":58,"line":92},[56,1375,1376],{"class":245},"    \u003C\u002Fnuxt-link>\n",[56,1378,1379,1382,1384],{"class":58,"line":109},[56,1380,1381],{"class":73},"\u003C\u002F",[56,1383,1345],{"class":69},[56,1385,1361],{"class":73},[11,1387,1388],{},"カテゴリー、タグを管理、使用、設定ができるようになりましたので、次はカテゴリー・タグ一覧を作成していきましょう。",[26,1390,1392],{"id":1391},"カテゴリータグ一覧ページのためのpages構成","カテゴリー、タグ一覧ページのためのpages構成",[11,1394,1395],{},"カテゴリーとタグ一覧ページの構成は互いに同じなので、タグ一覧だけ解説します。",[11,1397,1398,1399,1402],{},"タグ一覧はそのタグのバッチをクリックすると閲覧できるページです。そのタグがついた記事を全て見ることが可能です。そして",[53,1400,1401],{},"\u002Ftag\u002F{tag_key}","というURLでルーティングされています。",[11,1404,1405,1406,1409],{},"そのようなルーティングを行うために以下のように",[53,1407,1408],{},"pages\u002F","を設定します。",[46,1411,1415],{"className":1412,"code":1414,"language":254},[1413],"language-text","pages\n└── tag\n    └── _slug\n        ├── index.vue\n        └── page\n            └── _id.vue\n",[53,1416,1414],{"__ignoreMap":51},[11,1418,1419,1420,1423],{},"こうすうることで",[53,1421,1422],{},"{tag_key}","という動的ルートに対応できます。またページングのためのページコンポーネントも作成しておきます。",[26,1425,1427],{"id":1426},"特定のタグを持つ投稿のみを取得する","特定のタグを持つ投稿のみを取得する。",[11,1429,1430,1431,1434],{},"それでは",[53,1432,1433],{},"\u002Ftag\u002F_slug\u002Findex.vue","の中身を見ていきましょう。",[46,1436,1439],{"className":220,"code":1437,"filename":1438,"language":222,"meta":51,"style":51},"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",[53,1440,1441,1450,1479,1569,1573,1600,1685,1712,1745,1780,1790,1794,1800,1808,1816,1820,1824],{"__ignoreMap":51},[56,1442,1443,1445,1448],{"class":58,"line":59},[56,1444,957],{"class":934},[56,1446,1447],{"class":934}," default",[56,1449,235],{"class":73},[56,1451,1452,1455,1458,1461,1464,1466,1469,1471,1474,1477],{"class":58,"line":66},[56,1453,1454],{"class":960},"    async",[56,1456,1457],{"class":69}," asyncData",[56,1459,1460],{"class":73},"({",[56,1462,1463],{"class":1067}," store",[56,1465,122],{"class":73},[56,1467,1468],{"class":1067},"$content",[56,1470,122],{"class":73},[56,1472,1473],{"class":1067}," params",[56,1475,1476],{"class":73}," })",[56,1478,235],{"class":73},[56,1480,1481,1484,1487,1489,1492,1495,1497,1500,1503,1505,1508,1511,1513,1515,1518,1520,1522,1524,1526,1528,1530,1533,1535,1537,1539,1542,1545,1547,1550,1552,1554,1557,1559,1561,1564,1567],{"class":58,"line":81},[56,1482,1483],{"class":960},"        const",[56,1485,1486],{"class":245}," count",[56,1488,232],{"class":73},[56,1490,1491],{"class":934}," await",[56,1493,1494],{"class":1110}," $content",[56,1496,1064],{"class":69},[56,1498,1499],{"class":73},"{",[56,1501,1502],{"class":69}," deep",[56,1504,74],{"class":73},[56,1506,1507],{"class":172}," true",[56,1509,1510],{"class":73}," }",[56,1512,1083],{"class":69},[56,1514,998],{"class":73},[56,1516,1517],{"class":1110},"only",[56,1519,1064],{"class":69},[56,1521,259],{"class":73},[56,1523,70],{"class":77},[56,1525,259],{"class":73},[56,1527,1083],{"class":69},[56,1529,998],{"class":73},[56,1531,1532],{"class":1110},"where",[56,1534,1064],{"class":69},[56,1536,1499],{"class":73},[56,1538,1127],{"class":69},[56,1540,1541],{"class":73},":{",[56,1543,1544],{"class":69}," $contains",[56,1546,74],{"class":73},[56,1548,1549],{"class":245},"params",[56,1551,998],{"class":73},[56,1553,269],{"class":245},[56,1555,1556],{"class":73},"}}",[56,1558,1083],{"class":69},[56,1560,998],{"class":73},[56,1562,1563],{"class":1110},"fetch",[56,1565,1566],{"class":69},"()",[56,1568,952],{"class":73},[56,1570,1571],{"class":58,"line":92},[56,1572,1044],{"emptyLinePlaceholder":1043},[56,1574,1575,1577,1580,1582,1584,1586,1588,1590,1592,1594,1596,1598],{"class":58,"line":109},[56,1576,1483],{"class":960},[56,1578,1579],{"class":245}," content",[56,1581,232],{"class":73},[56,1583,1491],{"class":934},[56,1585,1494],{"class":1110},[56,1587,1064],{"class":69},[56,1589,1499],{"class":73},[56,1591,1502],{"class":69},[56,1593,74],{"class":73},[56,1595,1507],{"class":172},[56,1597,1510],{"class":73},[56,1599,1038],{"class":69},[56,1601,1602,1605,1607,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636,1639,1641,1643,1645,1647,1649,1651,1653,1655,1657,1659,1661,1664,1666,1668,1670,1672,1674,1676,1678,1680,1682],{"class":58,"line":130},[56,1603,1604],{"class":73},"        .",[56,1606,1517],{"class":1110},[56,1608,1609],{"class":69},"([",[56,1611,259],{"class":73},[56,1613,70],{"class":77},[56,1615,259],{"class":73},[56,1617,122],{"class":73},[56,1619,259],{"class":73},[56,1621,84],{"class":77},[56,1623,259],{"class":73},[56,1625,122],{"class":73},[56,1627,259],{"class":73},[56,1629,179],{"class":77},[56,1631,259],{"class":73},[56,1633,122],{"class":73},[56,1635,259],{"class":73},[56,1637,1638],{"class":77},"path",[56,1640,259],{"class":73},[56,1642,122],{"class":73},[56,1644,259],{"class":73},[56,1646,95],{"class":77},[56,1648,259],{"class":73},[56,1650,122],{"class":73},[56,1652,259],{"class":73},[56,1654,112],{"class":77},[56,1656,259],{"class":73},[56,1658,122],{"class":73},[56,1660,259],{"class":73},[56,1662,1663],{"class":77},"updatedAt",[56,1665,259],{"class":73},[56,1667,122],{"class":73},[56,1669,259],{"class":73},[56,1671,133],{"class":77},[56,1673,259],{"class":73},[56,1675,122],{"class":73},[56,1677,259],{"class":73},[56,1679,155],{"class":77},[56,1681,259],{"class":73},[56,1683,1684],{"class":69},"])\n",[56,1686,1687,1689,1692,1694,1696,1699,1701,1703,1705,1708,1710],{"class":58,"line":141},[56,1688,1604],{"class":73},[56,1690,1691],{"class":1110},"sortBy",[56,1693,1064],{"class":69},[56,1695,259],{"class":73},[56,1697,1698],{"class":77},"createdAt",[56,1700,259],{"class":73},[56,1702,122],{"class":73},[56,1704,944],{"class":73},[56,1706,1707],{"class":77},"desc",[56,1709,259],{"class":73},[56,1711,1038],{"class":69},[56,1713,1714,1716,1718,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1741],{"class":58,"line":152},[56,1715,1604],{"class":73},[56,1717,1532],{"class":1110},[56,1719,1064],{"class":69},[56,1721,1499],{"class":73},[56,1723,112],{"class":69},[56,1725,1541],{"class":73},[56,1727,1544],{"class":69},[56,1729,74],{"class":73},[56,1731,1549],{"class":245},[56,1733,998],{"class":73},[56,1735,269],{"class":245},[56,1737,1556],{"class":73},[56,1739,1740],{"class":69},") ",[56,1742,1744],{"class":1743},"sC9rS","\u002F\u002F ここ\n",[56,1746,1747,1749,1752,1754,1757,1759,1761,1764,1766,1769,1771,1773,1775,1778],{"class":58,"line":164},[56,1748,1604],{"class":73},[56,1750,1751],{"class":1110},"skip",[56,1753,1064],{"class":69},[56,1755,1756],{"class":160},"0",[56,1758,1083],{"class":69},[56,1760,998],{"class":73},[56,1762,1763],{"class":1110},"limit",[56,1765,1064],{"class":69},[56,1767,1768],{"class":245},"store",[56,1770,998],{"class":73},[56,1772,1068],{"class":245},[56,1774,998],{"class":73},[56,1776,1777],{"class":245},"indexPerPage",[56,1779,1038],{"class":69},[56,1781,1782,1784,1786,1788],{"class":58,"line":176},[56,1783,1604],{"class":73},[56,1785,1563],{"class":1110},[56,1787,1566],{"class":69},[56,1789,952],{"class":73},[56,1791,1792],{"class":58,"line":187},[56,1793,1044],{"emptyLinePlaceholder":1043},[56,1795,1796,1798],{"class":58,"line":478},[56,1797,1076],{"class":934},[56,1799,235],{"class":73},[56,1801,1802,1805],{"class":58,"line":509},[56,1803,1804],{"class":73},"`",[56,1806,1807],{"class":69},"        content,\n",[56,1809,1810,1813],{"class":58,"line":539},[56,1811,1812],{"class":69},"        count:count.length",[56,1814,1815],{"class":73},"`\n",[56,1817,1818],{"class":58,"line":569},[56,1819,1196],{"class":69},[56,1821,1822],{"class":58,"line":600},[56,1823,1201],{"class":69},[56,1825,1826],{"class":58,"line":631},[56,1827,917],{"class":69},[11,1829,1830,1831,1834,1835,1838,1839,1842],{},"まずしっかりと記事のデータとして",[53,1832,1833],{},"'tag'","を指定して、",[53,1836,1837],{},".where({tag:{ $contains:params.slug}})","を使用します。",[53,1840,1841],{},"params.slug","からURLのスラグを取得して、それが配列内に含まれているかを確かめています。その条件に合致した投稿、すなわち目的のタグを持っている記事のみを取得することができます。",[11,1844,1845],{},"後は一覧ページの実装で説明した通りにテンプレートを記述するなり、ページングを実装すれば完了です。",[26,1847,1848],{"id":1848},"静的書き出しの時はどうなるのか",[11,1850,1851,1852,1855,1856,1858,1859,1861],{},"このカテゴリーのルートはNuxtが知らないので、nuxt.config.jsで追加ルートとして記述しておく必要があります。ただし、私のサイトのようにサイドメニューにずっとリンクがある場合はとくに対策はしなくてもいいです。Nuxtの静的書き出しは",[53,1853,1854],{},"nuxt-link","を辿ってルートを解決しているそうで、自動的にタグ・カテゴリーのルートを書き出してくれました。なので",[53,1857,1854],{},"でタグのリンクを貼って、",[53,1860,1408],{}," の構成が正しければ特に心配ありません。",[26,1863,1865],{"id":1864},"以上でカテゴリータグ機能を実装","以上でカテゴリー。タグ機能を実装",[11,1867,1868],{},"前回までの記事詳細→一覧の作成と似ていましたが、",[1870,1871,1872,1876,1882],"ul",{},[1873,1874,1875],"li",{},"記事に新しいメタデータを設定",[1873,1877,1878,1881],{},[53,1879,1880],{},"where()","で特定のタグ・カテゴリーを取得する",[1873,1883,1884],{},"store・外部ファイルで管理する",[11,1886,1887],{},"という点で少し違っていました。今回はカテゴリー・タグといったものですが使い方によってはいろんな分類方法があると思います。ぜひチャレンジしてみてください。次回は最後で、ブログとしてデプロイする前に設定すべきこと、アナリティクスやアドセンスの貼り方について解説します。",[1889,1890,1891],"style",{},"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":51,"searchDepth":81,"depth":81,"links":1893},[1894,1895,1896,1897,1898,1899,1900],{"id":28,"depth":66,"text":28},{"id":40,"depth":66,"text":41},{"id":209,"depth":66,"text":210},{"id":1391,"depth":66,"text":1392},{"id":1426,"depth":66,"text":1427},{"id":1848,"depth":66,"text":1848},{"id":1864,"depth":66,"text":1865},[103],"2021-05-09","Nuxt Content × SSG で作る静的ブログ。カテゴリーとタグ機能","md",{},"\u002Fseries\u002Fnuxt-content-blog-4",{"title":6,"description":1903},"nuxt-content-blog","Nuxt Content × SSG で作る静的ブログ。","series\u002Fnuxt-content-blog-4",[119,125],"_mix\u002Flogo-dark.jpg",null,"SRildu2cH6w8PGbcMmWirBzP0VR8lSIzk3eFtii40vY",{"id":1916,"title":1917,"body":1918,"category":4022,"createdAt":4023,"description":4024,"extension":1904,"index":81,"meta":4025,"navigation":1043,"path":4026,"publish":1043,"seo":4027,"series":1908,"seriesTitle":1909,"stem":4028,"tag":4029,"thumbnail":1912,"updatedAt":1913,"__hash__":4030},"series\u002Fseries\u002Fnuxt-content-blog-3.md","Nuxt Content × SSG で作る静的ブログ。３：記事一覧ページとページング実装",{"type":8,"value":1919,"toc":4009},[1920,1926,1934,1937,1940,1944,1947,1953,1968,1974,1983,1986,1995,2337,2362,2376,2391,2405,2408,2411,2420,2426,2436,3656,3659,3663,3683,3686,3743,3748,3751,3754,3762,3765,3950,3955,3958,3963,3974,3977,3981,3991,3997,4000,4003,4006],[11,1921,13,1922,1925],{},[15,1923,18],{"href":1924},"\u002Fseries\u002Fnuxt-content-blog\u002F2","は詳細ページの実装と静的書き出しを行いました。今回の記事では",[1870,1927,1928,1931],{},[1873,1929,1930],{},"記事一覧ページの作成",[1873,1932,1933],{},"ページング機能",[11,1935,1936],{},"について解説していきます。それでは早速いきましょう。",[26,1938,1939],{"id":1939},"articlesの一覧ページを作る",[1941,1942,1943],"h3",{"id":1943},"pagesディレクトリを設定する",[11,1945,1946],{},"詳細ページのルーティングを作るために以前は以下のようなディレクトリの設定をしました。",[46,1948,1951],{"className":1949,"code":1950,"language":254},[1413],"├── pages\n│   ├── articles\n│   　   ├── _slug.vue\n",[53,1952,1950],{"__ignoreMap":51},[11,1954,1955,1956,1959,1960,1963,1964,1967],{},"この場合、",[53,1957,1958],{},"\u002Farticles\u002F{sulg}","というURLが有効になります。一覧ページは",[53,1961,1962],{},"\u002Farticles\u002F","というルートで",[53,1965,1966],{},"content\u002Farticles\u002F","配下の原稿が一覧となって見れるページです。しかし上記の設定では表示されないので以下のようにします。",[46,1969,1972],{"className":1970,"code":1971,"language":254},[1413],"├── pages\n│   ├── articles\n│   　   ├── index.vue #追加\n│   　   ├── _slug.vue\n",[53,1973,1971],{"__ignoreMap":51},[11,1975,1976,1979,1980,1982],{},[53,1977,1978],{},"index.vue","というものを足しました。このファイルは",[53,1981,1962],{},"というルートに対応しています。ディレクトリの設定は以上となります。",[1941,1984,1985],{"id":1985},"一覧のデータを取得してレンダーする",[11,1987,1430,1988,1990,1991,1994],{},[53,1989,1978],{},"にソースを書いていきましょう。詳細ページでは特定のパスに対応するコンテンツを取得していましたが、一覧ページでは",[53,1992,1993],{},"articles","のコンテンツを15件ほど取得するようにしましょう。とりあえずソースを載せます。",[46,1996,1999],{"className":1334,"code":1997,"filename":1998,"language":502,"meta":51,"style":51},"\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",[53,2000,2001,2010,2026,2046,2054,2085,2115,2124,2132,2141,2149,2153,2162,2170,2193,2216,2241,2265,2288,2298,2302,2309,2316,2320,2325,2329],{"__ignoreMap":51},[56,2002,2003,2005,2008],{"class":58,"line":59},[56,2004,1342],{"class":73},[56,2006,2007],{"class":69},"template",[56,2009,1361],{"class":73},[56,2011,2012,2015,2017,2019,2021,2024],{"class":58,"line":66},[56,2013,2014],{"class":73},"    \u003C",[56,2016,1345],{"class":69},[56,2018,1348],{"class":960},[56,2020,967],{"class":73},[56,2022,2023],{"class":73},"\"\"",[56,2025,1361],{"class":73},[56,2027,2028,2031,2034,2037,2040,2042,2044],{"class":58,"line":81},[56,2029,2030],{"class":73},"        \u003C",[56,2032,2033],{"class":69},"h1",[56,2035,2036],{"class":73},">",[56,2038,2039],{"class":245},"記事一覧",[56,2041,1381],{"class":73},[56,2043,2033],{"class":69},[56,2045,1361],{"class":73},[56,2047,2048,2050,2052],{"class":58,"line":92},[56,2049,2030],{"class":73},[56,2051,1870],{"class":69},[56,2053,1361],{"class":73},[56,2055,2056,2058,2060,2063,2065,2067,2070,2072,2075,2077,2079,2081,2083],{"class":58,"line":109},[56,2057,2030],{"class":73},[56,2059,1873],{"class":69},[56,2061,2062],{"class":960}," v-for",[56,2064,967],{"class":73},[56,2066,1353],{"class":73},[56,2068,2069],{"class":77},"(c,index) in content",[56,2071,1353],{"class":73},[56,2073,2074],{"class":960}," :key",[56,2076,967],{"class":73},[56,2078,1353],{"class":73},[56,2080,155],{"class":77},[56,2082,1353],{"class":73},[56,2084,1361],{"class":73},[56,2086,2087,2090,2092,2095,2097,2099,2102,2104,2106,2109,2111,2113],{"class":58,"line":130},[56,2088,2089],{"class":73},"            \u003C",[56,2091,1854],{"class":69},[56,2093,2094],{"class":960}," :to",[56,2096,967],{"class":73},[56,2098,1353],{"class":73},[56,2100,2101],{"class":77},"c.path",[56,2103,1353],{"class":73},[56,2105,2036],{"class":73},[56,2107,2108],{"class":245},"{{c.title}}",[56,2110,1381],{"class":73},[56,2112,1854],{"class":69},[56,2114,1361],{"class":73},[56,2116,2117,2120,2122],{"class":58,"line":141},[56,2118,2119],{"class":73},"        \u003C\u002F",[56,2121,1873],{"class":69},[56,2123,1361],{"class":73},[56,2125,2126,2128,2130],{"class":58,"line":152},[56,2127,2119],{"class":73},[56,2129,1870],{"class":69},[56,2131,1361],{"class":73},[56,2133,2134,2137,2139],{"class":58,"line":164},[56,2135,2136],{"class":73},"    \u003C\u002F",[56,2138,1345],{"class":69},[56,2140,1361],{"class":73},[56,2142,2143,2145,2147],{"class":58,"line":176},[56,2144,1381],{"class":73},[56,2146,2007],{"class":69},[56,2148,1361],{"class":73},[56,2150,2151],{"class":58,"line":187},[56,2152,1044],{"emptyLinePlaceholder":1043},[56,2154,2155,2157,2160],{"class":58,"line":478},[56,2156,1342],{"class":73},[56,2158,2159],{"class":69},"script",[56,2161,1361],{"class":73},[56,2163,2164,2166,2168],{"class":58,"line":509},[56,2165,957],{"class":934},[56,2167,1447],{"class":934},[56,2169,235],{"class":73},[56,2171,2172,2175,2177,2179,2181,2183,2185,2187,2189,2191],{"class":58,"line":539},[56,2173,2174],{"class":960},"  async",[56,2176,1457],{"class":69},[56,2178,1460],{"class":73},[56,2180,1463],{"class":1067},[56,2182,122],{"class":73},[56,2184,1468],{"class":1067},[56,2186,122],{"class":73},[56,2188,1473],{"class":1067},[56,2190,1476],{"class":73},[56,2192,235],{"class":73},[56,2194,2195,2198,2200,2202,2204,2206,2208,2210,2212,2214],{"class":58,"line":569},[56,2196,2197],{"class":960},"    const",[56,2199,1579],{"class":245},[56,2201,232],{"class":73},[56,2203,1491],{"class":934},[56,2205,1494],{"class":1110},[56,2207,1064],{"class":69},[56,2209,259],{"class":73},[56,2211,1993],{"class":77},[56,2213,259],{"class":73},[56,2215,1038],{"class":69},[56,2217,2218,2221,2223,2225,2227,2229,2231,2233,2235,2237,2239],{"class":58,"line":600},[56,2219,2220],{"class":73},"    .",[56,2222,1517],{"class":1110},[56,2224,1609],{"class":69},[56,2226,259],{"class":73},[56,2228,70],{"class":77},[56,2230,259],{"class":73},[56,2232,122],{"class":73},[56,2234,259],{"class":73},[56,2236,1638],{"class":77},[56,2238,259],{"class":73},[56,2240,1684],{"class":69},[56,2242,2243,2245,2247,2249,2251,2253,2255,2257,2259,2261,2263],{"class":58,"line":631},[56,2244,2220],{"class":73},[56,2246,1691],{"class":1110},[56,2248,1064],{"class":69},[56,2250,259],{"class":73},[56,2252,1698],{"class":77},[56,2254,259],{"class":73},[56,2256,122],{"class":73},[56,2258,944],{"class":73},[56,2260,1707],{"class":77},[56,2262,259],{"class":73},[56,2264,1038],{"class":69},[56,2266,2267,2269,2271,2273,2275,2277,2279,2281,2283,2286],{"class":58,"line":662},[56,2268,2220],{"class":73},[56,2270,1751],{"class":1110},[56,2272,1064],{"class":69},[56,2274,1756],{"class":160},[56,2276,1083],{"class":69},[56,2278,998],{"class":73},[56,2280,1763],{"class":1110},[56,2282,1064],{"class":69},[56,2284,2285],{"class":160},"15",[56,2287,1038],{"class":69},[56,2289,2290,2292,2294,2296],{"class":58,"line":693},[56,2291,2220],{"class":73},[56,2293,1563],{"class":1110},[56,2295,1566],{"class":69},[56,2297,952],{"class":73},[56,2299,2300],{"class":58,"line":724},[56,2301,1044],{"emptyLinePlaceholder":1043},[56,2303,2304,2307],{"class":58,"line":754},[56,2305,2306],{"class":934},"    return",[56,2308,235],{"class":73},[56,2310,2311,2314],{"class":58,"line":784},[56,2312,2313],{"class":245},"      content",[56,2315,348],{"class":73},[56,2317,2318],{"class":58,"line":815},[56,2319,1319],{"class":73},[56,2321,2322],{"class":58,"line":846},[56,2323,2324],{"class":73},"  }\n",[56,2326,2327],{"class":58,"line":877},[56,2328,917],{"class":73},[56,2330,2331,2333,2335],{"class":58,"line":908},[56,2332,1381],{"class":73},[56,2334,2159],{"class":69},[56,2336,1361],{"class":73},[11,2338,2339,2340,2343,2344,2346,2347,2350,2351,2354,2355,2358,2359,2361],{},"まずは",[53,2341,2342],{},"$content('articles')","で",[53,2345,1993],{},"配下のコンテンツを読む指定をします。そして",[53,2348,2349],{},".only(['title','path'])","を使用することでtitleとpathのみのデータを取得することができます。この",[53,2352,2353],{},"only()","を指定しない場合、",[53,2356,2357],{},"body","プロパティという原稿内容も取得してしまいます。原稿がボリューミーなほど取得コストが大きくなり、静的書き出しなどにも影響されます。そのため一覧などでは",[53,2360,2353],{},"を使用して必要最低限のプロパティを使用した方がいいです。",[11,2363,2364,2367,2368,2371,2372,2375],{},[53,2365,2366],{},"sortBy()","にて特定プロパティでソートし、後のページングで使いますが",[53,2369,2370],{},".skip(0).limit(15)","にて15件の記事を取得します。",[53,2373,2374],{},"asyncData()","内で記事を取得して、それをリストで出力します。",[1345,2377,2381,2384,2385,2390],{"className":2378},[2379,2380],"alert","alert-info",[53,2382,2383],{},"$content()","に対して加えることが可能なメソッドは",[15,2386,2389],{"href":2387,"target":2388},"https:\u002F\u002Fcontent.nuxtjs.org\u002Fja\u002Ffetching","_blank","こちら","で確認できます。\n",[11,2392,2393,2394,1838,2397,2400,2401,2404],{},"Nuxt.jsで内部リンクを作成する時は",[53,2395,2396],{},"\u003Cnuxt-link>",[53,2398,2399],{},"to","に",[53,2402,2403],{},"content.path","を指定することで詳細ページに移動できるようになります。",[11,2406,2407],{},"一覧ページはこれぐらいで実装できます。今は最初から15件しか取得しないので、大量にある時はページングができるようにしましょう。",[26,2409,2410],{"id":2410},"ページングを実装する",[11,2412,2413,2414,2417,2418,1409],{},"私のサイトでは",[53,2415,2416],{},"\u002Farticles\u002Fpage\u002F2","の様なルートで対応しています。この様なルートを設定する場合は以下のように",[53,2419,1408],{},[46,2421,2424],{"className":2422,"code":2423,"language":254},[1413],"├── pages\n│   ├── articles\n│   　   ├── index.vue \n│   　   ├── _slug.vue\n│   　   ├── pages          #追加\n│   　        ├──_id.vue    #追加\n",[53,2425,2423],{"__ignoreMap":51},[11,2427,2428,2431,2432,2435],{},[53,2429,2430],{},"_id.vue","を作成することで",[53,2433,2434],{},"\u002Farticles\u002Fpage\u002F{n}","という動的ルートが作成されます。そこでは以下のように設定します。",[46,2437,2440],{"className":1334,"code":2438,"filename":2439,"language":502,"meta":51,"style":51},"\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",[53,2441,2442,2450,2464,2480,2488,2516,2543,2552,2560,2579,2620,2663,2668,2677,2688,2692,2700,2708,2716,2724,2732,2736,2744,2752,2770,2810,2827,2831,2853,2898,2916,2977,2982,3022,3052,3057,3080,3105,3130,3153,3164,3169,3176,3184,3192,3207,3212,3217,3226,3235,3271,3277,3285,3301,3342,3373,3412,3420,3426,3473,3504,3511,3516,3567,3605,3612,3617,3623,3632,3637,3642,3647],{"__ignoreMap":51},[56,2443,2444,2446,2448],{"class":58,"line":59},[56,2445,1342],{"class":73},[56,2447,2007],{"class":69},[56,2449,1361],{"class":73},[56,2451,2452,2454,2456,2458,2460,2462],{"class":58,"line":66},[56,2453,2014],{"class":73},[56,2455,1345],{"class":69},[56,2457,1348],{"class":960},[56,2459,967],{"class":73},[56,2461,2023],{"class":73},[56,2463,1361],{"class":73},[56,2465,2466,2468,2470,2472,2474,2476,2478],{"class":58,"line":81},[56,2467,2030],{"class":73},[56,2469,2033],{"class":69},[56,2471,2036],{"class":73},[56,2473,2039],{"class":245},[56,2475,1381],{"class":73},[56,2477,2033],{"class":69},[56,2479,1361],{"class":73},[56,2481,2482,2484,2486],{"class":58,"line":92},[56,2483,2030],{"class":73},[56,2485,1870],{"class":69},[56,2487,1361],{"class":73},[56,2489,2490,2492,2494,2496,2498,2500,2502,2504,2506,2508,2510,2512,2514],{"class":58,"line":109},[56,2491,2089],{"class":73},[56,2493,1873],{"class":69},[56,2495,2062],{"class":960},[56,2497,967],{"class":73},[56,2499,1353],{"class":73},[56,2501,2069],{"class":77},[56,2503,1353],{"class":73},[56,2505,2074],{"class":960},[56,2507,967],{"class":73},[56,2509,1353],{"class":73},[56,2511,155],{"class":77},[56,2513,1353],{"class":73},[56,2515,1361],{"class":73},[56,2517,2518,2521,2523,2525,2527,2529,2531,2533,2535,2537,2539,2541],{"class":58,"line":130},[56,2519,2520],{"class":73},"                \u003C",[56,2522,1854],{"class":69},[56,2524,2094],{"class":960},[56,2526,967],{"class":73},[56,2528,1353],{"class":73},[56,2530,2101],{"class":77},[56,2532,1353],{"class":73},[56,2534,2036],{"class":73},[56,2536,2108],{"class":245},[56,2538,1381],{"class":73},[56,2540,1854],{"class":69},[56,2542,1361],{"class":73},[56,2544,2545,2548,2550],{"class":58,"line":141},[56,2546,2547],{"class":73},"            \u003C\u002F",[56,2549,1873],{"class":69},[56,2551,1361],{"class":73},[56,2553,2554,2556,2558],{"class":58,"line":152},[56,2555,2119],{"class":73},[56,2557,1870],{"class":69},[56,2559,1361],{"class":73},[56,2561,2562,2564,2566,2568,2570,2572,2575,2577],{"class":58,"line":164},[56,2563,2030],{"class":73},[56,2565,1870],{"class":69},[56,2567,1348],{"class":960},[56,2569,967],{"class":73},[56,2571,1353],{"class":73},[56,2573,2574],{"class":77},"p-pagenation-container",[56,2576,1353],{"class":73},[56,2578,1361],{"class":73},[56,2580,2581,2583,2585,2587,2589,2591,2594,2596,2598,2600,2602,2605,2607,2609,2611,2613,2616,2618],{"class":58,"line":176},[56,2582,2089],{"class":73},[56,2584,1873],{"class":69},[56,2586,1348],{"class":960},[56,2588,967],{"class":73},[56,2590,1353],{"class":73},[56,2592,2593],{"class":77},"c-pagenation-unit",[56,2595,1353],{"class":73},[56,2597,2062],{"class":960},[56,2599,967],{"class":73},[56,2601,1353],{"class":73},[56,2603,2604],{"class":77},"(pg) in num",[56,2606,1353],{"class":73},[56,2608,2074],{"class":960},[56,2610,967],{"class":73},[56,2612,1353],{"class":73},[56,2614,2615],{"class":77},"pg.num",[56,2617,1353],{"class":73},[56,2619,1361],{"class":73},[56,2621,2622,2624,2626,2629,2631,2633,2636,2638,2640,2642,2644,2647,2649,2652,2654,2656,2659,2661],{"class":58,"line":187},[56,2623,2520],{"class":73},[56,2625,1854],{"class":69},[56,2627,2628],{"class":960}," v-if",[56,2630,967],{"class":73},[56,2632,1353],{"class":73},[56,2634,2635],{"class":77},"pg.pg",[56,2637,1353],{"class":73},[56,2639,2094],{"class":960},[56,2641,967],{"class":73},[56,2643,1353],{"class":73},[56,2645,2646],{"class":77},"'\u002Farticles\u002Fpage\u002F'+pg.num",[56,2648,1353],{"class":73},[56,2650,2651],{"class":960}," :class",[56,2653,967],{"class":73},[56,2655,1353],{"class":73},[56,2657,2658],{"class":77},"(current == pg.num)?'is-current':''",[56,2660,1353],{"class":73},[56,2662,1361],{"class":73},[56,2664,2665],{"class":58,"line":478},[56,2666,2667],{"class":245},"                    {{pg.num}}\n",[56,2669,2670,2673,2675],{"class":58,"line":509},[56,2671,2672],{"class":73},"                \u003C\u002F",[56,2674,1854],{"class":69},[56,2676,1361],{"class":73},[56,2678,2679,2681,2683,2686],{"class":58,"line":539},[56,2680,2520],{"class":73},[56,2682,56],{"class":69},[56,2684,2685],{"class":960}," v-else",[56,2687,1361],{"class":73},[56,2689,2690],{"class":58,"line":569},[56,2691,2667],{"class":245},[56,2693,2694,2696,2698],{"class":58,"line":600},[56,2695,2672],{"class":73},[56,2697,56],{"class":69},[56,2699,1361],{"class":73},[56,2701,2702,2704,2706],{"class":58,"line":631},[56,2703,2547],{"class":73},[56,2705,1873],{"class":69},[56,2707,1361],{"class":73},[56,2709,2710,2712,2714],{"class":58,"line":662},[56,2711,2119],{"class":73},[56,2713,1870],{"class":69},[56,2715,1361],{"class":73},[56,2717,2718,2720,2722],{"class":58,"line":693},[56,2719,2136],{"class":73},[56,2721,1345],{"class":69},[56,2723,1361],{"class":73},[56,2725,2726,2728,2730],{"class":58,"line":724},[56,2727,1381],{"class":73},[56,2729,2007],{"class":69},[56,2731,1361],{"class":73},[56,2733,2734],{"class":58,"line":754},[56,2735,1044],{"emptyLinePlaceholder":1043},[56,2737,2738,2740,2742],{"class":58,"line":784},[56,2739,1342],{"class":73},[56,2741,2159],{"class":69},[56,2743,1361],{"class":73},[56,2745,2746,2748,2750],{"class":58,"line":815},[56,2747,957],{"class":934},[56,2749,1447],{"class":934},[56,2751,235],{"class":73},[56,2753,2754,2757,2759,2762,2764,2766,2768],{"class":58,"line":846},[56,2755,2756],{"class":69},"    validate",[56,2758,1460],{"class":73},[56,2760,2761],{"class":1067}," redirect",[56,2763,122],{"class":73},[56,2765,1549],{"class":1067},[56,2767,1476],{"class":73},[56,2769,235],{"class":73},[56,2771,2772,2775,2777,2780,2783,2786,2788,2791,2793,2795,2797,2800,2803,2806,2808],{"class":58,"line":877},[56,2773,2774],{"class":934},"        if",[56,2776,1064],{"class":69},[56,2778,2779],{"class":73},"\u002F[",[56,2781,2782],{"class":77},"0-9",[56,2784,2785],{"class":73},"]+\u002F",[56,2787,998],{"class":73},[56,2789,2790],{"class":1110},"test",[56,2792,1064],{"class":69},[56,2794,1549],{"class":245},[56,2796,998],{"class":73},[56,2798,2799],{"class":245},"id",[56,2801,2802],{"class":69},")) ",[56,2804,2805],{"class":934},"return",[56,2807,1507],{"class":172},[56,2809,952],{"class":73},[56,2811,2812,2814,2816,2818,2820,2823,2825],{"class":58,"line":908},[56,2813,1076],{"class":934},[56,2815,2761],{"class":1110},[56,2817,1064],{"class":69},[56,2819,259],{"class":73},[56,2821,2822],{"class":77},"\u002Farticles",[56,2824,259],{"class":73},[56,2826,1038],{"class":69},[56,2828,2829],{"class":58,"line":914},[56,2830,1201],{"class":73},[56,2832,2833,2835,2837,2839,2841,2843,2845,2847,2849,2851],{"class":58,"line":1322},[56,2834,1454],{"class":960},[56,2836,1457],{"class":69},[56,2838,1460],{"class":73},[56,2840,1463],{"class":1067},[56,2842,122],{"class":73},[56,2844,1468],{"class":1067},[56,2846,122],{"class":73},[56,2848,1473],{"class":1067},[56,2850,1476],{"class":73},[56,2852,235],{"class":73},[56,2854,2856,2858,2860,2862,2864,2866,2868,2870,2872,2874,2876,2878,2880,2882,2884,2886,2888,2890,2892,2894,2896],{"class":58,"line":2855},29,[56,2857,1483],{"class":960},[56,2859,1486],{"class":245},[56,2861,232],{"class":73},[56,2863,1491],{"class":934},[56,2865,1494],{"class":1110},[56,2867,1064],{"class":69},[56,2869,259],{"class":73},[56,2871,1993],{"class":77},[56,2873,259],{"class":73},[56,2875,1083],{"class":69},[56,2877,998],{"class":73},[56,2879,1517],{"class":1110},[56,2881,1064],{"class":69},[56,2883,259],{"class":73},[56,2885,70],{"class":77},[56,2887,259],{"class":73},[56,2889,1083],{"class":69},[56,2891,998],{"class":73},[56,2893,1563],{"class":1110},[56,2895,1566],{"class":69},[56,2897,952],{"class":73},[56,2899,2901,2903,2906,2908,2910,2912,2914],{"class":58,"line":2900},30,[56,2902,1483],{"class":960},[56,2904,2905],{"class":245}," current",[56,2907,232],{"class":73},[56,2909,1473],{"class":245},[56,2911,998],{"class":73},[56,2913,2799],{"class":245},[56,2915,952],{"class":73},[56,2917,2919,2921,2923,2926,2928,2931,2933,2936,2939,2942,2944,2947,2950,2952,2954,2956,2958,2960,2962,2965,2967,2969,2971,2973,2975],{"class":58,"line":2918},31,[56,2920,2774],{"class":934},[56,2922,1064],{"class":69},[56,2924,2925],{"class":245},"current",[56,2927,1159],{"class":73},[56,2929,2930],{"class":245}," Math",[56,2932,998],{"class":73},[56,2934,2935],{"class":1110},"ceil",[56,2937,2938],{"class":69},"( ",[56,2940,2941],{"class":245},"count",[56,2943,998],{"class":73},[56,2945,2946],{"class":245},"length",[56,2948,2949],{"class":73}," \u002F",[56,2951,1463],{"class":245},[56,2953,998],{"class":73},[56,2955,1068],{"class":245},[56,2957,998],{"class":73},[56,2959,1777],{"class":245},[56,2961,2802],{"class":69},[56,2963,2964],{"class":1110},"redirect",[56,2966,1064],{"class":69},[56,2968,259],{"class":73},[56,2970,2822],{"class":77},[56,2972,259],{"class":73},[56,2974,1083],{"class":69},[56,2976,952],{"class":73},[56,2978,2980],{"class":58,"line":2979},32,[56,2981,1044],{"emptyLinePlaceholder":1043},[56,2983,2985,2987,2990,2992,2994,2996,2998,3000,3002,3005,3007,3009,3011,3013,3015,3018,3020],{"class":58,"line":2984},33,[56,2986,1483],{"class":960},[56,2988,2989],{"class":245}," from",[56,2991,232],{"class":73},[56,2993,1463],{"class":245},[56,2995,998],{"class":73},[56,2997,1068],{"class":245},[56,2999,998],{"class":73},[56,3001,1777],{"class":245},[56,3003,3004],{"class":73}," *",[56,3006,976],{"class":69},[56,3008,1549],{"class":245},[56,3010,998],{"class":73},[56,3012,2799],{"class":245},[56,3014,1162],{"class":73},[56,3016,3017],{"class":160}," 1",[56,3019,1083],{"class":69},[56,3021,952],{"class":73},[56,3023,3025,3027,3030,3032,3034,3036,3038,3040,3042,3044,3046,3048,3050],{"class":58,"line":3024},34,[56,3026,1483],{"class":960},[56,3028,3029],{"class":245}," to",[56,3031,232],{"class":73},[56,3033,1463],{"class":245},[56,3035,998],{"class":73},[56,3037,1068],{"class":245},[56,3039,998],{"class":73},[56,3041,1777],{"class":245},[56,3043,3004],{"class":73},[56,3045,1473],{"class":245},[56,3047,998],{"class":73},[56,3049,2799],{"class":245},[56,3051,952],{"class":73},[56,3053,3055],{"class":58,"line":3054},35,[56,3056,1044],{"emptyLinePlaceholder":1043},[56,3058,3060,3062,3064,3066,3068,3070,3072,3074,3076,3078],{"class":58,"line":3059},36,[56,3061,1483],{"class":960},[56,3063,1579],{"class":245},[56,3065,232],{"class":73},[56,3067,1491],{"class":934},[56,3069,1494],{"class":1110},[56,3071,1064],{"class":69},[56,3073,259],{"class":73},[56,3075,1993],{"class":77},[56,3077,259],{"class":73},[56,3079,1038],{"class":69},[56,3081,3083,3085,3087,3089,3091,3093,3095,3097,3099,3101,3103],{"class":58,"line":3082},37,[56,3084,1604],{"class":73},[56,3086,1517],{"class":1110},[56,3088,1609],{"class":69},[56,3090,259],{"class":73},[56,3092,70],{"class":77},[56,3094,259],{"class":73},[56,3096,122],{"class":73},[56,3098,259],{"class":73},[56,3100,1638],{"class":77},[56,3102,259],{"class":73},[56,3104,1684],{"class":69},[56,3106,3108,3110,3112,3114,3116,3118,3120,3122,3124,3126,3128],{"class":58,"line":3107},38,[56,3109,1604],{"class":73},[56,3111,1691],{"class":1110},[56,3113,1064],{"class":69},[56,3115,259],{"class":73},[56,3117,1698],{"class":77},[56,3119,259],{"class":73},[56,3121,122],{"class":73},[56,3123,944],{"class":73},[56,3125,1707],{"class":77},[56,3127,259],{"class":73},[56,3129,1038],{"class":69},[56,3131,3133,3135,3137,3139,3141,3143,3145,3147,3149,3151],{"class":58,"line":3132},39,[56,3134,1604],{"class":73},[56,3136,1751],{"class":1110},[56,3138,1064],{"class":69},[56,3140,941],{"class":245},[56,3142,1083],{"class":69},[56,3144,998],{"class":73},[56,3146,1763],{"class":1110},[56,3148,1064],{"class":69},[56,3150,2399],{"class":245},[56,3152,1038],{"class":69},[56,3154,3156,3158,3160,3162],{"class":58,"line":3155},40,[56,3157,1604],{"class":73},[56,3159,1563],{"class":1110},[56,3161,1566],{"class":69},[56,3163,952],{"class":73},[56,3165,3167],{"class":58,"line":3166},41,[56,3168,1044],{"emptyLinePlaceholder":1043},[56,3170,3172,3174],{"class":58,"line":3171},42,[56,3173,1076],{"class":934},[56,3175,235],{"class":73},[56,3177,3179,3182],{"class":58,"line":3178},43,[56,3180,3181],{"class":245},"            content",[56,3183,348],{"class":73},[56,3185,3187,3190],{"class":58,"line":3186},44,[56,3188,3189],{"class":245},"            current",[56,3191,348],{"class":73},[56,3193,3195,3198,3200,3202,3204],{"class":58,"line":3194},45,[56,3196,3197],{"class":69},"            count",[56,3199,74],{"class":73},[56,3201,2941],{"class":245},[56,3203,998],{"class":73},[56,3205,3206],{"class":245},"length\n",[56,3208,3210],{"class":58,"line":3209},46,[56,3211,1196],{"class":73},[56,3213,3215],{"class":58,"line":3214},47,[56,3216,1201],{"class":73},[56,3218,3220,3223],{"class":58,"line":3219},48,[56,3221,3222],{"class":69},"    computed",[56,3224,3225],{"class":73},":{\n",[56,3227,3229,3232],{"class":58,"line":3228},49,[56,3230,3231],{"class":69},"        max",[56,3233,3234],{"class":73},"(){\n",[56,3236,3238,3240,3242,3244,3246,3248,3251,3254,3256,3258,3260,3262,3264,3267,3269],{"class":58,"line":3237},50,[56,3239,1151],{"class":934},[56,3241,2930],{"class":245},[56,3243,998],{"class":73},[56,3245,2935],{"class":1110},[56,3247,2938],{"class":69},[56,3249,3250],{"class":73},"this.",[56,3252,3253],{"class":245},"$route",[56,3255,998],{"class":73},[56,3257,1549],{"class":245},[56,3259,998],{"class":73},[56,3261,2799],{"class":245},[56,3263,2949],{"class":73},[56,3265,3266],{"class":160}," 15",[56,3268,1083],{"class":69},[56,3270,952],{"class":73},[56,3272,3274],{"class":58,"line":3273},51,[56,3275,3276],{"class":73},"        },\n",[56,3278,3280,3283],{"class":58,"line":3279},52,[56,3281,3282],{"class":69},"        num",[56,3284,3234],{"class":73},[56,3286,3288,3291,3294,3296,3299],{"class":58,"line":3287},53,[56,3289,3290],{"class":960},"            let",[56,3292,3293],{"class":245}," tmp",[56,3295,232],{"class":73},[56,3297,3298],{"class":69}," []",[56,3300,952],{"class":73},[56,3302,3304,3307,3309,3312,3315,3317,3319,3322,3324,3327,3330,3332,3335,3338,3340],{"class":58,"line":3303},54,[56,3305,3306],{"class":934},"            for",[56,3308,1064],{"class":69},[56,3310,3311],{"class":960},"let",[56,3313,3314],{"class":245}," n",[56,3316,967],{"class":73},[56,3318,1165],{"class":160},[56,3320,3321],{"class":73},";",[56,3323,3314],{"class":245},[56,3325,3326],{"class":73},"\u003C=this.",[56,3328,3329],{"class":245},"max",[56,3331,3321],{"class":73},[56,3333,3334],{"class":245},"n",[56,3336,3337],{"class":73},"++",[56,3339,1083],{"class":69},[56,3341,979],{"class":73},[56,3343,3345,3348,3350,3352,3355,3357,3360,3362,3364,3367,3369,3371],{"class":58,"line":3344},55,[56,3346,3347],{"class":934},"                if",[56,3349,1064],{"class":69},[56,3351,3334],{"class":245},[56,3353,3354],{"class":73}," ==",[56,3356,3017],{"class":160},[56,3358,3359],{"class":73}," ||",[56,3361,3314],{"class":245},[56,3363,3354],{"class":73},[56,3365,3366],{"class":73}," this.",[56,3368,3329],{"class":245},[56,3370,1083],{"class":69},[56,3372,979],{"class":73},[56,3374,3376,3379,3381,3384,3386,3388,3391,3393,3396,3398,3401,3403,3405,3408,3410],{"class":58,"line":3375},56,[56,3377,3378],{"class":245},"                    tmp",[56,3380,998],{"class":73},[56,3382,3383],{"class":1110},"push",[56,3385,1064],{"class":69},[56,3387,1499],{"class":73},[56,3389,3390],{"class":69},"pg",[56,3392,74],{"class":73},[56,3394,3395],{"class":172},"true",[56,3397,122],{"class":73},[56,3399,3400],{"class":69},"num",[56,3402,74],{"class":73},[56,3404,3334],{"class":245},[56,3406,3407],{"class":73},"}",[56,3409,1083],{"class":69},[56,3411,952],{"class":73},[56,3413,3415,3418],{"class":58,"line":3414},57,[56,3416,3417],{"class":934},"                    continue",[56,3419,952],{"class":73},[56,3421,3423],{"class":58,"line":3422},58,[56,3424,3425],{"class":73},"                }\n",[56,3427,3429,3431,3434,3436,3438,3440,3443,3446,3448,3450,3453,3455,3457,3459,3461,3463,3466,3468,3471],{"class":58,"line":3428},59,[56,3430,3347],{"class":934},[56,3432,3433],{"class":69},"((",[56,3435,3250],{"class":73},[56,3437,2925],{"class":245},[56,3439,1162],{"class":73},[56,3441,3442],{"class":160}," 2",[56,3444,3445],{"class":73}," \u003C=",[56,3447,3314],{"class":245},[56,3449,1740],{"class":69},[56,3451,3452],{"class":73},"&&",[56,3454,976],{"class":69},[56,3456,3334],{"class":245},[56,3458,3445],{"class":73},[56,3460,3366],{"class":73},[56,3462,2925],{"class":245},[56,3464,3465],{"class":73}," +",[56,3467,3442],{"class":160},[56,3469,3470],{"class":69},"))",[56,3472,979],{"class":73},[56,3474,3476,3478,3480,3482,3484,3486,3488,3490,3492,3494,3496,3498,3500,3502],{"class":58,"line":3475},60,[56,3477,3378],{"class":245},[56,3479,998],{"class":73},[56,3481,3383],{"class":1110},[56,3483,1064],{"class":69},[56,3485,1499],{"class":73},[56,3487,3390],{"class":69},[56,3489,74],{"class":73},[56,3491,3395],{"class":172},[56,3493,122],{"class":73},[56,3495,3400],{"class":69},[56,3497,74],{"class":73},[56,3499,3334],{"class":245},[56,3501,3407],{"class":73},[56,3503,1038],{"class":69},[56,3505,3507,3509],{"class":58,"line":3506},61,[56,3508,3417],{"class":934},[56,3510,952],{"class":73},[56,3512,3514],{"class":58,"line":3513},62,[56,3515,3425],{"class":73},[56,3517,3519,3521,3523,3525,3527,3529,3531,3533,3535,3537,3539,3541,3544,3546,3548,3550,3552,3554,3556,3558,3560,3562,3565],{"class":58,"line":3518},63,[56,3520,3347],{"class":934},[56,3522,3433],{"class":69},[56,3524,3250],{"class":73},[56,3526,2925],{"class":245},[56,3528,1162],{"class":73},[56,3530,3442],{"class":160},[56,3532,1162],{"class":73},[56,3534,3017],{"class":160},[56,3536,3354],{"class":73},[56,3538,3314],{"class":245},[56,3540,1740],{"class":69},[56,3542,3543],{"class":73},"||",[56,3545,976],{"class":69},[56,3547,3334],{"class":245},[56,3549,3354],{"class":73},[56,3551,3366],{"class":73},[56,3553,2925],{"class":245},[56,3555,3465],{"class":73},[56,3557,3442],{"class":160},[56,3559,3465],{"class":73},[56,3561,3017],{"class":160},[56,3563,3564],{"class":69},") )",[56,3566,979],{"class":73},[56,3568,3570,3573,3575,3577,3579,3581,3583,3585,3588,3590,3592,3594,3596,3599,3601,3603],{"class":58,"line":3569},64,[56,3571,3572],{"class":245},"                   tmp",[56,3574,998],{"class":73},[56,3576,3383],{"class":1110},[56,3578,1064],{"class":69},[56,3580,1499],{"class":73},[56,3582,3390],{"class":69},[56,3584,74],{"class":73},[56,3586,3587],{"class":172},"false",[56,3589,122],{"class":73},[56,3591,3400],{"class":69},[56,3593,74],{"class":73},[56,3595,1353],{"class":73},[56,3597,3598],{"class":77},"...",[56,3600,1353],{"class":73},[56,3602,3407],{"class":73},[56,3604,1038],{"class":69},[56,3606,3608,3610],{"class":58,"line":3607},65,[56,3609,3417],{"class":934},[56,3611,952],{"class":73},[56,3613,3615],{"class":58,"line":3614},66,[56,3616,3425],{"class":73},[56,3618,3620],{"class":58,"line":3619},67,[56,3621,3622],{"class":73},"            }\n",[56,3624,3626,3628,3630],{"class":58,"line":3625},68,[56,3627,1151],{"class":934},[56,3629,3293],{"class":245},[56,3631,952],{"class":73},[56,3633,3635],{"class":58,"line":3634},69,[56,3636,1196],{"class":73},[56,3638,3640],{"class":58,"line":3639},70,[56,3641,1201],{"class":73},[56,3643,3645],{"class":58,"line":3644},71,[56,3646,917],{"class":73},[56,3648,3650,3652,3654],{"class":58,"line":3649},72,[56,3651,1381],{"class":73},[56,3653,2159],{"class":69},[56,3655,1361],{"class":73},[11,3657,3658],{},"詳細を解説します。",[1941,3660,3662],{"id":3661},"idの値とページ数をチェック","{id}の値とページ数をチェック",[11,3664,3665,3668,3669,3672,3673,3676,3677,2343,3680,3682],{},[53,3666,3667],{},"\u002Farciles\u002Fpage\u002F{id}","において",[53,3670,3671],{},"{id}","が数値のみ許可するようにします。そこでNuxt SSRでは",[53,3674,3675],{},"validate()","というものを使用できます。",[53,3678,3679],{},"params.id",[53,3681,3671],{},"の値が取得できますので、そこで数値であることを確認します。もしそうでなければ、１ページ目にリダイレクトさせます。",[11,3684,3685],{},"数値であっても提供するページを超えた数を指定されては困ります。その時のために{id}のページ数が存在するかをチェックしておきます。もし存在しなければ１ページ目にリダイレクトさせます。",[46,3687,3689],{"className":220,"code":3688,"language":222,"meta":51,"style":51},"if(current > Math.ceil( count.length \u002F store.state.indexPerPage)) redirect('\u002Farticles');\n",[53,3690,3691],{"__ignoreMap":51},[56,3692,3693,3696,3699,3701,3703,3705,3707,3710,3712,3715,3718,3720,3722,3724,3726,3729,3731,3733,3735,3737,3739,3741],{"class":58,"line":59},[56,3694,3695],{"class":934},"if",[56,3697,3698],{"class":245},"(current ",[56,3700,2036],{"class":73},[56,3702,2930],{"class":245},[56,3704,998],{"class":73},[56,3706,2935],{"class":1110},[56,3708,3709],{"class":245},"( count",[56,3711,998],{"class":73},[56,3713,3714],{"class":245},"length ",[56,3716,3717],{"class":73},"\u002F",[56,3719,1463],{"class":245},[56,3721,998],{"class":73},[56,3723,1068],{"class":245},[56,3725,998],{"class":73},[56,3727,3728],{"class":245},"indexPerPage)) ",[56,3730,2964],{"class":1110},[56,3732,1064],{"class":245},[56,3734,259],{"class":73},[56,3736,2822],{"class":77},[56,3738,259],{"class":73},[56,3740,1083],{"class":245},[56,3742,952],{"class":73},[1345,3744,3747],{"className":3745},[2379,3746],"alert-warning","\nSSRであれば上記の設定は必須ですが、静的書き出しでは正直入りません。なぜなら静的書き出し時にはこのページング分だけのルートしか提供されないためです。静的HTMLで提供する時は存在しないルートにアクセスした時、404のページにリダイレクトさせておくといいです。\n",[1941,3749,3750],{"id":3750},"ページングに必要な値を取得する",[11,3752,3753],{},"これはページングを実装するために必要なロジックのな話になるので、一部省略しますが必要な値は",[1870,3755,3756,3759],{},[1873,3757,3758],{},"何件目から(from)",[1873,3760,3761],{},"何件目まで(to)",[11,3763,3764],{},"が必要となります。ソースでは以下のように使用しています。",[46,3766,3768],{"className":220,"code":3767,"language":222,"meta":51,"style":51},"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",[53,3769,3770,3814,3846,3850,3873,3897,3921,3940],{"__ignoreMap":51},[56,3771,3772,3775,3778,3780,3782,3784,3786,3788,3791,3794,3797,3799,3802,3805,3807,3809,3811],{"class":58,"line":59},[56,3773,3774],{"class":960},"const",[56,3776,3777],{"class":245}," from ",[56,3779,967],{"class":73},[56,3781,1463],{"class":245},[56,3783,998],{"class":73},[56,3785,1068],{"class":245},[56,3787,998],{"class":73},[56,3789,3790],{"class":245},"indexPerPage ",[56,3792,3793],{"class":73},"*",[56,3795,3796],{"class":245}," (params",[56,3798,998],{"class":73},[56,3800,3801],{"class":245},"id ",[56,3803,3804],{"class":73},"-",[56,3806,3017],{"class":160},[56,3808,1083],{"class":245},[56,3810,3321],{"class":73},[56,3812,3813],{"class":1743},"     \u002F\u002F何件目から\n",[56,3815,3816,3818,3821,3823,3825,3827,3829,3831,3833,3835,3837,3839,3841,3843],{"class":58,"line":66},[56,3817,3774],{"class":960},[56,3819,3820],{"class":245}," to ",[56,3822,967],{"class":73},[56,3824,1463],{"class":245},[56,3826,998],{"class":73},[56,3828,1068],{"class":245},[56,3830,998],{"class":73},[56,3832,3790],{"class":245},[56,3834,3793],{"class":73},[56,3836,1473],{"class":245},[56,3838,998],{"class":73},[56,3840,2799],{"class":245},[56,3842,3321],{"class":73},[56,3844,3845],{"class":1743},"             \u002F\u002F何件目まで\n",[56,3847,3848],{"class":58,"line":81},[56,3849,1044],{"emptyLinePlaceholder":1043},[56,3851,3852,3854,3857,3859,3861,3863,3865,3867,3869,3871],{"class":58,"line":92},[56,3853,3774],{"class":960},[56,3855,3856],{"class":245}," content ",[56,3858,967],{"class":73},[56,3860,1491],{"class":934},[56,3862,1494],{"class":1110},[56,3864,1064],{"class":245},[56,3866,259],{"class":73},[56,3868,1993],{"class":77},[56,3870,259],{"class":73},[56,3872,1038],{"class":245},[56,3874,3875,3877,3879,3881,3883,3885,3887,3889,3891,3893,3895],{"class":58,"line":109},[56,3876,998],{"class":73},[56,3878,1517],{"class":1110},[56,3880,1609],{"class":245},[56,3882,259],{"class":73},[56,3884,70],{"class":77},[56,3886,259],{"class":73},[56,3888,122],{"class":73},[56,3890,259],{"class":73},[56,3892,1638],{"class":77},[56,3894,259],{"class":73},[56,3896,1684],{"class":245},[56,3898,3899,3901,3903,3905,3907,3909,3911,3913,3915,3917,3919],{"class":58,"line":130},[56,3900,998],{"class":73},[56,3902,1691],{"class":1110},[56,3904,1064],{"class":245},[56,3906,259],{"class":73},[56,3908,1698],{"class":77},[56,3910,259],{"class":73},[56,3912,122],{"class":73},[56,3914,944],{"class":73},[56,3916,1707],{"class":77},[56,3918,259],{"class":73},[56,3920,1038],{"class":245},[56,3922,3923,3925,3927,3930,3932,3934,3937],{"class":58,"line":141},[56,3924,998],{"class":73},[56,3926,1751],{"class":1110},[56,3928,3929],{"class":245},"(from)",[56,3931,998],{"class":73},[56,3933,1763],{"class":1110},[56,3935,3936],{"class":245},"(to)   ",[56,3938,3939],{"class":1743},"\u002F\u002F ページング取得\n",[56,3941,3942,3944,3946,3948],{"class":58,"line":152},[56,3943,998],{"class":73},[56,3945,1563],{"class":1110},[56,3947,1566],{"class":245},[56,3949,952],{"class":73},[11,3951,3952,3954],{},[53,3953,3679],{},"が現在のページ数となっていますので、それを参考にしてページングによるコンテンツ取得をします。",[1941,3956,3957],{"id":3957},"最大ページと表示ページ範囲を設定してレンダーする",[11,3959,3960,3962],{},[53,3961,2374],{},"での設定は以上でOKです。params.idから現在ページ数を用いてページングのレンダーを構築します。私のページングでは",[1870,3964,3965,3968,3971],{},[1873,3966,3967],{},"１ページ目と最後のページは常に表示",[1873,3969,3970],{},"現在ページから2ページ分だけ表示",[1873,3972,3973],{},"範囲外のページは「...」で表示する",[11,3975,3976],{},"という仕様で実装されています。詳細な仕組みは上記のソースをみてください。必要分のページのリンクを作成してページングは完成です。",[26,3978,3980],{"id":3979},"静的書き出しの際には特に気にせず大丈夫","静的書き出しの際には特に気にせず大丈夫。",[11,3982,3983,3984,3987,3988,3990],{},"ページングの設定して次は静的書き出しを行います。ただし前回のようにルートをnuxtに伝えるということは不要です。どうやら",[53,3985,3986],{},"\u002Farticles\u002Findex","を書き出す時にページングの",[53,3989,1854],{},"を辿ってルートを解決してくれているそうです。実際の書き出しでも",[46,3992,3995],{"className":3993,"code":3994,"language":254},[1413],"✔ Generated route \"\u002Farticles\u002Fpage\n✔ Generated route \"\u002Farticles\u002Fpage\u002F1\" \n✔ Generated route \"\u002Farticles\u002Fpage\u002F2\" \n",[53,3996,3994],{"__ignoreMap":51},[11,3998,3999],{},"以上のようなログが確認できました。",[26,4001,4002],{"id":4002},"次回は",[11,4004,4005],{},"以上で一覧ページの作成とページングが実装終了しました。ページングとページリストはコンポーネント化しておいた方が後々の開発が楽になります。次回はカテゴリーとタグ機能の解説を行います。",[1889,4007,4008],{},"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":51,"searchDepth":81,"depth":81,"links":4010},[4011,4015,4020,4021],{"id":1939,"depth":66,"text":1939,"children":4012},[4013,4014],{"id":1943,"depth":81,"text":1943},{"id":1985,"depth":81,"text":1985},{"id":2410,"depth":66,"text":2410,"children":4016},[4017,4018,4019],{"id":3661,"depth":81,"text":3662},{"id":3750,"depth":81,"text":3750},{"id":3957,"depth":81,"text":3957},{"id":3979,"depth":66,"text":3980},{"id":4002,"depth":66,"text":4002},[103],"2021-05-06","Nuxt Content × SSG で作る静的ブログ。記事一覧ページとページング機能ついて説明。",{},"\u002Fseries\u002Fnuxt-content-blog-3",{"title":1917,"description":4024},"series\u002Fnuxt-content-blog-3",[119,125],"A6PomFr-zdk_yRRjUN1XT-Qhy330_OwrjwFmZaj63C8",1780987144859]