All geek questions in one place

How can I modulate a static HTML file?

I am a leading developer. When I write code html, I repeat my copy and paste a lot (header, footer, etc.).

How can I write modularize my files html? How separate header.htmland footer.html, and after that the challenge is both in index.html... the same as erbin Ruby on rails? (I don't like jadelang)

+4
source share
4 answers

In PHP, we will do something like this:

index.php

<?php
    include 'inc/head.inc.php'; //DOCTYPE and <head> stuff
    include 'inc/header.inc.php'; //NAV or other top-of-page boilerplate
?>

<div id="uniqueDIV">
    //Your unique page-specific divs can go here
</div>

<?php include 'inc/footer.inc.php'; ?>

So, in your file head.inc.phpyou have only a regular DOCTYPE file and <head>your file.

Ruby :

load "inc/head_inc.rb"  -- OR --
require_relative "inc/head_inc.rb"

https://practicingruby.com/articles/ways-to-load-code

- js/jQuery . PHP, . , PHP, js/jQ , ( ) .

:

HTML

<div id="navbarDIV"></div>

JS/JQuery:

<script type="text/javascript">
    $(function(){
        $('#navbarDIV').load( 'inc/navbar.inc.html' );
    });
</script>

, jQuery. , <head>:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

jsFiddle demo

: script <head> , html. . <head> ( ) .

: ".inc". , . head.html head.php ..

+4

- Swig, ( ).

Swig Mustache Handlebars, HTML, HTML, ( Jade).

HTML , , . " " " " .

:

{% include "./header.html" %}

<div id="body">Hello world</div>

{% include "./footer.html" %}

gulp, html. . -

gulp-swig .

+2

EJS, . .

0

There is HTMLno standard way to reuse parts for files HTML. You must use a template system.

But - this is a template system and can handle it. See This Answer " Including one erb file in another . erb

0
source

Source: https://habr.com/ru/post/1622613/

More articles:


All Articles