模板繼承是一種常用的前端設計模式，它可以通過利用不同層次模板之間的關系，減少重復代碼的編寫，并提高頁面布局的可維護性。在JavaScript中，模板繼承的實現方式主要有兩種，一種是基于jQuery的模板引擎，另一種是基于Node.js的模板引擎。本文將重點介紹Node.js中的模板繼承實現方式。

在Node.js中，常用的模板引擎有jade、ejs和handlebars等。其中，jade的語法比較簡潔，可以大大減少HTML代碼的編寫量。ejs則更加靈活，支持JavaScript語法。handlebars則是比較接近標準HTML的模板引擎。不同模板引擎之間的語法差異較大，本文將以jade模板引擎為例進行介紹。

//父模板：layout.jade
html
head
title= title
body
block content

// 子模板：index.jade
extends layout
block content
h1= title
p Welcome to #{title}

在上述代碼中，layout.jade是一個父模板，而index.jade是它的一個子模板。通過extends指令，子模板可以繼承父模板的布局結構。在父模板中用block指令定義了一個名為content的塊，在子模板中用block指令重載了名為content的塊，并在其中填充了一些內容。

在使用模板繼承時，還可以使用include指令將一個模板嵌入到另一個模板中作為局部塊。例如，我們可以將一個頭部模板和一個尾部模板作為全局模板，并在不同頁面中使用include指令添加特定的內容塊。

// 全局頭部模板：head.jade
head
title= title
meta(name='viewport', content='width=device-width, initial-scale=1')
link(rel='stylesheet', href= css)
// 全局尾部模板：footer.jade
footer
p Copyright ? #{year}
// 子模板：index.jade
extends layout
include head
block content
h1= title
p Welcome to #{title}
include footer

在上述代碼中，我們將head.jade和footer.jade作為全局模板，分別定義了頭部和尾部的內容。在子模板中，我們通過include指令將頭部和尾部模板嵌入，并在其中填充了名為content的塊。這樣，在不同頁面中我們只需要定義不同的content塊即可實現不同的頁面布局。

模板繼承不僅可以實現頁面布局的復用，還可以實現內容復用。例如，在一個網站中可能有多個頁面都需要展示一個熱門推薦的商品列表。如果我們每個頁面都單獨編寫這個列表，那么無疑會造成大量的冗余代碼。但是，通過模板繼承技術，我們可以將這個列表作為一個獨立的模板，然后在需要展示的頁面中使用include指令引用它。

// 熱門商品模板：hot-products.jade
aside
h2= title
ul
each product in products
li
img(src= product.image)
p= product.name
// 子模板：index.jade
extends layout
include head
block content
h1= title
p Welcome to #{title}
include hot-products
title='Hot Products'
products= hotProducts
include footer
// 子模板：sale.jade
extends layout
include head
block content
h1= title
p Check out our sale items!
include hot-products
title='Sale Items'
products= saleItems
include footer

在上述代碼中，我們將熱門商品模板定義為一個獨立的模板，包含了一個標題和一個商品列表。在子模板中，我們通過include指令指定了需要引用的熱門商品模板，并傳遞了不同的參數來實現不同的內容展示。

總的來說，模板繼承是一種非常實用的前端設計模式，可以幫助我們在頁面布局和內容展示方面實現代碼的復用，提高項目的可維護性。在實踐中，我們可以根據具體需求選擇合適的模板引擎，并結合include和block指令來實現模板繼承。