Как я могу повторно использовать панель навигации на нескольких страницах?

Question 1

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

HMTL nav:

<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 или body, только код для панели навигации). На целевой странице это входит в 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и добавили тег-заполнитель (Like <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

Очень старый, но достаточно простой метод - использовать «Server-Side Includes» для включения 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

Answer 1

84

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

HMTL nav:

<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>

html navbar черный
источник

Да. Имейте в виду, что когда пользователь щелкает ссылку в вашей навигации, ваш сервер / локальная система отправляет файл, указанный в ссылке, для загрузки и отображения. Когда они нажмут «О программе» about.html, браузер загрузит их. Значит, он должен содержать ту же навигацию.

Purag

1

если у вас есть язык на стороне сервера, вы можете поместить этот код в шаблон и включить его на все страницы, иначе используйте angular js, чтобы сделать это директивой

joyBlanks

3

Я ищу то же самое. Очень жаль, что в 2017 году мы не можем сделать это с клиентским веб-сайтом. У Microsoft всегда была концепция главной страницы (_layouts в текущей версии). Кажется, что "страница-контейнер" на стороне клиента не была бы смешной.

Рон

Answer 2

Да. Имейте в виду, что когда пользователь щелкает ссылку в вашей навигации, ваш сервер / локальная система отправляет файл, указанный в ссылке, для загрузки и отображения. Когда они нажмут «О программе» about.html, браузер загрузит их. Значит, он должен содержать ту же навигацию.

Purag

Answer 3

1

если у вас есть язык на стороне сервера, вы можете поместить этот код в шаблон и включить его на все страницы, иначе используйте angular js, чтобы сделать это директивой

joyBlanks

Answer 4

3

Я ищу то же самое. Очень жаль, что в 2017 году мы не можем сделать это с клиентским веб-сайтом. У Microsoft всегда была концепция главной страницы (_layouts в текущей версии). Кажется, что "страница-контейнер" на стороне клиента не была бы смешной.

Рон

Answer 5

79

Вот что мне помогло. Моя панель навигации находится в теге body. Весь код для панели навигации находится в nav.htmlфайле (без каких-либо тегов html или body, только код для панели навигации). На целевой странице это входит в 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-->

Рамтин
источник

Здравствуйте. Я ничего не знаю о jquery / javascript, но я просто хотел попробовать это. Я пытался сделать именно то, что ты сказал. У меня есть навигационное меню на одной странице без каких-либо других тегов, и я включил остальной код в заголовок / тело моей индексной страницы (простая индексная страница). Однако он загружает мою навигационную панель не на всех страницах. Есть идеи, что я могу сделать не так? Спасибо !

Lay

@Lay это вообще показывает? Я должен вам сказать, что во время разработки (загрузки страницы локально) этот код часто не работает. Вы разместили этот код на сервере?

Ramtin

3

Немного не по теме, и простите за мое незнание: если вы жестко закодируете версию jQuery, как вы это сделали в своем ответе:, <script src="https://code.jquery.com/jquery-1.10.2.js"></script>то что произойдет с вашей страницей, когда выйдет версия 1.10.3 или 1.11.0?

Laryx Decidua

1

@LaryxDecidua Тогда продолжает работать. Всегда загружая последнюю версию, вы рискуете сломать страницу. Подумайте об изменении изменений между версиями. Поэтому рекомендуется тестирование при переходе на другую версию.

Маркус Пшайдт

2

Я использовал приведенный выше код в index.html на локальном компьютере, протестирован в chrome, он дает мне ошибку ниже, а nav.html не может быть загружен.

jquery.min.js:4 Access to XMLHttpRequest at 'nav.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Есть идеи?

KenyKeny

Answer 6

Здравствуйте. Я ничего не знаю о jquery / javascript, но я просто хотел попробовать это. Я пытался сделать именно то, что ты сказал. У меня есть навигационное меню на одной странице без каких-либо других тегов, и я включил остальной код в заголовок / тело моей индексной страницы (простая индексная страница). Однако он загружает мою навигационную панель не на всех страницах. Есть идеи, что я могу сделать не так? Спасибо !

Lay

Answer 7

@Lay это вообще показывает? Я должен вам сказать, что во время разработки (загрузки страницы локально) этот код часто не работает. Вы разместили этот код на сервере?

Ramtin

Answer 8

3

Немного не по теме, и простите за мое незнание: если вы жестко закодируете версию jQuery, как вы это сделали в своем ответе:, <script src="https://code.jquery.com/jquery-1.10.2.js"></script>то что произойдет с вашей страницей, когда выйдет версия 1.10.3 или 1.11.0?

Laryx Decidua

Answer 9

1

@LaryxDecidua Тогда продолжает работать. Всегда загружая последнюю версию, вы рискуете сломать страницу. Подумайте об изменении изменений между версиями. Поэтому рекомендуется тестирование при переходе на другую версию.

Маркус Пшайдт

Answer 10

2

Я использовал приведенный выше код в index.html на локальном компьютере, протестирован в chrome, он дает мне ошибку ниже, а nav.html не может быть загружен.

jquery.min.js:4 Access to XMLHttpRequest at 'nav.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Есть идеи?

KenyKeny

Answer 11

Я знаю, что это довольно старый вопрос, но когда у вас есть JavaScript, вы можете использовать jQuery и его методы AJAX.

Сначала создайте страницу со всем HTML-содержимым панели навигации.

Затем используйте $.getметод jQuery для получения содержимого страницы. Например, предположим, что вы поместили весь HTML- код панели навигации в файл с именем navigation.htmlи добавили тег-заполнитель (Like <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>

Answer 12

4

Вы можете использовать php для создания многостраничного сайта.

Создайте header.php, в который вы должны поместить весь свой html-код для меню и социальных сетей и т. Д.
Вставьте header.php в свой index.php, используя следующий код

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

(Приведенный выше код сбросит весь HTML-код перед этим) Содержимое тела вашего сайта.

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

Сачин Канунго
источник

1

Так вы все говорите, что я должен преобразовать все это в PHP вместо нескольких HTML-страниц для моего сайта? Это мой первый сайт, и я знаю html, поэтому я его использовал, но если это должен быть PHP, то это должен быть PHP .... Так что же это должно быть?

blackRob4953

Это очень простой php, которому вы легко научитесь. Вы ни разу не столкнетесь с кошмаром, если перейдете на серверный язык. Я рекомендую это. Но если вы собираетесь использовать только html, рассмотрите возможность использования .shtml для небольших проблем, все же я считаю его неуклюжим для растущих веб-сайтов.

Сачин Канунго

Хорошо. Теперь, когда это страница html. Как мне преобразовать его в php? Это несколько записей или мне нужно переделывать все свои теги? И если да, то как .... Так что я не

облажаюсь

1

Измените расширение на .php, и все готово. используйте следующие кодовые скобки для ввода кода php. <?php include 'header.php'; ?>Перейдите на php.net или w3schools для получения базового обучения.

Сачин Канунго,

Answer 13

1

Так вы все говорите, что я должен преобразовать все это в PHP вместо нескольких HTML-страниц для моего сайта? Это мой первый сайт, и я знаю html, поэтому я его использовал, но если это должен быть PHP, то это должен быть PHP .... Так что же это должно быть?

blackRob4953

Answer 14

Это очень простой php, которому вы легко научитесь. Вы ни разу не столкнетесь с кошмаром, если перейдете на серверный язык. Я рекомендую это. Но если вы собираетесь использовать только html, рассмотрите возможность использования .shtml для небольших проблем, все же я считаю его неуклюжим для растущих веб-сайтов.

Сачин Канунго

Answer 15

Хорошо. Теперь, когда это страница html. Как мне преобразовать его в php? Это несколько записей или мне нужно переделывать все свои теги? И если да, то как .... Так что я не

облажаюсь

Answer 16

1

Измените расширение на .php, и все готово. используйте следующие кодовые скобки для ввода кода php. <?php include 'header.php'; ?>Перейдите на php.net или w3schools для получения базового обучения.

Сачин Канунго,

Answer 17

Очень старый, но достаточно простой метод - использовать «Server-Side Includes» для включения 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 ).

Answer 18

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

Как я могу повторно использовать панель навигации на нескольких страницах?

Ответы: