5步掌握ECT多层模板继承：extend、include与block结构完全指南

5步掌握ECT多层模板继承extend、include与block结构完全指南【免费下载链接】ectFastest JavaScript template engine with embedded CoffeeScript syntax项目地址: https://gitcode.com/gh_mirrors/ect/ectECT是性能最快的 JavaScript 模板引擎之一内置 CoffeeScript 语法原生支持多层模板继承通过extend继承父布局、include引入局部模板、block定义可被子页反复覆写的内容块。本文用 5 步带你从零搭建一套布局 → 子布局 → 页面的三层继承结构适合新手和普通用户快速上手。为什么新手需要模板继承想象一个网站每页都有相同的header、footer和左右侧栏。如果没有继承机制你要在几十个页面里复制粘贴这些公共 HTML——改一个地方就要改一百个地方。ECT 的方案非常直观父模板只写占位符插值点子模板声明我继承谁再填充具体内容继承可以层层传递块内容可以被逐层重写下面 5 步全部基于项目自带的 examples/view/ 示例跟着走就能跑通。第1步认识 ECT 继承的三件套先花 3 分钟看懂 4 个指令后面每一步都是它们的组合指令写在哪个文件作用% extend layout %子模板声明继承父模板% content %父模板主体内容插值点% content side1 %父模板具名内容块插值点% block side1 : % ... % end %子模板定义/覆写具名内容块% include header %任意模板引入一个独立模板片段一句话记忆extend 定关系content 挖坑block 填坑include 引块。第2步准备 ECT 渲染器最快配置方法克隆代码仓库如需要git clone https://gitcode.com/gh_mirrors/ect/ect在项目根目录安装依赖即可使用npm install ect创建渲染器只需 3 行核心选项就两个root模板根目录和ext模板扩展名。参考 examples/example.jsvar ECT require(ect); var renderer ECT({ root: __dirname /view, ext: .html }); 小贴士开发期可加watch: true选项模板修改后自动重新加载省去反复刷新。第3步用 extend content 打通第一层继承父模板layout负责挖坑。看 examples/view/layout.htmlheader% include header %/header section% content %/section section% content side1 %/section section% content side2 %/section footer% include footer %/footer第 8 行的% content %是主体插值点子模板里非 block 的所有内容都会塞进这里第 9、10 行是具名插值点只接收同名的 block子模板第一行声明继承其余内容自然落入content插值点% extend layout % pPage content/p就这么简单——子模板一行extend父模板一个content继承链路即建立。第4步extend 链式传递实现多层继承ECT 最强的地方在于继承关系可以一层套一层。示例项目里正好是一条三层链详见 lib/ect.js 中extend的编译实现page.html ──extend── sublayout.html ──extend── layout.html中间层 examples/view/sublayout.html 自己也是子模板同时也是父模板% extend layout % div% content() %/div % block side1 : % side1 content % end %它做两件事把上层页面的内容包进div同时为side1提供一份默认块内容。最终渲染page时ECT 会从最内层开始逐层向上套壳输出。第5步用 block include 精确定制每一块内容现在看完整示例 examples/view/page.html% extend sublayout % pPage content/p % block side1 : % redefined side1 content % end % % block side2 : % side2 content % end %三个知识点一次讲透block 支持多层覆写sublayout先给出side1默认值page再重新定义。子层的定义优先父层的默认值只作兜底实现见 lib/ect.jsinclude 引入局部模板父布局用% include header %引入 examples/view/header.html 这类独立片段公共头部、页脚从此只维护一份include 可传自定义数据写成% include partial, { customVar: Hello } %即可改写片段的局部变量配合循环如% for article in articles : %内逐条 include可以渲染列表常见问题速查FAQ问block 没定义时父模板的content side2会报错吗不会。查不到对应块时返回空字符串该区域直接不输出见 lib/ect.js。问include 和 block 该用哪个固定复用的 HTML 片段头、尾、卡片用include需要被不同页面/不同层级覆写的开放区域用block。问输出变量有什么讲究% var %转义输出%- var %原样输出插值点里直接写%- title %即可取渲染数据。总结5步回顾步骤掌握的能力对应示例文件1extend / content / block / include 指令README.md2配置渲染器 root 与 extexamples/example.js3单层继承 插值点examples/view/layout.html4extend 链式多层继承examples/view/sublayout.html5block 覆写 include 局部模板examples/view/page.html至此你已经拥有完整的 ECT 模板继承体系layout 挖坑 → sublayout 递默认值 → page 填最终内容三层结构清晰、职责分明。照着 examples 目录再跑几遍多层模板继承就不会再让你困惑。【免费下载链接】ectFastest JavaScript template engine with embedded CoffeeScript syntax项目地址: https://gitcode.com/gh_mirrors/ect/ect创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考