[{"data":1,"prerenderedAt":720},["ShallowReactive",2],{"article-\u002Fpages\u002Fnuxt-custom-toc":3},{"current":4,"prev":714,"next":717},{"id":5,"title":6,"body":7,"date":691,"description":692,"downloads":694,"extension":695,"hide":696,"links":697,"meta":698,"navigation":251,"path":699,"seo":700,"stem":702,"tags":703,"__hash__":713},"pages\u002Fpages\u002Fnuxt-custom-toc.md","Nuxt Content自定义哈希与章节符号",{"type":8,"value":9,"toc":681},"minimark",[10,20,38,42,50,61,79,93,126,133,150,161,630,641,660,677],[11,12,6,15],"h1",{"id":13,"class":14},"nuxt-content自定义哈希与章节符号","section-heading",[16,17],"a",{"class":18,"href":19},"section-link","#nuxt-content自定义哈希与章节符号",[21,22,23,24],"h2",{"id":23,"class":14},"代码说明",[16,25,27,33],{"class":18,"href":26},"#代码说明",[28,29,32],"span",{"className":30},[31],"visually-hidden","章节",[28,34,37],{"ariaHidden":35,"tabIndex":36},"true",-1," §",[39,40,41],"p",{},"Nuxt基于Vue，用于构建Web应用，支持文件路由，服务端渲染等功能。Nuxt Content可管理Markdown等内容并自动渲染。",[39,43,44,45,49],{},"本文介绍了在",[46,47,48],"code",{},"rehype","中通过两个插件，实现的自定义哈希与章节符号，并提供其配置方法。",[21,51,52,53],{"id":52,"class":14},"前置条件",[16,54,56,59],{"class":18,"href":55},"#前置条件",[28,57,32],{"className":58},[31],[28,60,37],{"ariaHidden":35,"tabIndex":36},[39,62,63,64,67,68,67,71,74,75,78],{},"本文基于",[46,65,66],{},"node v24","，",[46,69,70],{},"npm 11",[46,72,73],{},"nuxt 4","和",[46,76,77],{},"nuxt content 3","。",[39,80,81,82,74,85,88,89,92],{},"首先需要",[46,83,84],{},"rehype-slug",[46,86,87],{},"rehype-autolink-headings","两个插件，可以通过",[46,90,91],{},"npm","安装。",[94,95,100],"pre",{"className":96,"code":97,"language":98,"meta":99,"style":99},"language-bash shiki shiki-themes one-dark-pro one-dark-pro one-light","npm install rehype-slug\nnpm install rehype-autolink-headings\n","bash","",[46,101,102,116],{"__ignoreMap":99},[28,103,106,109,113],{"class":104,"line":105},"line",1,[28,107,91],{"class":108},"sK8D8",[28,110,112],{"class":111},"sAySN"," install",[28,114,115],{"class":111}," rehype-slug\n",[28,117,119,121,123],{"class":104,"line":118},2,[28,120,91],{"class":108},[28,122,112],{"class":111},[28,124,125],{"class":111}," rehype-autolink-headings\n",[39,127,128,129,132],{},"文档可以在",[46,130,131],{},"Github","上找到：",[134,135,136,144],"ul",{},[137,138,139],"li",{},[16,140,141],{"href":141,"rel":142},"https:\u002F\u002Fgithub.com\u002Frehypejs\u002Frehype-slug",[143],"nofollow",[137,145,146],{},[16,147,148],{"href":148,"rel":149},"https:\u002F\u002Fgithub.com\u002Frehypejs\u002Frehype-autolink-headings",[143],[21,151,152,153],{"id":152,"class":14},"核心代码",[16,154,156,159],{"class":18,"href":155},"#核心代码",[28,157,32],{"className":158},[31],[28,160,37],{"ariaHidden":35,"tabIndex":36},[94,162,166],{"className":163,"code":164,"language":165,"meta":99,"style":99},"language-typescript shiki shiki-themes one-dark-pro one-dark-pro one-light","import { h } from 'hastscript';\nimport type { Nodes } from 'hast';\nimport rehypeAutolinkHeadings from 'rehype-autolink-headings';\nimport rehypeSlug from 'rehype-slug';\n\nexport default defineNuxtConfig({\n  \u002F\u002F 省略其他配置……\n  content: {\n    build: {\n      markdown: {\n        rehypePlugins: {\n          'rehype-slug': {\n            instance: rehypeSlug,\n            options: {},\n          },\n          'rehype-autolink-headings': {\n            instance: rehypeAutolinkHeadings,\n            options: {\n              behavior: 'append',\n              headingProperties: { class: 'section-heading' },\n              properties: { class: 'section-link' },\n              content(node: Nodes) {\n                if (node.type === 'element' && node.tagName === 'h1') {\n                  return [];\n                }\n                return [\n                  h('span', { ariaHidden: 'true', tabIndex: -1 }, ' §'),\n                ];\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n});\n","typescript",[46,167,168,194,215,231,246,253,269,276,289,299,309,319,329,342,353,359,369,380,389,402,423,442,464,507,516,522,531,577,583,589,595,600,606,612,618,624],{"__ignoreMap":99},[28,169,170,174,178,182,185,188,191],{"class":104,"line":105},[28,171,173],{"class":172},"sXQNX","import",[28,175,177],{"class":176},"sAxZK"," { ",[28,179,181],{"class":180},"sEUzk","h",[28,183,184],{"class":176}," } ",[28,186,187],{"class":172},"from",[28,189,190],{"class":111}," 'hastscript'",[28,192,193],{"class":176},";\n",[28,195,196,198,201,203,206,208,210,213],{"class":104,"line":118},[28,197,173],{"class":172},[28,199,200],{"class":172}," type",[28,202,177],{"class":176},[28,204,205],{"class":180},"Nodes",[28,207,184],{"class":176},[28,209,187],{"class":172},[28,211,212],{"class":111}," 'hast'",[28,214,193],{"class":176},[28,216,218,220,223,226,229],{"class":104,"line":217},3,[28,219,173],{"class":172},[28,221,222],{"class":180}," rehypeAutolinkHeadings",[28,224,225],{"class":172}," from",[28,227,228],{"class":111}," 'rehype-autolink-headings'",[28,230,193],{"class":176},[28,232,234,236,239,241,244],{"class":104,"line":233},4,[28,235,173],{"class":172},[28,237,238],{"class":180}," rehypeSlug",[28,240,225],{"class":172},[28,242,243],{"class":111}," 'rehype-slug'",[28,245,193],{"class":176},[28,247,249],{"class":104,"line":248},5,[28,250,252],{"emptyLinePlaceholder":251},true,"\n",[28,254,256,259,263,266],{"class":104,"line":255},6,[28,257,258],{"class":172},"export",[28,260,262],{"class":261},"segcx"," default",[28,264,265],{"class":108}," defineNuxtConfig",[28,267,268],{"class":176},"({\n",[28,270,272],{"class":104,"line":271},7,[28,273,275],{"class":274},"sT61s","  \u002F\u002F 省略其他配置……\n",[28,277,279,282,286],{"class":104,"line":278},8,[28,280,281],{"class":180},"  content",[28,283,285],{"class":284},"sHJmM",":",[28,287,288],{"class":176}," {\n",[28,290,292,295,297],{"class":104,"line":291},9,[28,293,294],{"class":180},"    build",[28,296,285],{"class":284},[28,298,288],{"class":176},[28,300,302,305,307],{"class":104,"line":301},10,[28,303,304],{"class":180},"      markdown",[28,306,285],{"class":284},[28,308,288],{"class":176},[28,310,312,315,317],{"class":104,"line":311},11,[28,313,314],{"class":180},"        rehypePlugins",[28,316,285],{"class":284},[28,318,288],{"class":176},[28,320,322,325,327],{"class":104,"line":321},12,[28,323,324],{"class":111},"          'rehype-slug'",[28,326,285],{"class":284},[28,328,288],{"class":176},[28,330,332,335,337,339],{"class":104,"line":331},13,[28,333,334],{"class":180},"            instance",[28,336,285],{"class":284},[28,338,238],{"class":180},[28,340,341],{"class":176},",\n",[28,343,345,348,350],{"class":104,"line":344},14,[28,346,347],{"class":180},"            options",[28,349,285],{"class":284},[28,351,352],{"class":176}," {},\n",[28,354,356],{"class":104,"line":355},15,[28,357,358],{"class":176},"          },\n",[28,360,362,365,367],{"class":104,"line":361},16,[28,363,364],{"class":111},"          'rehype-autolink-headings'",[28,366,285],{"class":284},[28,368,288],{"class":176},[28,370,372,374,376,378],{"class":104,"line":371},17,[28,373,334],{"class":180},[28,375,285],{"class":284},[28,377,222],{"class":180},[28,379,341],{"class":176},[28,381,383,385,387],{"class":104,"line":382},18,[28,384,347],{"class":180},[28,386,285],{"class":284},[28,388,288],{"class":176},[28,390,392,395,397,400],{"class":104,"line":391},19,[28,393,394],{"class":180},"              behavior",[28,396,285],{"class":284},[28,398,399],{"class":111}," 'append'",[28,401,341],{"class":176},[28,403,405,408,410,412,415,417,420],{"class":104,"line":404},20,[28,406,407],{"class":180},"              headingProperties",[28,409,285],{"class":284},[28,411,177],{"class":176},[28,413,414],{"class":180},"class",[28,416,285],{"class":284},[28,418,419],{"class":111}," 'section-heading'",[28,421,422],{"class":176}," },\n",[28,424,426,429,431,433,435,437,440],{"class":104,"line":425},21,[28,427,428],{"class":180},"              properties",[28,430,285],{"class":284},[28,432,177],{"class":176},[28,434,414],{"class":180},[28,436,285],{"class":284},[28,438,439],{"class":111}," 'section-link'",[28,441,422],{"class":176},[28,443,445,448,451,455,457,461],{"class":104,"line":444},22,[28,446,447],{"class":108},"              content",[28,449,450],{"class":176},"(",[28,452,454],{"class":453},"s3Kta","node",[28,456,285],{"class":284},[28,458,460],{"class":459},"sgRyO"," Nodes",[28,462,463],{"class":176},") {\n",[28,465,467,470,473,476,479,482,486,489,492,495,497,500,502,505],{"class":104,"line":466},23,[28,468,469],{"class":172},"                if",[28,471,472],{"class":176}," (",[28,474,454],{"class":475},"s6EWR",[28,477,478],{"class":176},".",[28,480,481],{"class":180},"type",[28,483,485],{"class":484},"ssHZq"," ===",[28,487,488],{"class":111}," 'element'",[28,490,491],{"class":484}," &&",[28,493,494],{"class":475}," node",[28,496,478],{"class":176},[28,498,499],{"class":180},"tagName",[28,501,485],{"class":484},[28,503,504],{"class":111}," 'h1'",[28,506,463],{"class":176},[28,508,510,513],{"class":104,"line":509},24,[28,511,512],{"class":172},"                  return",[28,514,515],{"class":176}," [];\n",[28,517,519],{"class":104,"line":518},25,[28,520,521],{"class":176},"                }\n",[28,523,525,528],{"class":104,"line":524},26,[28,526,527],{"class":172},"                return",[28,529,530],{"class":176}," [\n",[28,532,534,537,539,542,545,548,550,553,556,559,561,564,568,571,574],{"class":104,"line":533},27,[28,535,536],{"class":108},"                  h",[28,538,450],{"class":176},[28,540,541],{"class":111},"'span'",[28,543,544],{"class":176},", { ",[28,546,547],{"class":180},"ariaHidden",[28,549,285],{"class":284},[28,551,552],{"class":111}," 'true'",[28,554,555],{"class":176},", ",[28,557,558],{"class":180},"tabIndex",[28,560,285],{"class":284},[28,562,563],{"class":484}," -",[28,565,567],{"class":566},"sMpXI","1",[28,569,570],{"class":176}," }, ",[28,572,573],{"class":111},"' §'",[28,575,576],{"class":176},"),\n",[28,578,580],{"class":104,"line":579},28,[28,581,582],{"class":176},"                ];\n",[28,584,586],{"class":104,"line":585},29,[28,587,588],{"class":176},"              },\n",[28,590,592],{"class":104,"line":591},30,[28,593,594],{"class":176},"            },\n",[28,596,598],{"class":104,"line":597},31,[28,599,358],{"class":176},[28,601,603],{"class":104,"line":602},32,[28,604,605],{"class":176},"        },\n",[28,607,609],{"class":104,"line":608},33,[28,610,611],{"class":176},"      },\n",[28,613,615],{"class":104,"line":614},34,[28,616,617],{"class":176},"    },\n",[28,619,621],{"class":104,"line":620},35,[28,622,623],{"class":176},"  },\n",[28,625,627],{"class":104,"line":626},36,[28,628,629],{"class":176},"});\n",[21,631,632,633],{"id":632,"class":14},"代码解释",[16,634,636,639],{"class":18,"href":635},"#代码解释",[28,637,32],{"className":638},[31],[28,640,37],{"ariaHidden":35,"tabIndex":36},[39,642,643,644,646,647,650,651,654,655,659],{},"在代码中，首先配置了",[46,645,84],{},"插件生成",[46,648,649],{},"id","属性。该插件中使用了",[46,652,653],{},"github-slugger","的生成方式，兼容多语言。注意渲染未经授权的Markdown",[656,657,658],"strong",{},"可能造成跨站脚本攻击","，可参考文档配置单独前缀。",[39,661,662,663,665,666,669,670,672,673,676],{},"之后配置了",[46,664,87],{},"插件。注意该插件仅对有id属性的元素生效。配置支持多种方式，可参考文档。本示例使用了追加（",[46,667,668],{},"append","）模式，添加",[46,671,28],{},"并带有分节符。在",[46,674,675],{},"properties","中可以配置元素的额外属性。",[678,679,680],"style",{},"html pre.shiki code .sK8D8, html code.shiki .sK8D8{--shiki-default:#61AFEF;--shiki-dark:#61AFEF;--shiki-light:#4078F2}html pre.shiki code .sAySN, html code.shiki .sAySN{--shiki-default:#98C379;--shiki-dark:#98C379;--shiki-light:#50A14F}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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .sXQNX, html code.shiki .sXQNX{--shiki-default:#C678DD;--shiki-dark:#C678DD;--shiki-light:#A626A4}html pre.shiki code .sAxZK, html code.shiki .sAxZK{--shiki-default:#ABB2BF;--shiki-dark:#ABB2BF;--shiki-light:#383A42}html pre.shiki code .sEUzk, html code.shiki .sEUzk{--shiki-default:#E06C75;--shiki-dark:#E06C75;--shiki-light:#E45649}html pre.shiki code .segcx, html code.shiki .segcx{--shiki-default:#C678DD;--shiki-dark:#C678DD;--shiki-light:#E45649}html pre.shiki code .sT61s, html code.shiki .sT61s{--shiki-default:#7F848E;--shiki-default-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;--shiki-light:#A0A1A7;--shiki-light-font-style:italic}html pre.shiki code .sHJmM, html code.shiki .sHJmM{--shiki-default:#ABB2BF;--shiki-dark:#ABB2BF;--shiki-light:#0184BC}html pre.shiki code .s3Kta, html code.shiki .s3Kta{--shiki-default:#E06C75;--shiki-default-font-style:italic;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;--shiki-light:#383A42;--shiki-light-font-style:inherit}html pre.shiki code .sgRyO, html code.shiki .sgRyO{--shiki-default:#E5C07B;--shiki-dark:#E5C07B;--shiki-light:#C18401}html pre.shiki code .s6EWR, html code.shiki .s6EWR{--shiki-default:#E5C07B;--shiki-dark:#E5C07B;--shiki-light:#383A42}html pre.shiki code .ssHZq, html code.shiki .ssHZq{--shiki-default:#56B6C2;--shiki-dark:#56B6C2;--shiki-light:#0184BC}html pre.shiki code .sMpXI, html code.shiki .sMpXI{--shiki-default:#D19A66;--shiki-dark:#D19A66;--shiki-light:#986801}",{"title":99,"searchDepth":118,"depth":217,"links":682},[683,685,687,689],{"id":23,"depth":118,"text":684},"代码说明章节 §",{"id":52,"depth":118,"text":686},"前置条件章节 §",{"id":152,"depth":118,"text":688},"核心代码章节 §",{"id":632,"depth":118,"text":690},"代码解释章节 §","2026\u002F05\u002F16",[693],"本文介绍了在rehype中通过两个插件，实现的自定义哈希与章节符号，并提供其配置方法。",[],"md",false,[],{},"\u002Fpages\u002Fnuxt-custom-toc",{"title":6,"description":701},[693],"pages\u002Fnuxt-custom-toc",[704,707,710],[705,706],"lang","web",[708,709],"inspiration","original",[711,712],"content","snippet","eLF4E5DJPhDWR1iK-N1YhMlSLWvzuZf6bEdLSce77Qk",{"title":715,"path":716},"Village of Chaos","\u002Fpages\u002Fvillage-of-chaos",{"title":718,"path":719},"猜词游戏","\u002Fpages\u002Fguess-the-word",1788521248772]