एकाधिक पृष्ठों पर नेविगेशन बार के लिए पुन: प्रयोज्य एचटीएमएल बनाना

Question

मैंने सोचा कि यह पुन: प्रयोज्य कोड होना सुविधाजनक होगा, खासकर नेविगेशन बार के लिए क्योंकि यह मेरे सभी पृष्ठों में समान होगा। इस तरह मुझे प्रत्येक पृष्ठ के माध्यम से जाना होगा और परिवर्तन होने पर मैन्युअल रूप से प्रत्येक को संपादित करना होगा।

आईफ्रेम का उपयोग करना संभव लगता है, लेकिन मैंने इसे आजमाया और पूरा पृष्ठ स्टाइल बेकार हो गया। मैं इसे ठीक कर सकता हूं लेकिन मुझे आश्चर्य है कि कुछ ऐसा ही है।

यह भयानक हो सकता है अगर कुछ इस तरह काम कर सकता था:

वर नेवबार = document.getElementById ('नेवबार');
navbar.innerHtml = url ('navigation.txt');

मैं वर्तमान में अपनी साइट पर ऑफ़लाइन काम कर रहा हूं इसलिए मुझे नहीं लगता कि मैं xmlhttp अनुरोध कर सकता हूं। सही बात? कम से कम मुझे अभी तक काम करने के लिए कोई AJAX उदाहरण नहीं मिला है। यह दुर्भाग्यपूर्ण है क्योंकि मुझे लगता है कि मैं आसानी से अपने आवेदन के लिए इसका उपयोग कर सकता हूं।

यहां मेरा navbar मार्कअप है। यह बहुत जटिल नहीं है इसलिए मुझे एहसास है कि मैं इसे अंत में मैन्युअल रूप से संपादित कर दूंगा।

<nav> 
    <ul id="navbar"> 
     <li><a href="biosketch.html">Biosketch</a></li> 
     <li><a href="projects.html">Class Projects</a> 
      <ul> 
       <li><a href="projects.html#SeniorProject">Senior Project</a></li> 
       <li><a href="projects.html#WindTurbine">Wind Turbine</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Resume</a></li> 
     <li><a href="#">Work Experience</a></li> 
     <li><a href="#">Contact Me</a></li> 
    </ul> 
</nav> 

Answer 1

की तरह यह कहा गया है, आम तौर पर यह एक गैर AJAX साइटों के लिए शामिल हैं के साथ सर्वर साइड किया जाता है। हालांकि, मुझे लगता है कि आप Google बंद टेम्पलेट का उपयोग कर सकते हैं। असल में, आप अपनी टेम्पलेटिंग भाषा में एक टेम्पलेट परिभाषित करते हैं, जो एक जावास्क्रिप्ट फ़ंक्शन उत्पन्न करता है जिसे आप अपने HTML को प्रस्तुत करने के लिए कॉल कर सकते हैं।

http://code.google.com/closure/templates/docs/helloworld_js.html

उदाहरण:

--templates.soy 

{namespace templates} 

{template .nav} 
<ul id="navbar"> 
    <li><a href="biosketch.html">Biosketch</a></li> 
    <li><a href="projects.html">Class Projects</a> 
     <ul> 
      <li><a href="projects.html#SeniorProject">Senior Project</a></li> 
      <li><a href="projects.html#WindTurbine">Wind Turbine</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Resume</a></li> 
    <li><a href="#">Work Experience</a></li> 
    <li><a href="#">Contact Me</a></li> 
</ul> 
{\template} 

तो फिर तुम एक जावास्क्रिप्ट समारोह में संकलित करने के लिए निम्न आदेश चला

java -jar SoyToJsSrcCompiler.jar --outputPathFormat templates.js templates.soy 

यह एक फाइल उत्पन्न करेगा बुलाया templates.js एक समारोह युक्त templates.nav कहा जाता है जिसे आप अपने पृष्ठ से निम्न जैसे कॉल कर सकते हैं:

document.getElementById('navbar').innerHTML = templates.nav(); 

यह डेटा विलय का उपयोग भी नहीं कर रहा है, जो आपको डेटा को ऑब्जेक्ट में पास करने की अनुमति देगा जो स्थिर नहीं है। लेकिन मैंने आपको केवल यह दिखाया है क्योंकि आपने जो कुछ भी पूछा है। मुझे पता है कि आप एचटीएमएल को जेएस स्ट्रिंग में भी पेस्ट कर सकते हैं, लेकिन आपको अपने संपादक से सिंटैक्स सहायता की कमी से निपटना होगा।

एक दोष यह है कि इसके लिए जेएस की आवश्यकता होती है जिसे आप दिमाग में नहीं लगते हैं। हालांकि, यदि आप जेएस-कम क्लाइंट का समर्थन करना चाहते हैं, तो आप सर्वर की तरफ टेम्पलेट जेनरेट कर सकते हैं। एक कंपाइलर भी है जो जावा Google क्लोजर विधियों को उत्पन्न करता है। आप इसे अपनी वेबसाइट पर देख सकते हैं।

उम्मीद है कि यह मदद करता है।

Answer 2

नेविगेशन फ़ाइल बनाने के लिए सर्वर साइड भाषा का उपयोग करें। यह स्थैतिक हो सकता है या यह बेहद जटिल हो सकता है, यह आपके ऊपर है।

<?php include 'includes/nav.php'; ?> 

nav.php की सामग्री <nav> तत्व पूरी तरह से हो सकता है। आप आदर्श "अनुभाग" के आधार पर तत्वों को दिखाने/छिपाने के लिए आदर्श रूप से प्रोग्राम कर सकते हैं, और अनुभाग के आधार पर कुछ कक्षाओं को टॉगल भी कर सकते हैं।

Answer 3

आप एजेक्स कॉल को "ऑफ़लाइन" कहते हैं, जैसा कि आप इसे डालते हैं, यह क्लाइंट साइड कोड है।

लेकिन अगर मैं सर्वर साइड लैंग्वेज (एएसपी.नेट या PHP) का उपयोग नहीं कर रहा था, तो मैं ऐसा करता हूं, एक छोटी .js फ़ाइल है जो navbar प्रस्तुत करती है, और मैं बस <script src='js/navbar.js'></script> जोड़ूंगा जहां navbar जाना होगा।

इस तरह जब आपको इसे बदलने की आवश्यकता है, तो आप केवल .js बदलते हैं और यह हर दूसरे पृष्ठ में अपडेट होगा।

Answer 4

कुछ सुझाव:

• आप JSP (या समान तकनीक) का उपयोग कर रहे हैं, तो आप बस templating साथ मदद करने के लिए
• आप सर्वर साइड का उपयोग कर सकते SiteMesh यहाँ की तरह कुछ का उपयोग कर सकते
शामिल
• आप JavaScript फ़ंक्शन लिख सकते हैं प्रोग्राम के रूप में डोम का निर्माण करने की जरूरत है (कोई AJAX) की आवश्यकता और फिर बस फोन है कि अपने पृष्ठों भर जे एस समारोह (कोड का कोई दोहराव)

Answer 5

आम तौर पर मार्क-अप के इन प्रकार के पुन: प्रयोज्य टुकड़े सर्वर पक्ष उत्पन्न किए जाएंगे, ज्यादातर टेम्पलेटिंग इंजन के माध्यम से।

आप ऑफ़लाइन AJAX कॉल की अनुमति देने के लिए फ़ायरफ़ॉक्स की सुरक्षा सेटिंग्स को बदल सकते हैं, लेकिन संभवतः स्थानीय विकास वातावरण स्थापित करना बेहतर है जहां आप सर्वर साइड भाषा का उपयोग शुरू कर सकते हैं, और शुरुआत से इसे ठीक से कर सकते हैं।

Answer 6

आप किसी भी सर्वर साइड शामिल कोडिंग के बिना इसे लागू करना चाहते हैं, इस प्रयास करें:

var http = false; 

if(navigator.appName == "Microsoft Internet Explorer") { 
    http = new ActiveXObject("Microsoft.XMLHTTP"); 
} else { 
    http = new XMLHttpRequest(); 
} 

http.open("GET", "navigation.txt"); 
http.onreadystatechange=function() { 
    if(http.readyState == 4) { 
    var navbar = document.getElementById('navbar'); 
     navbar.innerHtml = http.responseText; 
    } 
} 
http.send(null); 

Answer 7

यदि आप एक ही कोड का उपयोग करने जा रहे हैं, तो यह अलग फ़ाइल बनाने और विभिन्न वेबपृष्ठों में इसे लागू करने के लिए सबसे अच्छा हो सकता है।

यह इस माध्यम से संभव है: https://www.w3schools.com/howto/howto_html_include.asp

आप एक अलग .html फ़ाइल में नेविगेशन बार के एचटीएमएल लिख सकते हैं और इसे इस तरह में कहते हैं:

<div w3-include-html="content.html"></div>

फिर से एक जावास्क्रिप्ट समारोह में फोन

<script src="https://www.w3schools.com/lib/w3data.js"></script> 

जो w3IncludeHTML();

है

और आपको इसे चालू और चलाना चाहिए! उम्मीद है कि यह मदद की! :)