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