Я хочу включить одно и то же меню навигации на несколько страниц, однако у меня нет поддержки PHP, и я не могу повлиять на свой сервер каким-либо другим способом.
Я хочу избежать просто копирования и вставки html на все страницы, так как это сделает обновление меню болью.
Два варианта, о которых я могу думать, заключаются в следующем:
1) Все содержимое существует на одной странице, затем определите, какой контент показывать на основе ключевого слова, добавленного к URL-адресу:
example.com/index?home example.com/index?news 2) Включите javascript-файл, который имеет функцию, которая записывает меню и вызывает функцию на каждой странице
function setupMenu() { $("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>"); }
В варианте 1 процесс обновления будет состоять из редактирования одного навигационного меню на одной странице
С Вариантом 2 обновление будет означать изменение функции в файле javascript
Моя проблема с Вариантом 1 заключается в том, что на странице придется загружать много контента, который ему не нужно будет отображать. Моя забота о Варианте 2 может показаться тривиальной, но это то, что код может стать беспорядочным.
Есть ли какие-то причины, делающие это одним способом, было бы лучше, чем другое? Или есть третий лучший вариант, который мне не хватает?
У вас есть несколько вариантов, каждый из которых имеет свои преимущества и недостатки:
Серверная сторона включает или SSI. Если у вас нет PHP, есть хорошие шансы, что у вас тоже нет SSI, и этот параметр требует некоторого раздражающего смешивания с вашим файлом .htaccess. Проверьте ответ Доминика П. на запись SSI. Преимущество SSI по сравнению с JavaScript или фреймами заключается в том, что пользователю не требуется, чтобы JS разрешался, чего нет у многих пользователей, а также не создает никаких навигационных трудностей.
Frames. Вы можете использовать стандартные фреймы, чтобы поместить навигацию в отдельный файл, и с правильным стилем она будет плавной. Вы также можете использовать iframe для размещения навигации в произвольной части сайта, например, на боковой панели или что-то еще. Недостатком фреймов, в частности стандартных фреймов, является то, что они, как правило, делают закладочные, ссылки и кнопки вперед / назад, ведут себя странно. С другой стороны, фреймы не нуждаются в поддержке браузера или поддержке сервера.
JavaScript. Вы можете обратиться к любому из других ответов за отличные объяснения решения JS, особенно если вы используете jQuery. Однако, если ваш сайт недостаточно динамичен, ваши пользователи захотят включить JavaScript, это будет означать, что большое количество зрителей не увидит меню вообще – плохо, безусловно.
–
Да использовать .load jQuery ajax function
$('#result').load('ajax/menu.html');
Таким образом, ваш код остается чистым, и вы можете просто редактировать его в отдельных HTML-файлах, как PHP.
Вы должны рассмотреть AJAX для этой задачи. Включите стороннюю библиотеку, например jQuery, и загрузите отдельные HTML-файлы внутри заполнителей, нацелив их на ID.
Например, на главной странице HTML:
<div id="mymenu"></div>
Кроме того, в вашем основном HTML, но в разделе HEAD:
$('#mymenu').load('navigation.html');
Но лучше всего будет переключиться на хостинг, поддерживающий PHP или любую другую серверную часть. Это сделает вашу жизнь намного легче.
Проверьте серверную сторону . У меня нет большого опыта с ними, но из того, что я помню, они предназначены для решения только вашей проблемы.
Вы можете использовать HTML-импорт http://w3c.github.io/webcomponents/spec/imports/
Вот пример из http://www.html5rocks.com/en/tutorials/webcomponents/imports/
warnings.html содержит
<div class="warning"> <style scoped> h3 { color: red; } </style> <h3>Warning!</h3> <p>This page is under construction</p> </div> <div class="outdated"> <h3>Heads up!</h3> <p>This content may be out of date</p> </div>
Тогда index.html может содержать
<head> <link rel="import" href="warnings.html"> </head> <body> ... <script> var link = document.querySelector('link[rel="import"]'); var content = link.import; // Grab DOM from warning.html's document. var el = content.querySelector('.warning'); document.body.appendChild(el.cloneNode(true)); </script> </body>
На стороне сервера: http://www.freewebmasterhelp.com/tutorials/ssi/