从一个文件更新每个页面上的标题

时间:2017-10-31 15:07:33

标签: html include-path

Dreamweaver库元素有问题,导致很多更新问题,我不想再使用它们了。其他人如何同时更新每个html页面的标题部分,而无需手动编辑每个页面?

1 个答案:

答案 0 :(得分:1)

这里有3种不是javascript包含功能的方法:

您可以在堆栈上安装php,并使用php包含文件:

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

这种方式很久以前就是标准的,但是没有新的网站应该这样做了。

您可以使用像Jekyll这样的网站生成器。 Jekyll解析关于代的液体陈述:

{% include header.html %}

这种staticcms类型的网站生成是现代的

你可以使用像Angular这样的javascript框架。使用angular,您的页面将被放置在容器div中,然后您可以将任何显示在容器外的每个页面(页眉,导航,页脚)上的内容:

<!DOCTYPE html>
<html>
<head>
  <!-- SCROLLS -->
  <!-- load bootstrap and fontawesome via CDN -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

  <!-- SPELLS -->
  <!-- load angular and angular route via CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  <script src="script.js"></script>
</head>
<body>

    <!-- HEADER AND NAVBAR -->
    <header>
        <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Angular Routing Example</a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
            </ul>
        </div>
        </nav>
    </header>

    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">

        <!-- angular templating -->
        <!-- this is where content will be injected -->

    </div>

</body>
</html>

https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

就个人而言,我使用棱角分明。在工作中,我们的网站是在Jekyll内置的反应应用程序。我假设Facebook使用php或像CodeIgniter这样的php框架