如何使用 javascript 为项目中的每个文件创建 html header？

Question

我正在使用 HTML 和 javascript 开发一个简单的 GitHub 页面站点。由于页面不支持 PHP 或 SSI 包含来自单独 HTML 文件的 HTML header，我需要编写一个脚本来创建 header 图像并在菜单功能区中创建 links。

为了便于理解，假设本网站由三个文件组成，路径为：

root/index.html
root/A/pageA.html
root/B/pageB.html

header 每个文件都应该有一个 link。

我能想到的唯一解决方案是在所有文件中使用这些：

<a href='https://somewhere.something/index.html'>Index</a>
<a href='https://somewhere.something/A/pageA.html'>A</a>
<a href='https://somewhere.something/B/pageB.html'>B</a>

我只是不确定这是否是个好习惯！

如果有一种更传统的方法可以达到同样的效果，我很想听听。

Answer 1

你可以利用HTML Imports.

您放置在每个页面上的 <head> 部分将引用单个导入文件：

<head>
  <link rel="import" href="/path/to/import.html">
</head>

您的导入文件包含您要加载到每个页面的 <head> 部分的内容：

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

请注意，导入文件不应包含 <head></head> 标签本身，而应仅包含内容。

Answer 2

下面的 SO 片段不起作用，但这里有效 example - 单击左侧菜单，查看页面源）

async function load(url) {
  let html = await (await fetch(url)).text();
  pageBody.innerHTML = html;
}

let page = location.search.substr(1) || 'index';

load(page + '.html');

<h1>My site</h1>
<ul>
  <li><a href="?index" >Main</a></li>
  <li><a href="?A/pageA" >A</a></li>
  <li><a href="?B/pageB" >B</a></li>
</ul>

<div id="pageBody">

如何使用 javascript 为项目中的每个文件创建 html header？

How to create an html header for every file in a project using javascript?

javascript

html

header

conventions