Hướng dẫn tag include html - thẻ bao gồm html

Published Jun 21st, 2019 4:18 a.m. 0 min read 0 min read

Điều cực kỳ đáng ngạc nhiên với tôi là HTML chưa bao giờ có cách nào để include các tệp HTML khác. Một ví dụ kinh điển: include phần header & footer vào trong trang.

...

   

   Your content here

   

...

Nhân tiện, đoạn code trên chỉ là giả tưởng. Tôi ước một ngày nó trở thành hiện thực. Vậy thì để giải quyết bài toán include HTML thì sẽ có các cách sau:

Sử dụng PHP

...

   

   Your content here

   

...

Sử dụng Gulp

...


   @@include('./header.html')

   Content

   @@include('./footer.html')

...

Gulp có rất nhiều processors có thể xử lý việc này. Một trong số đó là gulp-file-include.

// Javascript
var fileinclude = require('gulp-file-include'),
  gulp = require('gulp');
 
gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

Sử dụng Grunt

Plugin grunt-bake sẽ giúp bạn xử lý việc include HTML

Javascript

grunt.initConfig({
    bake: {
        your_target: {
            files: {
                "dist/index.html": "app/index.html",
            }
        }
    }
});

HTML

...

   

   Content

   

...

Sử dụng Pug

https://pugjs.org/

...
body
   include ./header.html"

   p Content

   include ./footer.html"

...

All Rights Reserved