Usually we do some of the pages that we can see from the design diagram where there are some similarities. For example: Head, bottom, sidebar, etc. If the front and back end of the separation, the production of static pages of the classmate, for these duplicate parts can only be copied and pasted to the new page, if the number of pages went up and the public part of the halfway appeared to be repaired. But there are 10 of pages that use this common html code. Isn't that a lot of trouble to change?
Some other methods such as ifram,import are not elegant, and the source code is not displayed, it is not conducive to SEO
Head:
Tail:
For the back-end students, they can be split through the template. Doing so can improve html the reusability and maintainability of your code. But for those of you who make static pages for a design diagram, they html don't offer this method like a template include . But do not want to use the back end of the template, then the next few of the tools I introduced may be able to help you.
The first thing I'm going to introduce is a gulp plugin that provides a include way for us to separate the public parts like the backend template. And the include method provided has many configuration items, detailed can go to see gulp-file-include.
Below we write a small demo to get a quick look at what we need to install first gulp as well gulp-file-include .
NPM install-g gulpmkdir gulp-file-include && cd gulp-file-includenpm install Gulp--save-devnpm Install Gulp -file-include--save-dev
After installation, simply organize the file directory:
|-node_modules// HTML Storage folder for the production environment // public part |-* // edited HTML file gulpfile.js
In the new gulpfile.js , configured well gulp-file-include :
var gulp = require (' Gulp '); var fileinclude = require (' gulp-file-include '); Gulp.task (function() { // to fit all HTML under All folders in the page, excluding HTML gulp.src ([' page/**/*.html ', '!page/') under the Include folder under Page Include/**.html ']) . Pipe (Fileinclude ({ ' @@ ', ' @file ' }). Pipe (Gulp.dest (' dist ');});Then create a new two html files, namely the head and the bottom:
Header.html
< H1 > This is the header content </H1>
Footer.html
< H1 > This is the content of footer </H1>
Finally in the new one html , to use header and give in footer include .
Layout.html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body>@ @include (' include/header.html ')<P>This is the content of layout</P>@ @include (' include/footer.html ')</Body></HTML>
Finally, go back to the command line tool and execute gulp fileinclude :
Once the compilation is complete, dist there is a file in the directory layout.html and this is the final compilation.
Well, one of the small examples above also understands. May be able to greatly provide productivity in later work, making the code you write html more maintainable and reusable.
Back-and-forth separation, gulp to achieve the reuse of the front and tail public pages
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
