如何使用 javascript 为项目中的每个文件创建 html header?
How to create an html header for every file in a project using javascript?
我正在使用 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>
我只是不确定这是否是个好习惯!
如果有一种更传统的方法可以达到同样的效果,我很想听听。
你可以利用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>
标签本身,而应仅包含 内容。
下面的 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">
我正在使用 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>
我只是不确定这是否是个好习惯!
如果有一种更传统的方法可以达到同样的效果,我很想听听。
你可以利用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>
标签本身,而应仅包含 内容。
下面的 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">