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