顺风 - Html (1) - 芒果文档

📌 相关文章

📜 顺风 - Html (1)

📅 最后修改于: 2023-12-03 15:12:52.785000 🧑 作者: Mango

顺风 - Html

简介

顺风 - Html 是一个轻量级的 Html 模板引擎，用于创建动态 Html 页面。它支持模板继承、数据绑定、条件渲染、循环渲染等常用功能，同时提供了简单易用的模板语法，让开发者能够快速地创建符合要求的 Html 页面。

特点

简单易用：顺风 - Html 提供了简单易用的模板语法，让开发者能够快速上手，从容创建动态 Html 页面。
灵活性好：顺风 - Html 支持多种模板继承方式，可以根据需求选择不同的方式实现复用，同时提供了不同的数据绑定方式，让开发者能够根据实际情况选择最优解决方案。
快速渲染：顺风 - Html 使用高效的渲染引擎，能够快速地将模板转换为 Html 页面，提升了页面的渲染速度。

示例代码

模板文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    <div id="header">
        <h1>{{title}}</h1>
    </div>
    <div id="content">
        {{#if articles.length}}
            <ul>
                {{#each articles as article}}
                    <li><a href="{{article.url}}">{{article.title}}</a></li>
                {{/each}}
            </ul>
        {{else}}
            <p>No articles found.</p>
        {{/if}}
    </div>
    <div id="footer">
        <p>&copy; 2021. All rights reserved.</p>
    </div>
</body>
</html>

数据文件

{
    "title": "My Blog",
    "articles": [
        {
            "title": "Article 1",
            "url": "https://blog.example.com/article1.html"
        },
        {
            "title": "Article 2",
            "url": "https://blog.example.com/article1.html"
        },
        {
            "title": "Article 3",
            "url": "https://blog.example.com/article1.html"
        }
    ]
}

渲染结果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
</head>
<body>
    <div id="header">
        <h1>My Blog</h1>
    </div>
    <div id="content">
        <ul>
            <li><a href="https://blog.example.com/article1.html">Article 1</a></li>
            <li><a href="https://blog.example.com/article1.html">Article 2</a></li>
            <li><a href="https://blog.example.com/article1.html">Article 3</a></li>
        </ul>
    </div>
    <div id="footer">
        <p>&copy; 2021. All rights reserved.</p>
    </div>
</body>
</html>

使用方法

安装

您可以通过 npm 包管理器安装顺风 - Html：

npm install shunfeng-html

渲染模板

const shunfeng = require('shunfeng-html');

const template = '<h1>{{title}}</h1>';
const data = { title: 'Hello, World!' };

const html = shunfeng.render(template, data);

console.log(html); // <h1>Hello, World!</h1>

模板语法

变量绑定

顺风 - Html 使用双括号 {{}} 表示变量绑定，如：

<p>{{content}}</p>

变量 content 将会被替换为相应的值。

条件渲染

顺风 - Html 使用 {{#if condition}} ... {{/if}} 表示条件渲染，如：

{{#if isPublished}}
    <p>Published</p>
{{/if}}

当 isPublished 为 true 时，该段内容将会被渲染，否则将被忽略。

循环渲染

顺风 - Html 使用 {{#each list as item}} ... {{/each}} 表示循环渲染，如：

<ul>
    {{#each articles as article}}
        <li><a href="{{article.url}}">{{article.title}}</a></li>
    {{/each}}
</ul>

将会对 articles 数组中的每个元素进行渲染，渲染结果会添加到 ul 中。

子模板引用

顺风 - Html 使用 {{> partial}} 表示子模板引用，如：

{{> header}}

将会引用名为 header 的子模板。

模板继承

顺风 - Html 支持多种模板继承方式，包括：extends、block、super 和 include 等。

extends 和 block

extends 用于指定父模板，block 用于定义子模板定义的块元素。

父模板：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    {{#if description}}
        <meta name="description" content="{{description}}">
    {{/if}}
</head>
<body>
    <div id="content">
        {{#block "content"}}{{/block}}
    </div>
</body>
</html>

子模板：

{{#extends "layout"}}
{{#block "content"}}
    <ul>
        {{#each articles as article}}
            <li><a href="{{article.url}}">{{article.title}}</a></li>
        {{/each}}
    </ul>
{{/block}}

在子模板中，使用 extends 引用父模板，并使用 block 定义子模板中需要覆盖的块元素。

super

使用 super 可以在子模板中引用父模板中相同的块元素，如：

{{#block "content"}}
    <ul>
        {{#each articles as article}}
            <li><a href="{{article.url}}">{{article.title}}</a></li>
        {{/each}}
    </ul>
    
    {{#if articles.length}}
        {{super}}
    {{else}}
        <p>No articles found.</p>
    {{/if}}
{{/block}}

在子模板中，使用 super 引用父模板中相同名称的块元素，如此处的 content。

include

使用 include 可以在模板中引入子模板。

{{#include "header"}}

将会引入名为 header 的子模板。