编译html模板以完成网站

编译html模板以完成网站,html,Html,我习惯于使用ASP.NET和visual studio开发网站。我正试图开发一个类似的plain.html网站。我的意思是使用母版页等,以便代码重用,并可能将这些模板文件部署到一组.html文件中 比如说 head.html <script src="jquery.js" type="text/javascript"></script> <script src="jquery.ui.js" type="text/javascript"></script&

我习惯于使用ASP.NET和visual studio开发网站。我正试图开发一个类似的plain.html网站。我的意思是使用母版页等,以便代码重用,并可能将这些模板文件部署到一组.html文件中

比如说

head.html

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.js" type="text/javascript"></script> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">

header.html

<div data-role="header">
    <h1>Page Title</h1>
</div><!-- /header -->

页面标题
footer.html

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->

页脚
layout.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
        #include(head.html)
</script>
</head> 
<body> 

<div data-role="page">

    #include(header.html)

    #include_body()

    #include(footer.html)

</div><!-- /page -->
</body>
</html>

页面标题
#包括(head.html)
#包括(header.html)
#包括(正文)
#包括(footer.html)
index.html

<div data-role="content">   
    <p>Page content goes here.</p>      
</div><!-- /content -->

页面内容显示在此处。

并将所有这些合并到一个输出文件中

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>      
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

页面标题
页面标题
页面内容显示在此处。

页脚

有这样的事吗?我对ruby或其他任何东西都不熟悉…

您可以使用一点PHP来使用includes实现这一点

页眉、页脚等可以创建为新的.php文件,您可以将希望在该部分中显示的所有内容都放在其中

然后,在index.php文件中执行以下操作

<?php
    include ('header.php');
?>
<html>
    <head>
    </head>
    <body>
    </body>
<?php
    include ('footer.php');
?>


页眉和页脚PHP文件中的所有内容都将包含在内。

您可以使用一点PHP来使用includes实现这一点

页眉、页脚等可以创建为新的.php文件,您可以将希望在该部分中显示的所有内容都放在其中

然后,在index.php文件中执行以下操作

<?php
    include ('header.php');
?>
<html>
    <head>
    </head>
    <body>
    </body>
<?php
    include ('footer.php');
?>

页眉和页脚PHP文件中的所有内容都将包含在内。

服务器端包含(SSI)可能满足您的需要。在满足一些基本服务器要求后,您可以执行以下操作,例如:

<!--#include virtual="includes/my_file.html" -->

服务器端包含(SSI)可能满足您的需要。在满足一些基本服务器要求后,您可以执行以下操作,例如:

<!--#include virtual="includes/my_file.html" -->


如果您是一名初学者,又不想花钱,我建议您使用php查看wordpress,以获得低成本和广泛的文档。如果您熟悉ant并希望在部署之前编译站点,那么请查看htmlBoilerplate构建脚本。最后,如果你感觉很糟糕,并且有资源运行你自己的专用服务器,那就选择ruby。@mika好吧,我之所以要使用纯html,是因为只有在服务器端处理时才会合并文件。我只是想节省开发时间,而不是将文件合并到SSI中(服务器端包括)。您可以将HTML文件嵌入彼此内部。然后我建议您查看HtmlBoilerplate ant构建脚本,这并不完全是您想要的,但它应该可以帮助您实现这一点。但是如果你是一个初学者并且不想花钱的话,我建议你在wordpress和php中寻找低成本和广泛的文档。如果您熟悉ant并希望在部署之前编译站点,那么请查看htmlBoilerplate构建脚本。最后,如果你感觉很糟糕,并且有资源运行你自己的专用服务器,那就选择ruby。@mika好吧,我之所以要使用纯html,是因为只有在服务器端处理时才会合并文件。我只是想节省开发时间,而不是将文件合并到SSI中(服务器端包括)。您可以将HTML文件嵌入彼此内部。然后我建议您查看HtmlBoilerplate ant构建脚本,这并不完全是您想要的,但它应该可以帮助您实现这一点。但可能有一些更具体的东西适合你的需要