Penggunaan fungsi LOADHTML pada PHP

Question

Saya punya 2 file HTML, misalkan a.htmldan b.html. Dalam a.htmlsaya ingin memasukkan b.html.

Di JSF saya bisa melakukannya seperti itu:

<ui:include src="b.xhtml" />

Ini berarti bahwa di dalam a.xhtmlfile, saya dapat memasukkan b.xhtml.

Bagaimana kita melakukannya dalam *.htmlfile?

Jawaban:

Menurut pendapat saya solusi terbaik menggunakan jQuery:

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html:

<p>This is my include file</p>

Metode ini adalah solusi sederhana dan bersih untuk masalah saya.

.load()Dokumentasi jQuery ada di sini .

Memperluas jawaban lolo dari atas, berikut ini sedikit otomatisasi jika Anda harus memasukkan banyak file:

<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = 'views/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

Dan kemudian memasukkan sesuatu ke dalam html:

<div data-include="header"></div>
<div data-include="footer"></div>

Yang akan mencakup tampilan file / header.html dan tampilan / footer.html

Solusi saya mirip dengan salah satu lolo di atas. Namun, saya memasukkan kode HTML melalui dokumen JavaScript. Menulis alih-alih menggunakan jQuery:

a.html:

<html> 
  <body>
  <h2>Put your HTML content before insertion of b.js.</h2>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>
  </body>
</html>

b.js:

document.write('\
\
    <h2>Add your HTML code here</h2>\
\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

Alasan saya tidak menggunakan jQuery adalah karena jQuery.js berukuran ~ 90kb, dan saya ingin menjaga jumlah data yang dimuat sekecil mungkin.

Untuk mendapatkan file JavaScript yang lolos dengan benar tanpa banyak pekerjaan, Anda dapat menggunakan perintah sed berikut:

sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html

Atau cukup gunakan skrip bash praktis berikut yang diterbitkan sebagai Inti pada Github, yang mengotomatiskan semua pekerjaan yang diperlukan, mengonversi b.htmlke b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Penghargaan untuk Greg Minshall untuk perintah sed yang ditingkatkan yang juga lolos dari garis miring dan kutipan tunggal, yang tidak dipertimbangkan oleh perintah sed asli saya.

Atau untuk browser yang mendukung literal templat , yang berikut ini juga berfungsi:

b.js:

document.write(`

    <h2>Add your HTML code here</h2>

     <p>Notice, you do not have to escape LF's with a '\',
        like demonstrated in the above code listing.
    </p>

`);

Plug tak tahu malu dari perpustakaan yang saya tulis menyelesaikan ini.

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

Di atas akan mengambil konten /path/to/include.htmldan menggantinya div.

Sisi server sederhana termasuk arahan untuk memasukkan file lain yang ditemukan di folder yang sama terlihat seperti ini:

<!--#include virtual="a.html" -->

Tidak perlu skrip. Tidak perlu melakukan hal-hal sisi server mewah (tho yang mungkin akan menjadi pilihan yang lebih baik)

<iframe src="/path/to/file.html" seamless></iframe>

Karena browser lama tidak mendukung mulus, Anda harus menambahkan beberapa css untuk memperbaikinya:

iframe[seamless] {
    border: none;
}

Perlu diingat bahwa untuk peramban yang tidak mendukung mulus, jika Anda mengklik tautan di iframe itu akan membuat bingkai masuk ke url itu, bukan keseluruhan jendela. Cara untuk menyiasatinya adalah dengan memiliki semua tautan target="_parent", sehingga dukungan peramban "cukup baik".

Sebuah solusi yang sangat lama saya memang memenuhi kebutuhan saya saat itu, tapi inilah cara melakukannya dengan kode yang sesuai standar:

<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->

<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->

Sebagai alternatif, jika Anda memiliki akses ke file .htaccess di server Anda, Anda dapat menambahkan arahan sederhana yang akan memungkinkan php ditafsirkan pada file yang diakhiri dengan ekstensi .html.

RemoveHandler .html
AddType application/x-httpd-php .php .html

Sekarang Anda dapat menggunakan skrip php sederhana untuk memasukkan file lain seperti:

<?php include('b.html'); ?>

Berikut berfungsi jika konten html dari beberapa file perlu disertakan: Misalnya, baris berikut akan menyertakan konten piece_to_include.html di lokasi di mana definisi OBJECT terjadi.

...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...

Referensi: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4

Inilah solusi di tempat saya:

(() => {
    const includes = document.getElementsByTagName('include');
    [].forEach.call(includes, i => {
        let filePath = i.getAttribute('src');
        fetch(filePath).then(file => {
            file.text().then(content => {
                i.insertAdjacentHTML('afterend', content);
                i.remove();
            });
        });
    });
})();

<p>FOO</p>

<include src="a.html">Loading...</include>

<p>BAR</p>

<include src="b.html">Loading...</include>

<p>TEE</p>

Inilah yang membantu saya. Untuk menambahkan blok kode html dari b.htmlke a.html, ini harus masuk ke headtag a.html:

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

Kemudian dalam tag tubuh, sebuah wadah dibuat dengan id unik dan blok javascript untuk memuatnya b.htmlke dalam wadah, sebagai berikut:

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>

Saya tahu ini adalah posting yang sangat lama, jadi beberapa metode tidak tersedia saat itu. Tapi ini pendapat saya yang sangat sederhana (berdasarkan jawaban Lolo).

Itu bergantung pada atribut data- * HTML5 dan oleh karena itu sangat generik karena menggunakan fungsi jQuery untuk setiap fungsi untuk mendapatkan setiap .class yang cocok dengan "load-html" dan menggunakan atribut 'sumber data' masing-masing untuk memuat konten:

<div class="container-fluid">
    <div class="load-html" id="NavigationMenu" data-source="header.html"></div>
    <div class="load-html" id="MainBody" data-source="body.html"></div>
    <div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
    $(".load-html").each(function () {
        $(this).load(this.dataset.source);
    });
});
</script>

Anda dapat menggunakan polyfill Impor HTML ( https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ), atau solusi yang disederhanakan https://github.com/dsheiko/html-import

Misalnya, pada halaman Anda mengimpor blok HTML seperti itu:

<link rel="html-import" href="./some-path/block.html" >

Blok mungkin memiliki impor sendiri:

<link rel="html-import" href="./some-other-path/other-block.html" >

Importir menggantikan arahan dengan HTML yang dimuat cukup banyak seperti SSI

Arahan ini akan disajikan secara otomatis segera setelah Anda memuat JavaScript kecil ini:

<script async src="./src/html-import.js"></script>

Ini akan memproses impor ketika DOM siap secara otomatis. Selain itu, memperlihatkan API yang dapat Anda gunakan untuk berjalan secara manual, untuk mendapatkan log dan sebagainya. Nikmati :)

Sebagian besar solusi berfungsi tetapi mereka memiliki masalah dengan jquery :

Masalahnya adalah mengikuti kode yang $(document).ready(function () { alert($("#includedContent").text()); }tidak memberi peringatan apa pun selain memperingatkan konten yang disertakan.

Saya menulis kode di bawah ini, dalam solusi saya, Anda dapat mengakses konten yang disertakan dalam $(document).readyfungsi:

(Kuncinya adalah memuat konten yang disertakan secara sinkron).

index.htm :

<html>
    <head>
        <script src="jquery.js"></script>

        <script>
            (function ($) {
                $.include = function (url) {
                    $.ajax({
                        url: url,
                        async: false,
                        success: function (result) {
                            document.write(result);
                        }
                    });
                };
            }(jQuery));
        </script>

        <script>
            $(document).ready(function () {
                alert($("#test").text());
            });
        </script>
    </head>

    <body>
        <script>$.include("include.inc");</script>
    </body>

</html>

termasuk .inc :

<div id="test">
    There is no issue between this solution and jquery.
</div>

jquery menyertakan plugin di github

Untuk memasukkan konten dari file bernama:

<!--#include virtual="filename.htm"-->

Jawaban Athari (yang pertama!) Terlalu konklusif! Baik sekali!

Tetapi jika Anda ingin memberikan nama halaman untuk dimasukkan sebagai parameter URL , posting ini memiliki solusi yang sangat bagus untuk digunakan dikombinasikan dengan:

http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

Jadi itu menjadi seperti ini:

URL Anda:

www.yoursite.com/a.html?p=b.html

The a.html Kode sekarang menjadi:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    function GetURLParameter(sParam)
    {
      var sPageURL = window.location.search.substring(1);
      var sURLVariables = sPageURL.split('&');
      for (var i = 0; i < sURLVariables.length; i++) 
      {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
      }
    }
    $(function(){
      var pinc = GetURLParameter('p');
      $("#includedContent").load(pinc); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

Ini bekerja sangat baik untuk saya! Semoga membantu :)

html5rocks.com memiliki tutorial yang sangat baik tentang hal ini, dan ini mungkin agak terlambat, tapi saya sendiri tidak tahu ini ada. w3schools juga memiliki cara untuk melakukan ini menggunakan perpustakaan baru mereka yang disebut w3.js. Masalahnya, ini membutuhkan penggunaan server web dan objek HTTPRequest. Anda sebenarnya tidak dapat memuat ini secara lokal dan mengujinya di mesin Anda. Yang bisa Anda lakukan adalah menggunakan polyfill yang disediakan di tautan html5rocks di bagian atas, atau ikuti tutorialnya. Dengan sedikit sihir JS, Anda dapat melakukan sesuatu seperti ini:

 var link = document.createElement('link');
 if('import' in link){
     //Run import code
     link.setAttribute('rel','import');
     link.setAttribute('href',importPath);
     document.getElementsByTagName('head')[0].appendChild(link);
     //Create a phantom element to append the import document text to
     link = document.querySelector('link[rel="import"]');
     var docText = document.createElement('div');
     docText.innerHTML = link.import;
     element.appendChild(docText.cloneNode(true));
 } else {
     //Imports aren't supported, so call polyfill
     importPolyfill(importPath);
 }

Ini akan membuat tautan (Dapat mengubah menjadi elemen tautan yang diinginkan jika sudah disetel), mengatur impor (kecuali Anda sudah memilikinya), dan kemudian menambahkannya. Kemudian dari sana akan mengambil dan mengurai file dalam HTML, dan kemudian menambahkannya ke elemen yang diinginkan di bawah div. Ini semua dapat diubah agar sesuai dengan kebutuhan Anda dari elemen tambahan ke tautan yang Anda gunakan. Saya harap ini membantu, mungkin tidak relevan sekarang jika cara yang lebih baru dan lebih cepat telah keluar tanpa menggunakan perpustakaan dan kerangka kerja seperti jQuery atau W3.js.

UPDATE: Ini akan menimbulkan kesalahan yang mengatakan bahwa impor lokal telah diblokir oleh kebijakan CORS. Mungkin perlu akses ke web yang dalam untuk dapat menggunakan ini karena properti web yang dalam. (Artinya tidak ada penggunaan praktis)

Inilah pendekatan saya menggunakan Fetch API dan fungsi async

<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>

<script>
    const components = document.querySelectorAll('.js-component')

    const loadComponent = async c => {
        const { name, ext } = c.dataset
        const response = await fetch(`${name}.${ext}`)
        const html = await response.text()
        c.innerHTML = html
    }

    [...components].forEach(loadComponent)
</script>

Tidak ada solusi HTML langsung untuk tugas untuk saat ini. Bahkan Impor HTML (yang secara permanen dalam konsep ) tidak akan melakukan hal itu, karena Impor! = Termasuk dan beberapa sihir JS akan tetap diperlukan.
Saya baru-baru menulis sebuah VanillaJS naskah itu hanya untuk dimasukkan HTML ke dalam HTML, tanpa komplikasi.

Tempatkan saja di a.html

<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>

Itu open-sourcedan mungkin memberikan ide (saya harap)

Anda dapat melakukannya dengan jQuery library JavaScript seperti ini:

HTML:

<div class="banner" title="banner.html"></div>

JS:

$(".banner").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

Harap perhatikan bahwa banner.htmlharus ditempatkan di bawah domain yang sama dengan halaman Anda yang lain jika tidak, halaman web Anda akan menolak banner.htmlfile tersebutkebijakan Berbagi Sumber Daya Lintas-Asal .

Perlu diketahui juga bahwa jika Anda memuat konten Anda dengan JavaScript, Google tidak akan dapat mengindeksnya sehingga itu bukan metode yang baik untuk alasan SEO.

Apakah Anda mencoba injeksi iFrame?

Ini menyuntikkan iFrame dalam dokumen dan menghapus dirinya sendiri (seharusnya dalam HTML DOM)

<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>

Salam

Saya datang ke topik ini mencari sesuatu yang serupa, tetapi sedikit berbeda dari masalah yang ditimbulkan oleh lolo. Saya ingin membuat halaman HTML yang berisi menu alfabet tautan ke halaman lain, dan masing-masing halaman lainnya mungkin ada atau tidak ada, dan urutan pembuatannya mungkin tidak sesuai abjad (atau bahkan numerik). Juga, seperti Tafkadasoh, saya tidak ingin membengkak halaman web dengan jQuery. Setelah meneliti masalah dan bereksperimen selama beberapa jam, inilah yang berhasil bagi saya, dengan menambahkan komentar yang relevan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1">
  <meta name="Author" content="me">
  <meta copyright="Copyright" content= "(C) 2013-present by me" />
  <title>Menu</title>

<script type="text/javascript">
<!--
var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009,
    F010, F011, F012, F013, F014, F015, F016, F017, F018, F019;
var dat = new Array();
var form, script, write, str, tmp, dtno, indx, unde;

/*
The "F000" and similar variables need to exist/be-declared.
Each one will be associated with a different menu item,
so decide on how many items maximum you are likely to need,
when constructing that listing of them.  Here, there are 20.
*/


function initialize()
{ window.name="Menu";
  form = document.getElementById('MENU');
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = str.substr(tmp);
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = str + ".js";
    form.appendChild(script);
  }

/*
The for() loop constructs some <script> objects
and associates each one with a different simple file name,
starting with "000.js" and, here, going up to "019.js".
It won't matter which of those files exist or not.
However, for each menu item you want to display on this
page, you will need to ensure that its .js file does exist.

The short function below (inside HTML comment-block) is,
generically, what the content of each one of the .js files looks like:
<!--
function F000()
{ return ["Menu Item Name", "./URLofFile.htm", "Description string"];
}
-->

(Continuing the remarks in the main menu.htm file)
It happens that each call of the form.appendChild() function
will cause the specified .js script-file to be loaded at that time.
However, it takes a bit of time for the JavaScript in the file
to be fully integrated into the web page, so one thing that I tried,
but it didn't work, was to write an "onload" event handler.
The handler was apparently being called before the just-loaded
JavaScript had actually become accessible.

Note that the name of the function in the .js file is the same as one
of the the pre-defined variables like "F000".  When I tried to access
that function without declaring the variable, attempting to use an
"onload" event handler, the JavaScript debugger claimed that the item
was "not available".  This is not something that can be tested-for!
However, "undefined" IS something that CAN be tested-for.  Simply
declaring them to exist automatically makes all of them "undefined".
When the system finishes integrating a just-loaded .js script file,
the appropriate variable, like "F000", will become something other
than "undefined".  Thus it doesn't matter which .js files exist or
not, because we can simply test all the "F000"-type variables, and
ignore the ones that are "undefined".  More on that later.

The line below specifies a delay of 2 seconds, before any attempt
is made to access the scripts that were loaded.  That DOES give the
system enough time to fully integrate them into the web page.
(If you have a really long list of menu items, or expect the page
to be loaded by an old/slow computer, a longer delay may be needed.)
*/

  window.setTimeout("BuildMenu();", 2000);
  return;
}


//So here is the function that gets called after the 2-second delay  
function BuildMenu()
{ dtno = 0;    //index-counter for the "dat" array
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = "F" + str.substr(tmp);
    tmp = eval(str);
    if(tmp != unde) // "unde" is deliberately undefined, for this test
      dat[dtno++] = eval(str + "()");
  }

/*
The loop above simply tests each one of the "F000"-type variables, to
see if it is "undefined" or not.  Any actually-defined variable holds
a short function (from the ".js" script-file as previously indicated).
We call the function to get some data for one menu item, and put that
data into an array named "dat".

Below, the array is sorted alphabetically (the default), and the
"dtno" variable lets us know exactly how many menu items we will
be working with.  The loop that follows creates some "<span>" tags,
and the the "innerHTML" property of each one is set to become an
"anchor" or "<a>" tag, for a link to some other web page.  A description
and a "<br />" tag gets included for each link.  Finally, each new
<span> object is appended to the menu-page's "form" object, and thereby
ends up being inserted into the middle of the overall text on the page.
(For finer control of where you want to put text in a page, consider
placing something like this in the web page at an appropriate place,
as preparation:
<div id="InsertHere"></div>
You could then use document.getElementById("InsertHere") to get it into
a variable, for appending of <span> elements, the way a variable named
"form" was used in this example menu page.

Note: You don't have to specify the link in the same way I did
(the type of link specified here only works if JavaScript is enabled).
You are free to use the more-standard "<a>" tag with the "href"
property defined, if you wish.  But whichever way you go,
you need to make sure that any pages being linked actually exist!
*/

  dat.sort();
  for(indx=0; indx<dtno; indx++)
  { write = document.createElement('span');
    write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] +
                      "', 'Menu');\" style=\"color:#0000ff;" + 
                      "text-decoration:underline;cursor:pointer;\">" +
                      dat[indx][0] + "</a> " + dat[indx][2] + "<br />";
    form.appendChild(write);
  }
  return;
}

// -->
</script>
</head>

<body onload="initialize();" style="background-color:#a0a0a0; color:#000000; 

font-family:sans-serif; font-size:11pt;">
<h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser's JavaScript<br />
support is enabled.</span><br /></noscript></h2>
These are the menu items you currently have available:<br />
<br />
<form id="MENU" action="" onsubmit="return false;">
<!-- Yes, the <form> object starts out completely empty -->
</form>
Click any link, and enjoy it as much as you like.<br />
Then use your browser's BACK button to return to this Menu,<br />
so you can click a different link for a different thing.<br />
<br />
<br />
<small>This file (web page) Copyright (c) 2013-present by me</small>
</body>
</html>

Ini adalah artikel yang bagus , Anda dapat mengimplementasikan perpustakaan umum dan cukup menggunakan kode di bawah ini untuk mengimpor file HTML apa pun dalam satu baris.

<head>
   <link rel="import" href="warnings.html">
</head>

Anda juga dapat mencoba Google Polymer

Menggunakan ES6 backticks ``: templat literals !

let nick = "Castor", name = "Moon", nuts = 1

more.innerHTML = `

<h2>Hello ${nick} ${name}!</h2>

You collected ${nuts} nuts so far!

<hr>

Double it and get ${nuts + nuts} nuts!!

`

<div id="more"></div>

Dengan cara ini kita dapat memasukkan html tanpa menyandikan kutipan, memasukkan variabel dari DOM, dan sebagainya.

Ini adalah mesin templating yang kuat, kita dapat menggunakan file js terpisah dan menggunakan acara untuk memuat konten di tempat, atau bahkan memisahkan semuanya dalam potongan dan memanggil permintaan:

let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);

https://caniuse.com/#feat=template-literals

Untuk membuat Solusi berfungsi, Anda harus menyertakan file csi.min.js, yang dapat Anda temukan di sini .

Seperti contoh yang ditunjukkan pada GitHub, untuk menggunakan perpustakaan ini Anda harus menyertakan file csi.js di header halaman Anda, maka Anda perlu menambahkan atribut data-include dengan nilainya yang diatur ke file yang ingin Anda sertakan, pada wadah elemen.

Sembunyikan Kode Salin

<html>
  <head>
    <script src="csi.js"></script>
  </head>
  <body>
    <div data-include="Test.html"></div>
  </body>
</html>

... semoga membantu.

PHP adalah bahasa scripting tingkat server. Itu dapat melakukan banyak hal, tetapi satu penggunaan populer adalah untuk memasukkan dokumen HTML di dalam halaman Anda, sama seperti SSI. Seperti SSI, ini adalah teknologi tingkat server. Jika Anda tidak yakin apakah Anda memiliki fungsi PHP di situs web Anda, hubungi penyedia hosting Anda.

Berikut ini adalah skrip PHP sederhana yang dapat Anda gunakan untuk memasukkan potongan HTML pada halaman web yang mendukung PHP:

Simpan HTML untuk elemen umum situs Anda untuk memisahkan file. Misalnya, bagian navigasi Anda mungkin disimpan sebagai navigation.html atau navigation.php. Gunakan kode PHP berikut untuk memasukkan HTML itu di setiap halaman.

<?php require($DOCUMENT_ROOT . "navigation.php"); ?>

Gunakan kode yang sama pada setiap halaman yang ingin Anda sertakan file. Pastikan untuk mengubah nama file yang disorot menjadi nama dan jalur ke file sertakan Anda.

Jika Anda menggunakan beberapa kerangka kerja seperti Django / Bootle, mereka sering mengirimkan beberapa mesin template. Katakanlah Anda menggunakan botol, dan mesin templat default adalah SimpleTemplate Engine . Dan di bawah ini adalah file html murni

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

Anda dapat memasukkan footer.tpl di file utama Anda, seperti:

$ cat dashboard.tpl
%include footer

Selain itu, Anda juga dapat meneruskan parameter ke dashborard.tpl Anda.

Berdasarkan jawaban https://stackoverflow.com/a/31837264/4360308 Saya telah mengimplementasikan fungsi ini dengan Nodejs (+ express + cheerio) sebagai berikut:

HTML (index.html)

<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>

JS

function includeComponents($) {
    $('.include').each(function () {
        var file = 'view/html/component/' + $(this).data('include') + '.html';
        var dataComp = fs.readFileSync(file);
        var htmlComp = dataComp.toString();
        if ($(this).data('method') == "replace") {
            $(this).replaceWith(htmlComp);
        } else if ($(this).data('method') == "append") {
            $(this).append(htmlComp);
        }
    })
}

function foo(){
    fs.readFile('./view/html/index.html', function (err, data) {
        if (err) throw err;
        var html = data.toString();
        var $ = cheerio.load(html);
        includeComponents($);
        ...
    }
}