📅 最后修改于: 2023-12-03 14:52:58.969000 🧑 作者: Mango
有时候，我们需要在网站上的所有页面上都添加一些通用元素，比如标题、导航栏等。但是，有些页面我们又需要隐藏或者不展示这些通用元素，比如登录页面、注册页面等。在这种情况下，怎么样才能在除一个页面之外的所有页面上呈现标题呢？
使用模板引擎是实现这个功能的一种常用方法。在使用模板引擎的时候，我们可以把需要展示的元素写在一个通用的模板文件中，然后在每个页面的模板文件中引入通用模板文件。这样，除了需要自定义元素的页面，其他页面就可以共享同一个通用模板文件，达到代码重用的效果。
下面是一个使用 Handlebars 模板引擎实现在除一个页面之外的所有页面上呈现标题的例子：
<!-- 通用模板文件 header.hbs -->
<header>
<h1>网站标题</h1>
</header>
<!-- 页面模板文件 home.hbs -->
{{! 引入通用模板文件 header.hbs }}
{{#include "header"}}
<main>
<p>这是首页的内容。</p>
</main>
{{! 接下来是其他内容 }}
在这个例子中，我们把网站标题写在了通用模板文件 header.hbs 中，并且使用了 Handlebars 提供的 {{#include}} 语法来引入这个模板文件。这样，除了需要自定义元素的页面，其他页面都会展示同一个网站标题。
除了使用模板引擎，我们还可以使用 JavaScript 在页面加载之后动态地添加通用元素。在这种方法中，我们需要在每个页面中添加一些 JavaScript 代码，来判断当前页面是否需要展示通用元素，然后再动态添加。
下面是一个使用 JavaScript 动态添加元素实现在除一个页面之外的所有页面上呈现标题的例子：
<!-- 页面文件 home.html -->
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
</head>
<body>
<main>
<p>这是首页的内容。</p>
</main>
<script>
if (location.pathname !== '/login.html') {
var headerEl = document.createElement('header');
headerEl.innerHTML = '<h1>网站标题</h1>';
document.body.insertBefore(headerEl, document.body.firstChild);
}
</script>
</body>
</html>
在这个例子中，我们在页面加载之后使用 JavaScript 判断当前页面的路径是否为 /login.html，如果不是，则动态创建了一个 header 元素，并且添加了网站标题。这样，除了登录页面之外的所有页面都会展示网站标题了。
使用模板引擎和 JavaScript 动态添加元素都是实现在除一个页面之外的所有页面上呈现标题的方法。具体实现取决于项目的具体情况和个人喜好。在使用这种方法的时候，我们需要注意，不要让页面过于臃肿，要保持页面的简洁和易读性。同时，在使用 JavaScript 动态添加元素的时候，也要注意浏览器性能，不要给访问者带来不必要的卡顿和负担。