📌  相关文章
📜  html 模板 - Html (1)

📅  最后修改于: 2023-12-03 14:41:56.093000             🧑  作者: Mango

HTML模板 - HTML

HTML（HyperText Markup Language）是一种用于构建网页的标记语言。HTML模板则是一个基于HTML的文件，其中定义了一些占位符和标签，这些可以快速生成具有一定结构的网页。使用HTML模板可以避免重复编写一些代码，提高代码的可复用性和可维护性。

1. 基本语法

HTML模板中包含以下基本结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <!-- 页面内容 -->
    </body>
</html>

其中，<!DOCTYPE html>声明了文档类型，<html>标签表示HTML文档的开始，<head>标签中通常包含一些元数据（如编码方式和关键词等），<title>标签定义网页的标题，<body>标签中则包含了网页的主要内容。

2. 占位符

HTML模板中通常包含一些占位符，以便在运行时动态地替换其中的内容。常见的占位符有：

  • {{ title }}：代表页面标题；
  • {{ content }}：代表页面主要内容；
  • {{ footer }}：代表页面底部内容。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{{ title }}</title>
    </head>
    <body>
        {{ content }}
        {{ footer }}
    </body>
</html>
3. 模板引擎

除了手动使用占位符外，HTML模板还可以使用模板引擎来实现更加灵活的动态替换。常见的模板引擎有：

下面以Handlebars为例，介绍模板引擎的使用方法。

3.1 安装

通过npm安装handlebars包：

npm install handlebars
3.2 编写模板
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{{ title }}</title>
    </head>
    <body>
        <ul>
            {{#each list}}
            <li>{{this}}</li>
            {{/each}}
        </ul>
    </body>
</html>

其中，{{#each list}}表示对list数组进行遍历，{{this}}表示当前遍历到的元素。

3.3 编译模板
const handlebars = require('handlebars');
const source = `
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{{ title }}</title>
    </head>
    <body>
        <ul>
            {{#each list}}
            <li>{{this}}</li>
            {{/each}}
        </ul>
    </body>
</html>
`;
const template = handlebars.compile(source);

上述代码中，handlebars.compile方法将模板字符串编译为模板函数。

3.4 渲染模板
const context = {
    title: '页面标题',
    list: ['项目1', '项目2', '项目3']
};
const html = template(context);
console.log(html);

上述代码中，通过传入一个上下文对象，调用模板函数生成最终的HTML字符串。在上例中，context对象中包含了页面标题和一些列表项数据。

4. 总结

HTML模板是一种快速生成网页结构的方式，使用模板引擎可以更加灵活地实现动态内容替换。Handlebars是一种常用的模板引擎，通过编译和渲染过程，可以实现动态生成HTML的功能。