[{"data":1,"prerenderedAt":1490},["ShallowReactive",2],{"content-/troubleshooting-frontmatter-display":3,"all-pages-for-dir":1468,"related-/troubleshooting-frontmatter-display":1469,"og-image-/troubleshooting-frontmatter-display":1489},{"id":4,"title":5,"body":6,"category":1453,"concepts":1453,"description":1454,"extension":1455,"meta":1456,"navigation":305,"ogImage":1453,"path":1457,"project_name":1453,"published":1458,"publishedAt":1459,"seo":1460,"source":1453,"stem":1461,"tags":1462,"todo":1453,"unpublished":1458,"updatedAt":1453,"__hash__":1467},"pages/2025-10/2025-10-02/troubleshooting-frontmatter-display.md","フロントマター表示トラブルシューティング（2025-10-02）",{"type":7,"value":8,"toc":1433},"minimark",[9,13,17,30,82,85,90,97,106,225,230,251,256,327,332,343,347,352,376,381,417,422,450,454,457,462,513,518,586,597,600,604,609,629,634,648,653,666,670,675,733,738,790,795,807,811,819,822,826,831,884,889,903,908,936,940,945,959,964,1005,1010,1018,1022,1027,1143,1147,1155,1168,1173,1293,1298,1336,1339,1344,1372,1377,1388,1393,1410,1415,1429],[10,11,5],"h1",{"id":12},"フロントマター表示トラブルシューティング2025-10-02",[14,15,16],"h2",{"id":16},"発生した問題",[18,19,20,21,25,26,29],"p",{},"DocPage コンポーネントで、タイトルの上に日付（",[22,23,24],"code",{},"publishedAt","）とタグ（",[22,27,28],{},"tags","）を表示しようとしたが、以下の症状が発生：",[31,32,33,65],"ol",{},[34,35,36,40],"li",{},[37,38,39],"strong",{},"日付とタグが表示されない",[41,42,43,52,59],"ul",{},[34,44,45,48,49],{},[22,46,47],{},"props.doc.publishedAt"," が ",[22,50,51],{},"null",[34,53,54,48,57],{},[22,55,56],{},"props.doc.tags",[22,58,51],{},[34,60,61,64],{},[22,62,63],{},"v-if"," 条件が false になり要素が非表示",[34,66,67,70],{},[37,68,69],{},"フロントマターが本文に表示される",[41,71,72,75],{},[34,73,74],{},"Markdown のフロントマターがパースされず、本文内にテキストとして表示",[34,76,77,78,81],{},"水平線（",[22,79,80],{},"---","）や YAML 構文がそのまま出力",[14,83,84],{"id":84},"原因の詳細分析",[86,87,89],"h3",{"id":88},"_1-sqlite-データベースの状態","1. SQLite データベースの状態",[18,91,92,93,96],{},"このプロジェクトでは ",[37,94,95],{},"Nuxt Content が SQLite を使用","している：",[18,98,99],{},[37,100,101,102,105],{},"設定（",[22,103,104],{},"nuxt.config.ts","）：",[107,108,113],"pre",{"className":109,"code":110,"language":111,"meta":112,"style":112},"language-typescript shiki shiki-themes vitesse-light vitesse-light","content: {\n  documentDriven: true,\n  database: {\n    type: \"sqlite\"  // ← SQLite データベースを使用\n  },\n  experimental: {\n    sqliteConnector: \"native\"  // ← Node.js 22.6+ のネイティブ SQLite\n  }\n}\n","typescript","",[22,114,115,131,146,156,179,185,195,213,219],{"__ignoreMap":112},[116,117,120,124,128],"span",{"class":118,"line":119},"line",1,[116,121,123],{"class":122},"senZ8","content",[116,125,127],{"class":126},"shFtX",":",[116,129,130],{"class":126}," {\n",[116,132,134,137,139,143],{"class":118,"line":133},2,[116,135,136],{"class":122},"  documentDriven",[116,138,127],{"class":126},[116,140,142],{"class":141},"sHkkW"," true",[116,144,145],{"class":126},",\n",[116,147,149,152,154],{"class":118,"line":148},3,[116,150,151],{"class":122},"  database",[116,153,127],{"class":126},[116,155,130],{"class":126},[116,157,159,162,164,168,172,175],{"class":118,"line":158},4,[116,160,161],{"class":122},"    type",[116,163,127],{"class":126},[116,165,167],{"class":166},"sMJiu"," \"",[116,169,171],{"class":170},"sdGka","sqlite",[116,173,174],{"class":166},"\"",[116,176,178],{"class":177},"sxvE3","  // ← SQLite データベースを使用\n",[116,180,182],{"class":118,"line":181},5,[116,183,184],{"class":126},"  },\n",[116,186,188,191,193],{"class":118,"line":187},6,[116,189,190],{"class":122},"  experimental",[116,192,127],{"class":126},[116,194,130],{"class":126},[116,196,198,201,203,205,208,210],{"class":118,"line":197},7,[116,199,200],{"class":122},"    sqliteConnector",[116,202,127],{"class":126},[116,204,167],{"class":166},[116,206,207],{"class":170},"native",[116,209,174],{"class":166},[116,211,212],{"class":177},"  // ← Node.js 22.6+ のネイティブ SQLite\n",[116,214,216],{"class":118,"line":215},8,[116,217,218],{"class":126},"  }\n",[116,220,222],{"class":118,"line":221},9,[116,223,224],{"class":126},"}\n",[18,226,227],{},[37,228,229],{},"データベースファイル：",[41,231,232,238],{},[34,233,234,235],{},"場所: ",[22,236,237],{},".data/content/contents.sqlite",[34,239,240,241,244,245,244,248],{},"テーブル: ",[22,242,243],{},"_content_pages",", ",[22,246,247],{},"_content_info",[22,249,250],{},"_development_cache",[18,252,253],{},[37,254,255],{},"SQLite に保存されたデータの確認結果：",[107,257,261],{"className":258,"code":259,"language":260,"meta":112,"style":112},"language-sql shiki shiki-themes vitesse-light vitesse-light","SELECT id, publishedAt, tags FROM _content_pages\nWHERE id LIKE '%setup-guide%';\n\n-- 結果:\n-- id: pages/nuxt-content-mdx-setup-guide.md\n-- publishedAt: 2025-10-01T00:00:00.000Z  ✅ 正しく保存されている\n-- tags: [\"nuxt\",\"content\",\"mdx\",\"setup\"]  ✅ 正しく保存されている\n","sql",[22,262,263,278,301,307,312,317,322],{"__ignoreMap":112},[116,264,265,268,272,275],{"class":118,"line":119},[116,266,267],{"class":141},"SELECT",[116,269,271],{"class":270},"sG7-3"," id, publishedAt, tags ",[116,273,274],{"class":141},"FROM",[116,276,277],{"class":270}," _content_pages\n",[116,279,280,283,286,289,292,295,298],{"class":118,"line":133},[116,281,282],{"class":141},"WHERE",[116,284,285],{"class":270}," id ",[116,287,288],{"class":141},"LIKE",[116,290,291],{"class":166}," '",[116,293,294],{"class":170},"%setup-guide%",[116,296,297],{"class":166},"'",[116,299,300],{"class":270},";\n",[116,302,303],{"class":118,"line":148},[116,304,306],{"emptyLinePlaceholder":305},true,"\n",[116,308,309],{"class":118,"line":158},[116,310,311],{"class":177},"-- 結果:\n",[116,313,314],{"class":118,"line":181},[116,315,316],{"class":177},"-- id: pages/nuxt-content-mdx-setup-guide.md\n",[116,318,319],{"class":118,"line":187},[116,320,321],{"class":177},"-- publishedAt: 2025-10-01T00:00:00.000Z  ✅ 正しく保存されている\n",[116,323,324],{"class":118,"line":197},[116,325,326],{"class":177},"-- tags: [\"nuxt\",\"content\",\"mdx\",\"setup\"]  ✅ 正しく保存されている\n",[18,328,329],{},[37,330,331],{},"重要な発見：",[41,333,334,337],{},[34,335,336],{},"SQLite データベースには正しくフロントマターが保存されていた",[34,338,339,340],{},"つまり、",[37,341,342],{},"データベースの問題ではなく、Markdown ファイルのパース時の問題",[86,344,346],{"id":345},"_2-根本原因bom-byte-order-mark","2. 根本原因：BOM (Byte Order Mark)",[18,348,349],{},[37,350,351],{},"BOM とは：",[41,353,354,361,364],{},[34,355,356,357,360],{},"UTF-8 ファイルの先頭に付く特殊な文字 ",[22,358,359],{},"\\ufeff"," (Zero Width No-Break Space)",[34,362,363],{},"Windows のテキストエディタ（特に古いエディタ）が自動で付加することがある",[34,365,366],{},[37,367,368,369,371,372,375],{},"YAML パーサーはファイルが ",[22,370,80],{}," で始まることを期待するが、BOM があると ",[22,373,374],{},"\\ufeff---"," となり認識失敗",[18,377,378],{},[37,379,380],{},"影響を受けたファイル：",[107,382,386],{"className":383,"code":384,"language":385,"meta":112,"style":112},"language-bash shiki shiki-themes vitesse-light vitesse-light","# BOM が含まれていたファイル\ncontent/nuxt-content-mdx-setup-guide.md    # ← \\ufeff---\ncontent/nuxt-content-mdx-requirements.md   # ← \\ufeff---\ncontent/index.mdx                          # ← \\ufeff---\n","bash",[22,387,388,393,401,409],{"__ignoreMap":112},[116,389,390],{"class":118,"line":119},[116,391,392],{"class":177},"# BOM が含まれていたファイル\n",[116,394,395,398],{"class":118,"line":133},[116,396,397],{"class":122},"content/nuxt-content-mdx-setup-guide.md",[116,399,400],{"class":177},"    # ← \\ufeff---\n",[116,402,403,406],{"class":118,"line":148},[116,404,405],{"class":122},"content/nuxt-content-mdx-requirements.md",[116,407,408],{"class":177},"   # ← \\ufeff---\n",[116,410,411,414],{"class":118,"line":158},[116,412,413],{"class":122},"content/index.mdx",[116,415,416],{"class":177},"                          # ← \\ufeff---\n",[18,418,419],{},[37,420,421],{},"パース失敗の流れ：",[31,423,424,427,433,436,447],{},[34,425,426],{},"Markdown ファイルを読み込み",[34,428,429,430,432],{},"BOM のせいで ",[22,431,80],{}," が認識されない → フロントマターとして扱われない",[34,434,435],{},"フロントマターが本文の一部として扱われる",[34,437,438,440,441,443,444,446],{},[22,439,24],{}," と ",[22,442,28],{}," が抽出されず ",[22,445,51],{}," になる",[34,448,449],{},"本文内にフロントマターの内容がそのまま表示される",[86,451,453],{"id":452},"_3-css-の競合問題","3. CSS の競合問題",[18,455,456],{},"日付要素の配置にも問題があった：",[18,458,459],{},[37,460,461],{},"問題のあった構造：",[107,463,467],{"className":464,"code":465,"language":466,"meta":112,"style":112},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003Cdiv class=\"doc__body\">\n  \u003Cp v-if=\"isoDate\" class=\"doc__published\">...\u003C/p>  \u003C!-- ← body 内にあった -->\n  \u003CContentRenderer :value=\"doc\" />\n\u003C/div>\n","vue",[22,468,469,494,499,504],{"__ignoreMap":112},[116,470,471,474,477,481,484,486,489,491],{"class":118,"line":119},[116,472,473],{"class":126},"\u003C",[116,475,476],{"class":141},"div",[116,478,480],{"class":479},"s4oTP"," class",[116,482,483],{"class":126},"=",[116,485,174],{"class":166},[116,487,488],{"class":170},"doc__body",[116,490,174],{"class":166},[116,492,493],{"class":126},">\n",[116,495,496],{"class":118,"line":133},[116,497,498],{"class":270},"  \u003Cp v-if=\"isoDate\" class=\"doc__published\">...\u003C/p>  \u003C!-- ← body 内にあった -->\n",[116,500,501],{"class":118,"line":148},[116,502,503],{"class":270},"  \u003CContentRenderer :value=\"doc\" />\n",[116,505,506,509,511],{"class":118,"line":158},[116,507,508],{"class":126},"\u003C/",[116,510,476],{"class":141},[116,512,493],{"class":126},[18,514,515],{},[37,516,517],{},"問題のある CSS：",[107,519,523],{"className":520,"code":521,"language":522,"meta":112,"style":112},"language-css shiki shiki-themes vitesse-light vitesse-light",".doc__body :deep(div[data-content-id] > p:first-of-type) {\n  display: none;  /* ← フロントマター削除用だが、日付も消してしまう */\n}\n","css",[22,524,525,564,582],{"__ignoreMap":112},[116,526,527,530,532,535,537,540,543,546,550,553,555,558,561],{"class":118,"line":119},[116,528,529],{"class":126},".",[116,531,488],{"class":479},[116,533,534],{"class":270}," :deep(",[116,536,476],{"class":141},[116,538,539],{"class":126},"[",[116,541,542],{"class":479},"data-content-id",[116,544,545],{"class":126},"]",[116,547,549],{"class":548},"stQ0i"," >",[116,551,552],{"class":141}," p",[116,554,127],{"class":126},[116,556,557],{"class":479},"first-of-type",[116,559,560],{"class":270},") ",[116,562,563],{"class":126},"{\n",[116,565,566,570,572,576,579],{"class":118,"line":133},[116,567,569],{"class":568},"sz8Xr","  display",[116,571,127],{"class":126},[116,573,575],{"class":574},"snbK4"," none",[116,577,578],{"class":126},";",[116,580,581],{"class":177},"  /* ← フロントマター削除用だが、日付も消してしまう */\n",[116,583,584],{"class":118,"line":148},[116,585,224],{"class":126},[18,587,588,589,592,593,596],{},"このセレクタは本来「レンダリングされたフロントマターの段落を削除する」意図だったが、日付の段落も ",[22,590,591],{},"\u003Cp>"," 要素のため ",[22,594,595],{},"display: none"," が適用されてしまった。",[14,598,599],{"id":599},"解決方法",[86,601,603],{"id":602},"修正1-bom-の削除","修正1: BOM の削除",[18,605,606],{},[37,607,608],{},"実施内容：",[107,610,612],{"className":383,"code":611,"language":385,"meta":112,"style":112},"# 正規表現で BOM を削除\n# Before: \\ufeff---\n# After:  ---\n",[22,613,614,619,624],{"__ignoreMap":112},[116,615,616],{"class":118,"line":119},[116,617,618],{"class":177},"# 正規表現で BOM を削除\n",[116,620,621],{"class":118,"line":133},[116,622,623],{"class":177},"# Before: \\ufeff---\n",[116,625,626],{"class":118,"line":148},[116,627,628],{"class":177},"# After:  ---\n",[18,630,631],{},[37,632,633],{},"修正したファイル：",[41,635,636,640,644],{},[34,637,638],{},[22,639,397],{},[34,641,642],{},[22,643,405],{},[34,645,646],{},[22,647,413],{},[18,649,650],{},[37,651,652],{},"結果：",[41,654,655,658],{},[34,656,657],{},"フロントマターが正しくパースされるようになった",[34,659,660,661,440,663,665],{},"SQLite に保存された ",[22,662,24],{},[22,664,28],{}," が Vue コンポーネントに正しく渡されるようになった",[86,667,669],{"id":668},"修正2-日付要素の配置変更","修正2: 日付要素の配置変更",[18,671,672],{},[37,673,674],{},"変更前：",[107,676,678],{"className":464,"code":677,"language":466,"meta":112,"style":112},"\u003Carticle class=\"doc\">\n  \u003Cheader v-if=\"doc.tags?.length\" class=\"doc__header\">...\u003C/header>\n  \u003Cdiv class=\"doc__body\">\n    \u003Cp v-if=\"isoDate\" class=\"doc__published\">...\u003C/p>  \u003C!-- body 内 -->\n    \u003CContentRenderer :value=\"doc\" />\n  \u003C/div>\n\u003C/article>\n",[22,679,680,700,705,710,715,720,725],{"__ignoreMap":112},[116,681,682,684,687,689,691,693,696,698],{"class":118,"line":119},[116,683,473],{"class":126},[116,685,686],{"class":141},"article",[116,688,480],{"class":479},[116,690,483],{"class":126},[116,692,174],{"class":166},[116,694,695],{"class":170},"doc",[116,697,174],{"class":166},[116,699,493],{"class":126},[116,701,702],{"class":118,"line":133},[116,703,704],{"class":270},"  \u003Cheader v-if=\"doc.tags?.length\" class=\"doc__header\">...\u003C/header>\n",[116,706,707],{"class":118,"line":148},[116,708,709],{"class":270},"  \u003Cdiv class=\"doc__body\">\n",[116,711,712],{"class":118,"line":158},[116,713,714],{"class":270},"    \u003Cp v-if=\"isoDate\" class=\"doc__published\">...\u003C/p>  \u003C!-- body 内 -->\n",[116,716,717],{"class":118,"line":181},[116,718,719],{"class":270},"    \u003CContentRenderer :value=\"doc\" />\n",[116,721,722],{"class":118,"line":187},[116,723,724],{"class":270},"  \u003C/div>\n",[116,726,727,729,731],{"class":118,"line":197},[116,728,508],{"class":126},[116,730,686],{"class":141},[116,732,493],{"class":126},[18,734,735],{},[37,736,737],{},"変更後：",[107,739,741],{"className":464,"code":740,"language":466,"meta":112,"style":112},"\u003Carticle class=\"doc\">\n  \u003Cheader v-if=\"doc.tags?.length\" class=\"doc__header\">...\u003C/header>\n  \u003Cp v-if=\"isoDate\" class=\"doc__published\">...\u003C/p>  \u003C!-- body 外に移動 -->\n  \u003Cdiv class=\"doc__body\">\n    \u003CContentRenderer :value=\"doc\" />\n  \u003C/div>\n\u003C/article>\n",[22,742,743,761,765,770,774,778,782],{"__ignoreMap":112},[116,744,745,747,749,751,753,755,757,759],{"class":118,"line":119},[116,746,473],{"class":126},[116,748,686],{"class":141},[116,750,480],{"class":479},[116,752,483],{"class":126},[116,754,174],{"class":166},[116,756,695],{"class":170},[116,758,174],{"class":166},[116,760,493],{"class":126},[116,762,763],{"class":118,"line":133},[116,764,704],{"class":270},[116,766,767],{"class":118,"line":148},[116,768,769],{"class":270},"  \u003Cp v-if=\"isoDate\" class=\"doc__published\">...\u003C/p>  \u003C!-- body 外に移動 -->\n",[116,771,772],{"class":118,"line":158},[116,773,709],{"class":270},[116,775,776],{"class":118,"line":181},[116,777,719],{"class":270},[116,779,780],{"class":118,"line":187},[116,781,724],{"class":270},[116,783,784,786,788],{"class":118,"line":197},[116,785,508],{"class":126},[116,787,686],{"class":141},[116,789,493],{"class":126},[18,791,792],{},[37,793,794],{},"効果：",[41,796,797,804],{},[34,798,799,800,803],{},"日付要素が ",[22,801,802],{},".doc__body :deep()"," セレクタの影響を受けなくなった",[34,805,806],{},"CSS の競合が解消された",[14,808,810],{"id":809},"nuxt-content-の-sqlite-連携フロー","Nuxt Content の SQLite 連携フロー",[107,812,817],{"className":813,"code":815,"language":816},[814],"language-text","┌─────────────────────┐\n│ Markdown ファイル    │\n│ (content/*.md)      │\n└──────────┬──────────┘\n           │\n           │ 1. ファイル読み込み\n           │    ※ BOM があるとここで問題発生\n           ↓\n┌─────────────────────┐\n│ Frontmatter Parser  │\n│ (YAML パース)       │\n└──────────┬──────────┘\n           │\n           │ 2. メタデータ抽出\n           │    - title\n           │    - publishedAt (Date 型に変換)\n           │    - tags\n           ↓\n┌─────────────────────┐\n│ SQLite Database     │\n│ (.data/content/     │\n│  contents.sqlite)   │\n└──────────┬──────────┘\n           │\n           │ 3. クエリで取得\n           │    queryCollection(\"pages\")\n           │      .path(\"/xxx\")\n           │      .first()\n           ↓\n┌─────────────────────┐\n│ Vue Component       │\n│ (props.doc)         │\n│  - publishedAt ✅   │\n│  - tags ✅          │\n└─────────────────────┘\n","text",[22,818,815],{"__ignoreMap":112},[14,820,821],{"id":821},"教訓とベストプラクティス",[86,823,825],{"id":824},"_1-utf-8-bom-に注意","1. UTF-8 BOM に注意",[18,827,828],{},[37,829,830],{},"BOM の確認方法：",[107,832,834],{"className":383,"code":833,"language":385,"meta":112,"style":112},"# ファイルの先頭バイトを確認\nhead -n 1 file.md | od -c | head -n 1\n\n# BOM がある場合: \\357 \\273 \\277 が表示される\n",[22,835,836,841,875,879],{"__ignoreMap":112},[116,837,838],{"class":118,"line":119},[116,839,840],{"class":177},"# ファイルの先頭バイトを確認\n",[116,842,843,846,849,853,856,859,862,865,867,870,872],{"class":118,"line":133},[116,844,845],{"class":122},"head",[116,847,848],{"class":574}," -n",[116,850,852],{"class":851},"sM54T"," 1",[116,854,855],{"class":170}," file.md",[116,857,858],{"class":548}," |",[116,860,861],{"class":122}," od",[116,863,864],{"class":574}," -c",[116,866,858],{"class":548},[116,868,869],{"class":122}," head",[116,871,848],{"class":574},[116,873,874],{"class":851}," 1\n",[116,876,877],{"class":118,"line":148},[116,878,306],{"emptyLinePlaceholder":305},[116,880,881],{"class":118,"line":158},[116,882,883],{"class":177},"# BOM がある場合: \\357 \\273 \\277 が表示される\n",[18,885,886],{},[37,887,888],{},"BOM を付けないエディタの設定：",[41,890,891,894,897],{},[34,892,893],{},"VS Code: デフォルトで BOM なし UTF-8（推奨）",[34,895,896],{},"Notepad: \"UTF-8 BOM なし\" を選択",[34,898,899,900],{},"vim: ",[22,901,902],{},"set nobomb",[18,904,905],{},[37,906,907],{},"新規ファイル作成時のチェックリスト：",[41,909,912,921,930],{"className":910},[911],"contains-task-list",[34,913,916,920],{"className":914},[915],"task-list-item",[917,918],"input",{"disabled":305,"type":919},"checkbox"," エディタが \"UTF-8 without BOM\" で保存されている",[34,922,924,926,927,929],{"className":923},[915],[917,925],{"disabled":305,"type":919}," フロントマターが ",[22,928,80],{}," で始まっている（先頭に空白や BOM がない）",[34,931,933,935],{"className":932},[915],[917,934],{"disabled":305,"type":919}," YAML インデントが正しい（スペース2つ）",[86,937,939],{"id":938},"_2-sqlite-データベースのメンテナンス","2. SQLite データベースのメンテナンス",[18,941,942],{},[37,943,944],{},"キャッシュクリアが必要な状況：",[41,946,947,950,956],{},[34,948,949],{},"フロントマターの形式を変更したとき",[34,951,952,955],{},[22,953,954],{},"content.config.ts"," のスキーマを変更したとき",[34,957,958],{},"パース結果がおかしいとき",[18,960,961],{},[37,962,963],{},"クリア方法：",[107,965,967],{"className":383,"code":966,"language":385,"meta":112,"style":112},"# データベースと Nuxt キャッシュを削除\nrm -rf .nuxt .data\n\n# 開発サーバー再起動で自動再構築\npnpm dev\n",[22,968,969,974,988,992,997],{"__ignoreMap":112},[116,970,971],{"class":118,"line":119},[116,972,973],{"class":177},"# データベースと Nuxt キャッシュを削除\n",[116,975,976,979,982,985],{"class":118,"line":133},[116,977,978],{"class":122},"rm",[116,980,981],{"class":574}," -rf",[116,983,984],{"class":170}," .nuxt",[116,986,987],{"class":170}," .data\n",[116,989,990],{"class":118,"line":148},[116,991,306],{"emptyLinePlaceholder":305},[116,993,994],{"class":118,"line":158},[116,995,996],{"class":177},"# 開発サーバー再起動で自動再構築\n",[116,998,999,1002],{"class":118,"line":181},[116,1000,1001],{"class":122},"pnpm",[116,1003,1004],{"class":170}," dev\n",[18,1006,1007],{},[37,1008,1009],{},"注意：",[41,1011,1012,1015],{},[34,1013,1014],{},"Windows では SQLite ファイルがロックされることがある",[34,1016,1017],{},"開発サーバーを停止してから削除する必要がある",[86,1019,1021],{"id":1020},"_3-デバッグ手順","3. デバッグ手順",[18,1023,1024],{},[37,1025,1026],{},"フロントマターが表示されない場合の調査順序：",[31,1028,1029,1054,1086,1114],{},[34,1030,1031,1034],{},[37,1032,1033],{},"Vue コンポーネントで値を確認",[107,1035,1037],{"className":464,"code":1036,"language":466,"meta":112,"style":112},"console.log('doc:', props.doc);\nconsole.log('publishedAt:', props.doc.publishedAt);\nconsole.log('tags:', props.doc.tags);\n",[22,1038,1039,1044,1049],{"__ignoreMap":112},[116,1040,1041],{"class":118,"line":119},[116,1042,1043],{"class":270},"console.log('doc:', props.doc);\n",[116,1045,1046],{"class":118,"line":133},[116,1047,1048],{"class":270},"console.log('publishedAt:', props.doc.publishedAt);\n",[116,1050,1051],{"class":118,"line":148},[116,1052,1053],{"class":270},"console.log('tags:', props.doc.tags);\n",[34,1055,1056,1059],{},[37,1057,1058],{},"SQLite データベースを確認",[107,1060,1062],{"className":383,"code":1061,"language":385,"meta":112,"style":112},"sqlite3 .data/content/contents.sqlite \\\n  \"SELECT publishedAt, tags FROM _content_pages WHERE id LIKE '%ファイル名%';\"\n",[22,1063,1064,1075],{"__ignoreMap":112},[116,1065,1066,1069,1072],{"class":118,"line":119},[116,1067,1068],{"class":122},"sqlite3",[116,1070,1071],{"class":170}," .data/content/contents.sqlite",[116,1073,1074],{"class":574}," \\\n",[116,1076,1077,1080,1083],{"class":118,"line":133},[116,1078,1079],{"class":166},"  \"",[116,1081,1082],{"class":170},"SELECT publishedAt, tags FROM _content_pages WHERE id LIKE '%ファイル名%';",[116,1084,1085],{"class":166},"\"\n",[34,1087,1088,1091],{},[37,1089,1090],{},"Markdown ファイルの BOM を確認",[107,1092,1094],{"className":383,"code":1093,"language":385,"meta":112,"style":112},"head -n 1 content/file.md | od -c\n",[22,1095,1096],{"__ignoreMap":112},[116,1097,1098,1100,1102,1104,1107,1109,1111],{"class":118,"line":119},[116,1099,845],{"class":122},[116,1101,848],{"class":574},[116,1103,852],{"class":851},[116,1105,1106],{"class":170}," content/file.md",[116,1108,858],{"class":548},[116,1110,861],{"class":122},[116,1112,1113],{"class":574}," -c\n",[34,1115,1116,1119],{},[37,1117,1118],{},"キャッシュをクリアして再起動",[107,1120,1122],{"className":383,"code":1121,"language":385,"meta":112,"style":112},"rm -rf .nuxt .data && pnpm dev\n",[22,1123,1124],{"__ignoreMap":112},[116,1125,1126,1128,1130,1132,1135,1138,1141],{"class":118,"line":119},[116,1127,978],{"class":122},[116,1129,981],{"class":574},[116,1131,984],{"class":170},[116,1133,1134],{"class":170}," .data",[116,1136,1137],{"class":126}," &&",[116,1139,1140],{"class":122}," pnpm",[116,1142,1004],{"class":170},[86,1144,1146],{"id":1145},"_4-css-セレクタの設計","4. CSS セレクタの設計",[18,1148,1149],{},[37,1150,1151,1154],{},[22,1152,1153],{},":deep()"," 使用時の注意点：",[41,1156,1157,1162,1165],{},[34,1158,1159,1161],{},[22,1160,1153],{}," は子孫要素すべてに影響する",[34,1163,1164],{},"意図しない要素にスタイルが適用される可能性がある",[34,1166,1167],{},"特定の要素だけを対象にする場合、より具体的なセレクタを使う",[18,1169,1170],{},[37,1171,1172],{},"良い例：",[107,1174,1176],{"className":520,"code":1175,"language":522,"meta":112,"style":112},"/* フロントマター由来の特定要素のみ削除 */\n.doc__body :deep(div[data-content-id] > p:first-of-type),\n.doc__body :deep(div[data-content-id] > p:first-of-type + ul),\n.doc__body :deep(div[data-content-id] > p:first-of-type + ul + hr) {\n  display: none;\n}\n",[22,1177,1178,1183,1210,1242,1279,1289],{"__ignoreMap":112},[116,1179,1180],{"class":118,"line":119},[116,1181,1182],{"class":177},"/* フロントマター由来の特定要素のみ削除 */\n",[116,1184,1185,1187,1189,1191,1193,1195,1197,1199,1201,1203,1205,1207],{"class":118,"line":133},[116,1186,529],{"class":126},[116,1188,488],{"class":479},[116,1190,534],{"class":270},[116,1192,476],{"class":141},[116,1194,539],{"class":126},[116,1196,542],{"class":479},[116,1198,545],{"class":126},[116,1200,549],{"class":548},[116,1202,552],{"class":141},[116,1204,127],{"class":126},[116,1206,557],{"class":479},[116,1208,1209],{"class":270},"),\n",[116,1211,1212,1214,1216,1218,1220,1222,1224,1226,1228,1230,1232,1234,1237,1240],{"class":118,"line":148},[116,1213,529],{"class":126},[116,1215,488],{"class":479},[116,1217,534],{"class":270},[116,1219,476],{"class":141},[116,1221,539],{"class":126},[116,1223,542],{"class":479},[116,1225,545],{"class":126},[116,1227,549],{"class":548},[116,1229,552],{"class":141},[116,1231,127],{"class":126},[116,1233,557],{"class":479},[116,1235,1236],{"class":548}," +",[116,1238,1239],{"class":141}," ul",[116,1241,1209],{"class":270},[116,1243,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272,1275,1277],{"class":118,"line":158},[116,1245,529],{"class":126},[116,1247,488],{"class":479},[116,1249,534],{"class":270},[116,1251,476],{"class":141},[116,1253,539],{"class":126},[116,1255,542],{"class":479},[116,1257,545],{"class":126},[116,1259,549],{"class":548},[116,1261,552],{"class":141},[116,1263,127],{"class":126},[116,1265,557],{"class":479},[116,1267,1236],{"class":548},[116,1269,1239],{"class":141},[116,1271,1236],{"class":548},[116,1273,1274],{"class":141}," hr",[116,1276,560],{"class":270},[116,1278,563],{"class":126},[116,1280,1281,1283,1285,1287],{"class":118,"line":181},[116,1282,569],{"class":568},[116,1284,127],{"class":126},[116,1286,575],{"class":574},[116,1288,300],{"class":126},[116,1290,1291],{"class":118,"line":187},[116,1292,224],{"class":126},[18,1294,1295],{},[37,1296,1297],{},"悪い例：",[107,1299,1301],{"className":520,"code":1300,"language":522,"meta":112,"style":112},"/* すべての p 要素に影響してしまう */\n.doc__body :deep(p) {\n  display: none;\n}\n",[22,1302,1303,1308,1322,1332],{"__ignoreMap":112},[116,1304,1305],{"class":118,"line":119},[116,1306,1307],{"class":177},"/* すべての p 要素に影響してしまう */\n",[116,1309,1310,1312,1314,1316,1318,1320],{"class":118,"line":133},[116,1311,529],{"class":126},[116,1313,488],{"class":479},[116,1315,534],{"class":270},[116,1317,18],{"class":141},[116,1319,560],{"class":270},[116,1321,563],{"class":126},[116,1323,1324,1326,1328,1330],{"class":118,"line":148},[116,1325,569],{"class":568},[116,1327,127],{"class":126},[116,1329,575],{"class":574},[116,1331,300],{"class":126},[116,1333,1334],{"class":118,"line":158},[116,1335,224],{"class":126},[14,1337,1338],{"id":1338},"まとめ",[18,1340,1341],{},[37,1342,1343],{},"今回のトラブルの原因：",[31,1345,1346,1359],{},[34,1347,1348,1351,1352,440,1354,48,1356,1358],{},[37,1349,1350],{},"主要因："," Markdown ファイルの BOM により YAML フロントマターがパースされず、",[22,1353,24],{},[22,1355,28],{},[22,1357,51],{}," になった",[34,1360,1361,1364,1365,1368,1369,1371],{},[37,1362,1363],{},"副次的要因："," 日付要素が ",[22,1366,1367],{},".doc__body"," 内にあり、CSS の ",[22,1370,1153],{}," セレクタで非表示になった",[18,1373,1374],{},[37,1375,1376],{},"解決策：",[31,1378,1379,1382],{},[34,1380,1381],{},"BOM を削除してフロントマターを正しくパース",[34,1383,1384,1385,1387],{},"日付要素を ",[22,1386,1367],{}," の外に移動して CSS 競合を回避",[18,1389,1390],{},[37,1391,1392],{},"SQLite の役割：",[41,1394,1395,1398,1401,1407],{},[34,1396,1397],{},"Nuxt Content は SQLite を使ってコンテンツをインデックス化",[34,1399,1400],{},"フロントマターのパースは SQLite 保存前に行われる",[34,1402,1403,1404,1406],{},"BOM があると YAML パースが失敗し、SQLite にも ",[22,1405,51],{}," で保存される",[34,1408,1409],{},"今回は BOM 削除後、開発サーバー再起動で SQLite が自動的に再構築され、正しいデータが保存された",[18,1411,1412],{},[37,1413,1414],{},"予防策：",[41,1416,1417,1420,1426],{},[34,1418,1419],{},"UTF-8 BOM なしのエディタ設定を使用",[34,1421,1422,1423,1425],{},"フロントマターの書式を厳密に守る（",[22,1424,80],{}," で開始、インデント2スペース）",[34,1427,1428],{},"CSS セレクタは意図しない要素に影響しないよう具体的に記述",[1430,1431,1432],"style",{},"html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}",{"title":112,"searchDepth":133,"depth":133,"links":1434},[1435,1436,1441,1445,1446,1452],{"id":16,"depth":133,"text":16},{"id":84,"depth":133,"text":84,"children":1437},[1438,1439,1440],{"id":88,"depth":148,"text":89},{"id":345,"depth":148,"text":346},{"id":452,"depth":148,"text":453},{"id":599,"depth":133,"text":599,"children":1442},[1443,1444],{"id":602,"depth":148,"text":603},{"id":668,"depth":148,"text":669},{"id":809,"depth":133,"text":810},{"id":821,"depth":133,"text":821,"children":1447},[1448,1449,1450,1451],{"id":824,"depth":148,"text":825},{"id":938,"depth":148,"text":939},{"id":1020,"depth":148,"text":1021},{"id":1145,"depth":148,"text":1146},{"id":1338,"depth":133,"text":1338},null,"Nuxt Contentでフロントマターが表示されない問題の原因と解決方法","md",{},"/troubleshooting-frontmatter-display",false,"2025-10-02T00:00:00.000Z",{"title":5,"description":1454},"2025-10/2025-10-02/troubleshooting-frontmatter-display",[1463,123,1464,1465,1466],"nuxt","troubleshooting","frontmatter","bom","TWUOKQg_ictY0rlBTeHTC19l3zZZC-mN1AlbAUU6aRo",[],[1470,1474,1477,1481,1485],{"title":1471,"path":1472,"publishedAt":1473},"Nuxt Content: SQLite フィールドマッピング仕様","/nuxt-content-sqlite-field-mapping","2025-10-04T00:00:00.000Z",{"title":1475,"path":1476,"publishedAt":1459},"Nuxt Content ルーティング仕様メモ（2025-10-02）","/content-routing-guide",{"title":1478,"path":1479,"publishedAt":1480},"Nuxt Content v3 + Cloudflare Pages で直リンク時に404になる問題の解決","/nuxt-content-cloudflare-404-fix","2026-02-11T00:00:00.000Z",{"title":1482,"path":1483,"publishedAt":1484},"Nuxt SSRエラー対策: データ分割とClientOnly","/nuxt-client-only-guide","2025-12-15T00:00:00.000Z",{"title":1486,"path":1487,"publishedAt":1488},"ブログ一覧→記事ページ遷移が遅い問題の調査","/blog-page-transition-slow-investigation","2025-12-06T00:00:00.000Z","https://log.eurekapu.com/og/blog/troubleshooting-frontmatter-display.png?v=2025-10-02T00%3A00%3A00.000Z&title=%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%83%9E%E3%82%BF%E3%83%BC%E8%A1%A8%E7%A4%BA%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E3%82%B7%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%EF%BC%882025-10-02%EF%BC%89&author=Kei%20Komatsu&sig=52fdbf0ee7872be5",1785654655033]