Home > Article > Web Front-end > Examples of how to implement include on static pages and introduce common code

Examples of how to implement include on static pages and introduce common code

巴扎黑Original: 2017-09-26 09:43:131296browse

The following editor will bring you an example of implementing include to introduce public code in a static page. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

Our company’s front-end has always used PHP’s include function to introduce common codes such as header and footer, as follows:

<!-- index.php -->
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <?php include(&#39;header.php&#39;); ?>
  <p>页面主体部分</p>
  <?php include(&#39;footer.php&#39;); ?>
</body>
</html>

<!-- header.php -->
<header>这是头部</header>

<!-- footer.php -->
<footer>这是底部</footer>

Until recently, a project needed to make a webapp, and the static page was packaged into an APP through HBuilder. This brings me to a problem.

If it is a small project, just copy and paste it manually several times. However, if there are many pages, the copy-paste solution is obviously unreliable and the maintenance cost is high.

After checking a lot of information, I finally decided to use gulp to solve the problem. The specific operations are as follows:

1. Install gulp and gulp-file-include

First create a new folder, locate the folder location in the terminal, and then initialize npm

npm init

Then install gulp

npm install gulp --save-dev

Then install gulp-file-include

npm install gulp-file-include --save-dev

2. Create and configure gulpfile.js

Then we manually create a new js file named gulpfile and write the following code in it:

var gulp = require(&#39;gulp&#39;);
var fileinclude = require(&#39;gulp-file-include&#39;);
 
gulp.task(&#39;fileinclude&#39;, function () {
  // 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
  gulp.src([&#39;page/**/*.html&#39;, &#39;!page/include/**.html&#39;])
    .pipe(fileinclude({
      prefix: &#39;@@&#39;,
      basepath: &#39;@file&#39;
    }))
    .pipe(gulp.dest(&#39;dist&#39;));
});

3. Create the project directory structure and add the test code

The overall directory structure of the project should be like this

app

　page

　　include

　　　header.html

　　　footer.html

　　index.html

　gulpfile.js

　package.json

Then we add the test code. There is not much to say about header.html and footer.html. The main thing is that index.html should pay special attention to the way it is introduced. The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  @@include(&#39;include/header.html&#39;)
  <p>页面主体部分</p>
  @@include(&#39;include/footer.html&#39;)
</body>
</html>

4. Run

Type the following code in the terminal to see the execution effect

gulp fileinclude

will Found that there is an additional dist folder with an index.html file in it. gulp-file-include has helped us generate the final compiled index.html file.

Maybe you can already draw inferences. In gulpfile.js, we can manually set the location of the final generated file, which is this sentence

gulp.dest(&#39;dist&#39;)

5. Automatic compilation

The problem of introducing public code into static pages has been solved, but every time after writing the source html, you have to go to the terminal to manually perform the compilation operation It's still very troublesome. Can the file be automatically compiled? The answer must be yes.

gulp has a watch method, which is to monitor whether the file has changed. We only need to slightly modify the gulpfile.js file and add a piece of monitoring code, as follows:

var gulp = require(&#39;gulp&#39;);
var fileinclude = require(&#39;gulp-file-include&#39;);
 
gulp.task(&#39;fileinclude&#39;, function () {
  // 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
  gulp.src([&#39;page/**/*.html&#39;, &#39;!page/include/**.html&#39;])
    .pipe(fileinclude({
      prefix: &#39;@@&#39;,
      basepath: &#39;@file&#39;
    }))
    .pipe(gulp.dest(&#39;dist&#39;));
});
 
gulp.task('watch', function () {
  gulp.watch('page/**/*.html', ['fileinclude']);
});

After writing, we only need to execute it in the terminal

gulp watch

Every time we save the source html, gulp will automatically compile it for us .

So far, the problem of how to implement include in a static page and introduce public code has been successfully solved. Finally, relevant information is attached.

The above is the detailed content of Examples of how to implement include on static pages and introduce common code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js code that limits the input value to floating point for the input boxNext article：js code that limits the input value to floating point for the input box

See more

Examples of how to implement include on static pages and introduce common code

Related articles