Как создать заголовок html для каждого файла в проекте с помощью javascript?
Я работаю над простым сайтом страниц GitHub, используя HTML и javascript. Поскольку страницы не предлагают поддержку PHP или SSI для заголовка HTML из отдельного файла HTML, мне нужно написать сценарий, который создаст изображения заголовка и установит ссылки в ленте меню.
Предположим, для понимания, что этот веб-сайт состоит из трех файлов с путями:
root/index.html
root/A/pageA.html
root/B/pageB.html
В шапке должна быть ссылка на каждый из этих файлов.
Единственное решение, которое я смог придумать, это использовать их во всех файлах:
<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>
Я просто не был уверен, что это хорошая практика!
Если есть способ добиться того же эффекта, но более традиционный, я бы с удовольствием его услышал.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать Импорт HTML.
Раздел <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>, а только содержание.
Это кажется полезным, но я не уверен, что это отвечает на мой вопрос. Я просил наиболее подходящий способ изменить атрибуты href ссылок в html-файлах в подпапках, извините, если это было неясно.
Фрагмент SO ниже не работает, но здесь работает пример - нажмите на левое меню, посмотрите исходный код страницы)
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">
Метод jQuery
load()позволяет включать заголовок и меню на каждой странице.