时间戳

首页 > 解决方案 > 如何在多个文件中使用基本的 html 代码结构

html - 如何在多个文件中使用基本的 html 代码结构

问题描述

我正在学习如何编写一个基本的网站。主页是我的index.html，遵循基本结构：

<!doctype html>
<html lang="en">
  <head>

    <title>Hello, world!</title>

  </head>

  <body>
  </body>

  <footer>
  </footer>
</html>

一旦我开始创建新的 html 文件，我只想更改 body 标记的内容，使页眉和页脚保持相同的内容。现在，当我想创建一个新的 html 文件时，我index.html用另一个名称复制，例如posts.html，并更改我想要的内容。这不是对我的网站进行编程的有效方法，因为每次我需要对其进行更改时index.html，都需要对其他 html 文件重复所有更改。

有没有办法扩展我的网页来保留页眉和页脚的内容？

我知道 Django 允许程序员使用以下结构来保留网站的基本方面：

{% block content %}
{% endblock %}

不过我没有使用 Django。到目前为止，我只是使用 HTML 来创建我的网页。

标签： htmlcss

解决方案

我使用的是 Pug，它是一个模板引擎，它不仅允许您编写更短且重复性更少的标记，而且还允许在其中嵌入（在编译时执行）js。而且它是开源的！

但是，要设置它，您将需要一个 node.js 设置，这可能需要一些时间。但是您可以稍后将该设置重复用于其他站点，并根据您的需要使用 Sass 或 TypeScript 等其他功能对其进行改进。

推荐阅读