То, что вы хотите, возможно, но не совсем легко.
Как уже упоминалось, API истории HTML5 делает это возможным, но вам потребуются хорошие знания javascript.Отображение более или менее статических страниц не совсем то, для чего оно предназначено, но ради обучения давайте подумаем, как это можно сделать.
Возможно, вы захотите использовать такую среду, как магистраль , которая уже поставляется с маршрутизатором, чтобы вам не приходилось писать собственные абстракции.
Основная идеяЗа клиентским маршрутизатором стоит простой способ определить, какой URL-адрес запускает функцию javascript, подобную этой:
var routes = {
"index": "open_index",
"projects": "open_projects",
"contact": "open_contact"
}
var open_index = function(){
// Do the logic that has to be done
// to open the index page
}
...
Обратите внимание, что код предназначен только для иллюстрации идеи, он не соответствуетк любой реальной структуре или библиотеке.
В любом случае, каждый раз, когда запускается один из этих маршрутов, вы должны позаботиться о том, чтобы в основном разбирать всю страницу и заменять все на желаемое содержимое.
Теперь у вас есть два варианта:тот.Либо вы извлекаете HTML с сервера и просто подключаете его, либо вы извлекаете только фактические данные в JSON и используете шаблоны на стороне клиента.
Что это значит?Ну, прямо сейчас вы используете статические HTML-страницы.Они имеют базовую структуру, которая является общей для всех страниц, а именно разделение в «Контенте», «Меню» и «Нижнем колонтитуле», однако, поскольку это не веб-приложение, а веб-сайт, содержимое «Контента»«вероятно, не следует структуре, которая представляет некоторые структурированные данные.
Примером для представления структурированных данных будет телефонный справочник.У вас всегда есть список «Имя», «Фамилия», «Номер телефона», и это в первую очередь определяет страницу.То, как это выглядит, не то, о чем страница.
Все содержимое страницы может быть определено с помощью массива, подобного этому:
var people = [
{ "firstName" : "John", "lastName" : "Doe", "number": "+12-2322132"},
{ "firstName" : "Dick", "lastName" : "Dobson", "number": "+12-656533"},
...
]
, и отрисовывается на стороне клиента с использованием простого шаблона, например:
<ul class="phone_book">
{{#each people}}
<li>{{firstName}} {{lastName}} - {{number}}</li>
{{/each}}
</ul>
для генерации необходимого HTML.(Кстати, это было руль )
Используя платформу, вы можете легко настроить его для скрипта, чтобы он автоматически обновлял отображение информации при обновлении данных - например, с помощью AJAX.
В вашем случае, однако, наиболее вероятно, что то, как выглядит страница, является тем, о чем она.Вам нужно одно изображение здесь и одно изображение там и немного текста между ними, и все это меняется с каждой страницей.Вам нужен HTML.
Вот почему вы хотите не совсем то, для чего вы будете использовать History API и AJAX.Он в первую очередь предназначен для сложных веб-приложений, которым необходимо распространять несколько страниц со своими собственными URL-адресами, которые также могут потенциально отражать состояние приложения, так что становится возможной ссылка на определенную часть тяжелого веб-приложения на JavaScript.Загрузка статических веб-сайтов работает отлично, без использования AJAX и History API.
Давайте проигнорируем это прямо сейчас и продолжим в любом случае.Давайте попробуем и посмотрим, что должна работать функция open_index.
var open_index = function(){
// 1. Fade out the old content and remove it
// 2. Request the new html content from the server
// 3. Mark the new active link in the navigation
// 4. Add the content to the DOM
// 5. Fade in the new content
}
Все это вы легко можете сделать с помощью jQuery.У вас не будет проблем с поиском объяснения, как это сделать.
Теперь вы почти у цели.Единственное, о чем нужно позаботиться, это убедиться, что вы перехватываете события щелчка для своей навигации, чтобы вы могли использовать History API, и он не будет просто загружать статическую страницу с самого начала.
Дляпростое использование, подобное этому, не намного больше, необходимо по структуре.
Я скажу это снова.Это полное излишество для вашей цели, и вы не должны использовать его для других целей, кроме как для обучения.Если вы не используете библиотеку, которая немного абстрагирует History API, код станет намного сложнее.
Надеюсь, это помогло вам дать представление о том, с чем вы имеете дело.