静的ページにインクルードを実装し、一般的なコードを導入する方法の例-jsチュートリアル-php.cn

静的ページにインクルードを実装し、一般的なコードを導入する方法の例

巴扎黑

リリース： 2017-09-26 09:43:13

オリジナル

1396 人が閲覧しました

次のエディターは、静的ページにパブリックコードを導入するインクルードの実装例を示します。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして見てみましょう

長い間、私たちのフロントエンドは PHP の include 関数を使用して、次のようにヘッダーやフッターなどの一般的なコードを導入してきました:

<!-- 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>

ログイン後にコピー

最近まで、プロジェクトでは HBuilder を使用して静的ページを APP にパッケージ化する Web アプリを作成する必要があり、問題が発生しました。

小規模なプロジェクトの場合は、手動でコピーして貼り付けるだけで済みます。ただし、ページ数が多い場合、コピーして貼り付けるソリューションは明らかに信頼性が低く、メンテナンスのコストが高くなります。

多くの情報を確認した後、最終的に問題を解決するためにgulpを使用することにしました:

1. gulpとgulp-file-includeをインストールします

まず新しいフォルダーを作成します。端末フォルダーの場所にあるファイルを見つけて、npm 初期化を実行します

npm init

ログイン後にコピー

その後、gulp をインストールします

npm install gulp --save-dev

ログイン後にコピー

次に、gulp-file-include をインストールします

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

ログイン後にコピー

2 を作成して構成します。 gulpfile.js

次に、gulpfile という名前の新しい js ファイルを手動で作成し、その中に次のコードを書き込みます:

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. プロジェクトのディレクトリ構造を作成し、テストコード

を追加します。プロジェクトの全体的なディレクトリ構造は次のようになります

app

　page

　　include

　　　header.html

　　　footer.html

　　index.html

　gulpfile.js

　package.json

ログイン後にコピー

次に、テストコードを追加します。header.html と footer.html については特に言うことはありません。重要なことは、index.html に特別な注意を払う必要があるということです。導入方法に注意してください: コードは次のとおりです:

<!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 を実行し、ターミナルに次のコードを入力して実行結果を確認します

gulp fileinclude

ログイン後にコピー

gulp-file-include を使用すると、index.html ファイルを含む追加の dist フォルダーがあることがわかります。最終的にコンパイルされたindex.html ファイルが生成されます。

おそらく、既に推論を行うことができます。gulpfile.js では、最終的に生成されるファイルの場所を手動で設定できます

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

ログイン後にコピー

5. 自動コンパイル

問題は解決されましたが、ソース HTML を記述した後に毎回ターミナルに移動して手動でコンパイル操作を実行するのは非常に面倒です。ファイルを自動的にコンパイルできますか?答えは「はい」でなければなりません。 gulp にはファイルが変更されたかどうかを監視するための watch メソッドがあり、次のように gulpfile.js ファイルを少し変更して監視コードを追加するだけです。、ターミナルにログインするだけです。ソース HTML を保存するたびに、gulp が自動的にコンパイルします。

これまでのところ、静的ページにパブリックコードを導入するための include の実装方法の問題は正常に解決されました。最後に関連情報を添付します。

以上が静的ページにインクルードを実装し、一般的なコードを導入する方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。