HTML code reuse practices and html code reuse
Preface
We can see from the design diagram that some pages we do are the same. For example, the header, bottom, and sidebar. If you are creating static pages, you can copy and paste the repeated parts to a new page, if the number of pages goes up and the public part in the middle shows the place to be repaired. However, this public IP is used on the top 10 pages.html
Code. Isn't it difficult to modify it?
For back-end students, they can use templates for splitting. This can improvehtml
Code reusability and maintainability. But for those who just make the design drawing into static pages,html
No image template providedinclude
This method. But I don't want to use backend templates. the following tools may help you.
Gulp-file-include
The first one I want to introduce isgulp
Providedinclude
The method allows us to separate the public part like the backend template. And providesinclude
There are many configuration items in the method. For details, see gulp-file-include.
Below we write a smalldemo
To quickly understand, we need to installgulp
Andgulp-file-include
.
npm install -g gulpmkdir gulp-file-include && cd gulp-file-includenpm install gulp --save-devnpm install gulp-file-include
After installation, you can simply organize the directory of the file:
|-Node_modules |-src // html storage folder in the production environment |-include // html storage folder in the public part | -*. html |-dist // The edited html file gulpfile. js
Ingulpfile.js
, Configuredgulp-file-include
:
var gulp = require('gulp');var fileinclude = require('gulp-file-include');gulp.task('fileinclude', function() { gulp.src('src/**.html') .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('dist'));});
Create twohtml
Files, respectively, header and bottom:
Header.html
<H1> This is the header content
Footer.html
<H1> This is footer's content
Finally, createhtml
, To useheader
Andfooter
Toinclude
Come in.
Layout.html
<! DOCTYPE html>
Return to the command line tool and executegulp fileinclude
:
After the compilation is completedist
There islayout.html
.
Now, after a small instance above is clear. You may be able to provide productivity in your future work, so that you can write your ownhtml
Code is more maintainability and reusable.
Front-end Template As mentioned abovegulp-file-include
Simple and easy to use. It is a good tool for those who do not want to use templates. However, if you are familiar with front-end templates, you can also use them.html
Code maintainability and reusability. Then I will use a commonly usedejs
This template tells us how to separate the public parts.html
File.
Copy the entire folder in the previous example to a new place and change the nameejs
. Nextnode_modules
Folder to delete,dist
Folderhtml
All files are deleted.
Usedejs
Template, you needsrc
Insidehtml
All file suffix names are modified.ejs
. Setejs
Compile the filehtml
The tool is still usedgulp
. You only need to installgulp-ejs
You can.
npm install gulp --save-devnpm install gulp-ejs --save-dev
The next step is to modifygulpflie.js
File:
var gulp = require('gulp');var ejs = require('gulp-ejs');gulp.task('ejs', function() { gulp.src('src/**.ejs') .pipe(ejs()) .pipe(gulp.dest('dist'));});
Then modifylayout.ejs
File:
<! DOCTYPE html>
Finally, run it in the command line tool.gulp ejs
Indist
Directory to see the compiledlayout.html
File. This is all done.
In fact, templates have many powerful methods, and the above example mainly demonstratesinclude
This method may be a little practical. If you are interested, you can learn more about the template methods.