ホームページ > 記事 > ウェブフロントエンド > 静的ページにインクルードを実装し、一般的なコードを導入する方法の例
静的ページにインクルードを実装し、一般的なコードを導入する方法の例
- 巴扎黑オリジナル
- 2017-09-26 09:43:131350ブラウズ
次のエディターは、静的ページにパブリック コードを導入するインクルードの実装例を示します。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして見てみましょう
長い間、私たちのフロントエンドは 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('header.php'); ?> <p>页面主体部分</p> <?php include('footer.php'); ?> </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('gulp');
var fileinclude = require('gulp-file-include');
gulp.task('fileinclude', function () {
// 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
gulp.src(['page/**/*.html', '!page/include/**.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist'));
});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('include/header.html') <p>页面主体部分</p> @@include('include/footer.html') </body> </html>
4 を実行し、ターミナルに次のコードを入力して実行結果を確認します
gulp fileincludegulp-file-include を使用すると、index.html ファイルを含む追加の dist フォルダーがあることがわかります。最終的にコンパイルされたindex.html ファイルが生成されます。
おそらく、既に推論を行うことができます。gulpfile.js では、最終的に生成されるファイルの場所を手動で設定できます
gulp.dest('dist')
5. 自動コンパイル
問題は解決されましたが、ソース HTML を記述した後に毎回ターミナルに移動して手動でコンパイル操作を実行するのは非常に面倒です。ファイルを自動的にコンパイルできますか?答えは「はい」でなければなりません。 gulp にはファイルが変更されたかどうかを監視するための watch メソッドがあり、次のように gulpfile.js ファイルを少し変更して監視コードを追加するだけです。 、ターミナルにログインするだけです。ソース HTML を保存するたびに、gulp が自動的にコンパイルします。
これまでのところ、静的ページにパブリック コードを導入するための include の実装方法の問題は正常に解決されました。最後に関連情報を添付します。
以上が静的ページにインクルードを実装し、一般的なコードを導入する方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。