स्थिर HTML के साथ सामान्य हैडर / पाद

Question

क्या किसी साइट के प्रत्येक पृष्ठ पर प्रदर्शित होने के लिए सामान्य शीर्ष लेख / पाद फ़ाइल बनाने के लिए स्थिर HTML / XHTML के साथ एक अच्छा तरीका है? मुझे पता है कि आप स्पष्ट रूप से PHP या सर्वर साइड निर्देशों के साथ ऐसा कर सकते हैं, लेकिन क्या आपके लिए सब कुछ एक साथ सिलाई करने वाले सर्वर पर बिल्कुल निर्भरता के साथ ऐसा करने का कोई तरीका है?

संपादित करें: सभी बहुत अच्छे उत्तर थे और मैं यही उम्मीद कर रहा था। HTML स्थिर है, अवधि। यह बदलने का कोई वास्तविक तरीका नहीं है कि बिना कुछ चल रहे सर्वर साइड या क्लाइंट साइड। मैंने पाया है कि सर्वर साइड में मेरा सबसे अच्छा विकल्प शामिल है क्योंकि वे बहुत सरल हैं और स्क्रिप्टिंग की आवश्यकता नहीं है।

Comments

कौन सा वेब सर्वर? IIS में सर्वर के लिए निर्मित एक तंत्र है।

— NotMe

मैं यह पूछने वाला था जब मुझे यह उत्तर Google के माध्यम से मिला।

— इगोर ज़ेवका

छोटी वेबसाइटों के लिए एक विकल्प केवल एक एचटीएमएल पेज (एक हेडर और फुटर के साथ) का उपयोग करना है और जावास्क्रिप्ट के साथ वर्गों को टॉगल करना है या पेज के अंदर नेविगेट करने के लिए एंकर (जैसे हेडर) का उपयोग करना है।

— कोलिमार्को

मुझे लगता है कि यहां उत्तर काफी अच्छा है। stackoverflow.com/questions/18712338/…

— जो

Answer 1

आप जो चाहते हैं, उसे करने के तीन तरीके हैं

सर्वर स्क्रिप्ट

इसमें php, Asp, jsp जैसी कुछ चीजें शामिल हैं .... लेकिन आपने कहा कि नहीं

सर्वर साइड शामिल है

आपका सर्वर पृष्ठों की सेवा कर रहा है, इसलिए अंतर्निहित सर्वर साइड में लाभ क्यों न लें ? प्रत्येक सर्वर के पास ऐसा करने का अपना तरीका है, इसका लाभ उठाएं।

क्लाइंट साइड शामिल करें

यह समाधान आपके पास सर्वर पर पहले से लोड होने के बाद सर्वर पर वापस बुला रहा है।

Answer 2

JQuery लोड () फ़ंक्शन सामान्य हेडर और फुटर सहित के लिए उपयोग कर सकता है। कोड जैसा होना चाहिए

<script>
    $("#header").load("header.html");
    $("#footer").load("footer.html");
</script>

आप यहां डेमो (संग्रहीत) पा सकते हैं

Comments

2014 और मुझे अभी भी लगता है कि यह एक व्यवहार्य जवाब है। जुड़ा हुआ लेख एक अच्छा और सरल डेमो भी प्रदान करता है।

— HPWD

Answer 3

चूंकि HTML में "शामिल" निर्देश नहीं है, इसलिए मैं केवल तीन वर्कअराउंड के बारे में सोच सकता हूं

1. फ्रेम्स
2. जावास्क्रिप्ट
3. सीएसएस

प्रत्येक विधियों पर थोड़ी टिप्पणी।

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

जावास्क्रिप्ट एक बहुत व्यापक विषय है और संभवत: कई तरीके मौजूद हैं कि कोई व्यक्ति वांछित प्रभाव को प्राप्त करने के लिए इसका उपयोग कैसे कर सकता है। मेरे सिर के ऊपर से हालांकि मैं दो तरह से सोच सकता हूं:

1. पूर्ण-विकसित AJAX अनुरोध, जो शीर्ष लेख / पाद लेख का अनुरोध करता है और फिर उन्हें पृष्ठ के सही स्थान पर रखता है;
2. <script type="text/javascript" src="header.js"> जो इस तरह से कुछ है: document.write('My header goes here');

CSS के माध्यम से ऐसा करना वास्तव में एक दुरुपयोग होगा। CSS में वह contentसंपत्ति है जो आपको कुछ HTML सामग्री डालने की अनुमति देती है, हालांकि यह वास्तव में इस तरह का उपयोग करने का इरादा नहीं है। इसके अलावा मैं इस निर्माण के लिए ब्राउज़र समर्थन के बारे में निश्चित नहीं हूं।

Answer 4

आप इसे जावास्क्रिप्ट के साथ कर सकते हैं, और मुझे नहीं लगता कि यह उस फैंसी होने की आवश्यकता है।

यदि आपके पास हैडर.जेएस फ़ाइल और पाद लेख है।

तब शीर्ष लेख की सामग्री। Js कुछ इस तरह हो सकती है

document.write("<div class='header'>header content</div> etc...")

आप लिख रहे हैं स्ट्रिंग में किसी भी नेस्टेड उद्धरण पात्रों से बचने के लिए याद रखें । तब आप अपने स्थैतिक टेम्पलेट से कॉल कर सकते हैं

<script type="text/javascript" src="header.js"></script>

और इसी तरह footer.js के लिए।

नोट: मैं इस समाधान की सिफारिश नहीं कर रहा हूं - यह एक हैक है और इसमें कई कमियां हैं (एसईओ के लिए खराब और शुरुआत के लिए उपयोगिता) - लेकिन यह प्रश्नकर्ता की आवश्यकताओं को पूरा करता है।

Answer 5

आप आसानी से jquery का उपयोग करके ऐसा कर सकते हैं। ऐसे सरल कार्य के लिए php की कोई आवश्यकता नहीं है। बस इसे एक बार अपने वेबपेज में शामिल करें।

$(function(){
    $("[data-load]").each(function(){
        $(this).load($(this).data("load"), function(){
        });
    });
})

अब बाहरी एचटीएमएल फ़ाइल से इसकी सामग्री को कॉल करने के लिए किसी भी तत्व पर डेटा-लोड का उपयोग करें आपको बस अपने HTML कोड में लाइन जोड़ना होगा जहां आप सामग्री को रखना चाहते हैं।

उदाहरण

<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>

Comments

मुझे भी यह तरीका पसंद है। क्या आप जानते हैं कि SEO यह कैसे होगा (एक बड़ा मुद्दा नहीं, बस जिज्ञासु)?

— HPWD

मुझे यकीन नहीं है, लेकिन मुझे लगता है कि हाँ, यह एसईओ को प्रभावित करेगा। रोबोट html पेज के स्रोत को पढ़ेंगे लेकिन जब आप देख पाएंगे कि जब आप स्रोत देख लेंगे तो आपको html सामग्री लोड नहीं मिलेगी। HTML तब ही एम्बेड किया जाता है जब क्लाइंट जावास्क्रिप्ट को निष्पादित करता है। html के माध्यम से सरल पार्सिंग में साइडपेल और फूटर आदि सामग्री नहीं मिलेगी

— शुभम बादल

Answer 6

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

Answer 7

सादे HTML का उपयोग करने का सबसे सरल तरीका है।

आप इनमें से किसी एक तरीके का उपयोग कर सकते हैं:

<embed type="text/html" src="header.html">

या:

<object name="foo" type="text/html" data="header.html"></object>

Answer 8

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

Answer 9

HTML फ़्रेम, लेकिन यह एक आदर्श समाधान नहीं है। आप अनिवार्य रूप से एक ही बार में 3 अलग-अलग एचटीएमएल पेज एक्सेस कर रहे होंगे।

आपका दूसरा विकल्प AJAX I का उपयोग करना है।

Answer 10

आप गल्प या ग्रंट जैसे टास्क रनर का इस्तेमाल कर सकते हैं।

एक NPM gulp पैकेज है जो फ्लाई सहित फाइल करता है और परिणाम को आउटपुट HTML फ़ाइल में संकलित करता है। आप अपने हिस्से के माध्यम से भी मूल्यों को पारित कर सकते हैं।

https://www.npmjs.com/package/gulp-file-include

<!DOCTYPE html>
<html>
  <body>
  @@include('./header.html')
  @@include('./main.html')
  </body>
</html>

एक गल्प कार्य का एक उदाहरण:

var fileinclude = require('gulp-file-include'),
    gulp = require('gulp');

    gulp.task('html', function() {
        return gulp.src(['./src/html/views/*.html'])
            .pipe(fileInclude({
                prefix: '@@',
                basepath: 'src/html'
            }))
            .pipe(gulp.dest('./build'));
    });

Answer 11

आप उन्हें क्लाइंट-साइड के माध्यम से इस तरह लोड करने की कोशिश कर सकते हैं:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>

    <div id="headerID"> <!-- your header --> </div>
    <div id="pageID"> <!-- your header --> </div>
    <div id="footerID"> <!-- your header --> </div>

    <script>
      $("#headerID").load("header.html");
      $("#pageID").load("page.html");
      $("#footerID").load("footer.html");
    </script>
  </body>
</html>

नोट: सामग्री ऊपर से नीचे तक लोड होगी और आपके द्वारा लोड किए गए कंटेनर की सामग्री को प्रतिस्थापित करेगी।

Answer 12

नहीं। स्थिर HTML फ़ाइलें नहीं बदलतीं। आप संभावित रूप से कुछ फैंसी जावास्क्रिप्ट AJAXy समाधान के साथ ऐसा कर सकते हैं लेकिन यह बुरा होगा।

Answer 13

स्थानीय टेम्प्लेटिंग सिस्टम का उपयोग करने की कमी जैसे कई सैकड़ों अब हर स्क्रिप्टिंग भाषा में मौजूद हैं या यहां तक ​​कि अपने होमब्रेव्ड का उपयोग करने के साथ sedया m4अपने सर्वर पर परिणाम भेजने के लिए, नहीं, आपको कम से कम एसएसआई की आवश्यकता होगी।

Answer 14

केवल स्थिर HTML के साथ किसी अन्य फ़ाइल को शामिल करने का एकमात्र तरीका एक iframe है। मैं इसे हेडर और फूटर्स के लिए बहुत अच्छा समाधान नहीं मानूंगा। यदि आपका सर्वर कुछ विचित्र कारण से PHP या SSI का समर्थन नहीं करता है, तो आप PHP का उपयोग कर सकते हैं और अपलोड करने से पहले इसे स्थानीय रूप से प्रीप्रोसेस कर सकते हैं। मैं इस बात पर विचार करूंगा कि आइफ्रेम्स की तुलना में बेहतर समाधान।