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

标签 html css

<分区>

我正在学习如何编写一个基本网站。主页是我的 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 来创建我的网页。

最佳答案

我为此使用的是 Pug,它是一个模板引擎,不仅可以让您编写更短、重复更少的标记,还可以在其中嵌入(在编译时执行)js。而且它是开源的!

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

关于html - 如何在多个文件中使用基本的html代码结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59228958/

相关文章:

html - 图像部分作为背景,不缩放

html - 动态扩展左栏到页脚

html - CSS 效果在 Chrome 中有效,但在 IE 11 中无效

html - 菜单列表项和顶部边框

html - 如何在html中并排放置四个图标?

javascript - 单击链接时显示内容

html - min-width 属性不适用于 Div,但适用于 Table 标签

html - 将时间轴从垂直更改为水平

javascript - 禁用网页的浏览器缓存,不适用于 IE

javascript - 想在选择选项上使用它