我正在尝试手动更新所有静态HTML文件

时间:2016-10-10 13:31:16

标签: javascript php html static shared-hosting

我现在有一个关于静态 HTML 的项目,有两种语言,我必须自己管理所有内容。 因此,如果页眉/页脚中出现新内容,我必须更新20个HTML文件。

此项目也托管在普通的共享主机上。 如果我必须改变某些东西,我怎么能减少痛苦呢? 现在我只是使用sublime批量查找/更改文件夹。

  

P.S我不能使用任何CMS。必须是静态的。

4 个答案:

答案 0 :(得分:2)

因为它必须是静态的,所以你可能不能使用PHP。

适用于现代浏览器的替代方法是使用Javascript从其他文件中包含页眉和页脚。

您有几个选项,一个是using jQuery load()。包含resources文件夹中包含的两个文件的示例:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo load for header and footer</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <div id="header"><!-- HEADER COMES HERE --></div>

    <!-- Main content comes here -->

    <div id="footer"><!-- FOOTER COMES HERE --></div>

    <script>
    $(document).ready(function() {
        $( "#header" ).load( "/resources/header.html" );
        $( "#footer" ).load( "/resources/footer.html" );
    }
    </script>

</body>
</html>

请考虑后备,方法是在#header和#footer div中添加一个内容,如果未启用javascript,则会显示该内容。如果load()不起作用,还要考虑回退(看一下这个文档,有一个例子)。

答案 1 :(得分:1)

建议一:

  

P.S我不能使用任何CMS。必须是静态的。

您可以使用 Jquery 根据您的需求加载相应位置的文件。

.load( url [, data ] [, complete ] )

描述:从服务器加载数据并将返回的HTML放入匹配的元素中。

注意:事件处理套件还有一个名为.load()的方法。 jQuery根据传递给它的参数集确定要触发的方法。

参考:http://api.jquery.com/load/

$(document).ready(function() {
    $('#some-menu').load('some-local-path/menu.html');
});

如果您可以获得DIV的ID,那么它会将数据加载到该位置,您可以动态更改它。

<html>
<body>
<div id="some_menu">
<!-- Loads the Menu Part Over Here -->
</div>
<script>
$(document).ready(function() {
        $('#some-menu').load('some-local-path/menu.html');
        // Like wise you can load up all the data that you need over here and place the necessary div over to the HTML.
});
</script>
</body>
</html>
  

如果不是静态,您可以按照我提到的使用PHP进行跟进。

备选参考:

最好使用PHP,因为它支持很棒的功能,你可以使用PHP创建自己的CMS。

更清晰的解释

  • 查找您网站上静态的项目,并且必须在所有页面中显示。
  • 将它们复制并放在各自的文件中,即header.php中的标题和footer.php中的页脚等等,然后你需要再单独做一件事。
  • 您需要包含您提供的所有文件,这就是技巧。

整页看起来像。

<html>
<head>Title of the Page</head>
<?php include 'scripts.php'; ?>
<body>
<?php include 'header_menu.php'; ?>
// Page content
<?php include 'sidebar.php'; ?>
//Page Contents    
<?php include 'footer.php'; ?>
</body>
</html>
  

就像这样,你可以为你的页眉,页脚和你需要的任何文件做到这一点,如果你单独更新单个文件,它将在所有文件中复制甚至是你的文件的音调。

基本包含示例

include()语句包含并评估指定的文件。

include命令只是获取指定文件中存在的所有文本,并将其复制到使用include命令的文件中。当您想在网站的多个页面上包含相同的PHP,HTML或文本片段时,Include非常有用。 include命令被PHP Web开发人员广泛使用。与PHP Echo一样,include不是函数,而是语言结构。

<强> vars.php

<?php
$color = 'green';
$fruit = 'apple';
?>

<强> test.php的

<?php
echo "A $color $fruit"; // A
include 'vars.php';
echo "A $color $fruit"; // A green apple
?>

答案 2 :(得分:0)

将标题的HTML内容放在PHP文件中,并将其包含在每个页面中,如下所示:

<?php include('header.php'); ?>

这样您只需要编辑一个文件(header.php)。

有关include()的更多详情,请访问:http://php.net/manual/en/function.include.php

答案 3 :(得分:0)

据我所知,如果您想在静态网络中管理许多HTML文件,我认为您需要一个HTML模板。

我建议使用&#34; http://handlebarsjs.com/&#34;你也可以在静态页面中使用它。

我希望它有所帮助。