[英]How can I use templates to generate static web pages?
我想將一個HTML文件添加到另一個。
例如：我有header.html和footer.html現在我正在嘗試創建aboutus.html ，我想添加這兩個HTML文件，除了JavaScript之外，這些文件中沒有動態代碼。
如何在不使用除JavaScript和CSS之外的任何腳本語言的情況下執行此操作？
此特定功能存在服務器端包含（SSI） 。 但是，您需要為此類包含配置服務器。 Apache支持它。 不確定其他Web服務器。
或服務器端包含（SSI） ，所有嵌入都在服務器端完成...
查看ppk的網站（quirksmode.org），然后轉到javascript檔案，（http://quirksmode.org/js/contents.html）。 他使用了一個名為sendRequest的ajax函數（在http://quirksmode.org/quirksmode.js上找到）。 由於IE9 +在標准方面表現不錯，我將其簡化為：
function sendRequest(url,callback,postData) {
var req = new XMLHttpRequest();
if (!req) return;
var method = (postData) ? "POST" : "GET";
req.open(method,url,true);
req.setRequestHeader('User-Agent','XMLHTTP/1.0');
if (postData)
req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
req.onreadystatechange = function () {
if (req.readyState != 4) return;
if (req.status != 200 && req.status != 304) {
// alert('HTTP error ' + req.status);
return;
}
callback(req);
}
if (req.readyState == 4) return;
req.send(postData);
}
然后通過包裝setFooter，setHeader函數和其周圍的任何其他內容函數來使用sendRequest函數。
在沒有javascript的情況下在客戶端執行此操作的唯一方法是使用框架或iframe。 如果你想使用javascript，你可以使用AJAX。 大多數javascript框架提供相應的便捷方法（例如jQuery的load函數）。
顯然有很多服務器端解決方案，包括apache的流行SSI擴展（參見其他帖子）。
我不完全確定你想要的是什么，但完全客戶端的方法是用<object>標簽嵌入它們。
<html>
<head>
<title>About Us</title>
</head>
<body>
<object data="header.html"><!--Something to display if the object tag fails to work. Possibly an iFrame--></object>
<!--Content goes here...-->
<object data="footer.html"></object>
</body>
</html>
如果header.html或footer.html有javascript訪問父文檔，我認為這不會起作用。 但是，以其他方式使用它可能是可能的。
對於沒有動態內容但具有共同元素的網站，我使用Perl的Template Toolkit在我的開發機器上生成最終頁面，並將生成的靜態HTML文件上傳到服務器。 工作得很漂亮。
例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>[% title %]</title>
<link rel="stylesheet" href="/site.css" type="text/css">
<meta name="description" content="[% description %]">
<meta name="keywords" content="[% keywords.join(',') %]">
</head>
<body>
<div id="banner">
<p>Banner</p>
</div>
<address>
Last update:
[%- USE date -%]
[%- date.format(date.now, '%Y-%m-%d %H:%M:%S') -%]
</address>
</body>
</html>
[%- INCLUDE header.tt.html
title = 'About Us'
description = 'What we do, how we do it etc.'
keywords = 'rock, paper, scissors'
-%]
<h1>About us</h1>
<p>We are nice people.</p>
為什么不使用PHP或任何其他腳本腳本語言？
使用javascript執行此操作並非所有用戶都允許觀看您的網頁。
雖然這可以通過JS以多種方式完成（AJAX，iframe插入），但在服務器端直接或（更好）更好地執行此操作將是一個非常糟糕的主意。
依賴於JS的頁面的構圖將不會在很大一部分用戶的瀏覽器上完全呈現，同樣重要的是谷歌等人如果他們喜歡它就不能正確解釋。
你可以做到，但請，請，請不要。
顯然header.html和footer.html不是html文件 - 有完整的標題等。如果你只有html片段並且你想要包含它們以便你可以創建不同的頁面 - 比如aboutus.html，terms.html，你有幾個選項：
我假設您這樣做是為了避免重復頁眉和頁腳內容。
另一種方法是使用ajax來包含遠程html文件。
框架集是在沒有任何腳本或服務器端影響的情況下執行此操作的方法。
<frameset rows="100,*,100">
<frame name="header" src="header.html" />
<frame name="content" src="content.html" />
<frame name="footer" src="footer.html" />
</frameset>
HTML5框架集： http ： //www.w3schools.com/tags/html5_frameset.asp
這是一個非常過時的解決方案，大多數Web主機將支持服務器端包含或您可以使用PHP來包含您的文件
http://php.net/manual/en/function.include.php
干杯
我試圖了解如何使用一個 PHP “主”文件從多個文本文件生成單獨的 web 頁面
[英]I'm trying to understand how I can use one PHP “master” file to generate individual web pages from multiple text files
將 ejs 或 header 和頁腳模板用於 static 托管與 github 頁面？
[英]Use ejs or header and footer templates for static hosting with github pages?
我可以“預生成”我的“動態”網站的所有可能的靜態html頁面嗎？
[英]Can I “pre-generate” all possible static-html pages of my “dynamic” website?
我可以在用html 4構建的網頁中使用itemdata（microdata）嗎？
[英]can i use itemdata(microdata) in my web pages built with html 4
如何使用asp.net生成並以字符串形式返回HTML文檔（在Web上下文之外）
[英]How can I use asp.net to generate and return an HTML document as a string (outside of a web context)
如何在 php 中創建站點並讓它生成 static 版本？
[英]How can I create a site in php and have it generate a static version?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.