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