Як я можу повторно використовувати панель навігації на кількох сторінках?

Question 1

Я щойно закінчив робити свою домашню / index.html сторінку. Зберігати навігаційну панель там, де вона є, і нехай вона залишається, поки користувачі натискають усі мої сторінки. Чи потрібно копіювати та вставляти навігаційний код вгорі кожної сторінки? Або існує інший спосіб зробити це, який виглядав би чистішим?

Навігація по HMTL:

<nav>
    <div>
        <a href="/">
            <div id="logo"><img src="image.png" alt="Home"/></div>
            <div id="headtag"><img src="image.png" alt="Home"/></div>
            <div id="tagline"><img src="image.png" alt="Home"/></div>
        </a>
    </div>
    <div> 
        <a href="/" class="here">Home</a>
        <a href="/about.html" >About</a>      
        <a href="/services.html" >Services</a>          
        <a href="/pricing.html" >Pricing</a>    
        <a href="/contact.html" >Contact Us</a>
        <input id="srchbar" type="search" placeholder="Search">
    </div>
</nav>

Question 2

Це мені допомогло. Моя панель навігації знаходиться в тезі body. Увесь код навігаційної панелі міститься у nav.htmlфайлі (без HTML-коду або тегу тіла, лише код навігаційної панелі). На цільовій сторінці це міститься в headтезі:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Потім у тегу body створюється контейнер з унікальним ідентифікатором та блоком javascript для завантаження nav.htmlв контейнер, як показано нижче:

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

Question 3

Я знаю, що це досить давнє запитання, але коли у вас доступний JavaScript, ви можете використовувати jQuery та його методи AJAX.

Спочатку створіть сторінку з усім вмістом HTML панелі навігації.

Далі використовуйте $.getметод jQuery для отримання вмісту сторінки. Наприклад, припустимо, ви помістили весь HTML панелі навігації у файл, який викликається, navigation.htmlі додали тег заповнювача (як <div id="nav-placeholder">) у свій файл index.html, тоді ви скористаєтесь таким кодом:

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>

Question 4

Ви можете використовувати php для створення багатосторінкового веб-сайту.

Створіть header.php, в який ви повинні помістити весь свій HTML-код для меню, соціальних мереж тощо
Вставте header.php у ваш index.php, використовуючи наступний код

<? php include 'header.php'; ?>

(Наведений вище код скине весь HTML-код до цього) Вміст основного вмісту вашого сайту.

Подібним чином ви можете легко створювати нижній колонтитул та інші елементи. Вбудований PHP підтримує HTML-код у своїх розширеннях. Тож краще вивчіть це просте виправлення.

Question 5

Дуже давній, але досить простий прийом - це використання "Включає сторону сервера" , щоб включити HTML-сторінки на сторінку верхнього рівня, яка має .shtmlрозширення. Наприклад, це буде ваш index.shtmlфайл:

<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>

Так, це кульгає, але це працює. Не забудьте увімкнути підтримку SSI у конфігурації сервера HTTP ( це як це зробити для Apache ).

Question 6

Brando ZWZ пропонує кілька чудових відповідей щодо вирішення цієї ситуації.

Re: Одна і та ж панель навігації на кількох сторінках 21 серпня 2018 р. 10:13 | ПОСИЛАННЯ

Наскільки я знаю, існує декілька рішень.

Наприклад:

Весь код навігаційної панелі міститься у файлі nav.html (без будь-якого тегу html або body, лише код навігаційної панелі).

Тоді ми могли безпосередньо завантажити його з jquery, не писаючи багато кодів.

Подобається це:

    <!--Navigation bar-->
    <div id="nav-placeholder">

    </div>

    <script>
    $(function(){
      $("#nav-placeholder").load("nav.html");
    });
    </script>
    <!--end of Navigation bar-->

Рішення2:

Ви можете використовувати код JavaScript для створення цілого навігаційного рядка.

Подобається це:

Код Javascript:

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';

    $("#main-bar").html(bar);

    var id = getValueByName("id");
    $("#" + id).addClass("active");
});

function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>

https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages