2つのHTMLファイルがあるa.html
としb.html
ます。ではa.html
私が含まれるようにしたいですb.html
。
JSFでは、次のように実行できます。
<ui:include src="b.xhtml" />
つまり、a.xhtml
ファイル内にを含めることができますb.xhtml
。
どうすれば*.html
ファイルでそれを行うことができますか?
localhost
:stackoverflow.com/questions/7542872/…–
2つのHTMLファイルがあるa.html
としb.html
ます。ではa.html
私が含まれるようにしたいですb.html
。
JSFでは、次のように実行できます。
<ui:include src="b.xhtml" />
つまり、a.xhtml
ファイル内にを含めることができますb.xhtml
。
どうすれば*.html
ファイルでそれを行うことができますか?
localhost
:stackoverflow.com/questions/7542872/…–
回答:
私の意見では、最良のソリューションは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>
この方法は私の問題に対するシンプルでクリーンな解決策です。
jQueryの.load()
ドキュメントはこちらです。
$(function(){})
は、ドキュメントの読み込みが完了した後にのみ実行されます。
XMLHttpRequest cannot load file:///.../b.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
上記からloloの答えを拡張して、多くのファイルを含める必要がある場合は、ここでもう少し自動化します。
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = 'views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>
そして、htmlに何かを含めるには:
<div data-include="header"></div>
<div data-include="footer"></div>
これには、views / header.htmlおよびviews / footer.htmlファイルが含まれます。
data-argument
、インクルードファイルで取得する方法はありますか?
$("#postdiv").load('posts.php?name=Test&age=25');
class="include"
var includes = $('[data-include]');
私の解決策は、上記のloloの解決策に似ています。ただし、jQueryを使用する代わりにJavaScriptのdocument.writeを介してHTMLコードを挿入します。
a.html:
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>
b.js:
document.write('\
\
<h1>Add your HTML code here</h1>\
\
<p>Notice however, that you have to escape LF's with a '\', just like\
demonstrated in this code listing.\
</p>\
\
');
私がjQueryを使用しない理由は、jQuery.jsのサイズが〜90kbであり、ロードするデータの量を可能な限り小さくしたいからです。
あまり作業せずに適切にエスケープされたJavaScriptファイルを取得するには、次のsedコマンドを使用できます。
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html
または、GithubにGisthubとして公開されている次の便利なbashスクリプトを使用して、必要なすべての作業を自動化し、https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6に変換b.html
しb.js
ます
。
元のsedコマンドでは考慮されなかった、スラッシュと単一引用符もエスケープする改良されたsedコマンドのGreg Minshallへの謝辞。
別の方法として、テンプレートリテラルをサポートするブラウザでは、以下も機能します。
b.js:
document.write(`
<h1>Add your HTML code here</h1>
<p>Notice, you do not have to escape LF's with a '\',
like demonstrated in the above code listing.
</p>
`);
'
マークのないHTMLで動作するはずです。検索/置換を実行して置換するだけの場合` with
\ `THEN検索/置換を置換'
して\'
、改行を「改行」で置換すると、正常に機能します。
`
-そして、あなたのような表現を挿入することができます${var}
あなたが唯一のエスケープする必要がある- \`
と\$
Html5rocksチュートリアル とPolymer-ProjectでHTML5インポートをチェックアウトする
例えば:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
stuff.html
使用できるようにしますが、スクリプトを使用して親ページにDOMのクローンを作成し、ユーザーに表示されるようにする必要があります。
私が書いたライブラリの恥知らずなプラグインがこれを解決します。
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
上記はの内容を取り、それと/path/to/include.html
置き換えdiv
ます。
<div data-include="/path/to/include.html"></div>
ます。このツールを使用すると、単純なプラグインなしのマルチページモックアップをクリーンな方法で簡単に作成できます。
同じフォルダにある別のファイルを含める単純なサーバー側のincludeディレクティブは、次のようになります。
<!--#include virtual="a.html" -->
<!--#include file="a.html" -->
同様に試す価値があるかもしれません
スクリプトは必要ありません。サーバー側で特別なことをする必要はありません(これはおそらくより良いオプションです)
<iframe src="/path/to/file.html" seamless></iframe>
古いブラウザはシームレスをサポートしていないため、CSSを追加して修正する必要があります。
iframe[seamless] {
border: none;
}
シームレスをサポートしていないブラウザでは、iframe内のリンクをクリックすると、ウィンドウ全体ではなく、そのURLにフレームが移動することに注意してください。それを回避する方法はtarget="_parent"
、すべてのリンクにを持たせることです。ブラウザのサポートは「十分」です。
私が当時使用していた非常に古いソリューションは、自分のニーズを満たしていましたが、標準に準拠したコードを実行する方法は次のとおりです。
<!--[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]-->
<object>
、<embed>
そして<iframe>
このためにすべての作業が、すべての3つのケースで、彼らは自分のスタイルとスクリプトコンテキストを持つ別の文書を作成し、その中ではなく、上のデフォルトのオープンによって、およびインスタンスのためのすべてのリンク(IFRAMEは特に醜いボーダーとスクロールバーが含まれます)親ページ(これはtarget = "_ parent"でオーバーライドできます)。これらすべてから、iframeはHTML5 seamless
属性(bjb568で言及)を通じてより統合されることを期待できる唯一のものですが、まだ十分にサポートされていません:caniuse.com/#feat=iframe-seamless
seamless
属性について)は唯一の古い部分です-残りはまだ適用されます。
別の方法として、サーバー上の.htaccessファイルにアクセスできる場合は、.html拡張子で終わるファイルでphpを解釈できるようにする単純なディレクティブを追加できます。
RemoveHandler .html
AddType application/x-httpd-php .php .html
これで、単純なphpスクリプトを使用して、次のような他のファイルを含めることができます。
<?php include('b.html'); ?>
.htaccess
場合がありhtml
ます。最初にテストします。 免責事項:上記の解決策を試したところ、たった今、それが起こりました。私.htaccess
は上の2行を除いて空でした。注意が必要です。lolo
代わりにのjQueryソリューション(下記)を試してください。
以下は、一部のファイルのhtmlコンテンツを含める必要がある場合に機能します。たとえば、次の行では、OBJECT定義が発生する場所にpiece_to_include.htmlのコンテンツが含まれます。
...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...
リファレンス:http : //www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
ここに私のインプレースソリューションがあります:
(() => {
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>
w3.jsには、次のように機能します。
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
適切な説明については、これを調べてください:https : //www.w3schools.com/howto/howto_html_include.asp
これは私を助けたものです。からb.html
にHTMLコードのブロックを追加するa.html
には、次のhead
タグに移動する必要がありa.html
ます。
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
次に、bodyタグで、b.html
次のように一意のIDとJavaScriptブロックを使用してコンテナを作成し、コンテナにロードします。
<div id="b-placeholder">
</div>
<script>
$(function(){
$("#b-placeholder").load("b.html");
});
</script>
私はこれが非常に古い投稿であることを知っているので、いくつかの方法は当時利用できませんでした。しかし、これは私の非常に簡単な見方です(Loloの回答に基づく)。
これはHTML5のdata- *属性に依存しているため、jQueryのfor-each関数を使用して「load-html」に一致するすべての.classを取得し、それぞれの「data-source」属性を使用してコンテンツをロードするという点で非常に一般的です。
<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>
HTMLインポートのポリフィル(https://www.html5rocks.com/en/tutorials/webcomponents/imports/)、またはその単純化されたソリューション https://github.com/dsheiko/html-importを使用できます。
たとえば、ページで次のようなHTMLブロックをインポートします。
<link rel="html-import" href="./some-path/block.html" >
ブロックには独自のインポートがある場合があります。
<link rel="html-import" href="./some-other-path/other-block.html" >
インポーターは、SSIとほぼ同じように、ディレクティブをロードされたHTMLに置き換えます
これらのディレクティブは、この小さなJavaScriptをロードするとすぐに自動的に提供されます。
<script async src="./src/html-import.js"></script>
DOMが自動的に準備ができると、インポートが処理されます。さらに、手動で実行したり、ログを取得したりするために使用できるAPIを公開します。楽しい :)
script async src
それだと思われます。やってみよう!
ほとんどのソリューションは機能しますが、jqueryに問題があります。
問題は、次のコードが$(document).ready(function () { alert($("#includedContent").text()); }
含まれているコンテンツを警告するのではなく、何も警告しないことです。
私は以下のコードを記述します。私のソリューションでは、$(document).ready
関数に含まれるコンテンツにアクセスできます。
(重要なのは、含まれるコンテンツを同期的にロードすることです)。
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>
include.inc:
<div id="test">
There is no issue between this solution and jquery.
</div>
アサリの答え(最初の!)は決定的すぎました!とても良い!
ただし、インクルードするページの名前をURLパラメータとして渡したい場合は、この投稿に次の条件を組み合わせて使用することで非常に優れた解決策が得られます。
http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html
したがって、次のようになります。
あなたのURL:
www.yoursite.com/a.html?p=b.html
a.htmlのコードは次のようになります。
<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>
それは私にとって非常にうまくいきました!私は助けてくれたことを願っています:)
html5rocks.comには、これに関する非常に優れたチュートリアルがあります。これは少し遅れるかもしれませんが、私自身はこれが存在することを知りませんでした。w3schoolsには、w3.jsという新しいライブラリを使用してこれを行う方法もあります。実は、これにはWebサーバーとHTTPRequestオブジェクトの使用が必要です。これらを実際にローカルにロードしてマシンでテストすることはできません。しかし、できることは、上部のhtml5rocksリンクで提供されるポリフィルを使用するか、チュートリアルに従ってください。小さなJSマジックで、次のようなことができます。
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);
}
これにより、リンクが作成され(既に設定されている場合は、必要なリンク要素に変更できます)、インポートが設定され(既に設定されていない場合)、追加されます。次に、それを取得してHTMLでファイルを解析し、divの下の目的の要素に追加します。これは、追加要素から使用しているリンクまで、ニーズに合わせてすべて変更できます。これが役に立てば幸いです。jQueryやW3.jsなどのライブラリやフレームワークを使用せずに、より新しく、より高速な方法が出てきた場合は、問題にならない可能性があります。
更新:これにより、ローカルインポートがCORSポリシーによってブロックされたというエラーがスローされます。ディープウェブのプロパティのため、これを使用するには、ディープウェブへのアクセスが必要になる場合があります。(実用上意味がない)
これがFetch APIと非同期関数を使用した私のアプローチです
<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>
現時点では、このタスクの直接的なHTMLソリューションはありません。でも、 HTML輸入 (恒久的であるドラフトでは、インポートが!=含めると、いくつかのJS魔法がとにかく必要とされるため)、事を行うことはありません。
私は最近、VanillaJSスクリプトを書きまし た HTMLをHTMLに組み込むだけで、複雑化することのないをしました。
ちょうどあなたの中に置きます a.html
<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>
それはopen-source
アイデアを与えるかもしれません(私は願っています)
次のように、JavaScriptのライブラリjQueryを使用してそれを行うことができます。
HTML:
<div class="banner" title="banner.html"></div>
JS:
$(".banner").each(function(){
var inc=$(this);
$.get(inc.attr("title"), function(data){
inc.replaceWith(data);
});
});
banner.html
他のページと同じドメインに配置する必要があることに注意してください。そうでない場合、クロスオリジンリソースシェアリングポリシーbanner.html
により、Webページはファイルを拒否します。
また、JavaScriptを使用してコンテンツを読み込む場合、Googleはコンテンツをインデックスに登録できないため、SEOの理由から、これは必ずしも適切な方法ではないことに注意してください。
私は似たようなものを探してこのトピックに行きましたが、loloによって引き起こされる問題とは少し異なります。他のページへのリンクのアルファベット順のメニューを保持するHTMLページを作成したいと思いました。他の各ページは存在する場合と存在しない場合があり、作成された順序はアルファベット順ではありません(数値でも)。また、タフカダソウのように、jQueryでWebページを膨らませたくありませんでした。問題を調査し、数時間実験した後、ここに私のために働いたものがあり、関連するコメントが追加されています:
<!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>
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>
これはすばらしい記事です。共通ライブラリを実装し、以下のコードを使用して、HTMLファイルを1行でインポートできます。
<head>
<link rel="import" href="warnings.html">
</head>
Google Polymerを試すこともできます
ES6バッククォートの使用``:テンプレートリテラル!
let nick = "Castor", name = "Moon", nuts = 1
more.innerHTML = `
<h1>Hello ${nick} ${name}!</h1>
You collected ${nuts} nuts so far!
<hr>
Double it and get ${nuts + nuts} nuts!!
`
<div id="more"></div>
このように、引用符をエンコードせずにhtmlを含めたり、DOMからの変数を含めたりすることができます。
これは強力なテンプレートエンジンであり、個別のjsファイルを使用し、イベントを使用してコンテンツを所定の場所にロードするか、すべてをチャンクに分割してオンデマンドで呼び出すことができます。
let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);
javascript
それまで趣味のプログラマーとしてそのバッジを大幅に粉砕しました。
Solutionを動作させるには、ここにあるcsi.min.jsファイルをインクルードする必要があります。
GitHubに示されている例のように、このライブラリを使用するには、ページヘッダーにファイルcsi.jsを含める必要があります。次に、コンテナーに含める値に設定した値を含むdata-include属性を追加する必要があります。素子。
コピーコードを非表示
<html>
<head>
<script src="csi.js"></script>
</head>
<body>
<div data-include="Test.html"></div>
</body>
</html>
... それが役に立てば幸い。
PHPはサーバーレベルのスクリプト言語です。多くのことを実行できますが、1つの一般的な使用法は、SSIと同じように、ページ内にHTMLドキュメントを含めることです。SSIと同様に、これはサーバーレベルのテクノロジです。WebサイトにPHP機能があるかどうかわからない場合は、ホスティングプロバイダーにお問い合わせください。
以下は、PHP対応のWebページにHTMLのスニペットを含めるために使用できる単純なPHPスクリプトです。
サイトの共通要素のHTMLを別のファイルに保存します。たとえば、ナビゲーションセクションは、navigation.htmlまたはnavigation.phpとして保存されます。次のPHPコードを使用して、各ページにそのHTMLを含めます。
<?php require($DOCUMENT_ROOT . "navigation.php"); ?>
ファイルを含めるすべてのページで同じコードを使用します。ハイライト表示されたファイル名をインクルードファイルの名前とパスに変更してください。
django / bootleのようなフレームワークを使用している場合、テンプレートエンジンが付属していることがよくあります。たとえば、ボトルを使用していて、デフォルトのテンプレートエンジンがSimpleTemplate Engineであるとします。そして以下は純粋なhtmlファイルです
$ cat footer.tpl
<hr> <footer> <p>© stackoverflow, inc 2015</p> </footer>
次のように、フッター.tplをメインファイルに含めることができます。
$ cat dashboard.tpl
%include footer
それ以外に、パラメーターをdashborard.tplに渡すこともできます。
https://stackoverflow.com/a/31837264/4360308の回答に基づいて、 次のようにNodejs(+ express + cheerio)でこの機能を実装しました。
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($);
...
}
}
追加-> divにコンテンツを含めます
replace-> divを置き換えます
同じ設計に従ってさらに多くの動作を簡単に追加できます