从一个文件更新每一页的页眉
Updating the header on every page from one file
Dreamweaver 库元素有问题,导致很多更新问题,我不想再使用它们了。例如,其他人如何同时更新每个 html 页面的页眉部分而无需手动编辑每个页面?
这里有 3 种不属于 javascript 的包含函数的方式:
您的堆栈中可以有 php,并包含带有 php 的文件:
<?php
include('header.html');
这种方式在很久以前曾经是标准方式,但现在应该没有新网站会这样做了。
您可以使用站点生成器,例如 Jekyll。 Jekyll 在生成时解析 liquid 语句:
{% include header.html %}
这种 staticcms 类型的网站生成是现代的
您可以使用 javascript 框架,例如 Angular。使用 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
我个人使用 angular。在工作中,我们的网站是用 Jekyll 构建的 React 应用程序。我假设 Facebook 使用 php,或者像 CodeIgniter
这样的 php 框架
Dreamweaver 库元素有问题,导致很多更新问题,我不想再使用它们了。例如,其他人如何同时更新每个 html 页面的页眉部分而无需手动编辑每个页面?
这里有 3 种不属于 javascript 的包含函数的方式:
您的堆栈中可以有 php,并包含带有 php 的文件:
<?php
include('header.html');
这种方式在很久以前曾经是标准方式,但现在应该没有新网站会这样做了。
您可以使用站点生成器,例如 Jekyll。 Jekyll 在生成时解析 liquid 语句:
{% include header.html %}
这种 staticcms 类型的网站生成是现代的
您可以使用 javascript 框架,例如 Angular。使用 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
我个人使用 angular。在工作中,我们的网站是用 Jekyll 构建的 React 应用程序。我假设 Facebook 使用 php,或者像 CodeIgniter
这样的 php 框架