Ищете демонстрационный сайт, который использует простейшую форму повторного использования для нескольких страниц, насколько это возможно

Question

При обучении студентов на вводном веб-занятии я хочу найти самый простой способ создания многостраничного статического сайта, состоящего примерно из 7 страниц, без необходимости создавать 7 разных страниц.

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

Раньше я делал так: http://www.tropicalteachers.com/web110/?Ignore_WEB_119_CLEAN:MX_-old_Extra_Credit:Dynamic_PHP - это был быстрый эксперимент с использованием задания в качестве модели: http://www.yetirobotics.org/index2.php?pagename=team_yeti

но я чувствую, что должен быть более чистый / простой способ сделать это с помощью javascript или, может быть, в php - но я не уверен, как это сделать.

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

Я бы хотел ограничить его html / css / js / php, и желательно js ИЛИ php, а не обоими.

только с страницей индекса, контролирующей (и загружающей) все.

Спасибо!

Answer 1

Если вы хотите создать более современный фреймворк, вам следует использовать javascript для динамического отображения контента (как вы предложили в своем вопросе). Чтобы сделать это, я бы использовал фреймворк, такой как jQuery, поскольку он делает асинхронный вызов запросов намного проще. Для этого вы должны кодировать одну страницу с определенной областью, отмеченной для динамического содержимого.

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

На стороне клиента вы можете использовать jQuery load , чтобы поместить запрошенный контент в область контента.

$('#contentArea').load('url', function() {
     //callback area in case there is other stuff you want to do with js
     location.hash = 'blah';
});

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

location.hash = 'blah';

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

myLink.click = function() { 
     $('#contentArea').load('url', function() {
         //callback area in case there is other stuff you want to do with js
         location.hash = 'blah';
     });
     return false;
}

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