ホームページ > 記事 > ウェブフロントエンド > include パブリック コード実装メソッドを導入します
include パブリック コード実装メソッドを導入します
- 小云云オリジナル
- 2018-02-02 13:08:212942ブラウズ
弊社のフロントエンドでは長い間、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>
最近まで、プロジェクトでは Web アプリを作成する必要があり、HBuilder を使用して静的ページを APP にパッケージ化しており、問題が発生していました。
小規模なプロジェクトの場合は、手動でコピーして貼り付けるだけで済みます。ただし、ページ数が多い場合、コピーして貼り付けるソリューションは明らかに信頼性が低く、メンテナンスのコストが高くなります。
多くの情報を確認した後、最終的に問題を解決するために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 の実装方法の問題は正常に解決されました。最後に関連情報を添付します。
関連する推奨事項:
HTMLファイルでインクルードファイルのコンテンツを使用する方法
jQuery.load()とJspのインクルードの詳細な説明
以上がinclude パブリック コード実装メソッドを導入しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。