Infelizmente, não existe uma maneira fácil e segura de se fazer isso. Como os colegas citaram, uma das maneiras é improvisar uma injeção de conteúdo via Javascript. Isso consiste basicamente em ler um arquivo HTML (usando o JS) e injetar seu conteúdo para dentro de um container dentro do arquivo principal.
Então, por exemplo, você pode ter um arquivo footer.html
para o rodapé, lê-lo e injetar seu conteúdo na página alvo, digamos index.html
. Veja:
No index.html
:
<HTML>
<head>
<title>Exemplo de injeção de HTML</title>
</head>
<body>
<p>Parágrafo dentro do index</p>
<footer id="footer-container"></footer>
</body>
<script src="index.js"></script>
</HTML>
No footer.html
:
<div id="footer-content" style="background-color: blue; width: 50vw; height: 10vh;" />
E finalmente no index.js
:
async function loadFooter() {
const fileRequest = await fetch('footer.html')
const footerText = await fileRequest.text()
document.getElementById('footer-container').innerHTML = footerText
}
loadFooter()
Parabéns, você acabou de "modularizar" páginas HTML. Nem preciso dizer que isso não passa nem perto de ser uma alternativa boa, mas isso é porque o desenvolvimento web estático é bem rudimentar mesmo. Por isso, tem sido substituído por tecnologias mais modernas, como o React ou o Vue.
Tem outras opções também, como montar a página no back-end. Acaba sendo tecnicamente mais correto, já que você tem linguagens e bibliotecas específicas para fazer isso. Desse jeito, você montaria todo o conteúdo de uma página no próprio servidor, o que abre muitas portas para modularidade e outros benefícios. Mas, novamente, isso vai totalmente contra a tendência do desenvolvimento web (e do bom senso), já que você dificilmente conseguirá otimizar a visualização da sua página de acordo com o dispositivo que esteja visualizando.
fetch
vc pode fazer a requisição do arquivo HTML dinâmico sempre que algum link for clicado, onde ao invés de trocar o link, vc insere o resultado da requisição noinnerHTML
do elemento. Indo pra vida real, normalmente o MVC é criado usando uma linguagem back-end, mas se vc quiser fazer isso apenas usando do front-end, dá uma pesquisada em ReactJS ou Angular.