Как создать HTML-заголовок для каждого файла в проекте, используя JavaScript? - PullRequest
Новая
       25

Как создать HTML-заголовок для каждого файла в проекте, используя JavaScript?

1 голос
/ 07 мая 2019

Я работаю над простым сайтом страниц 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>

Я просто не был уверен, что это хорошая практика!

Если есть способ добиться того же эффекта, который является более обычным, я бы с удовольствием его услышал.

Ответы [ 2 ]

0 голосов
/ 07 мая 2019

Ниже 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">
0 голосов
/ 07 мая 2019

Вы можете использовать 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>, а только содержимое .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...