Повторите один и тот же HTML-код на нескольких страницах

Мне очень трудно найти это, потому что я понятия не имею, как это назвать.

Я попытаюсь описать процесс, который я хочу, и посмотреть, знает ли кто-нибудь из вас такого редактора. У меня есть сайт, на котором повторяется один и тот же html-компонент, например, меню. Я могу определить, как выглядит меню с помощью css, но я не могу (насколько я знаю) добавить один и тот же фрагмент html на каждую html-страницу с помощью простой строки. Что я делаю, так это копирую меню по всем местам. Если я изменю меню, я нужно все повторить. Я знаю, что это может быть достигнуто с помощью динамического сервера, с чем-то вроде php или jsp, но мне не нужно, чтобы он был динамическим.

Мне было интересно, если есть способ сделать это. Я думал, что, возможно, есть редактор, где я могу редактировать html, используя includes, а затем "компилировать" htmls после модификации, чтобы создать htmls, которые я заменю на своем сервере.

спасибо

7
editor html repeat static

4 ответов

посмотреть стороне сервера включает в себя ... создать menu.shtml страница, а затем включите ее так:

<!--#include virtual="/menu.shtml" -->

поддерживается большинством веб-серверов из коробки (включая IIS, Apache и lighttpd)

4

вы слышали о Концепция MasterPage

приведенная ниже ссылка даст вам быстрый старт

Главная страница-это страницы, которые будут выступать в качестве фрейма для всех других страниц. Вы должны написать его только один. И каждая страница, которая попадает под это, должна будет включать главную страницу. Вот и все!

1

вы можете написать простой бит js во внешнем файле, а затем вызвать его на каждой странице для динамической загрузки меню. Затем вы можете просто отредактировать меню, отредактировав файл JS. все, что вам нужно сделать, это включить в HTML и использовать документ.метода getElementById("меню").innerHTML = menuHTML; где menuHTML-переменная, содержащая чистый HTML-код меню. Затем вы можете включить файл JS и вызвать его в body onload

0

вы можете сделать это с помощью jQuery

предположим, что у вас есть page1.HTML-код страница2.html etc.

вы хотите, чтобы на каждой из этих страниц ваш contactinfo. Вы можете создать файл с именем "info.формат txt." На месте, где вы хотите эту контактную информацию, вы ставите div. как показано в этом примере

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <!-- page content -->
    <div id="contact"></div>
  </body>
</html>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
        $("#contact").load("info.txt");
    ;
});
</script>

все, что вы размещаете в ' info.txt ' будет поставлен на место were you put

0