Is it possible to create separate blocks header / content / footer in different html files in order to connect them on one page afterwards? Sometimes you have to change some of the repeating blocks on several pages, which is not convenient. Probably there is some solution to this problem.

  • Solutions seem to be there, but they usually do this even on the side of the web server with the help of some kind of template engine - andreymal
  • Can. There is a solution. Template-makers are called - Duck Learns to Take Cover
  • @ Duck to side with the browser and without js (judging by its absence in the tags), with template engines still tight) - andreymal
  • @andreymal, in general yes, the terms "customer and no js" - some tough and artificial, how to do under such conditions, I do not know) - Duck Learns to Hide
  • one
    Without js and on the side of the browser - xslt, but believe me, js and template engine are better. If it is quite simple, then you can blow off the dust from httpd.apache.org/docs/current/mod/mod_include.html but this is on the server side - Sergey Mitrofanov

3 answers 3

To avoid duplication of html code, you need to use a template engine, and to speed up the writing of html code, the html-предпроцессор will help, you can find all this in Jade . Sources of inspiration for which was the good old Haml .

Jade syntax:

 doctype html html(lang="en") head title= pageTitle script(type='text/javascript'). if (foo) { bar(1 + 5) } body h1 Jade - node template engine #container.col if youAreUsingJade p You are amazing else p Get on it! p. Jade is a terse and simple templating language with a strong focus on performance and powerful features.

HTML syntax:

 <!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> if (foo) { bar(1 + 5) } </script> </head> <body> <h1>Jade - node template engine</h1> <div id="container" class="col"> <p>You are amazing</p> <p> Jade is a terse and simple templating language with a strong focus on performance and powerful features. </p> </div> </body> </html>

Connection example ( include ) in Jade :

 include footer.jade include data/copyright.html

Why Jade ?:

  • works on the client side

  • excellent readability

  • flexible indentation system

  • block opening

  • impurities

  • static inclusions

  • attribute interpolation

  • for security reasons, by default everything is escaped

  • contextual error messages both at compile time and run time

  • utility to compile jade in html from the command line

  • HTML5 mode (use doctype !!! 5)

  • memory caching (optional)

  • combining dynamic and static CSS classes

  • manipulating the parsing tree via filters

  • Express JS support out of the box

  • a transparent mechanism for iterating over objects, arrays, and even innumerable types through each

  • block comments

  • AST filters

  • filters

  • screencasts

ps. For all this you need to know Node.js , if you are not familiar with it, this video will solve all the problems. The further, the more.

    This is done using gulp-rigger.

    Installation:

     npm i –g gulp npm i --save-dev gulp npm i --save-dev gulp-rigger

    gulpfile.js :

     'use strict'; // Проверка строк кода // Плагины var gulp = require('gulp'), rigger = require('gulp-rigger'); // Работа с HTML gulp.task('html', function(){ gulp.src('app/*.html') .pipe(rigger()) .pipe(gulp.dest('dist/')); }); // Наблюдение gulp.task('watch', function () { gulp.watch(path.watch.html, ['html']); }); // Задачи по-умолчанию gulp.task('default', [ 'html' ]);

    index.html :

     <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Test-pj</title> .... </head> <body> //= template/header.html <!-- Подключение header с помощью gulp-rigger --> <main> <h1>hello, world</h1> </main> //= template/footer.html <!-- Подключение footer с помощью gulp-rigger --> </body> </html>

    Structure:

     www |__ app |__ template |__ header.html |__ footer.html |__ index.html |__ dist |__ index.html

    My build

    • Why not just use an insert like include where you specify different blocks of sites? - GuitarFan
    • 2
      @GuitarFan, because read the html markup. "Just include" in html is not provided. - HamSter
    • one
      Probably learning templates will take longer than just creating a php script and loading parts of the code with the <? Php include_once 'code1.php'?> Method - GuitarFan
    • one
      the question was on html - HamSter
    • one
      Yeah, that was just great. Unfortunately, I can not put a second plus. :) - Nick Volynkin ♦

    The simplest template engine supported by many popular http-servers without any additional programs is Server Side Includes .

    Sample index.shtml file:

     <!--# include file="header.html" --> <!--# include file="main-content.html" --> <!--# include file="footer.html" -->

    As a result, the client is given the concatenation of three files.