Bir gezinti çubuğunu birden çok sayfada nasıl yeniden kullanabilirim?

Question 1

Home / index.html sayfamı oluşturmayı yeni bitirdim. Gezinme çubuğunu olduğu yerde tutmak ve kullanıcılar tüm sayfalarımı tıklarken onun kalmasını sağlamak. Gezinti kodunu kopyalayıp her sayfanın üstüne yapıştırmam gerekir mi? Yoksa daha temiz görünmesi için başka bir yol var mı?

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

Bana yardımcı olan buydu. Gezinme çubuğum gövde etiketinde. Gezinme çubuğunun tüm kodu dosyadadır nav.html(herhangi bir html veya gövde etiketi olmadan, yalnızca gezinme çubuğunun kodu). Hedef sayfada, bu headetikete girer :

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

Daha sonra gövde etiketinde, nav.htmlaşağıdaki gibi kapsayıcıya yüklemek için benzersiz bir kimlik ve bir javascript bloğu içeren bir kapsayıcı yapılır:

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

</div>

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

Question 3

Bunun oldukça eski bir soru olduğunu biliyorum, ancak JavaScript'iniz olduğunda jQuery ve AJAX yöntemlerini kullanabilirsiniz.

İlk olarak, tüm gezinme çubuğunun HTML içeriğine sahip bir sayfa oluşturun.

Ardından, $.getsayfanın içeriğini getirmek için jQuery'nin yöntemini kullanın. Örneğin, gezinme çubuğunun tüm HTML'sini adlı bir dosyaya koyduğunuzu ve içine navigation.htmlbir yer tutucu etiket (Beğen <div id="nav-placeholder">) eklediğinizi varsayalım index.html, ardından aşağıdaki kodu kullanırsınız:

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

Question 4

Çok sayfalı web sitesi yapmak için php kullanabilirsiniz.

Menüler ve sosyal medya için tüm html kodunuzu koymanız gereken bir header.php oluşturun.
Aşağıdaki kodu kullanarak index.php dosyanıza header.php ekleyin

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

(Yukarıdaki kod, bundan önce tüm html kodunu dökecektir) Sitenizin gövde içeriği.

Benzer şekilde altbilgi ve diğer öğeleri kolaylıkla oluşturabilirsiniz. PHP yerleşik, uzantılarında html kodunu destekler. Öyleyse, bu kolay düzeltmeyi öğrenseniz iyi olur.

Question 5

Çok eski ama yeterince basit bir teknik, uzantıya sahip üst düzey bir sayfaya HTML sayfalarını eklemek için "Sunucu Tarafı Kodları" nı kullanmaktır .shtml. Örneğin bu sizin index.shtmldosyanız olacaktır:

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

Evet, topal ama işe yarıyor. HTTP sunucusu yapılandırmanızda SSI desteğini etkinleştirmeyi unutmayın ( Apache için bunu nasıl yapacağınız budur ).

Question 6

Brando ZWZ, bu durumla başa çıkmak için bazı harika yanıtlar veriyor.

Ynt: Birden çok sayfada aynı gezinme çubuğu 21 Ağustos 2018 10:13 | BAĞLANTI

Bildiğim kadarıyla birden fazla çözüm var.

Örneğin:

Gezinme çubuğunun tüm kodu nav.html dosyasındadır (herhangi bir html veya gövde etiketi olmadan, yalnızca gezinme çubuğunun kodu).

Daha sonra çok fazla kod yazmadan doğrudan jquery'den yükleyebilirdik.

Bunun gibi:

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

    </div>

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

Çözüm2:

Gezinme çubuğunun tamamını oluşturmak için JavaScript kodunu kullanabilirsiniz.

Bunun gibi:

Javascript kodu:

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