Несколько страниц, один и тот же файл CSS / JS, но другой URL

Question

делаю сайт с разными страницами; скажем:

• Главная
• Обо мне
• Контакты

Все эти страницы имеют одинаковую структуру

<div id="PageWrapper">
   <header id="PageHeader">
      <nav id="MainMenu">
         <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
         </ul>
      </nav>
   </header>

   <div id="PageContent"></div>
</div>

где в PageContent будет заполнено содержимое страницы.

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

Я пробовал использовать функцию из JQuery следующим образом

$('#MainMenu ul li a').click(function(e) { 
   appendPage($(this).attr('href'));
   e.preventDefault();
});
    
function appendPage(url){
   window.location.hash = url;
   $.ajax({
      url: url
   }).done(function(data) {
      $('#PageContent').html(data);
    });
}

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

.

Answer 1

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

Итак, у вас будет каталог pages с home.html, about.html, et c.

<div id="PageWrapper">
   <header id="PageHeader">
      <nav id="MainMenu">
         <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
         </ul>
      </nav>
   </header>

   <div id="PageContent"></div>
</div>

$('#MainMenu ul li a').click(function(e) {
   e.preventDefault();
   insertContent($(this).attr('href'));
});

function insertContent(pageHref){
   pageHref = pageHref.replace('#', '');
   $.ajax({
      url: `pages/${pageHref}.html`,
   }).done(function(data) {
      $('#PageContent').html(data);
   });
}

// Initialize content based on window location hash
window.onload = insertContent(location.hash);