[{"data":1,"prerenderedAt":1101},["ShallowReactive",2],{"sidebar-page":3,"tag-Markdown":4},null,[5,543],{"id":6,"title":7,"author":8,"body":9,"cover":3,"date":532,"description":533,"extension":397,"meta":534,"navigation":54,"path":535,"seo":536,"stem":537,"tags":538,"__hash__":542},"content\u002Fmarkdown-nunjucks-usage-2026-09-18.md","关于在 Markdown 中嵌入 Nunjucks 组件的说明","AeYunDian",{"type":10,"value":11,"toc":523},"minimark",[12,21,26,29,32,62,65,68,72,75,77,97,99,106,109,112,116,119,121,153,155,158,165,169,172,174,193,195,198,201,207,210,212,231,233,236,241,245,257,259,301,303,426,430,441,448,450,465,467,485,492,499,513,517,520],[13,14,15,16,20],"p",{},"本站的 ",[17,18,19],"code",{},".md"," 文件由 Eleventy 的 Nunjucks 引擎在构建时编译。正文中的 Nunjucks 模板语法会被解析执行，组件以 macro 的形式调用。现将使用方法说明如下。",[22,23,25],"h2",{"id":24},"一基本用法","一、基本用法",[13,27,28],{},"在 frontmatter 之后，正文中直接书写 Nunjucks 语法即可。使用组件前，需要先从组件文件导入对应的 macro：",[13,30,31],{},"{% raw %}",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-njk shiki shiki-themes monokai","{% from \"components\u002Fbutton.njk\" import button %}\n\n{{ button({ text: \"阅读全文\", href: \"\u002Fposts\u002Fhello\u002F\", type: \"primary\" }) }}\n","njk","",[17,40,41,49,56],{"__ignoreMap":38},[42,43,46],"span",{"class":44,"line":45},"line",1,[42,47,48],{},"{% from \"components\u002Fbutton.njk\" import button %}\n",[42,50,52],{"class":44,"line":51},2,[42,53,55],{"emptyLinePlaceholder":54},true,"\n",[42,57,59],{"class":44,"line":58},3,[42,60,61],{},"{{ button({ text: \"阅读全文\", href: \"\u002Fposts\u002Fhello\u002F\", type: \"primary\" }) }}\n",[13,63,64],{},"{% endraw %}",[13,66,67],{},"渲染结果是一个带样式的按钮链接。正文中的 Nunjucks 语法与 Markdown 可以混用，不会相互干扰。",[22,69,71],{"id":70},"二条件渲染","二、条件渲染",[13,73,74],{},"Nunjucks 的 if 标签用于根据 frontmatter 或站点数据决定是否输出某段内容。",[13,76,31],{},[33,78,80],{"className":35,"code":79,"language":37,"meta":38,"style":38},"{% if description %}\n\u003Cp>本文摘要：{{ description }}\u003C\u002Fp>\n{% endif %}\n",[17,81,82,87,92],{"__ignoreMap":38},[42,83,84],{"class":44,"line":45},[42,85,86],{},"{% if description %}\n",[42,88,89],{"class":44,"line":51},[42,90,91],{},"\u003Cp>本文摘要：{{ description }}\u003C\u002Fp>\n",[42,93,94],{"class":44,"line":58},[42,95,96],{},"{% endif %}\n",[13,98,64],{},[13,100,101,102,105],{},"实际效果：本页的 ",[17,103,104],{},"description"," 有值，所以下面的摘要会显示出来。",[13,107,108],{},"{% if description %}",[13,110,111],{},"本文摘要：{{ description }}",[22,113,115],{"id":114},"三循环渲染","三、循环渲染",[13,117,118],{},"for 标签用于遍历数组，比如站点导航、文章标签。",[13,120,31],{},[33,122,124],{"className":35,"code":123,"language":37,"meta":38,"style":38},"\u003Cul>\n{% for item in site.navigation %}\n  \u003Cli>\u003Ca href=\"{{ item.url }}\">{{ ui.nav[item.key] }}\u003C\u002Fa>\u003C\u002Fli>\n{% endfor %}\n\u003C\u002Ful>\n",[17,125,126,131,136,141,147],{"__ignoreMap":38},[42,127,128],{"class":44,"line":45},[42,129,130],{},"\u003Cul>\n",[42,132,133],{"class":44,"line":51},[42,134,135],{},"{% for item in site.navigation %}\n",[42,137,138],{"class":44,"line":58},[42,139,140],{},"  \u003Cli>\u003Ca href=\"{{ item.url }}\">{{ ui.nav[item.key] }}\u003C\u002Fa>\u003C\u002Fli>\n",[42,142,144],{"class":44,"line":143},4,[42,145,146],{},"{% endfor %}\n",[42,148,150],{"class":44,"line":149},5,[42,151,152],{},"\u003C\u002Ful>\n",[13,154,64],{},[13,156,157],{},"输出为：",[33,159,163],{"className":160,"code":123,"language":162},[161],"language-text","text",[17,164,123],{"__ignoreMap":38},[22,166,168],{"id":167},"四嵌入组件","四、嵌入组件",[13,170,171],{},"本站提供的组件均可在正文中直接调用。先导入，再调用：",[13,173,31],{},[33,175,177],{"className":35,"code":176,"language":37,"meta":38,"style":38},"{% from \"components\u002Falert.njk\" import alert %}\n\n{{ alert({ type: \"info\", title: \"提示\", content: \"这是一条信息。\" }) }}\n",[17,178,179,184,188],{"__ignoreMap":38},[42,180,181],{"class":44,"line":45},[42,182,183],{},"{% from \"components\u002Falert.njk\" import alert %}\n",[42,185,186],{"class":44,"line":51},[42,187,55],{"emptyLinePlaceholder":54},[42,189,190],{"class":44,"line":58},[42,191,192],{},"{{ alert({ type: \"info\", title: \"提示\", content: \"这是一条信息。\" }) }}\n",[13,194,64],{},[13,196,197],{},"实际渲染效果：",[13,199,200],{},"{% from \"components\u002Falert.njk\" import alert %}",[13,202,203],{},[204,205],"binding",{"value":206},"alert({ type: \"info\", title: \"提示\", content: \"这是一条信息。\" })",[13,208,209],{},"标签组件同理：",[13,211,31],{},[33,213,215],{"className":35,"code":214,"language":37,"meta":38,"style":38},"{% from \"components\u002Ftag.njk\" import tag %}\n\n{{ tag({ text: \"Eleventy\", href: \"\u002Ftags\u002Feleventy\u002F\", color: \"default\" }) }}\n",[17,216,217,222,226],{"__ignoreMap":38},[42,218,219],{"class":44,"line":45},[42,220,221],{},"{% from \"components\u002Ftag.njk\" import tag %}\n",[42,223,224],{"class":44,"line":51},[42,225,55],{"emptyLinePlaceholder":54},[42,227,228],{"class":44,"line":58},[42,229,230],{},"{{ tag({ text: \"Eleventy\", href: \"\u002Ftags\u002Feleventy\u002F\", color: \"default\" }) }}\n",[13,232,64],{},[13,234,235],{},"{% from \"components\u002Ftag.njk\" import tag %}",[13,237,238],{},[204,239],{"value":240},"tag({ text: \"Eleventy\", href: \"\u002Ftags\u002Feleventy\u002F\", color: \"default\" })",[22,242,244],{"id":243},"五组件参数","五、组件参数",[13,246,247,248,252,253,256],{},"所有组件都以",[249,250,251],"strong",{},"字典","形式传参，可选的键取决于组件定义。以 ",[17,254,255],{},"button"," 为例：",[13,258,31],{},[33,260,262],{"className":35,"code":261,"language":37,"meta":38,"style":38},"{{ button({\n  text: \"提交\",\n  type: \"primary\",\n  size: \"lg\",\n  block: true,\n  disabled: false\n}) }}\n",[17,263,264,269,274,279,284,289,295],{"__ignoreMap":38},[42,265,266],{"class":44,"line":45},[42,267,268],{},"{{ button({\n",[42,270,271],{"class":44,"line":51},[42,272,273],{},"  text: \"提交\",\n",[42,275,276],{"class":44,"line":58},[42,277,278],{},"  type: \"primary\",\n",[42,280,281],{"class":44,"line":143},[42,282,283],{},"  size: \"lg\",\n",[42,285,286],{"class":44,"line":149},[42,287,288],{},"  block: true,\n",[42,290,292],{"class":44,"line":291},6,[42,293,294],{},"  disabled: false\n",[42,296,298],{"class":44,"line":297},7,[42,299,300],{},"}) }}\n",[13,302,64],{},[304,305,306,322],"table",{},[307,308,309],"thead",{},[310,311,312,316,319],"tr",{},[313,314,315],"th",{},"参数",[313,317,318],{},"类型",[313,320,321],{},"说明",[323,324,325,338,357,381,401,414],"tbody",{},[310,326,327,332,335],{},[328,329,330],"td",{},[17,331,162],{},[328,333,334],{},"string",[328,336,337],{},"按钮文字",[310,339,340,345,347],{},[328,341,342],{},[17,343,344],{},"href",[328,346,334],{},[328,348,349,350,353,354],{},"有值时渲染为 ",[17,351,352],{},"\u003Ca>","，否则为 ",[17,355,356],{},"\u003Cbutton>",[310,358,359,364,366],{},[328,360,361],{},[17,362,363],{},"type",[328,365,334],{},[328,367,368,371,372,371,375,371,378],{},[17,369,370],{},"primary"," \u002F ",[17,373,374],{},"secondary",[17,376,377],{},"success",[17,379,380],{},"danger",[310,382,383,388,390],{},[328,384,385],{},[17,386,387],{},"size",[328,389,334],{},[328,391,392,371,395,371,398],{},[17,393,394],{},"sm",[17,396,397],{},"md",[17,399,400],{},"lg",[310,402,403,408,411],{},[328,404,405],{},[17,406,407],{},"block",[328,409,410],{},"boolean",[328,412,413],{},"是否占满整行",[310,415,416,421,423],{},[328,417,418],{},[17,419,420],{},"disabled",[328,422,410],{},[328,424,425],{},"是否禁用",[22,427,429],{"id":428},"六注意事项","六、注意事项",[13,431,432,433,436,437,440],{},"（一）",[249,434,435],{},"组件需要显式导入","。Nunjucks 的 macro 不像 Vue 组件那样自动注册，必须在文章里用 ",[17,438,439],{},"from ... import ..."," 后再调用。",[13,442,443,444,447],{},"（二）",[249,445,446],{},"字典里不能嵌套双花括号","。以下写法是错的——字典内部不能再写模板表达式，需要先 set 再引用：",[13,449,31],{},[33,451,453],{"className":35,"code":452,"language":37,"meta":38,"style":38},"{% set href = \"\u002Ftags\u002F\" + (t | tagSlug) + \"\u002F\" %}\n{{ tag({ text: t, href: href }) }}\n",[17,454,455,460],{"__ignoreMap":38},[42,456,457],{"class":44,"line":45},[42,458,459],{},"{% set href = \"\u002Ftags\u002F\" + (t | tagSlug) + \"\u002F\" %}\n",[42,461,462],{"class":44,"line":51},[42,463,464],{},"{{ tag({ text: t, href: href }) }}\n",[13,466,64],{},[13,468,469,470,473,474,477,478,480,481,484],{},"（三）",[249,471,472],{},"Markdown 里的 shell 语法可能被误解析","。Nunjucks 会把花括号加井号当作注释开始标记，shell 脚本里取字符串长度的那种写法会触发 ",[17,475,476],{},"expected end of comment"," 错误。解决办法是用 ",[17,479,31],{}," 包裹那一行，或者改用等价的 shell 命令，例如 ",[17,482,483],{},"expr length \"$str\"","。",[13,486,487,488,491],{},"（四）",[249,489,490],{},"构建时编译","。正文中的 Nunjucks 在构建阶段执行，输出纯 HTML。若 macro 名或参数拼写错误，会在构建时报错，而不是静默忽略。",[13,493,494,495,498],{},"（五）",[249,496,497],{},"没有运行时状态","。本站是静态站点，正文里不存在 Vue 那样的响应式状态。需要交互（比如切换显示）时，要借助 jQuery 或原生 JS，且只在现代浏览器中执行，IE7 只保证静态内容的可读性。",[13,500,501,502,505,506,509,510,484],{},"（六）",[249,503,504],{},"不要写 style 块","。文章内的样式用已有 CSS 类或内联 ",[17,507,508],{},"style"," 属性，不推荐在 Markdown 里写 ",[17,511,512],{},"\u003Cstyle>",[22,514,516],{"id":515},"七小结","七、小结",[13,518,519],{},"Markdown 与 Nunjucks 的融合让静态内容具备了组件化能力。文章可以引用全局数据、复用 UI 组件、按条件或循环渲染结构化内容，同时保持构建产物是纯静态 HTML，兼容到 IE7。这使得一批需要在多篇文章里重复出现的结构，可以被抽成组件统一维护。",[508,521,522],{},"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);}",{"title":38,"searchDepth":51,"depth":51,"links":524},[525,526,527,528,529,530,531],{"id":24,"depth":51,"text":25},{"id":70,"depth":51,"text":71},{"id":114,"depth":51,"text":115},{"id":167,"depth":51,"text":168},{"id":243,"depth":51,"text":244},{"id":428,"depth":51,"text":429},{"id":515,"depth":51,"text":516},"2026-10-03","本站 Markdown 文件由 Nunjucks 编译，正文中可直接调用组件 macro、条件渲染与循环。",{},"\u002Fmarkdown-nunjucks-usage-2026-09-18",{"title":7,"description":533},"markdown-nunjucks-usage-2026-09-18",[539,540,541],"Nunjucks","Markdown","Eleventy","MdUbcFEW1qf-NzpeyZmkI2XJI4m6X-6wIMK7c9vGCSs",{"id":544,"title":545,"author":8,"body":546,"cover":3,"date":1092,"description":38,"extension":397,"meta":1093,"navigation":54,"path":1094,"seo":1095,"stem":1096,"tags":1097,"__hash__":1100},"content\u002Fmarkdown-vue-usage-2026-09-18.md","关于在 Markdown 中嵌入 Vue 组件的说明",{"type":10,"value":547,"toc":1088},[548,554,558,571,573,579,705,708,1085],[549,550,551],"blockquote",{},[13,552,553],{},"这篇文章已经过时，此描述的内容与现有架构不相同",[555,556,557],"script",{"setup":38},"\nimport { ref } from 'vue'\nimport GovPanel from '@\u002Findex\u002Fcomponents\u002Fcommon\u002FGovPanel.vue'\nimport GovButton from '@\u002Findex\u002Fcomponents\u002Fcommon\u002FGovButton.vue'\nimport { showAlert } from '@\u002Findex\u002Fcomponents\u002Fcommon\u002Fdialog'\n\nconst count = ref(0)\nconst showTip = ref(true)\n\nfunction increment() {\n    count.value += 1\n}\n\nfunction handleAlert() {\n    showAlert('来自文章内的事件')\n}\n",[13,559,15,560,562,563,566,567,570],{},[17,561,19],{}," 文件由 ",[17,564,565],{},"unplugin-vue-markdown"," 在构建时编译为 Vue 单文件组件。正文中的 Vue 组件标签会被当作模板的一部分解析，",[17,568,569],{},"\u003Cscript setup>"," 中的逻辑对正文完全可见。现将使用方法说明如下。",[22,572,25],{"id":24},[13,574,575,576,578],{},"在 frontmatter 之后、正文之前书写 ",[17,577,569],{},"，导入所需组件与响应式 API 即可。",[33,580,584],{"className":581,"code":582,"language":583,"meta":38,"style":38},"language-vue shiki shiki-themes monokai","\u003Cscript setup>\nimport { ref } from \"vue\";\nimport GovButton from \"@\u002Findex\u002Fcomponents\u002Fcommon\u002FGovButton.vue\";\n\nconst count = ref(0);\n\u003C\u002Fscript>\n\n正文中可以像这样使用：\n\u003CGovButton variant=\"primary\">按钮\u003C\u002FGovButton>\n","vue",[17,585,586,602,620,634,638,663,672,676,682],{"__ignoreMap":38},[42,587,588,592,595,599],{"class":44,"line":45},[42,589,591],{"class":590},"sCdxs","\u003C",[42,593,555],{"class":594},"s8I7P",[42,596,598],{"class":597},"sHkqI"," setup",[42,600,601],{"class":590},">\n",[42,603,604,607,610,613,617],{"class":44,"line":51},[42,605,606],{"class":594},"import",[42,608,609],{"class":590}," { ref } ",[42,611,612],{"class":594},"from",[42,614,616],{"class":615},"s_Ekj"," \"vue\"",[42,618,619],{"class":590},";\n",[42,621,622,624,627,629,632],{"class":44,"line":58},[42,623,606],{"class":594},[42,625,626],{"class":590}," GovButton ",[42,628,612],{"class":594},[42,630,631],{"class":615}," \"@\u002Findex\u002Fcomponents\u002Fcommon\u002FGovButton.vue\"",[42,633,619],{"class":590},[42,635,636],{"class":44,"line":143},[42,637,55],{"emptyLinePlaceholder":54},[42,639,640,644,647,650,653,656,660],{"class":44,"line":149},[42,641,643],{"class":642},"sOx1s","const",[42,645,646],{"class":590}," count ",[42,648,649],{"class":594},"=",[42,651,652],{"class":597}," ref",[42,654,655],{"class":590},"(",[42,657,659],{"class":658},"s7s5_","0",[42,661,662],{"class":590},");\n",[42,664,665,668,670],{"class":44,"line":291},[42,666,667],{"class":590},"\u003C\u002F",[42,669,555],{"class":594},[42,671,601],{"class":590},[42,673,674],{"class":44,"line":297},[42,675,55],{"emptyLinePlaceholder":54},[42,677,679],{"class":44,"line":678},8,[42,680,681],{"class":590},"正文中可以像这样使用：\n",[42,683,685,687,690,693,695,698,701,703],{"class":44,"line":684},9,[42,686,591],{"class":590},[42,688,689],{"class":594},"GovButton",[42,691,692],{"class":597}," variant",[42,694,649],{"class":590},[42,696,697],{"class":615},"\"primary\"",[42,699,700],{"class":590},">按钮\u003C\u002F",[42,702,689],{"class":594},[42,704,601],{"class":590},[13,706,707],{},"组件标签与 Markdown 语法可以混用。以下为实际渲染效果：",[709,710,712,713,712,720,729,730,733,712,735,739,750,754,765],"gov-panel",{"title":711},"示例一：响应式计数器","\n  ",[13,714,715,716],{},"当前计数：",[717,718,719],"b",{},"{{ count }}",[721,722,723,724,728],"govbutton",{"variant":370},"\n    ",[725,726],"myicon",{"icon":727},"plus"," 增加\n  "," ",[731,732],"br",{},[731,734],{},[721,736,738],{"variant":737},"default","重置",[740,741,745,746,749],"div",{"className":742},[743,744],"md-alert","md-alert--tip","\n  文章内的 ",[17,747,748],{},"ref"," 是独立的响应式状态，作用域限于当前文章的组件实例，不会与其他文章或站点状态相互影响。\n",[22,751,753],{"id":752},"二条件渲染与列表渲染","二、条件渲染与列表渲染",[13,755,756,757,760,761,764],{},"Vue 的 ",[17,758,759],{},"v-if","、",[17,762,763],{},"v-for"," 等指令在正文中同样有效。",[709,766,712,768,712,774,712,782,789,798,807,811,814],{"title":767},"示例二：条件渲染",[721,769,723,770,773],{"variant":370},[725,771],{"icon":772},"eye"," 切换显示\n  ",[13,775,778,779,781],{"v-if":776,"style":777},"showTip","margin-top: 12px;","\n    这段文字由 ",[17,780,759],{}," 控制，当前可见。\n  ",[13,783,778,785,788],{"v-else":38,"style":784},"margin-top: 12px; color: #999;",[17,786,787],{},"v-else"," 控制，当前显示的是它。\n  ",[13,790,791,792,794,795,797],{},"下面的列表由 ",[17,793,763],{}," 渲染，数据来自文章内的 ",[17,796,569],{},"：",[799,800,712,801],"ul",{},[802,803,806],"li",{"v-for":804,":key":805},"i in 3","i","第 {{ i }} 项，共 3 项",[22,808,810],{"id":809},"三嵌入组件","三、嵌入组件",[13,812,813],{},"本站提供的政务组件均可在正文中直接使用。",[709,815,712,818,712,827,839],{"title":816,"tone":817},"示例三：组件组合","red",[13,819,820,821,823,824,797],{},"以下按钮均为 ",[17,822,689],{}," 组件的不同 ",[17,825,826],{},"variant",[740,828,723,830,723,833,723,836,712],{"style":829},"display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px;",[721,831,832],{"variant":370},"主要操作",[721,834,835],{"variant":380},"危险操作",[721,837,838],{"variant":737},"次要操作",[709,840,712,842,860,864,871],{"title":841},"示例四：图标使用",[13,843,723,844,847,848,851,852,855,856,859],{},[725,845],{"icon":846},"download"," 下载\n    ",[725,849],{"icon":850},"web"," 官网\n    ",[725,853],{"icon":854},"code-tags"," 源码\n    ",[725,857],{"icon":858},"file-document-outline"," 文档\n  ",[22,861,863],{"id":862},"四事件绑定","四、事件绑定",[13,865,866,867,870],{},"组件上的 ",[17,868,869],{},"@click"," 等事件可以直接绑定到文章内的函数。",[709,872,712,874,877,880,978,982,993,1018,1037,1042,1058,1070,1074,1077],{"title":873},"示例五：事件处理",[721,875,876],{"variant":370},"\n    点击弹出提示\n  ",[13,878,879],{},"实际写法如下：",[33,881,883],{"className":581,"code":882,"language":583,"meta":38,"style":38},"\u003Cscript setup>\nfunction handleAlert() {\n  alert(\"来自文章内的事件\");\n}\n\u003C\u002Fscript>\n\n\u003CGovButton variant=\"primary\" @click=\"handleAlert\">\n  点击弹出提示\n\u003C\u002FGovButton>\n",[17,884,885,895,906,918,923,931,935,965,970],{"__ignoreMap":38},[42,886,887,889,891,893],{"class":44,"line":45},[42,888,591],{"class":590},[42,890,555],{"class":594},[42,892,598],{"class":597},[42,894,601],{"class":590},[42,896,897,900,903],{"class":44,"line":51},[42,898,899],{"class":642},"function",[42,901,902],{"class":597}," handleAlert",[42,904,905],{"class":590},"() {\n",[42,907,908,911,913,916],{"class":44,"line":58},[42,909,910],{"class":597},"  alert",[42,912,655],{"class":590},[42,914,915],{"class":615},"\"来自文章内的事件\"",[42,917,662],{"class":590},[42,919,920],{"class":44,"line":143},[42,921,922],{"class":590},"}\n",[42,924,925,927,929],{"class":44,"line":149},[42,926,667],{"class":590},[42,928,555],{"class":594},[42,930,601],{"class":590},[42,932,933],{"class":44,"line":291},[42,934,55],{"emptyLinePlaceholder":54},[42,936,937,939,941,943,945,947,950,953,955,958,961,963],{"class":44,"line":297},[42,938,591],{"class":590},[42,940,689],{"class":594},[42,942,692],{"class":597},[42,944,649],{"class":590},[42,946,697],{"class":615},[42,948,949],{"class":590}," @",[42,951,952],{"class":597},"click",[42,954,649],{"class":590},[42,956,957],{"class":590},"\"",[42,959,960],{"class":590},"handleAlert",[42,962,957],{"class":590},[42,964,601],{"class":590},[42,966,967],{"class":44,"line":678},[42,968,969],{"class":590},"  点击弹出提示\n",[42,971,972,974,976],{"class":44,"line":684},[42,973,667],{"class":590},[42,975,689],{"class":594},[42,977,601],{"class":590},[22,979,981],{"id":980},"五注意事项","五、注意事项",[13,983,432,984,986,987,989,990,992],{},[249,985,435],{},"。方案 B 下文章是独立的 Vue 组件，组件不会自动注册。必须在 ",[17,988,569],{}," 中 ",[17,991,606],{},"，不能依赖全局注册。",[13,994,443,995,998,999,1002,1003,1006,1007,1010,1011,760,1014,1017],{},[249,996,997],{},"自定义组件请显式闭合","。markdown-it 在处理块级 HTML 时，自闭合的自定义组件标签（",[17,1000,1001],{},"\u003CMyIcon ... \u002F>","）容易丢失自闭合标志，导致 Vue 编译器报 ",[17,1004,1005],{},"Element is missing end tag","。建议所有自定义组件都写成 ",[17,1008,1009],{},"\u003CMyIcon ...>\u003C\u002FMyIcon>","，HTML void 元素（",[17,1012,1013],{},"\u003Cbr>",[17,1015,1016],{},"\u003Cimg>","）不受影响。",[13,1019,469,1020,1023,1024,371,1027,371,1030,1033,1034,484],{},[249,1021,1022],{},"旧版容器语法不再生效","。本站早期的 ",[17,1025,1026],{},"::: tip",[17,1028,1029],{},"::: warning",[17,1031,1032],{},"::: tabs"," 等自定义容器已在迁移中移除，改用原生 HTML 类表达，例如 ",[17,1035,1036],{},"\u003Cdiv class=\"md-alert md-alert--tip\">…\u003C\u002Fdiv>",[13,1038,487,1039,1041],{},[249,1040,490],{},"。正文中的组件在构建阶段编译为 render function，而非运行时解析。若组件名拼写错误，会在构建时或开发时控制台提示，而不会静默忽略。",[13,1043,494,1044,1047,1048,1050,1051,1054,1055,1057],{},[249,1045,1046],{},"样式作用域","。文章内联写的 ",[17,1049,508],{}," 属性作用于当前元素，Markdown 渲染出的标签样式由 ",[17,1052,1053],{},"markdown.css"," 统一控制。若需要局部样式，建议在文章内使用内联 ",[17,1056,508],{},"，或封装为独立组件。",[13,1059,501,1060,1066,1067,1069],{},[249,1061,1062,1063,1065],{},"不要写 ",[17,1064,512],{}," 块","。本站暂不支持在 Markdown 中书写 ",[17,1068,512],{},"，会与 SFC 编译流程冲突。需要样式时优先使用已有 CSS 变量或内联样式。",[22,1071,1073],{"id":1072},"六小结","六、小结",[13,1075,1076],{},"Markdown 与 Vue 的融合让静态内容具备了组件化的能力。文章不再只是纯文本，而是可以拥有响应式状态、可复用组件与事件交互的完整页面单元。这使得一些原本需要额外页面承载的功能，可以直接在文章内表达。",[13,1078,1079,1080,484],{},"如需查看本站组件清单，可参阅",[1081,1082,1084],"a",{"href":1083},"\u002Fsite-design-compliance-2026-09-16","《关于本站对照国办发〔2017〕47号文开展设计规范调整的说明》",[508,1086,1087],{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html pre.shiki code .sOx1s, html code.shiki .sOx1s{--shiki-default:#66D9EF;--shiki-default-font-style:italic}html pre.shiki code .s7s5_, html code.shiki .s7s5_{--shiki-default:#AE81FF}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);}",{"title":38,"searchDepth":51,"depth":51,"links":1089},[1090,1091],{"id":24,"depth":51,"text":25},{"id":752,"depth":51,"text":753},"2026-09-18",{},"\u002Fmarkdown-vue-usage-2026-09-18",{"title":545,"description":38},"markdown-vue-usage-2026-09-18",[1098,540,1099],"Vue","内容层","pLUYvePhQ2UO_ExUlCY-OCrjlRk013xQpue_6Xm0wzs",1794733996711]