Создание многоразового HTML-кода для панели навигации на нескольких страницах

Question

Я подумал, что было бы удобно иметь повторно используемый код, особенно для панели навигации, потому что он будет одинаковым на всех моих страницах. Таким образом, мне не нужно будет просматривать каждую страницу и вручную редактировать каждую страницу отдельно, когда произойдет изменение.

Кажется возможным использовать iframes, но я попробовал это, и стиль всей страницы вышел из строя. Я могу это исправить, но мне интересно, есть ли что-то подобное.

Было бы здорово, если бы что-то подобное могло сработать:

var navbar = document.getElementById ('navbar');
navbar.innerHtml = url ('navigation.txt');

В настоящее время я работаю в автономном режиме на своем сайте, поэтому не думаю, что смогу отправлять запросы xmlhttp. Правильный? По крайней мере, мне все еще нужно заставить работать любой пример ajax. Это прискорбно, потому что я думаю, что мог бы легко использовать это для своего приложения.

Вот моя разметка navbar. Это не очень сложно, поэтому у меня есть ощущение, что я просто отредактирую это вручную.

<nav>
    <ul id="navbar">
        <li><a href="biosketch.html">Biosketch</a></li>
        <li><a href="projects.html">Class Projects</a>
            <ul>
                <li><a href="projects.html#SeniorProject">Senior Project</a></li>
                <li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
            </ul>
        </li>
        <li><a href="#">Resume</a></li>
        <li><a href="#">Work Experience</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>

Answer 1

Как уже было сказано, обычно это делается на стороне сервера с включением для не AJAX-сайтов. Тем не менее, я думаю, что вы можете использовать шаблоны закрытия Google. По сути, вы определяете шаблон на языке шаблонов, который генерирует функцию javascript, которую вы можете вызывать для отображения вашего HTML.

http://code.google.com/closure/templates/docs/helloworld_js.html

Пример:

--templates.soy

{namespace templates}

{template .nav}
<ul id="navbar">
    <li><a href="biosketch.html">Biosketch</a></li>
    <li><a href="projects.html">Class Projects</a>
        <ul>
            <li><a href="projects.html#SeniorProject">Senior Project</a></li>
            <li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
        </ul>
    </li>
    <li><a href="#">Resume</a></li>
    <li><a href="#">Work Experience</a></li>
    <li><a href="#">Contact Me</a></li>
</ul>
{\template}

Затем вы запускаете следующую команду, чтобы скомпилировать ее в функцию JavaScript

java -jar SoyToJsSrcCompiler.jar --outputPathFormat templates.js  templates.soy

Это создаст файл с именем templates.js, содержащий функцию templates.nav, которую вы можете вызвать со своей страницы, как показано ниже:

document.getElementById('navbar').innerHTML = templates.nav();

Это даже не использует объединение данных, которое позволит вам передать объект данных для рендеринга HTML, который не является статичным. Но я только показал вам это, так как это все, что вы просили. Я знаю, что вы можете просто вставить html в строку JS, но вам придется справиться с отсутствием синтаксической справки в вашем редакторе.

Единственный недостаток заключается в том, что для этого требуется JS, который, похоже, вам не нужен. Однако, если вы хотите поддерживать клиенты без JS, вы можете сгенерировать шаблон на стороне сервера. Существует также компилятор, который генерирует методы закрытия Java google. Вы можете посмотреть его на их сайте.

Надеюсь, это поможет.

Answer 2

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

<?php include 'includes/nav.php'; ?>

Содержимое файла nav.php может быть элементом <nav> целиком.В идеале вы можете запрограммировать его на отображение / скрытие элементов на основе текущего «раздела», а также на переключение определенных классов на основе раздела.

Answer 3

Несколько предложений:

• Если вы используете JSP (или аналогичную технологию), вы можете просто использовать что-то вроде SiteMesh, чтобы помочь с шаблонами
• Вы можете использовать серверную часть включает
• Вы можете написать функцию JavaScript для программного построения необходимой вам модели DOM (не требуется AJAX), а затем просто вызывать эту функцию JS на всех ваших страницах (без дублирования кода)

Answer 4

Вы очень часто можете использовать вызовы AJAX "офлайн", как вы выразились, это код на стороне клиента.

Но если бы я не использовал язык на стороне сервера (ASP.NET или PHP), я бы использовал небольшой файл .js, который отображает панель навигации, и я бы просто добавил * 1003. * куда пойдет навигационная панель.

Таким образом, когда вам нужно изменить его, вы изменяете только .js, и он будет обновляться на каждой другой странице.

Answer 5

Если вы собираетесь использовать один и тот же код снова и снова, лучше всего создать отдельный файл и внедрить его на разных веб-страницах.

Это возможно через это: https://www.w3schools.com/howto/howto_html_include.asp

Вы записываете html панели навигации в отдельный файл .html и вызываете его следующим образом:

<div w3-include-html="content.html"></div>

Затем вызываете функцию javascript из

<script src="https://www.w3schools.com/lib/w3data.js"></script> 

, который w3IncludeHTML();

И вы должны его запустить и запустить!Надеюсь, это помогло!:)

Answer 6

Если вы хотите реализовать это без какого-либо кодирования на стороне сервера, попробуйте это:

var http = false;

if(navigator.appName == "Microsoft Internet Explorer") {
  http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  http = new XMLHttpRequest();
}

http.open("GET", "navigation.txt");
http.onreadystatechange=function() {
  if(http.readyState == 4) {
    var navbar = document.getElementById('navbar');
        navbar.innerHtml = http.responseText;
  }
}
http.send(null);

Answer 7

Как правило, эти виды повторно используемых фрагментов разметки генерируются на стороне сервера, в основном через шаблонизатор.

Вы можете изменить настройки безопасности Firefox, чтобы разрешить автономные вызовы AJAX, но, вероятно, этолучше настроить локальную среду разработки, в которой вы можете начать использовать язык на стороне сервера, и делать это правильно с самого начала.