CODEWITHSUNDEEP
htmlinclude-path
user8758206
user8758206

Reputation: 2191

Updating the header on every page from one file

Dreamweaver library elements are buggy and cause so many updating problems and I don't want to use them anymore. How does everyone else update, for example, the header section of every html page simultaneously without having to manually edit each page?

Upvotes: 0

Views: 89

Answers (1)

WilliamNHarvey
WilliamNHarvey

Reputation: 2485

Here's 3 ways that aren't javascript's include function:

You could have php on your stack, and include files with php:

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

This way used to be standard a long time ago, but no new site should be doing this anymore.

You could use a site generator, like Jekyll. Jekyll parses liquid statements on generation:

{% include header.html %}

This staticcms type of site generation is modern

You could use a javascript framework, like Angular. With angular, your pages get placed inside of a container div, and then you can put anything that shows up on every page (header, nav, footer) outside of the container:

<!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

Personally, I use angular. At work, our sites are react apps built in Jekyll. I assume that Facebook uses php, or a php framework like CodeIgniter

Upvotes: 1

Related Questions