Jak mogę ponownie wykorzystać pasek nawigacji na wielu stronach?

Question 1

Właśnie skończyłem tworzyć moją stronę domową / index.html. Aby pasek nawigacyjny pozostał tam, gdzie się znajduje, i pozostanie, gdy użytkownicy będą przeglądać wszystkie moje strony. Czy muszę kopiować i wklejać kod nawigacyjny na górze każdej strony? Czy jest na to inny sposób, który wyglądałby czysto?

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

To mi pomogło. Mój pasek nawigacyjny znajduje się w tagu body. Cały kod paska nawigacyjnego znajduje się w nav.htmlpliku (bez znacznika HTML ani body, tylko kod paska nawigacyjnego). Na stronie docelowej znajduje się to w headtagu:

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

Następnie w tagu body tworzony jest kontener z unikalnym identyfikatorem i blokiem javascript do załadowania nav.htmldo kontenera, w następujący sposób:

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

</div>

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

Question 3

Wiem, że to dość stare pytanie, ale kiedy masz dostępny JavaScript, możesz użyć jQuery i jego metod AJAX.

Najpierw utwórz stronę z całą zawartością HTML paska nawigacji.

Następnie użyj $.getmetody jQuery, aby pobrać zawartość strony. Na przykład, powiedzmy, że umieściłeś cały kod HTML paska nawigacji w pliku o nazwie navigation.htmli dodałeś znacznik zastępczy (Like <div id="nav-placeholder">) w swoim index.html, a następnie użyjesz następującego kodu:

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

Question 4

Możesz użyć php do tworzenia wielostronicowej witryny internetowej.

Utwórz plik header.php, w którym powinieneś umieścić cały kod HTML dla menu, mediów społecznościowych itp
Wstaw plik header.php do pliku index.php, używając następującego kodu

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

(Powyższy kod zrzuci cały poprzedni kod HTML) Treść Twojej witryny.

Podobnie możesz z łatwością tworzyć stopki i inne elementy. Wbudowane PHP obsługuje kod html w swoich rozszerzeniach. Więc lepiej naucz się tej łatwej poprawki.

Question 5

Bardzo starą, ale dość prostą techniką jest użycie „dołączeń po stronie serwera” , aby dołączyć strony HTML do strony najwyższego poziomu, która ma .shtmlrozszerzenie. Na przykład będzie to twój index.shtmlplik:

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

Tak, jest kiepski, ale działa. Pamiętaj, aby włączyć obsługę SSI w konfiguracji serwera HTTP ( tak to zrobić dla Apache ).

Question 6

Brando ZWZ udziela świetnych odpowiedzi, jak radzić sobie z tą sytuacją.

Odp .: Ten sam pasek nawigacyjny na wielu stronach 21 sierpnia 2018 10:13 | LINK

O ile wiem, istnieje wiele rozwiązań.

Na przykład:

Cały kod paska nawigacyjnego znajduje się w pliku nav.html (bez znacznika HTML lub body, tylko kod paska nawigacji).

Następnie moglibyśmy załadować go bezpośrednio z jquery bez pisania wielu kodów.

Lubię to:

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

    </div>

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

Rozwiązanie 2:

Możesz użyć kodu JavaScript do wygenerowania całego paska nawigacyjnego.

Lubię to:

Kod 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

Właśnie skończyłem tworzyć moją stronę domową / index.html. Aby pasek nawigacyjny pozostał tam, gdzie się znajduje, i pozostanie, gdy użytkownicy będą przeglądać wszystkie moje strony. Czy muszę kopiować i wklejać kod nawigacyjny na górze każdej strony? Czy jest na to inny sposób, który wyglądałby czysto?

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 blackRob4953
źródło

Tak. Pamiętaj, że gdy użytkownik kliknie łącze w Twojej nawigacji, Twój serwer / system lokalny wysyła plik wskazany przez łącze do pobrania i wyświetlenia. Po kliknięciu „Informacje” about.htmlprzeglądarka załaduje plik. Powinien więc zawierać tę samą nawigację.

Purag,

1

jeśli masz język po stronie serwera, możesz umieścić ten kod w szablonie i zawrzeć go na wszystkich stronach, w innym przypadku użyj

angular

3

Szukam tego samego. Szkoda, że w 2017 roku nie możemy tego zrobić z witryną internetową opartą na kliencie. Microsoft od zawsze miał koncepcję strony wzorcowej (_layouts w aktualnej wersji). Wygląda na to, że „strona kontenera” po stronie klienta nie byłaby śmieszna.

Ron

Answer 2

Tak. Pamiętaj, że gdy użytkownik kliknie łącze w Twojej nawigacji, Twój serwer / system lokalny wysyła plik wskazany przez łącze do pobrania i wyświetlenia. Po kliknięciu „Informacje” about.htmlprzeglądarka załaduje plik. Powinien więc zawierać tę samą nawigację.

Purag,

Answer 3

1

jeśli masz język po stronie serwera, możesz umieścić ten kod w szablonie i zawrzeć go na wszystkich stronach, w innym przypadku użyj

angular

Answer 4

3

Szukam tego samego. Szkoda, że w 2017 roku nie możemy tego zrobić z witryną internetową opartą na kliencie. Microsoft od zawsze miał koncepcję strony wzorcowej (_layouts w aktualnej wersji). Wygląda na to, że „strona kontenera” po stronie klienta nie byłaby śmieszna.

Ron

Answer 5

79

To mi pomogło. Mój pasek nawigacyjny znajduje się w tagu body. Cały kod paska nawigacyjnego znajduje się w nav.htmlpliku (bez znacznika HTML ani body, tylko kod paska nawigacyjnego). Na stronie docelowej znajduje się to w headtagu:

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

Następnie w tagu body tworzony jest kontener z unikalnym identyfikatorem i blokiem javascript do załadowania nav.htmldo kontenera, w następujący sposób:

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

</div>

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

Ramtin
źródło

Dzień dobry. Nie wiem nic o jquery / javascript, ale chciałem tylko spróbować. Próbowałem zrobić dokładnie to, co powiedziałeś. Mam menu nawigacyjne na jednej stronie bez innych tagów, a resztę kodu umieściłem w nagłówku / treści mojej strony indeksowej (prosta strona indeksowa). Jednak nie ładuje mojego paska nawigacyjnego na wszystkich stronach. Masz pojęcie, co mogę zrobić źle? Dziękuję Ci !

Lay

@Lay, czy to w ogóle się wyświetla? Muszę powiedzieć, że podczas programowania (lokalnego ładowania strony) ten kod często nie działa. Czy umieściłeś ten kod na serwerze?

Ramtin

3

Trochę nie na temat i wybacz moją ignorancję: jeśli na stałe zakodujesz wersję jQuery, tak jak w swojej odpowiedzi: <script src="https://code.jquery.com/jquery-1.10.2.js"></script>to co stanie się z twoją stroną, gdy pojawi się wersja 1.10.3 lub 1.11.0?

Laryx Decidua

1

@LaryxDecidua Wtedy nadal działa. Zawsze ładowanie najnowszej wersji groziłoby uszkodzeniem strony. Pomyśl o zerwaniu zmian między wersjami. Dlatego testowanie jest zalecane przy przechodzeniu na inną wersję.

Markus Pscheidt,

2

Użyłem powyższego kodu w index.html na lokalnym komputerze, przetestowałem w chrome, pokazał mi błąd poniżej i nav.html nie mógł zostać załadowany.

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.

Dowolny pomysł?

KenyKeny

Answer 6

Dzień dobry. Nie wiem nic o jquery / javascript, ale chciałem tylko spróbować. Próbowałem zrobić dokładnie to, co powiedziałeś. Mam menu nawigacyjne na jednej stronie bez innych tagów, a resztę kodu umieściłem w nagłówku / treści mojej strony indeksowej (prosta strona indeksowa). Jednak nie ładuje mojego paska nawigacyjnego na wszystkich stronach. Masz pojęcie, co mogę zrobić źle? Dziękuję Ci !

Lay

Answer 7

@Lay, czy to w ogóle się wyświetla? Muszę powiedzieć, że podczas programowania (lokalnego ładowania strony) ten kod często nie działa. Czy umieściłeś ten kod na serwerze?

Ramtin

Answer 8

3

Trochę nie na temat i wybacz moją ignorancję: jeśli na stałe zakodujesz wersję jQuery, tak jak w swojej odpowiedzi: <script src="https://code.jquery.com/jquery-1.10.2.js"></script>to co stanie się z twoją stroną, gdy pojawi się wersja 1.10.3 lub 1.11.0?

Laryx Decidua

Answer 9

1

@LaryxDecidua Wtedy nadal działa. Zawsze ładowanie najnowszej wersji groziłoby uszkodzeniem strony. Pomyśl o zerwaniu zmian między wersjami. Dlatego testowanie jest zalecane przy przechodzeniu na inną wersję.

Markus Pscheidt,

Answer 10

2

Użyłem powyższego kodu w index.html na lokalnym komputerze, przetestowałem w chrome, pokazał mi błąd poniżej i nav.html nie mógł zostać załadowany.

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.

Dowolny pomysł?

KenyKeny

Answer 11

Wiem, że to dość stare pytanie, ale kiedy masz dostępny JavaScript, możesz użyć jQuery i jego metod AJAX.

Najpierw utwórz stronę z całą zawartością HTML paska nawigacji.

Następnie użyj $.getmetody jQuery, aby pobrać zawartość strony. Na przykład, powiedzmy, że umieściłeś cały kod HTML paska nawigacji w pliku o nazwie navigation.htmli dodałeś znacznik zastępczy (Like <div id="nav-placeholder">) w swoim index.html, a następnie użyjesz następującego kodu:

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

Answer 12

4

Możesz użyć php do tworzenia wielostronicowej witryny internetowej.

Utwórz plik header.php, w którym powinieneś umieścić cały kod HTML dla menu, mediów społecznościowych itp
Wstaw plik header.php do pliku index.php, używając następującego kodu

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

(Powyższy kod zrzuci cały poprzedni kod HTML) Treść Twojej witryny.

Podobnie możesz z łatwością tworzyć stopki i inne elementy. Wbudowane PHP obsługuje kod html w swoich rozszerzeniach. Więc lepiej naucz się tej łatwej poprawki.

Sachin Kanungo
źródło

1

Czy wszyscy mówicie, że powinienem przekonwertować to wszystko na PHP zamiast wielu stron HTML dla mojej witryny? To moja pierwsza witryna i znam html, dlatego z niej korzystałem, ale jeśli to powinno być PHP, to powinno to być PHP ... Więc co to powinno być?

blackRob4953

To jest bardzo podstawowy php, którego możesz się łatwo nauczyć. Nie zmierzysz się z koszmarem, gdy przekonwertujesz swoją stronę na język po stronie serwera. Polecam to. Ale jeśli zamierzasz używać tylko html, rozważ .shtml w przypadku drobnych problemów, nadal uważam, że jest on niezgrabny w przypadku rozwijających się witryn internetowych.

Sachin Kanungo

Dobrze. Teraz, gdy ta strona to html. Jak przekonwertować go na PHP? Czy to kilka wpisów, czy muszę powtórzyć wszystkie moje tagi? A jeśli tak, to jak ... Więc nie

schrzanię

1

Zmień rozszerzenie na .php i gotowe. użyj następujących nawiasów klamrowych, aby wprowadzić kod php. <?php include 'header.php'; ?>Przejdź do php.net lub w3schools, aby uzyskać podstawowe informacje.

Sachin Kanungo

Answer 13

1

Czy wszyscy mówicie, że powinienem przekonwertować to wszystko na PHP zamiast wielu stron HTML dla mojej witryny? To moja pierwsza witryna i znam html, dlatego z niej korzystałem, ale jeśli to powinno być PHP, to powinno to być PHP ... Więc co to powinno być?

blackRob4953

Answer 14

To jest bardzo podstawowy php, którego możesz się łatwo nauczyć. Nie zmierzysz się z koszmarem, gdy przekonwertujesz swoją stronę na język po stronie serwera. Polecam to. Ale jeśli zamierzasz używać tylko html, rozważ .shtml w przypadku drobnych problemów, nadal uważam, że jest on niezgrabny w przypadku rozwijających się witryn internetowych.

Sachin Kanungo

Answer 15

Dobrze. Teraz, gdy ta strona to html. Jak przekonwertować go na PHP? Czy to kilka wpisów, czy muszę powtórzyć wszystkie moje tagi? A jeśli tak, to jak ... Więc nie

schrzanię

Answer 16

1

Zmień rozszerzenie na .php i gotowe. użyj następujących nawiasów klamrowych, aby wprowadzić kod php. <?php include 'header.php'; ?>Przejdź do php.net lub w3schools, aby uzyskać podstawowe informacje.

Sachin Kanungo

Answer 17

Bardzo starą, ale dość prostą techniką jest użycie „dołączeń po stronie serwera” , aby dołączyć strony HTML do strony najwyższego poziomu, która ma .shtmlrozszerzenie. Na przykład będzie to twój index.shtmlplik:

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

Tak, jest kiepski, ale działa. Pamiętaj, aby włączyć obsługę SSI w konfiguracji serwera HTTP ( tak to zrobić dla Apache ).

Answer 18

Brando ZWZ udziela świetnych odpowiedzi, jak radzić sobie z tą sytuacją.

Odp .: Ten sam pasek nawigacyjny na wielu stronach 21 sierpnia 2018 10:13 | LINK

O ile wiem, istnieje wiele rozwiązań.

Na przykład:

Cały kod paska nawigacyjnego znajduje się w pliku nav.html (bez znacznika HTML lub body, tylko kod paska nawigacji).

Następnie moglibyśmy załadować go bezpośrednio z jquery bez pisania wielu kodów.

Lubię to:

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

    </div>

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

Rozwiązanie 2:

Możesz użyć kodu JavaScript do wygenerowania całego paska nawigacyjnego.

Lubię to:

Kod 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

Jak mogę ponownie wykorzystać pasek nawigacji na wielu stronach?

Odpowiedzi: