[{"data":1,"prerenderedAt":2698},["ShallowReactive",2],{"content-\u002Fcontents\u002Flist-nuxt":3,"surroundPost-\u002Fcontents\u002Flist-nuxt":2689},{"id":4,"title":5,"body":6,"createdAt":2677,"description":2678,"draft":2679,"extension":376,"meta":2680,"navigation":423,"path":2681,"seo":2682,"stem":2683,"tags":2684,"thumbnail":2687,"updatedAt":2677,"__hash__":2688},"contents\u002Fcontents\u002Flist-nuxt.md","Nuxt Content v2でリスト、タグページやページングを実現する方法",{"type":7,"value":8,"toc":2665},"minimark",[9,13,16,33,38,41,77,80,85,91,94,138,141,149,155,361,364,369,372,440,444,447,457,460,472,475,482,486,501,504,507,511,514,521,599,609,631,634,642,1147,1152,1155,1158,1297,1311,1317,1320,1323,1330,1398,1405,1417,1423,1442,1445,2034,2040,2043,2652,2655,2658,2661],[10,11,12],"p",{},"本記事では主にNuxt Content v2においてmarkdownファイルの中身をどのように扱うかや、ブログを構築する際によくあるページの作り方を紹介します。",[10,14,15],{},"内容は以前に書いた記事の続きになるので、設定などの部分で気になることがあれば以下を参照ください。",[17,18,19,27],"ul",{},[20,21,22],"li",{},[23,24,26],"a",{"href":25},"nuxt-content-v2"," Nuxt Content v2を利用したMarkdownによるブログ記事の作成方法",[20,28,29],{},[23,30,32],{"href":31},"nuxt-3nuxt-content-v2","Nuxt 3、Tailwind、Nuxt content v2によるブログ作成のための基本設定",[34,35,37],"h2",{"id":36},"nuxt-content-v2が提供するコンポーネント","Nuxt Content v2が提供するコンポーネント",[10,39,40],{},"Nuxt Content v2ではブログ作成でよく使うであろうコンポーネントがいくつか用意されています。\n以下が現時点（2023\u002F9\u002F26）でドキュメントに記載されているコンポーネントです。",[17,42,43,49,54,59,64,69,74],{},[20,44,45],{},[46,47,48],"code",{},"\u003CContentDoc>",[20,50,51],{},[46,52,53],{},"\u003CContentRenderer>",[20,55,56],{},[46,57,58],{},"\u003CContentList>",[20,60,61],{},[46,62,63],{},"\u003CContentNavigation>",[20,65,66],{},[46,67,68],{},"\u003CContentQuery>",[20,70,71],{},[46,72,73],{},"\u003CContentSlot>",[20,75,76],{},"Prose Components",[10,78,79],{},"本記事ではよく使うであろうコンポーネントにのみいくつか説明します。",[81,82,84],"h3",{"id":83},"contentdocの使い方","ContentDocの使い方",[10,86,87,90],{},[46,88,89],{},"ContentDoc","コンポーネントがおそらく一番基本的なコンポーネントとなります。このコンポーネントは指定されたパスのmdファイルを読み取りHTMLにレンダリングしてくれます。",[10,92,93],{},"使用パターンは大きく以下の3つになると思います。",[95,96,97,105,116],"ol",{},[20,98,99,100],{},"デフォルト状態で使う\n",[17,101,102],{},[20,103,104],{},"この場合読み込まれたページのパスを自動で取得してくれてレンダリングされます（例：\u002Fposts\u002Ftestにアクセスするとcontent\u002Fposts\u002Ftest.mdが読み込まれる）",[20,106,107,108],{},"引数にパスを指定して使う\n",[17,109,110],{},[20,111,112,113,115],{},"1では自動で取得するようにしましたが、特定のページだけは別のルールで表示したいケースは",[46,114,89],{},"に指定のパスを与えます。",[20,117,118,119,122,123,125,126,128,129,132,133],{},"スロットpropsである",[46,120,121],{},"doc","を受け取り、",[46,124,89],{},"のタグ内で",[46,127,121],{},"から参照可能なデータを使う。基本的に",[46,130,131],{},"ContentRederer","とセットで使います。\n",[17,134,135],{},[20,136,137],{},"少し自分で書く量が増加しますが、表示をカスタマイズするには一番やりやすいです。このブログも3の方法を採用しています。",[10,139,140],{},"上記は全て公式サイトに例が載ってるのでそちらをご参照ください。",[10,142,143,144],{},"参考：",[23,145,89],{"href":146,"rel":147},"https:\u002F\u002Fcontent.nuxt.com\u002Fcomponents\u002Fcontent-doc",[148],"nofollow",[10,150,151,152,154],{},"以下は単純な例です。コード内の",[46,153,121],{},"変数からフロントマターで設定した変数を参照できます。これと先ほどの3の仕組みを使うことでブログでよくあるパンクズリストやタグの表示を行っています。",[156,157,162],"pre",{"className":158,"code":159,"language":160,"meta":161,"style":161},"language-vue shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cmain class=\"prose\">    \n      \u003CContentDoc v-slot=\"{ doc }\">\n        \u003Cdiv class=\"flex flex-col\">\n            \u003Cdiv>{{ doc.title }}\u003C\u002Fdiv>\n            \u003Cdiv>{{ doc.description }}\u003C\u002Fdiv>\n            \u003Cdiv>{{ doc.createdAt }}\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Carticle>\n            \u003CContentRenderer :value=\"doc\" \u002F>\n        \u003C\u002Farticle>\n    \u003C\u002FContentDoc>  \n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n","vue","",[46,163,164,180,203,221,239,254,268,282,292,302,321,330,341,351],{"__ignoreMap":161},[165,166,169,173,177],"span",{"class":167,"line":168},"line",1,[165,170,172],{"class":171},"s95oV","\u003C",[165,174,176],{"class":175},"s4JwU","template",[165,178,179],{"class":171},">\n",[165,181,183,186,189,193,196,200],{"class":167,"line":182},2,[165,184,185],{"class":171},"  \u003C",[165,187,188],{"class":175},"main",[165,190,192],{"class":191},"svObZ"," class",[165,194,195],{"class":171},"=",[165,197,199],{"class":198},"sU2Wk","\"prose\"",[165,201,202],{"class":171},">    \n",[165,204,206,209,211,214,216,219],{"class":167,"line":205},3,[165,207,208],{"class":171},"      \u003C",[165,210,89],{"class":175},[165,212,213],{"class":191}," v-slot",[165,215,195],{"class":171},[165,217,218],{"class":198},"\"{ doc }\"",[165,220,179],{"class":171},[165,222,224,227,230,232,234,237],{"class":167,"line":223},4,[165,225,226],{"class":171},"        \u003C",[165,228,229],{"class":175},"div",[165,231,192],{"class":191},[165,233,195],{"class":171},[165,235,236],{"class":198},"\"flex flex-col\"",[165,238,179],{"class":171},[165,240,242,245,247,250,252],{"class":167,"line":241},5,[165,243,244],{"class":171},"            \u003C",[165,246,229],{"class":175},[165,248,249],{"class":171},">{{ doc.title }}\u003C\u002F",[165,251,229],{"class":175},[165,253,179],{"class":171},[165,255,257,259,261,264,266],{"class":167,"line":256},6,[165,258,244],{"class":171},[165,260,229],{"class":175},[165,262,263],{"class":171},">{{ doc.description }}\u003C\u002F",[165,265,229],{"class":175},[165,267,179],{"class":171},[165,269,271,273,275,278,280],{"class":167,"line":270},7,[165,272,244],{"class":171},[165,274,229],{"class":175},[165,276,277],{"class":171},">{{ doc.createdAt }}\u003C\u002F",[165,279,229],{"class":175},[165,281,179],{"class":171},[165,283,285,288,290],{"class":167,"line":284},8,[165,286,287],{"class":171},"        \u003C\u002F",[165,289,229],{"class":175},[165,291,179],{"class":171},[165,293,295,297,300],{"class":167,"line":294},9,[165,296,226],{"class":171},[165,298,299],{"class":175},"article",[165,301,179],{"class":171},[165,303,305,307,310,313,315,318],{"class":167,"line":304},10,[165,306,244],{"class":171},[165,308,309],{"class":175},"ContentRenderer",[165,311,312],{"class":191}," :value",[165,314,195],{"class":171},[165,316,317],{"class":198},"\"doc\"",[165,319,320],{"class":171}," \u002F>\n",[165,322,324,326,328],{"class":167,"line":323},11,[165,325,287],{"class":171},[165,327,299],{"class":175},[165,329,179],{"class":171},[165,331,333,336,338],{"class":167,"line":332},12,[165,334,335],{"class":171},"    \u003C\u002F",[165,337,89],{"class":175},[165,339,340],{"class":171},">  \n",[165,342,344,347,349],{"class":167,"line":343},13,[165,345,346],{"class":171},"  \u003C\u002F",[165,348,188],{"class":175},[165,350,179],{"class":171},[165,352,354,357,359],{"class":167,"line":353},14,[165,355,356],{"class":171},"\u003C\u002F",[165,358,176],{"class":175},[165,360,179],{"class":171},[10,362,363],{},"こうすると以下のようなページになります。",[365,366],"img",{"alt":367,"img-src":368},"hoge","\u002Fimg\u002Fnuxt-content-v2-list\u002Fhoge.png",[10,370,371],{},"元のMarkdownはこちらです。",[156,373,377],{"className":374,"code":375,"language":376,"meta":161,"style":161},"language-md shiki shiki-themes github-dark","---\ntitle: Hoge\ndescription: '詳細'\ncreatedAt: '2022-09-26'\n---\n\n# h1タイトル\n\n## h2タイトル\n","md",[46,378,379,384,395,405,415,419,425,431,435],{"__ignoreMap":161},[165,380,381],{"class":167,"line":168},[165,382,383],{"class":171},"---\n",[165,385,386,389,392],{"class":167,"line":182},[165,387,388],{"class":175},"title",[165,390,391],{"class":171},": ",[165,393,394],{"class":198},"Hoge\n",[165,396,397,400,402],{"class":167,"line":205},[165,398,399],{"class":175},"description",[165,401,391],{"class":171},[165,403,404],{"class":198},"'詳細'\n",[165,406,407,410,412],{"class":167,"line":223},[165,408,409],{"class":175},"createdAt",[165,411,391],{"class":171},[165,413,414],{"class":198},"'2022-09-26'\n",[165,416,417],{"class":167,"line":241},[165,418,383],{"class":171},[165,420,421],{"class":167,"line":256},[165,422,424],{"emptyLinePlaceholder":423},true,"\n",[165,426,427],{"class":167,"line":270},[165,428,430],{"class":429},"sIZOC","# h1タイトル\n",[165,432,433],{"class":167,"line":284},[165,434,424],{"emptyLinePlaceholder":423},[165,436,437],{"class":167,"line":294},[165,438,439],{"class":429},"## h2タイトル\n",[81,441,443],{"id":442},"cotentlistの使い方","CotentListの使い方",[10,445,446],{},"こちらもほぼ必須となるコンポーネントで、名前の通り記事のリスト表示を目的としたコンポーネントです。",[10,448,449,450,452,453,456],{},"使い方も",[46,451,89],{},"と似ていて、パスの指定とスロットpropsである",[46,454,455],{},"list","を受け取ることが可能です。",[10,458,459],{},"リスト表示はある程度デザインする必要があるので、おそらくスロットpropsを使うパターンがほとんどだと思います。",[10,461,462,464,465,468,469,471],{},[46,463,89],{},"と少し異なるのは",[46,466,467],{},"query","を引数にとれることです。リストで記事を取得する際にはさまざまな条件をつけたくなります。例えば、取得件数やソート、タグ、カテゴリーによる絞り込みなどです。\nそれらの条件をコンポーネントに渡す手段が",[46,470,467],{},"になります。",[10,473,474],{},"こちらに関しては公式に例があるのでそちらをみるでOKです。",[10,476,143,477],{},[23,478,481],{"href":479,"rel":480},"https:\u002F\u002Fcontent.nuxt.com\u002Fcomponents\u002Fcontent-list",[148],"ContentList",[81,483,485],{"id":484},"prose-componentsの使い方","Prose Componentsの使い方",[10,487,488,489,492,493,496,497,500],{},"Prose ComponentsとはマークダウンをHTMLにレンダリングする際に使用されるコンポーネントを定義したものです。\nこのProse Componentsは",[46,490,491],{},"components\u002Fcontent","配下に",[46,494,495],{},"Prose + \u003CHTMLのタグ>","で定義することで、既存のタグを上書きできます（例：",[46,498,499],{},"ProseH1.vue","を作るとh1タグは定義したコンポーネントが利用される）。",[10,502,503],{},"個々のタグの定義は少し面倒に思うかもですが、このProse ComponentsはTailwindととても相性が良く、それぞれのタグに対してTailwindで直感的にデザインできるので使いやすいです。",[10,505,506],{},"また、コンポーネント単位になっているのもポイントでTailwindだけでは表現しづらいこともかなり柔軟にできます。例えば、h2のタグ内にaタグを入れて見出しをリンクにしたりなどが容易にできます。",[34,508,510],{"id":509},"querycontentの使い方","queryContentの使い方",[10,512,513],{},"主にスクリプト部分で多用します。これを使うことで記事データを柔軟に取り出すことができます。",[10,515,516,517,520],{},"公式サイトで推奨されているようにNuxt 3の",[46,518,519],{},"useAsyncData","で囲って使用します。",[156,522,524],{"className":158,"code":523,"language":160,"meta":161,"style":161},"\u003Cscript setup>\nconst { data } = await useAsyncData('home', () => queryContent('\u002F').findOne())\n\u003C\u002Fscript>\n",[46,525,526,538,591],{"__ignoreMap":161},[165,527,528,530,533,536],{"class":167,"line":168},[165,529,172],{"class":171},[165,531,532],{"class":175},"script",[165,534,535],{"class":191}," setup",[165,537,179],{"class":171},[165,539,540,544,547,551,554,556,559,562,565,568,571,574,577,579,582,585,588],{"class":167,"line":182},[165,541,543],{"class":542},"snl16","const",[165,545,546],{"class":171}," { ",[165,548,550],{"class":549},"sDLfK","data",[165,552,553],{"class":171}," } ",[165,555,195],{"class":542},[165,557,558],{"class":542}," await",[165,560,561],{"class":191}," useAsyncData",[165,563,564],{"class":171},"(",[165,566,567],{"class":198},"'home'",[165,569,570],{"class":171},", () ",[165,572,573],{"class":542},"=>",[165,575,576],{"class":191}," queryContent",[165,578,564],{"class":171},[165,580,581],{"class":198},"'\u002F'",[165,583,584],{"class":171},").",[165,586,587],{"class":191},"findOne",[165,589,590],{"class":171},"())\n",[165,592,593,595,597],{"class":167,"line":205},[165,594,356],{"class":171},[165,596,532],{"class":175},[165,598,179],{"class":171},[10,600,601,604,605,608],{},[46,602,603],{},"queryContent","は上記にもある",[46,606,607],{},"findOne()","のように関数をつなげて用途に合ったレスポンスを得ることができます。",[10,610,611,612,615,616,619,620,622,623,626,627,630],{},"よく使うのは条件を記述する",[46,613,614],{},"where","と",[46,617,618],{},"find~","です。基本的に",[46,621,603],{},"は",[46,624,625],{},"find","系の関数呼び出しもしくは",[46,628,629],{},"count","で終わる必要があります。",[10,632,633],{},"公式サイトにかなり具体的な例が載っているのでそこで大体の使い方は把握できます。",[10,635,636,637,641],{},"以下はフロントマターに記載されたタグを集計して数を表示する際の書き方です。こちらが実際の",[23,638,640],{"href":639},"\u002Ftags","Tagsページ","です。",[156,643,645],{"className":158,"code":644,"language":160,"meta":161,"style":161},"\u003Cscript setup lang=\"ts\">\n\nconst { data: articles } = await useAsyncData('tags', () => queryContent('contents').only('tags').where({ draft: { $eq: false } }).find())\n\nlet tags = []\nif (articles.value) {\n    tags = articles.value.filter((page) => page?.tags).flatMap((filteredPage) => { return filteredPage.tags })\n}\n\nconst countedTags = tags.reduce((acc, str) => {\n    const found = acc.find((item: { name: any; }) => item.name === str);\n    if (found) {\n        found.count++;\n    } else {\n        acc.push({ name: str, count: 1 });\n    }\n    return acc;\n}, [] as { name: string, count: number }[])\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv>\n        \u003Ch1>Tags\u003C\u002Fh1>\n        \u003Cdiv class=\"flex flex-row flex-wrap gap-3\">\n            \u003Cdiv v-for=\"tag in countedTags\" :key=\"tag.name\">\n                \u003Ca :href=\"'tags\u002F' + tag.name\">{{ tag.name }}\u003C\u002Fa> ({{ tag.count }})\n            \u003C\u002Fdiv>\n\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[46,646,647,665,669,733,737,750,758,805,810,814,848,895,903,914,924,942,948,957,987,992,1001,1006,1015,1025,1040,1056,1081,1105,1115,1120,1129,1138],{"__ignoreMap":161},[165,648,649,651,653,655,658,660,663],{"class":167,"line":168},[165,650,172],{"class":171},[165,652,532],{"class":175},[165,654,535],{"class":191},[165,656,657],{"class":191}," lang",[165,659,195],{"class":171},[165,661,662],{"class":198},"\"ts\"",[165,664,179],{"class":171},[165,666,667],{"class":167,"line":182},[165,668,424],{"emptyLinePlaceholder":423},[165,670,671,673,675,678,680,683,685,687,689,691,693,696,698,700,702,704,707,709,712,714,716,718,720,723,726,729,731],{"class":167,"line":205},[165,672,543],{"class":542},[165,674,546],{"class":171},[165,676,550],{"class":677},"s9osk",[165,679,391],{"class":171},[165,681,682],{"class":549},"articles",[165,684,553],{"class":171},[165,686,195],{"class":542},[165,688,558],{"class":542},[165,690,561],{"class":191},[165,692,564],{"class":171},[165,694,695],{"class":198},"'tags'",[165,697,570],{"class":171},[165,699,573],{"class":542},[165,701,576],{"class":191},[165,703,564],{"class":171},[165,705,706],{"class":198},"'contents'",[165,708,584],{"class":171},[165,710,711],{"class":191},"only",[165,713,564],{"class":171},[165,715,695],{"class":198},[165,717,584],{"class":171},[165,719,614],{"class":191},[165,721,722],{"class":171},"({ draft: { $eq: ",[165,724,725],{"class":549},"false",[165,727,728],{"class":171}," } }).",[165,730,625],{"class":191},[165,732,590],{"class":171},[165,734,735],{"class":167,"line":223},[165,736,424],{"emptyLinePlaceholder":423},[165,738,739,742,745,747],{"class":167,"line":241},[165,740,741],{"class":542},"let",[165,743,744],{"class":171}," tags ",[165,746,195],{"class":542},[165,748,749],{"class":171}," []\n",[165,751,752,755],{"class":167,"line":256},[165,753,754],{"class":542},"if",[165,756,757],{"class":171}," (articles.value) {\n",[165,759,760,763,765,768,771,774,777,780,782,785,788,790,793,795,797,799,802],{"class":167,"line":270},[165,761,762],{"class":171},"    tags ",[165,764,195],{"class":542},[165,766,767],{"class":171}," articles.value.",[165,769,770],{"class":191},"filter",[165,772,773],{"class":171},"((",[165,775,776],{"class":677},"page",[165,778,779],{"class":171},") ",[165,781,573],{"class":542},[165,783,784],{"class":171}," page?.tags).",[165,786,787],{"class":191},"flatMap",[165,789,773],{"class":171},[165,791,792],{"class":677},"filteredPage",[165,794,779],{"class":171},[165,796,573],{"class":542},[165,798,546],{"class":171},[165,800,801],{"class":542},"return",[165,803,804],{"class":171}," filteredPage.tags })\n",[165,806,807],{"class":167,"line":284},[165,808,809],{"class":171},"}\n",[165,811,812],{"class":167,"line":294},[165,813,424],{"emptyLinePlaceholder":423},[165,815,816,818,821,824,827,830,832,835,838,841,843,845],{"class":167,"line":304},[165,817,543],{"class":542},[165,819,820],{"class":549}," countedTags",[165,822,823],{"class":542}," =",[165,825,826],{"class":171}," tags.",[165,828,829],{"class":191},"reduce",[165,831,773],{"class":171},[165,833,834],{"class":677},"acc",[165,836,837],{"class":171},", ",[165,839,840],{"class":677},"str",[165,842,779],{"class":171},[165,844,573],{"class":542},[165,846,847],{"class":171}," {\n",[165,849,850,853,856,858,861,863,865,868,871,873,876,878,881,884,886,889,892],{"class":167,"line":323},[165,851,852],{"class":542},"    const",[165,854,855],{"class":549}," found",[165,857,823],{"class":542},[165,859,860],{"class":171}," acc.",[165,862,625],{"class":191},[165,864,773],{"class":171},[165,866,867],{"class":677},"item",[165,869,870],{"class":542},":",[165,872,546],{"class":171},[165,874,875],{"class":677},"name",[165,877,870],{"class":542},[165,879,880],{"class":549}," any",[165,882,883],{"class":171},"; }) ",[165,885,573],{"class":542},[165,887,888],{"class":171}," item.name ",[165,890,891],{"class":542},"===",[165,893,894],{"class":171}," str);\n",[165,896,897,900],{"class":167,"line":332},[165,898,899],{"class":542},"    if",[165,901,902],{"class":171}," (found) {\n",[165,904,905,908,911],{"class":167,"line":343},[165,906,907],{"class":171},"        found.count",[165,909,910],{"class":542},"++",[165,912,913],{"class":171},";\n",[165,915,916,919,922],{"class":167,"line":353},[165,917,918],{"class":171},"    } ",[165,920,921],{"class":542},"else",[165,923,847],{"class":171},[165,925,927,930,933,936,939],{"class":167,"line":926},15,[165,928,929],{"class":171},"        acc.",[165,931,932],{"class":191},"push",[165,934,935],{"class":171},"({ name: str, count: ",[165,937,938],{"class":549},"1",[165,940,941],{"class":171}," });\n",[165,943,945],{"class":167,"line":944},16,[165,946,947],{"class":171},"    }\n",[165,949,951,954],{"class":167,"line":950},17,[165,952,953],{"class":542},"    return",[165,955,956],{"class":171}," acc;\n",[165,958,960,963,966,968,970,972,975,977,979,981,984],{"class":167,"line":959},18,[165,961,962],{"class":171},"}, [] ",[165,964,965],{"class":542},"as",[165,967,546],{"class":171},[165,969,875],{"class":677},[165,971,870],{"class":542},[165,973,974],{"class":549}," string",[165,976,837],{"class":171},[165,978,629],{"class":677},[165,980,870],{"class":542},[165,982,983],{"class":549}," number",[165,985,986],{"class":171}," }[])\n",[165,988,990],{"class":167,"line":989},19,[165,991,424],{"emptyLinePlaceholder":423},[165,993,995,997,999],{"class":167,"line":994},20,[165,996,356],{"class":171},[165,998,532],{"class":175},[165,1000,179],{"class":171},[165,1002,1004],{"class":167,"line":1003},21,[165,1005,424],{"emptyLinePlaceholder":423},[165,1007,1009,1011,1013],{"class":167,"line":1008},22,[165,1010,172],{"class":171},[165,1012,176],{"class":175},[165,1014,179],{"class":171},[165,1016,1018,1021,1023],{"class":167,"line":1017},23,[165,1019,1020],{"class":171},"    \u003C",[165,1022,229],{"class":175},[165,1024,179],{"class":171},[165,1026,1028,1030,1033,1036,1038],{"class":167,"line":1027},24,[165,1029,226],{"class":171},[165,1031,1032],{"class":175},"h1",[165,1034,1035],{"class":171},">Tags\u003C\u002F",[165,1037,1032],{"class":175},[165,1039,179],{"class":171},[165,1041,1043,1045,1047,1049,1051,1054],{"class":167,"line":1042},25,[165,1044,226],{"class":171},[165,1046,229],{"class":175},[165,1048,192],{"class":191},[165,1050,195],{"class":171},[165,1052,1053],{"class":198},"\"flex flex-row flex-wrap gap-3\"",[165,1055,179],{"class":171},[165,1057,1059,1061,1063,1066,1068,1071,1074,1076,1079],{"class":167,"line":1058},26,[165,1060,244],{"class":171},[165,1062,229],{"class":175},[165,1064,1065],{"class":191}," v-for",[165,1067,195],{"class":171},[165,1069,1070],{"class":198},"\"tag in countedTags\"",[165,1072,1073],{"class":191}," :key",[165,1075,195],{"class":171},[165,1077,1078],{"class":198},"\"tag.name\"",[165,1080,179],{"class":171},[165,1082,1084,1087,1089,1092,1094,1097,1100,1102],{"class":167,"line":1083},27,[165,1085,1086],{"class":171},"                \u003C",[165,1088,23],{"class":175},[165,1090,1091],{"class":191}," :href",[165,1093,195],{"class":171},[165,1095,1096],{"class":198},"\"'tags\u002F' + tag.name\"",[165,1098,1099],{"class":171},">{{ tag.name }}\u003C\u002F",[165,1101,23],{"class":175},[165,1103,1104],{"class":171},"> ({{ tag.count }})\n",[165,1106,1108,1111,1113],{"class":167,"line":1107},28,[165,1109,1110],{"class":171},"            \u003C\u002F",[165,1112,229],{"class":175},[165,1114,179],{"class":171},[165,1116,1118],{"class":167,"line":1117},29,[165,1119,424],{"emptyLinePlaceholder":423},[165,1121,1123,1125,1127],{"class":167,"line":1122},30,[165,1124,287],{"class":171},[165,1126,229],{"class":175},[165,1128,179],{"class":171},[165,1130,1132,1134,1136],{"class":167,"line":1131},31,[165,1133,335],{"class":171},[165,1135,229],{"class":175},[165,1137,179],{"class":171},[165,1139,1141,1143,1145],{"class":167,"line":1140},32,[165,1142,356],{"class":171},[165,1144,176],{"class":175},[165,1146,179],{"class":171},[10,1148,1149,1151],{},[46,1150,603],{},"は上記のように使いやすいのですが、多用するとパフォーマンスが悪くなるので注意です。基本的にNuxt Contentが提供するコンポーネントで実現できるのであればそちらを使った方がいいです。",[81,1153,1154],{"id":1154},"よくあるエラー",[10,1156,1157],{},"自分がよく遭遇したエラーです。",[156,1159,1163],{"className":1160,"code":1161,"language":1162,"meta":161,"style":161},"language-bash shiki shiki-themes github-dark","[nuxt] [request error] [unhandled] [500] input.endsWith is not a function\n  at withTrailingSlash (.\u002Fnode_modules\u002Fufo\u002Fdist\u002Findex.mjs:316:18)  \n  at joinURL (.\u002Fnode_modules\u002Fufo\u002Fdist\u002Findex.mjs:378:13)  \n  at \u003Canonymous> (.\u002Fnode_modules\u002F@nuxt\u002Fcontent\u002Fdist\u002Fruntime\u002Fquery\u002Fmatch\u002Fpipeline.mjs:57:60)  \n  at Array.find (\u003Canonymous>)  \n  at fetchDirConfig (.\u002Fnode_modules\u002F@nuxt\u002Fcontent\u002Fdist\u002Fruntime\u002Fquery\u002Fmatch\u002Fpipeline.mjs:57:30)  \n  at \u003Canonymous> (.\u002Fnode_modules\u002F@nuxt\u002Fcontent\u002Fdist\u002Fruntime\u002Fquery\u002Fmatch\u002Fpipeline.mjs:90:63)  \n  at Array.reduce (\u003Canonymous>)  \n  at \u003Canonymous> (.\u002Fnode_modules\u002F@nuxt\u002Fcontent\u002Fdist\u002Fruntime\u002Fquery\u002Fmatch\u002Fpipeline.mjs:90:39)  \n  at \u003Canonymous> (.\u002Fnode_modules\u002F@nuxt\u002Fcontent\u002Fdist\u002Fruntime\u002Fserver\u002Fapi\u002Fquery.mjs:13:21)  \n  at async Object.handler (.\u002Fnode_modules\u002Fh3\u002Fdist\u002Findex.mjs:1630:19)\n","bash",[46,1164,1165,1170,1181,1191,1210,1220,1230,1245,1254,1269,1284],{"__ignoreMap":161},[165,1166,1167],{"class":167,"line":168},[165,1168,1169],{"class":171},"[nuxt] [request error] [unhandled] [500] input.endsWith is not a function\n",[165,1171,1172,1175,1178],{"class":167,"line":182},[165,1173,1174],{"class":191},"  at",[165,1176,1177],{"class":198}," withTrailingSlash",[165,1179,1180],{"class":171}," (.\u002Fnode_modules\u002Fufo\u002Fdist\u002Findex.mjs:316:18)  \n",[165,1182,1183,1185,1188],{"class":167,"line":205},[165,1184,1174],{"class":191},[165,1186,1187],{"class":198}," joinURL",[165,1189,1190],{"class":171}," (.\u002Fnode_modules\u002Fufo\u002Fdist\u002Findex.mjs:378:13)  \n",[165,1192,1193,1195,1198,1201,1204,1207],{"class":167,"line":223},[165,1194,1174],{"class":191},[165,1196,1197],{"class":542}," \u003C",[165,1199,1200],{"class":198},"anonymou",[165,1202,1203],{"class":171},"s",[165,1205,1206],{"class":542},">",[165,1208,1209],{"class":171}," (.\u002Fnode_modules\u002F@nuxt\u002Fcontent\u002Fdist\u002Fruntime\u002Fquery\u002Fmatch\u002Fpipeline.mjs:57:60)  \n",[165,1211,1212,1214,1217],{"class":167,"line":241},[165,1213,1174],{"class":191},[165,1215,1216],{"class":198}," Array.find",[165,1218,1219],{"class":171}," (\u003Canonymous>)  \n",[165,1221,1222,1224,1227],{"class":167,"line":256},[165,1223,1174],{"class":191},[165,1225,1226],{"class":198}," fetchDirConfig",[165,1228,1229],{"class":171}," (.\u002Fnode_modules\u002F@nuxt\u002Fcontent\u002Fdist\u002Fruntime\u002Fquery\u002Fmatch\u002Fpipeline.mjs:57:30)  \n",[165,1231,1232,1234,1236,1238,1240,1242],{"class":167,"line":270},[165,1233,1174],{"class":191},[165,1235,1197],{"class":542},[165,1237,1200],{"class":198},[165,1239,1203],{"class":171},[165,1241,1206],{"class":542},[165,1243,1244],{"class":171}," (.\u002Fnode_modules\u002F@nuxt\u002Fcontent\u002Fdist\u002Fruntime\u002Fquery\u002Fmatch\u002Fpipeline.mjs:90:63)  \n",[165,1246,1247,1249,1252],{"class":167,"line":284},[165,1248,1174],{"class":191},[165,1250,1251],{"class":198}," Array.reduce",[165,1253,1219],{"class":171},[165,1255,1256,1258,1260,1262,1264,1266],{"class":167,"line":294},[165,1257,1174],{"class":191},[165,1259,1197],{"class":542},[165,1261,1200],{"class":198},[165,1263,1203],{"class":171},[165,1265,1206],{"class":542},[165,1267,1268],{"class":171}," (.\u002Fnode_modules\u002F@nuxt\u002Fcontent\u002Fdist\u002Fruntime\u002Fquery\u002Fmatch\u002Fpipeline.mjs:90:39)  \n",[165,1270,1271,1273,1275,1277,1279,1281],{"class":167,"line":304},[165,1272,1174],{"class":191},[165,1274,1197],{"class":542},[165,1276,1200],{"class":198},[165,1278,1203],{"class":171},[165,1280,1206],{"class":542},[165,1282,1283],{"class":171}," (.\u002Fnode_modules\u002F@nuxt\u002Fcontent\u002Fdist\u002Fruntime\u002Fserver\u002Fapi\u002Fquery.mjs:13:21)  \n",[165,1285,1286,1288,1291,1294],{"class":167,"line":323},[165,1287,1174],{"class":191},[165,1289,1290],{"class":198}," async",[165,1292,1293],{"class":198}," Object.handler",[165,1295,1296],{"class":171}," (.\u002Fnode_modules\u002Fh3\u002Fdist\u002Findex.mjs:1630:19)\n",[10,1298,1299,1300,1303,1304,1306,1307,1310],{},"こちらの原因は自分の場合、",[46,1301,1302],{},"useRoute().path","で取得したパスをもとに",[46,1305,614],{},"で",[46,1308,1309],{},"_path","を指定した絞り込みをした際に該当のパスがサイト内に存在しないと発生します。",[10,1312,1313,1314,1316],{},"解決方法としては",[46,1315,614],{},"に渡すパスが存在することを事前に確認するかエラーハンドリングです。",[34,1318,1319],{"id":1319},"ページングの実装",[10,1321,1322],{},"今回の実装で結構悩みました。最適ではないかもですが、現状の構成を紹介します。",[10,1324,1325,1326,1329],{},"本ブログのページングではページごとにページ番号に応じたページに飛ぶように実装しました。これを実装するためには以下のように",[46,1327,1328],{},"pages","ディレクトリを構成します。",[156,1331,1333],{"className":1160,"code":1332,"language":1162,"meta":161,"style":161},"pages\n├── [...slug].vue\n├── page\n│   ├── [id].vue\n│   └── index.vue\n└── tags\n    ├── [id].vue\n    └── index.vue\n",[46,1334,1335,1340,1348,1355,1366,1376,1384,1391],{"__ignoreMap":161},[165,1336,1337],{"class":167,"line":168},[165,1338,1339],{"class":191},"pages\n",[165,1341,1342,1345],{"class":167,"line":182},[165,1343,1344],{"class":191},"├──",[165,1346,1347],{"class":171}," [...slug].vue\n",[165,1349,1350,1352],{"class":167,"line":205},[165,1351,1344],{"class":191},[165,1353,1354],{"class":198}," page\n",[165,1356,1357,1360,1363],{"class":167,"line":223},[165,1358,1359],{"class":191},"│",[165,1361,1362],{"class":198},"   ├──",[165,1364,1365],{"class":171}," [id].vue\n",[165,1367,1368,1370,1373],{"class":167,"line":241},[165,1369,1359],{"class":191},[165,1371,1372],{"class":198},"   └──",[165,1374,1375],{"class":198}," index.vue\n",[165,1377,1378,1381],{"class":167,"line":256},[165,1379,1380],{"class":191},"└──",[165,1382,1383],{"class":198}," tags\n",[165,1385,1386,1389],{"class":167,"line":270},[165,1387,1388],{"class":191},"    ├──",[165,1390,1365],{"class":171},[165,1392,1393,1396],{"class":167,"line":284},[165,1394,1395],{"class":191},"    └──",[165,1397,1375],{"class":198},[10,1399,1400,1401,1404],{},"tagsはなくても大丈夫です。このようにすることでページ番号ごとに",[46,1402,1403],{},"\u002Fpage\u002F1","のようなパスで遷移できます。",[10,1406,1407,1410,1411,1416],{},[46,1408,1409],{},"[...sulg].vue","というファイル名は",[23,1412,1415],{"href":1413,"rel":1414},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fpages#catch-all-route",[148],"Catch-all Route","と呼ばれ、配下の全てのルートとマッチするようになります。",[10,1418,1419,1420,1422],{},"ここで少し疑問に思うのは、",[46,1421,1409],{},"と同じ階層にある他のpageがちゃんと機能するかです。今のところpageが存在する部分についてはちゃんとpageの方を優先してくれているようですが正しいのかどうか。",[10,1424,1425,1426,492,1429,1431,1432,1435,1436,1438,1439,1441],{},"ちなみに",[46,1427,1428],{},"content",[46,1430,1328],{},"と同じフォルダ構造があるとうまく行かないです。今回で言うと",[46,1433,1434],{},"tags","や",[46,1437,776],{},"という名前のフォルダが",[46,1440,1428],{},"フォルダにあると意図しない動作になります。",[10,1443,1444],{},"ページング用のコンポーネントは以下になります。",[156,1446,1448],{"className":158,"code":1447,"language":160,"meta":161,"style":161},"\u003Cscript setup lang=\"ts\">\n\ninterface Props {\n    currentPage: number\n    perPage: number\n    pageNum: number\n    totalCount: number\n}\n\nconst pagePath = '\u002Fpage\u002F'\n\nconst props = withDefaults(defineProps\u003CProps>(), {\n    currentPage: 1,\n    perPage: 10,\n    pageNum: 1,\n    totalCount: 1\n})\n\nconst pageCounts = computed(() => {\n    if (props.totalCount !== 1) {\n        return Math.floor(props.totalCount \u002F props.perPage)\n    }\n    else {\n        return props.totalCount\n    }\n})\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cnav aria-label=\"Page navigation\">\n        \u003Cul class=\"inline-flex -space-x-px text-sm list-none p-0\">\n            \u003Cli v-if=\"currentPage > 1\">\n                \u003CNuxtLink :to=\"pagePath + (currentPage - 1)\"\n                    class=\"flex items-center justify-center px-3 h-8 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 \">\n                    Prev\u003C\u002FNuxtLink>\n            \u003C\u002Fli>\n            \u003Cli v-for=\"page in pageCounts\">\n                \u003CNuxtLink v-if=\"page \u003C 3 || page > pageCounts - 2 || currentPage === page\" :to=\"pagePath + page\"\n                    class=\"flex items-center justify-center px-3 h-8 leading-tight text-gray-500 border border-gray-300 hover:bg-gray-100 hover:text-gray-700 d\"\n                    :class=\"{\n                        'font-bold': currentPage === page,\n                        'bg-gray-100': currentPage === page\n                    }\">\n                    {{\n                        page }}\u003C\u002FNuxtLink>\n                \u003Cspan v-else class=\" line-clamp-1\">.\u003C\u002Fspan>\n            \u003C\u002Fli>\n\n            \u003Cli v-if=\"currentPage \u003C pageCounts\">\n                \u003CNuxtLink :to=\"pagePath + (currentPage + 1)\"\n                    class=\"flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 \">\n                    Next\u003C\u002FNuxtLink>\n            \u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n",[46,1449,1450,1466,1470,1480,1490,1499,1508,1517,1521,1525,1537,1541,1566,1576,1586,1595,1603,1608,1612,1631,1647,1667,1671,1678,1685,1689,1693,1697,1705,1709,1717,1734,1749,1766,1782,1795,1805,1814,1830,1851,1861,1872,1878,1884,1892,1898,1908,1932,1941,1946,1962,1976,1988,1998,2007,2016,2025],{"__ignoreMap":161},[165,1451,1452,1454,1456,1458,1460,1462,1464],{"class":167,"line":168},[165,1453,172],{"class":171},[165,1455,532],{"class":175},[165,1457,535],{"class":191},[165,1459,657],{"class":191},[165,1461,195],{"class":171},[165,1463,662],{"class":198},[165,1465,179],{"class":171},[165,1467,1468],{"class":167,"line":182},[165,1469,424],{"emptyLinePlaceholder":423},[165,1471,1472,1475,1478],{"class":167,"line":205},[165,1473,1474],{"class":542},"interface",[165,1476,1477],{"class":191}," Props",[165,1479,847],{"class":171},[165,1481,1482,1485,1487],{"class":167,"line":223},[165,1483,1484],{"class":677},"    currentPage",[165,1486,870],{"class":542},[165,1488,1489],{"class":549}," number\n",[165,1491,1492,1495,1497],{"class":167,"line":241},[165,1493,1494],{"class":677},"    perPage",[165,1496,870],{"class":542},[165,1498,1489],{"class":549},[165,1500,1501,1504,1506],{"class":167,"line":256},[165,1502,1503],{"class":677},"    pageNum",[165,1505,870],{"class":542},[165,1507,1489],{"class":549},[165,1509,1510,1513,1515],{"class":167,"line":270},[165,1511,1512],{"class":677},"    totalCount",[165,1514,870],{"class":542},[165,1516,1489],{"class":549},[165,1518,1519],{"class":167,"line":284},[165,1520,809],{"class":171},[165,1522,1523],{"class":167,"line":294},[165,1524,424],{"emptyLinePlaceholder":423},[165,1526,1527,1529,1532,1534],{"class":167,"line":304},[165,1528,543],{"class":542},[165,1530,1531],{"class":549}," pagePath",[165,1533,823],{"class":542},[165,1535,1536],{"class":198}," '\u002Fpage\u002F'\n",[165,1538,1539],{"class":167,"line":323},[165,1540,424],{"emptyLinePlaceholder":423},[165,1542,1543,1545,1548,1550,1553,1555,1558,1560,1563],{"class":167,"line":332},[165,1544,543],{"class":542},[165,1546,1547],{"class":549}," props",[165,1549,823],{"class":542},[165,1551,1552],{"class":191}," withDefaults",[165,1554,564],{"class":171},[165,1556,1557],{"class":191},"defineProps",[165,1559,172],{"class":171},[165,1561,1562],{"class":191},"Props",[165,1564,1565],{"class":171},">(), {\n",[165,1567,1568,1571,1573],{"class":167,"line":343},[165,1569,1570],{"class":171},"    currentPage: ",[165,1572,938],{"class":549},[165,1574,1575],{"class":171},",\n",[165,1577,1578,1581,1584],{"class":167,"line":353},[165,1579,1580],{"class":171},"    perPage: ",[165,1582,1583],{"class":549},"10",[165,1585,1575],{"class":171},[165,1587,1588,1591,1593],{"class":167,"line":926},[165,1589,1590],{"class":171},"    pageNum: ",[165,1592,938],{"class":549},[165,1594,1575],{"class":171},[165,1596,1597,1600],{"class":167,"line":944},[165,1598,1599],{"class":171},"    totalCount: ",[165,1601,1602],{"class":549},"1\n",[165,1604,1605],{"class":167,"line":950},[165,1606,1607],{"class":171},"})\n",[165,1609,1610],{"class":167,"line":959},[165,1611,424],{"emptyLinePlaceholder":423},[165,1613,1614,1616,1619,1621,1624,1627,1629],{"class":167,"line":989},[165,1615,543],{"class":542},[165,1617,1618],{"class":549}," pageCounts",[165,1620,823],{"class":542},[165,1622,1623],{"class":191}," computed",[165,1625,1626],{"class":171},"(() ",[165,1628,573],{"class":542},[165,1630,847],{"class":171},[165,1632,1633,1635,1638,1641,1644],{"class":167,"line":994},[165,1634,899],{"class":542},[165,1636,1637],{"class":171}," (props.totalCount ",[165,1639,1640],{"class":542},"!==",[165,1642,1643],{"class":549}," 1",[165,1645,1646],{"class":171},") {\n",[165,1648,1649,1652,1655,1658,1661,1664],{"class":167,"line":1003},[165,1650,1651],{"class":542},"        return",[165,1653,1654],{"class":171}," Math.",[165,1656,1657],{"class":191},"floor",[165,1659,1660],{"class":171},"(props.totalCount ",[165,1662,1663],{"class":542},"\u002F",[165,1665,1666],{"class":171}," props.perPage)\n",[165,1668,1669],{"class":167,"line":1008},[165,1670,947],{"class":171},[165,1672,1673,1676],{"class":167,"line":1017},[165,1674,1675],{"class":542},"    else",[165,1677,847],{"class":171},[165,1679,1680,1682],{"class":167,"line":1027},[165,1681,1651],{"class":542},[165,1683,1684],{"class":171}," props.totalCount\n",[165,1686,1687],{"class":167,"line":1042},[165,1688,947],{"class":171},[165,1690,1691],{"class":167,"line":1058},[165,1692,1607],{"class":171},[165,1694,1695],{"class":167,"line":1083},[165,1696,424],{"emptyLinePlaceholder":423},[165,1698,1699,1701,1703],{"class":167,"line":1107},[165,1700,356],{"class":171},[165,1702,532],{"class":175},[165,1704,179],{"class":171},[165,1706,1707],{"class":167,"line":1117},[165,1708,424],{"emptyLinePlaceholder":423},[165,1710,1711,1713,1715],{"class":167,"line":1122},[165,1712,172],{"class":171},[165,1714,176],{"class":175},[165,1716,179],{"class":171},[165,1718,1719,1721,1724,1727,1729,1732],{"class":167,"line":1131},[165,1720,1020],{"class":171},[165,1722,1723],{"class":175},"nav",[165,1725,1726],{"class":191}," aria-label",[165,1728,195],{"class":171},[165,1730,1731],{"class":198},"\"Page navigation\"",[165,1733,179],{"class":171},[165,1735,1736,1738,1740,1742,1744,1747],{"class":167,"line":1140},[165,1737,226],{"class":171},[165,1739,17],{"class":175},[165,1741,192],{"class":191},[165,1743,195],{"class":171},[165,1745,1746],{"class":198},"\"inline-flex -space-x-px text-sm list-none p-0\"",[165,1748,179],{"class":171},[165,1750,1752,1754,1756,1759,1761,1764],{"class":167,"line":1751},33,[165,1753,244],{"class":171},[165,1755,20],{"class":175},[165,1757,1758],{"class":191}," v-if",[165,1760,195],{"class":171},[165,1762,1763],{"class":198},"\"currentPage > 1\"",[165,1765,179],{"class":171},[165,1767,1769,1771,1774,1777,1779],{"class":167,"line":1768},34,[165,1770,1086],{"class":171},[165,1772,1773],{"class":175},"NuxtLink",[165,1775,1776],{"class":191}," :to",[165,1778,195],{"class":171},[165,1780,1781],{"class":198},"\"pagePath + (currentPage - 1)\"\n",[165,1783,1785,1788,1790,1793],{"class":167,"line":1784},35,[165,1786,1787],{"class":191},"                    class",[165,1789,195],{"class":171},[165,1791,1792],{"class":198},"\"flex items-center justify-center px-3 h-8 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 \"",[165,1794,179],{"class":171},[165,1796,1798,1801,1803],{"class":167,"line":1797},36,[165,1799,1800],{"class":171},"                    Prev\u003C\u002F",[165,1802,1773],{"class":175},[165,1804,179],{"class":171},[165,1806,1808,1810,1812],{"class":167,"line":1807},37,[165,1809,1110],{"class":171},[165,1811,20],{"class":175},[165,1813,179],{"class":171},[165,1815,1817,1819,1821,1823,1825,1828],{"class":167,"line":1816},38,[165,1818,244],{"class":171},[165,1820,20],{"class":175},[165,1822,1065],{"class":191},[165,1824,195],{"class":171},[165,1826,1827],{"class":198},"\"page in pageCounts\"",[165,1829,179],{"class":171},[165,1831,1833,1835,1837,1839,1841,1844,1846,1848],{"class":167,"line":1832},39,[165,1834,1086],{"class":171},[165,1836,1773],{"class":175},[165,1838,1758],{"class":191},[165,1840,195],{"class":171},[165,1842,1843],{"class":198},"\"page \u003C 3 || page > pageCounts - 2 || currentPage === page\"",[165,1845,1776],{"class":191},[165,1847,195],{"class":171},[165,1849,1850],{"class":198},"\"pagePath + page\"\n",[165,1852,1854,1856,1858],{"class":167,"line":1853},40,[165,1855,1787],{"class":191},[165,1857,195],{"class":171},[165,1859,1860],{"class":198},"\"flex items-center justify-center px-3 h-8 leading-tight text-gray-500 border border-gray-300 hover:bg-gray-100 hover:text-gray-700 d\"\n",[165,1862,1864,1867,1869],{"class":167,"line":1863},41,[165,1865,1866],{"class":191},"                    :class",[165,1868,195],{"class":171},[165,1870,1871],{"class":198},"\"{\n",[165,1873,1875],{"class":167,"line":1874},42,[165,1876,1877],{"class":198},"                        'font-bold': currentPage === page,\n",[165,1879,1881],{"class":167,"line":1880},43,[165,1882,1883],{"class":198},"                        'bg-gray-100': currentPage === page\n",[165,1885,1887,1890],{"class":167,"line":1886},44,[165,1888,1889],{"class":198},"                    }\"",[165,1891,179],{"class":171},[165,1893,1895],{"class":167,"line":1894},45,[165,1896,1897],{"class":171},"                    {{\n",[165,1899,1901,1904,1906],{"class":167,"line":1900},46,[165,1902,1903],{"class":171},"                        page }}\u003C\u002F",[165,1905,1773],{"class":175},[165,1907,179],{"class":171},[165,1909,1911,1913,1915,1918,1920,1922,1925,1928,1930],{"class":167,"line":1910},47,[165,1912,1086],{"class":171},[165,1914,165],{"class":175},[165,1916,1917],{"class":191}," v-else",[165,1919,192],{"class":191},[165,1921,195],{"class":171},[165,1923,1924],{"class":198},"\" line-clamp-1\"",[165,1926,1927],{"class":171},">.\u003C\u002F",[165,1929,165],{"class":175},[165,1931,179],{"class":171},[165,1933,1935,1937,1939],{"class":167,"line":1934},48,[165,1936,1110],{"class":171},[165,1938,20],{"class":175},[165,1940,179],{"class":171},[165,1942,1944],{"class":167,"line":1943},49,[165,1945,424],{"emptyLinePlaceholder":423},[165,1947,1949,1951,1953,1955,1957,1960],{"class":167,"line":1948},50,[165,1950,244],{"class":171},[165,1952,20],{"class":175},[165,1954,1758],{"class":191},[165,1956,195],{"class":171},[165,1958,1959],{"class":198},"\"currentPage \u003C pageCounts\"",[165,1961,179],{"class":171},[165,1963,1965,1967,1969,1971,1973],{"class":167,"line":1964},51,[165,1966,1086],{"class":171},[165,1968,1773],{"class":175},[165,1970,1776],{"class":191},[165,1972,195],{"class":171},[165,1974,1975],{"class":198},"\"pagePath + (currentPage + 1)\"\n",[165,1977,1979,1981,1983,1986],{"class":167,"line":1978},52,[165,1980,1787],{"class":191},[165,1982,195],{"class":171},[165,1984,1985],{"class":198},"\"flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 \"",[165,1987,179],{"class":171},[165,1989,1991,1994,1996],{"class":167,"line":1990},53,[165,1992,1993],{"class":171},"                    Next\u003C\u002F",[165,1995,1773],{"class":175},[165,1997,179],{"class":171},[165,1999,2001,2003,2005],{"class":167,"line":2000},54,[165,2002,1110],{"class":171},[165,2004,20],{"class":175},[165,2006,179],{"class":171},[165,2008,2010,2012,2014],{"class":167,"line":2009},55,[165,2011,287],{"class":171},[165,2013,17],{"class":175},[165,2015,179],{"class":171},[165,2017,2019,2021,2023],{"class":167,"line":2018},56,[165,2020,335],{"class":171},[165,2022,1723],{"class":175},[165,2024,179],{"class":171},[165,2026,2028,2030,2032],{"class":167,"line":2027},57,[165,2029,356],{"class":171},[165,2031,176],{"class":175},[165,2033,179],{"class":171},[10,2035,2036,2037,2039],{},"基本的に呼び出し元で必要な値を計算して渡す形にしています。呼び出し元で計算が必要になるのはトータルのページ数です。これは上で紹介した",[46,2038,603],{},"で計算できます。",[10,2041,2042],{},"以下が呼び出し元のリスト表示コンポーネントです。",[156,2044,2046],{"className":158,"code":2045,"language":160,"meta":161,"style":161},"\u003Cscript setup lang=\"ts\">\nimport { QueryBuilderParams } from '@nuxt\u002Fcontent\u002Fdist\u002Fruntime\u002Ftypes';\n\nconst route = useRoute()\nconst routeName = route.path\nconst appConfig = useAppConfig()\n\nconst { data: pageCount } = await useAsyncData('page', () => queryContent('contents').count())\nconst perPage = appConfig.siteMetadata.perPage\nconst pageNum = 1\nlet totalArticleCount = 0\nif (pageCount.value) {\n    totalArticleCount = pageCount.value\n}\n\nconst listQuery: QueryBuilderParams = {\n    path: '\u002Fcontents',\n    where: [\n        { title: { $ne: 'All Posts' } },\n        { draft: { $eq: false } }\n    ],\n    skip: (pageNum - 1) * perPage,\n    limit: perPage,\n    sort: [{ createdAt: -1 }]\n}\n\n\u003C\u002Fscript>\n\u003Ctemplate>\n    \u003CProseH1>Latest\u003C\u002FProseH1>\n    \u003CContentList :query=\"listQuery\">\n        \u003Ctemplate #default=\"{ list }\">\n            \u003Cdiv v-for=\"article in  list \" :key=\"article._path\" class=\"my-5\">\n                \u003CCard v-if=\"article.title\" :title=\"article.title\" :description=\"article.description\" :path=\"article._path\"\n                    :tags=\"article.tags\" :created-at=\"article.createdAt\" :updatedAt=\"article.updatedAt\">\n                \u003C\u002FCard>\n            \u003C\u002Fdiv>\n        \u003C\u002Ftemplate>\n        \u003Ctemplate #not-found>\n            \u003Cp>No articles found.\u003C\u002Fp>\n        \u003C\u002Ftemplate>\n    \u003C\u002FContentList>\n    \u003Cdiv class=\"flex justify-center\">\n        \u003CPagenation :currentPage=\"pageNum\" :perPage=\"perPage\" :pageNum=\"pageNum\" :tag=\"routeName\"\n            :totalCount=\"totalArticleCount\">\n        \u003C\u002FPagenation>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[46,2047,2048,2064,2080,2084,2099,2111,2125,2129,2171,2183,2195,2207,2214,2224,2228,2232,2248,2258,2263,2274,2284,2289,2307,2312,2324,2328,2332,2340,2348,2362,2378,2402,2431,2468,2496,2505,2513,2521,2534,2547,2555,2563,2578,2616,2628,2636,2644],{"__ignoreMap":161},[165,2049,2050,2052,2054,2056,2058,2060,2062],{"class":167,"line":168},[165,2051,172],{"class":171},[165,2053,532],{"class":175},[165,2055,535],{"class":191},[165,2057,657],{"class":191},[165,2059,195],{"class":171},[165,2061,662],{"class":198},[165,2063,179],{"class":171},[165,2065,2066,2069,2072,2075,2078],{"class":167,"line":182},[165,2067,2068],{"class":542},"import",[165,2070,2071],{"class":171}," { QueryBuilderParams } ",[165,2073,2074],{"class":542},"from",[165,2076,2077],{"class":198}," '@nuxt\u002Fcontent\u002Fdist\u002Fruntime\u002Ftypes'",[165,2079,913],{"class":171},[165,2081,2082],{"class":167,"line":205},[165,2083,424],{"emptyLinePlaceholder":423},[165,2085,2086,2088,2091,2093,2096],{"class":167,"line":223},[165,2087,543],{"class":542},[165,2089,2090],{"class":549}," route",[165,2092,823],{"class":542},[165,2094,2095],{"class":191}," useRoute",[165,2097,2098],{"class":171},"()\n",[165,2100,2101,2103,2106,2108],{"class":167,"line":241},[165,2102,543],{"class":542},[165,2104,2105],{"class":549}," routeName",[165,2107,823],{"class":542},[165,2109,2110],{"class":171}," route.path\n",[165,2112,2113,2115,2118,2120,2123],{"class":167,"line":256},[165,2114,543],{"class":542},[165,2116,2117],{"class":549}," appConfig",[165,2119,823],{"class":542},[165,2121,2122],{"class":191}," useAppConfig",[165,2124,2098],{"class":171},[165,2126,2127],{"class":167,"line":270},[165,2128,424],{"emptyLinePlaceholder":423},[165,2130,2131,2133,2135,2137,2139,2142,2144,2146,2148,2150,2152,2155,2157,2159,2161,2163,2165,2167,2169],{"class":167,"line":284},[165,2132,543],{"class":542},[165,2134,546],{"class":171},[165,2136,550],{"class":677},[165,2138,391],{"class":171},[165,2140,2141],{"class":549},"pageCount",[165,2143,553],{"class":171},[165,2145,195],{"class":542},[165,2147,558],{"class":542},[165,2149,561],{"class":191},[165,2151,564],{"class":171},[165,2153,2154],{"class":198},"'page'",[165,2156,570],{"class":171},[165,2158,573],{"class":542},[165,2160,576],{"class":191},[165,2162,564],{"class":171},[165,2164,706],{"class":198},[165,2166,584],{"class":171},[165,2168,629],{"class":191},[165,2170,590],{"class":171},[165,2172,2173,2175,2178,2180],{"class":167,"line":294},[165,2174,543],{"class":542},[165,2176,2177],{"class":549}," perPage",[165,2179,823],{"class":542},[165,2181,2182],{"class":171}," appConfig.siteMetadata.perPage\n",[165,2184,2185,2187,2190,2192],{"class":167,"line":304},[165,2186,543],{"class":542},[165,2188,2189],{"class":549}," pageNum",[165,2191,823],{"class":542},[165,2193,2194],{"class":549}," 1\n",[165,2196,2197,2199,2202,2204],{"class":167,"line":323},[165,2198,741],{"class":542},[165,2200,2201],{"class":171}," totalArticleCount ",[165,2203,195],{"class":542},[165,2205,2206],{"class":549}," 0\n",[165,2208,2209,2211],{"class":167,"line":332},[165,2210,754],{"class":542},[165,2212,2213],{"class":171}," (pageCount.value) {\n",[165,2215,2216,2219,2221],{"class":167,"line":343},[165,2217,2218],{"class":171},"    totalArticleCount ",[165,2220,195],{"class":542},[165,2222,2223],{"class":171}," pageCount.value\n",[165,2225,2226],{"class":167,"line":353},[165,2227,809],{"class":171},[165,2229,2230],{"class":167,"line":926},[165,2231,424],{"emptyLinePlaceholder":423},[165,2233,2234,2236,2239,2241,2244,2246],{"class":167,"line":944},[165,2235,543],{"class":542},[165,2237,2238],{"class":549}," listQuery",[165,2240,870],{"class":542},[165,2242,2243],{"class":191}," QueryBuilderParams",[165,2245,823],{"class":542},[165,2247,847],{"class":171},[165,2249,2250,2253,2256],{"class":167,"line":950},[165,2251,2252],{"class":171},"    path: ",[165,2254,2255],{"class":198},"'\u002Fcontents'",[165,2257,1575],{"class":171},[165,2259,2260],{"class":167,"line":959},[165,2261,2262],{"class":171},"    where: [\n",[165,2264,2265,2268,2271],{"class":167,"line":989},[165,2266,2267],{"class":171},"        { title: { $ne: ",[165,2269,2270],{"class":198},"'All Posts'",[165,2272,2273],{"class":171}," } },\n",[165,2275,2276,2279,2281],{"class":167,"line":994},[165,2277,2278],{"class":171},"        { draft: { $eq: ",[165,2280,725],{"class":549},[165,2282,2283],{"class":171}," } }\n",[165,2285,2286],{"class":167,"line":1003},[165,2287,2288],{"class":171},"    ],\n",[165,2290,2291,2294,2297,2299,2301,2304],{"class":167,"line":1008},[165,2292,2293],{"class":171},"    skip: (pageNum ",[165,2295,2296],{"class":542},"-",[165,2298,1643],{"class":549},[165,2300,779],{"class":171},[165,2302,2303],{"class":542},"*",[165,2305,2306],{"class":171}," perPage,\n",[165,2308,2309],{"class":167,"line":1017},[165,2310,2311],{"class":171},"    limit: perPage,\n",[165,2313,2314,2317,2319,2321],{"class":167,"line":1027},[165,2315,2316],{"class":171},"    sort: [{ createdAt: ",[165,2318,2296],{"class":542},[165,2320,938],{"class":549},[165,2322,2323],{"class":171}," }]\n",[165,2325,2326],{"class":167,"line":1042},[165,2327,809],{"class":171},[165,2329,2330],{"class":167,"line":1058},[165,2331,424],{"emptyLinePlaceholder":423},[165,2333,2334,2336,2338],{"class":167,"line":1083},[165,2335,356],{"class":171},[165,2337,532],{"class":175},[165,2339,179],{"class":171},[165,2341,2342,2344,2346],{"class":167,"line":1107},[165,2343,172],{"class":171},[165,2345,176],{"class":175},[165,2347,179],{"class":171},[165,2349,2350,2352,2355,2358,2360],{"class":167,"line":1117},[165,2351,1020],{"class":171},[165,2353,2354],{"class":175},"ProseH1",[165,2356,2357],{"class":171},">Latest\u003C\u002F",[165,2359,2354],{"class":175},[165,2361,179],{"class":171},[165,2363,2364,2366,2368,2371,2373,2376],{"class":167,"line":1122},[165,2365,1020],{"class":171},[165,2367,481],{"class":175},[165,2369,2370],{"class":191}," :query",[165,2372,195],{"class":171},[165,2374,2375],{"class":198},"\"listQuery\"",[165,2377,179],{"class":171},[165,2379,2380,2382,2384,2387,2390,2392,2395,2398,2400],{"class":167,"line":1131},[165,2381,226],{"class":171},[165,2383,176],{"class":175},[165,2385,2386],{"class":171}," #",[165,2388,2389],{"class":191},"default",[165,2391,195],{"class":171},[165,2393,2394],{"class":198},"\"",[165,2396,2397],{"class":171},"{ list }",[165,2399,2394],{"class":198},[165,2401,179],{"class":171},[165,2403,2404,2406,2408,2410,2412,2415,2417,2419,2422,2424,2426,2429],{"class":167,"line":1140},[165,2405,244],{"class":171},[165,2407,229],{"class":175},[165,2409,1065],{"class":191},[165,2411,195],{"class":171},[165,2413,2414],{"class":198},"\"article in  list \"",[165,2416,1073],{"class":191},[165,2418,195],{"class":171},[165,2420,2421],{"class":198},"\"article._path\"",[165,2423,192],{"class":191},[165,2425,195],{"class":171},[165,2427,2428],{"class":198},"\"my-5\"",[165,2430,179],{"class":171},[165,2432,2433,2435,2438,2440,2442,2445,2448,2450,2452,2455,2457,2460,2463,2465],{"class":167,"line":1751},[165,2434,1086],{"class":171},[165,2436,2437],{"class":175},"Card",[165,2439,1758],{"class":191},[165,2441,195],{"class":171},[165,2443,2444],{"class":198},"\"article.title\"",[165,2446,2447],{"class":191}," :title",[165,2449,195],{"class":171},[165,2451,2444],{"class":198},[165,2453,2454],{"class":191}," :description",[165,2456,195],{"class":171},[165,2458,2459],{"class":198},"\"article.description\"",[165,2461,2462],{"class":191}," :path",[165,2464,195],{"class":171},[165,2466,2467],{"class":198},"\"article._path\"\n",[165,2469,2470,2473,2475,2478,2481,2483,2486,2489,2491,2494],{"class":167,"line":1768},[165,2471,2472],{"class":191},"                    :tags",[165,2474,195],{"class":171},[165,2476,2477],{"class":198},"\"article.tags\"",[165,2479,2480],{"class":191}," :created-at",[165,2482,195],{"class":171},[165,2484,2485],{"class":198},"\"article.createdAt\"",[165,2487,2488],{"class":191}," :updatedAt",[165,2490,195],{"class":171},[165,2492,2493],{"class":198},"\"article.updatedAt\"",[165,2495,179],{"class":171},[165,2497,2498,2501,2503],{"class":167,"line":1784},[165,2499,2500],{"class":171},"                \u003C\u002F",[165,2502,2437],{"class":175},[165,2504,179],{"class":171},[165,2506,2507,2509,2511],{"class":167,"line":1797},[165,2508,1110],{"class":171},[165,2510,229],{"class":175},[165,2512,179],{"class":171},[165,2514,2515,2517,2519],{"class":167,"line":1807},[165,2516,287],{"class":171},[165,2518,176],{"class":175},[165,2520,179],{"class":171},[165,2522,2523,2525,2527,2529,2532],{"class":167,"line":1816},[165,2524,226],{"class":171},[165,2526,176],{"class":175},[165,2528,2386],{"class":171},[165,2530,2531],{"class":191},"not-found",[165,2533,179],{"class":171},[165,2535,2536,2538,2540,2543,2545],{"class":167,"line":1832},[165,2537,244],{"class":171},[165,2539,10],{"class":175},[165,2541,2542],{"class":171},">No articles found.\u003C\u002F",[165,2544,10],{"class":175},[165,2546,179],{"class":171},[165,2548,2549,2551,2553],{"class":167,"line":1853},[165,2550,287],{"class":171},[165,2552,176],{"class":175},[165,2554,179],{"class":171},[165,2556,2557,2559,2561],{"class":167,"line":1863},[165,2558,335],{"class":171},[165,2560,481],{"class":175},[165,2562,179],{"class":171},[165,2564,2565,2567,2569,2571,2573,2576],{"class":167,"line":1874},[165,2566,1020],{"class":171},[165,2568,229],{"class":175},[165,2570,192],{"class":191},[165,2572,195],{"class":171},[165,2574,2575],{"class":198},"\"flex justify-center\"",[165,2577,179],{"class":171},[165,2579,2580,2582,2585,2588,2590,2593,2596,2598,2601,2604,2606,2608,2611,2613],{"class":167,"line":1880},[165,2581,226],{"class":171},[165,2583,2584],{"class":175},"Pagenation",[165,2586,2587],{"class":191}," :currentPage",[165,2589,195],{"class":171},[165,2591,2592],{"class":198},"\"pageNum\"",[165,2594,2595],{"class":191}," :perPage",[165,2597,195],{"class":171},[165,2599,2600],{"class":198},"\"perPage\"",[165,2602,2603],{"class":191}," :pageNum",[165,2605,195],{"class":171},[165,2607,2592],{"class":198},[165,2609,2610],{"class":191}," :tag",[165,2612,195],{"class":171},[165,2614,2615],{"class":198},"\"routeName\"\n",[165,2617,2618,2621,2623,2626],{"class":167,"line":1886},[165,2619,2620],{"class":191},"            :totalCount",[165,2622,195],{"class":171},[165,2624,2625],{"class":198},"\"totalArticleCount\"",[165,2627,179],{"class":171},[165,2629,2630,2632,2634],{"class":167,"line":1894},[165,2631,287],{"class":171},[165,2633,2584],{"class":175},[165,2635,179],{"class":171},[165,2637,2638,2640,2642],{"class":167,"line":1900},[165,2639,335],{"class":171},[165,2641,229],{"class":175},[165,2643,179],{"class":171},[165,2645,2646,2648,2650],{"class":167,"line":1910},[165,2647,356],{"class":171},[165,2649,176],{"class":175},[165,2651,179],{"class":171},[34,2653,2654],{"id":2654},"まとめ",[10,2656,2657],{},"本記事では、Nuxt Content v2を使用したブログの構築方法について詳細に解説しました。Nuxt Content v2には、ブログ作成に便利な多くのコンポーネントが用意されており、それぞれのコンポーネントの利用方法やカスタマイズの手法を具体的に示しました。",[10,2659,2660],{},"まだ多少不鮮明な部分もあるので後々解消していこうと思います。",[2662,2663,2664],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sIZOC, html code.shiki .sIZOC{--shiki-default:#79B8FF;--shiki-default-font-weight:bold}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 .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":161,"searchDepth":182,"depth":182,"links":2666},[2667,2672,2675,2676],{"id":36,"depth":182,"text":37,"children":2668},[2669,2670,2671],{"id":83,"depth":205,"text":84},{"id":442,"depth":205,"text":443},{"id":484,"depth":205,"text":485},{"id":509,"depth":182,"text":510,"children":2673},[2674],{"id":1154,"depth":205,"text":1154},{"id":1319,"depth":182,"text":1319},{"id":2654,"depth":182,"text":2654},"2023-09-26","Nuxt Content v2を使用してブログを構築する過程を紹介します。Nuxt Content v2が提供するコンポーネントの利用法やカスタマイズの方法、ページングの実装について紹介しています。",false,{},"\u002Fcontents\u002Flist-nuxt",{"title":5,"description":2678},"contents\u002Flist-nuxt",[2685,2686],"Nuxt","Nuxt Content v2","\u002Fimg\u002Ftwitter-card.png","z98dreDoArct4iLGi1rIx--xke_cyZTU8vTF9WZ-IV8",[2690,2694],{"title":2691,"path":2692,"stem":2693,"children":-1},"Learning Personalized Agents from Human Feedback","\u002Fcontents\u002Flearning-personalized-agents-from-human-feedback","contents\u002Flearning-personalized-agents-from-human-feedback",{"title":2695,"path":2696,"stem":2697,"children":-1},"LLM・AIエージェント論文でよく見るベンチマークの読み方","\u002Fcontents\u002Fllm-benchmark-map","contents\u002Fllm-benchmark-map",1784936718955]