मैं कई पृष्ठों पर नेविगेशन बार का पुन: उपयोग कैसे कर सकता हूं?

Question 1

मैंने अभी-अभी अपना होम / इंडेक्स। 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

इससे मुझे मदद मिली। मेरा नेविगेशन बार बॉडी टैग में है। नेविगेशन बार के लिए संपूर्ण कोड nav.htmlफ़ाइल में है (बिना किसी html या बॉडी टैग के, केवल नेविगेशन बार के लिए कोड)। लक्ष्य पृष्ठ में, यह headटैग में जाता है :

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

फिर बॉडी टैग में, एक कंटेनर को एक अद्वितीय आईडी और एक जावास्क्रिप्ट ब्लॉक nav.htmlके साथ कंटेनर में लोड करने के लिए बनाया जाता है, इस प्रकार है:

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

</div>

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

Question 3

मुझे पता है कि यह एक बहुत पुराना सवाल है, लेकिन जब आपके पास जावास्क्रिप्ट उपलब्ध है तो आप 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 कोड डालना चाहिए
निम्नलिखित कोड का उपयोग करके अपने index.php में शीर्ष लेख जोड़ें

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

(उपरोक्त कोड इससे पहले सभी HTML कोड को डंप कर देगा) आपकी साइट की सामग्री।

इसी तरह आप आसानी से पाद और अन्य तत्व बना सकते हैं। PHP उनके एक्सटेंशन में अंतर्निर्मित HTML कोड का समर्थन करता है। तो, बेहतर यह आसान तय सीखें।

Question 5

एचटीएमएल पेजों को एक्सटेंशन वाले टॉप-लेवल पेज में शामिल करने के लिए एक बहुत पुरानी लेकिन सरल पर्याप्त तकनीक "सर्वर-साइड शामिल है" का उपयोग करना .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>

हाँ, यह लंगड़ा है, लेकिन यह काम करता है। अपने HTTP सर्वर कॉन्फ़िगरेशन में SSI समर्थन को सक्षम करने के लिए याद रखें ( यह अपाचे के लिए कैसे करना है )।

Question 6

ब्रैंडो ZWZ इस स्थिति को संभालने के लिए कुछ शानदार उत्तर प्रदान करता है।

पुन: एकाधिक पृष्ठों पर एक ही नावबार 21 अगस्त, 2018 10:13 पूर्वाह्न | लिंक |

जहाँ तक मुझे पता है, वहाँ कई समाधान हैं।

उदाहरण के लिए:

नेविगेशन बार के लिए संपूर्ण कोड nav.html फ़ाइल में है (बिना किसी html या बॉडी टैग के, केवल नेविगेशन बार के लिए कोड)।

तब हम बहुत सारे कोड लिखे बिना इसे सीधे जकुरी से लोड कर सकते थे।

ऐशे ही:

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

    </div>

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

Solution2:

आप पूरे नेव बार को बनाने के लिए जावास्क्रिप्ट कोड का उपयोग कर सकते हैं।

ऐशे ही:

जावास्क्रिप्ट कोड:

$(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];
            }
        }
    }
}

एचटीएमएल:

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