docs(html): template languages

alibaba · Jan 5, 2025 · 215fece · 215fece
1 parent 3860223
commit 215fece
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/docs/coding/html.md b/docs/coding/html.md
@@ -510,11 +510,32 @@ To fit iPhone's notch screen, you may need some extra configuration. [Learn more
 
   了解更多 HTML 可访问性的知识，可以阅读[这篇 MDN 的文章](https://developer.mozilla.org/zh-CN/docs/learn/Accessibility)。
 
+## Template languages
+
+There are many template languages to generate HTML files, e.g. [Nunjucks], [EJS]. Writting template language syntax should also follow some common specification.
+
+This part uses [Nunjucks] as an example. But it should fit other template languages, too.
+
+### Variables, filters and keywords MUST have spaces around
+
+Level: **Mandatory**
+
+```jinja
+{# ❌ bad, no spaces #}
+{{username}} {{tags|join(',')}}
+
+{# ✅ good #}
+{{ username }} {{ tags | join(',') }}
+```
+
 ## Credits
 
 - [Guo Yunhe](https://github.com/guoyunhe)
 
-## 参考资料
+## References
 
 - [Code Guide by @mdo](http://codeguide.co)
 - [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html)
+
+[EJS]: https://ejs.co/
+[Nunjucks]: https://mozilla.github.io/nunjucks/
diff --git a/docs/coding/html.zh.md b/docs/coding/html.zh.md
@@ -511,6 +511,24 @@ order: 1
 
   了解更多 HTML 可访问性的知识，可以阅读[这篇 MDN 的文章](https://developer.mozilla.org/zh-CN/docs/learn/Accessibility)。
 
+## 模板语言
+
+有非常多不同的模板语言被用来动态生成 HTML 文件，例如 [Nunjucks], [EJS]。编写模板语言代码时，也应该遵循一些常见规约。
+
+此部分以 [Nunjucks] 作为示例，但是同样也适用于其他模板语言。
+
+### 变量，过滤器和关键字必须有前后空格
+
+等级: **强制**
+
+```jinja
+{# ❌ 错误，没有空格 #}
+{{username}} {{tags|join(',')}}
+
+{# ✅ 正确 #}
+{{ username }} {{ tags | join(',') }}
+```
+
 ## 作者署名
 
 - [郭云鹤（鹤仙）](https://github.com/guoyunhe)