Подгрузка html-кода

Question

Вот у меня есть "header". Он повторяется на каждой странице. Могу ли я Создать отдельный html-файл, прописать там структуру исключительно "шапки", а затем вставлять его на другие страницы? Видел что-то такое:

***
title:123
***

При редакции шапки, она должна меняться на всех страницах... Сайт стаит на хостинге github - pages Спасибо за внимание.

Answer 1

Файл шапки header.php

<!DOCTYPE html>
<html lang="ru">
  <head>
  </head>
  <body>
    <header>
    </header>

Страница 1

<?php
include 'header.php';
?>
    <h1>Страница 1</h1>
  </body>
</html>

Страница 2

<?php
include 'header.php';
?>
    <h1>Страница 2</h1>
  </body>
</html>

Также можно добавить footer, но тогда надо заменить </body></html> на <?php include 'footer.php';?> в файлах страниц.
footer.php

    <footer>
    </footer>
  </body>
</html>

Answer 2

Так, как в вопросе не указано, на чём написан сервер, то буду говорить про node.js. Для таких задач используются движки представлений, такие как Handlebars, ejs и другие. Они "собирают" конечный файл, который будет отправлен браузеру.
Это же справедливо и для других платформ, только там иные инструменты.

Answer 3

Это также можно реализовать на стороне фронтенда. Вот мое решение с использование react.js и BrowserRouter:

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';

import Main from './Pages/Main/Main'; // Импортируем различные странички
import News from './Pages/News/News';

import Header from './Components/Header/Header'; // Импортируем наш хедер

function App() {
    return (
        <BrowserRouter>
            <div className="wrapper">
                <Header />               // Здесь мы подключаем хедер. Он вне Switch'а, поэтому будет присутствовать на всех страницах
                <Switch>
                    <Route path="/" exact>  // В роутах мы указываем путь, делая запрос на который нам будет выдаваться страничка. Это все должно быть внутри <Switch></Switch>.
                        <Main />
                    </Route>
                    <Route path="/news" exact>
                        <News />
                    </Route>
                    <Redirect to="/" /> // Редирект срабатывает, если путь не соответствует ни "/", ни "/news".
                </Switch>
            </div>
        </BrowserRouter>
    );
}

export default App;

БЛОГ НА HUSL

Подгрузка html-кода

Ответы (3 шт):