如何使用模板生成静态网页？
[英]How can I use templates to generate static web pages?
问题描述
I want to add one HTML file into another. 
我想将一个HTML文件添加到另一个。
For example: I have header.html and footer.html Now I am trying to create aboutus.html where I want to add these two HTML files there is no dynamic code in these file except JavaScript. 例如：我有header.html和footer.html现在我正在尝试创建aboutus.html ，我想添加这两个HTML文件，除了JavaScript之外，这些文件中没有动态代码。
How can I do this without using any scripting language except JavaScript and CSS? 如何在不使用除JavaScript和CSS之外的任何脚本语言的情况下执行此操作？
11 个解决方案
解决方案1
6 2009-06-12 16:09:47
Server Side Includes (SSI) exist for this particular functionality. 此特定功能存在服务器端包含（SSI） 。 However, you need to have the server configured for such includes. 但是，您需要为此类包含配置服务器。 Apache supports it. Apache支持它。 Not sure about other web servers. 不确定其他Web服务器。
解决方案2
4 2009-06-12 16:09:39
或服务器端包含（SSI） ，所有嵌入都在服务器端完成...
解决方案3
2 2012-10-15 03:02:48
Check out ppk's website (quirksmode.org), and go to the javascript archives, (http://quirksmode.org/js/contents.html). 查看ppk的网站（quirksmode.org），然后转到javascript档案，（http://quirksmode.org/js/contents.html）。 He uses an ajax function he wrote called sendRequest (found at http://quirksmode.org/quirksmode.js ). 他使用了一个名为sendRequest的ajax函数（在http://quirksmode.org/quirksmode.js上找到）。 Since IE9+ plays nice with standards, I've simplified it some: 由于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);
}
Then use the sendRequest function by wrapping the setFooter, setHeader functions and any other content functions around it. 然后通过包装setFooter，setHeader函数和其周围的任何其他内容函数来使用sendRequest函数。
解决方案4
2 2009-06-12 16:08:10
The only way to do this on the client side without javascript is to use frames or iframes. 在没有javascript的情况下在客户端执行此操作的唯一方法是使用框架或iframe。 If you want to use javascript, you can use AJAX. 如果你想使用javascript，你可以使用AJAX。 Most javascript frameworks provide corresponding convenience methods (eg jQuery's load function). 大多数javascript框架提供相应的便捷方法（例如jQuery的load函数）。
Obviously there are many server side solutions, including the popular SSI extension for apache (see other posts). 显然有很多服务器端解决方案，包括apache的流行SSI扩展（参见其他帖子）。
解决方案5
2 2009-06-12 16:19:21
I'm not entirely sure what it is you want but an entirely client side method of doing it would be to embed them with the <object> tag. 我不完全确定你想要的是什么，但完全客户端的方法是用<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>
I do not think that this would work if either header.html or footer.html have javascript that accesses the parent document. 如果header.html或footer.html有javascript访问父文档，我认为这不会起作用。 Getting it to work the other way might be possible though. 但是，以其他方式使用它可能是可能的。
解决方案6
2 已采纳 2009-06-12 17:55:37
In the case of web sites with no dynamic content but have common elements, I generate the final pages on my development machine using Perl's Template Toolkit and upload the resulting static HTML files to the server. 对于没有动态内容但具有共同元素的网站，我使用Perl的Template Toolkit在我的开发机器上生成最终页面，并将生成的静态HTML文件上传到服务器。 Works beautifully. 工作得很漂亮。
For example: 例如：
header.html 了header.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>
footer.html footer.html
<address>
Last update:
[%- USE date -%]
[%- date.format(date.now, '%Y-%m-%d %H:%M:%S') -%]
</address>
</body>
</html>
aboutus.html aboutus.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>
You can now use tpage or ttree to build your pages. 您现在可以使用tpage或ttree来构建页面。
解决方案7
1 2009-06-12 16:19:12
why not use php or any other side scripting language? 为什么不使用PHP或任何其他脚本脚本语言？
doing this with javascript will not all users allow to watch your page. 使用javascript执行此操作并非所有用户都允许观看您的网页。
解决方案8
1 2009-06-12 16:24:51
Whilst this can be done with JS in a number of ways (AJAX, iframe insertion) it would be a very bad idea not to do this within the mark-up directly or (much) better on the server side. 虽然这可以通过JS以多种方式完成（AJAX，iframe插入），但在服务器端直接或（更好）更好地执行此操作将是一个非常糟糕的主意。
A page reliant on JS for it's composition will not be fully rendered on a significant proportion of user's browsers, and equally importantly will not be correctly interpreted by google et al, if they like it at all. 依赖于JS的页面的构图将不会在很大一部分用户的浏览器上完全呈现，同样重要的是谷歌等人如果他们喜欢它就不能正确解释。
You can do it, but please, please, don't. 你可以做到，但请，请，请不要。
解决方案9
0 2009-06-12 16:12:45
Obviously header.html and footer.html are not html files -- with full fledged headers etc. If you have just html snippets and you want to include them so you can create different pages - like aboutus.html, terms.html, you have a couple of options: 显然header.html和footer.html不是html文件 - 有完整的标题等。如果你只有html片段并且你想要包含它们以便你可以创建不同的页面 - 比如aboutus.html，terms.html，你有几个选项：
- Use a framework like Rails - which allows you to use layouts and partials. 使用像Rails这样的框架 - 允许您使用布局和部分。 [** heavy **] [**重**]
- Write a simple tool that will generate all the files by concat-ing the appropriate files. 编写一个简单的工具，通过连接相应的文件生成所有文件。
I assume you are doing this to avoid duplicating header and footer content. 我假设您这样做是为了避免重复页眉和页脚内容。
解决方案10
0 2009-06-12 16:15:14
另一种方法是使用ajax来包含远程html文件。
解决方案11
0 2009-06-12 20:32:37
Framesets would be the way to do this without any script or serverside influences. 框架集是在没有任何脚本或服务器端影响的情况下执行此操作的方法。
<frameset rows="100,*,100">
<frame name="header" src="header.html" />
<frame name="content" src="content.html" />
<frame name="footer" src="footer.html" />
</frameset>
HTML5 framesets: http://www.w3schools.com/tags/html5_frameset.asp HTML5框架集： http ： //www.w3schools.com/tags/html5_frameset.asp
This is a very dated solution, most web hosts will support server side includes or you could use php to include your files 这是一个非常过时的解决方案，大多数Web主机将支持服务器端包含或您可以使用PHP来包含您的文件
http://php.net/manual/en/function.include.php http://php.net/manual/en/function.include.php
Cheers 干杯
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.