[{"data":1,"prerenderedAt":543},["ShallowReactive",2],{"sidebar-page":3,"tag-Eleventy":4},null,[5],{"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",1794733996763]