1

Como faço para não repetir o código HTML e CSS da estrutura de um site? Por exemplo, eu fiz a estrutura de uma página web e quero que essa estrutura seja aplicada nas outras 5 páginas que irei criar para esse site. Segue o print da página: inserir a descrição da imagem aqui

Para isso criei um arquivo HTML e um CSS . Para replicar essa estrutura para as outras páginas eu criei arquivos HTML e CSS para cada uma das outras 5 páginas copiei e colei os códigos dessa estrutura nelas. Mas isso é muito repetitivo, acho que existe uma forma mais eficiente de fazer isso. Se eu mudar algo nessa sidebar, tirei que alterar nos outros 5 arquivos, por ex.

Existe algum método que evite essa repetição?

5
  • 3
    Creio que somente com PHP, ou então copy paste. Commented 14/08/2017 às 14:44
  • 2
    Voce pode usar JS para isso, de uma olhada no load do jQuery Commented 14/08/2017 às 14:47
  • @RafaelAugusto O problema do .load() do jQuery é que só funciona online.
    – Sam
    Commented 14/08/2017 às 15:45
  • Para mim a melhor solução é copiar o arquivo e colar dentro da pasta com outro nome. Vale lembrar que todos os links referentes ao css, js, imagens... Devem ser válidos Commented 15/08/2017 às 0:05
  • 1
    Estude mais sobre includes em PHP, ele faz exatamente o que você deseja. Gerando um html igual para todos os elementos sendo alterado em apenas um arquivo.
    – user86267
    Commented 15/08/2017 às 13:35

3 Respostas 3

2

Esta solução é somente se você quer o mesmo conteúdo em outras páginas. Se é somente a estilização basta importar o mesmo arquivo CSS nas outras páginas e definir os mesmos #id's ou .classes nos mesmos elementos.

Pode fazer utilizando JQuery.

Suponha que você tem um conteúdo no arquivo menu.html que deve estar em todas as suas páginas.

Basta incluir o código abaixo nas suas outras páginas que devem ter o conteúdo do menu.html:

    <script src="jquery.js"></script> <!-- Importar biblioteca do Jquery -->
    <script> 
    $(function(){
      $("#includedContent").load("menu.html"); // incluir conteúdo do menu.html na div com id #includedContent
    });
    </script> 
    <div id="includedContent"></div> <!-- o menu.html será incluído nessa div -->

Fonte: https://stackoverflow.com/questions/8988855

Outra forma: https://www.w3schools.com/howto/howto_html_include.asp

1
  • Eu só queria a estilização mesmo. Eu importo o arquivo css, mas o problema continua sendo a repetição do html, são 80 linhas de código. Até tentei usar o Jquery, mas eu nao consigo mudar o conteúdo do meu <article>.
    – Alineat
    Commented 14/08/2017 às 23:53
2

Eu recomendo bastante que você use Gulp ou Grunt para isso. Com ele você pode usar uma template engine como a nunjucks, pug ou handlebars. Eles facilitam muito na criação do front-end.

Eu criei um boilerplate, pode te ser útil: https://github.com/diogocosta/basement

2

Além da forma que o Diego Costa comentou, existe uma técnica antiga chamada Server Side Includes. Com Iframe também é possivel atingir o mesmo resultado.

Aqui tem mais resoluções sobre o mesmo problema

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .