shtml includeの使い方

shtml includeの使い方
これを応用することで、ウェブサイトの一部の公開領域を独立したページにすることができ、その後、この技術を使用して、その領域のコンテンツを必要とする他のページにそれらを埋め込むことができます。

機構:
SSI メカニズムは、静的生成ではなく動的インクルードです。Apache などの Web サーバーがユーザーのリクエストを受信し、それを解析して SSI インクルード命令を見つけると、インクルードされたページを自動的に取り出し、リクエストされたページに埋め込み、ページ全体としてユーザーに送信します。ユーザーはサーバーが何をしたかはわかりませんが、完全なページを受け取ったことだけはわかります。

利点:
SSI の動作メカニズムから、ユーザーがページを要求するたびにインクルードアクションが発生するため、インクルードされたページの内容が変更された場合、リアルタイムで反映されることがわかります。このため、静的ページの動的な埋め込みを実現するのは非常に簡単です。これを使用して、Web サイト全体の公開領域を実装したり、大量の繰り返し領域のコンテンツを独立した静的ページに公開したりして、サイト全体のヘッダーとフッター、サイト全体の最新ニュース、最もホットなランキングなど、必要な場所に SSI 指示でインクルードすることができます。この技術は、163、sina などのほとんどのポータル Web サイトで広く使用されています。

最もホットなコンテンツを実装する方法:
まず、SSI環境を構成します(他のSSI構成チュートリアルを参照してください)
次に、独立したノードを作成して追加の公開ページまたは記事ページを作成し、最もホットなコンテンツを呼び出す小さなテンプレートをバインドし、パスとファイル名を指定して、静的 HTML ページ /hot.html として公開します。
次に、ウェブサイトのホームページの最もホットなコンテンツ用に予約されたボックスに次のSSI指示を記入します。
<!--#include virtual="/hot.html" -->
ホームページの拡張子を index.shtml に変更します (サーバー構成のディレクトリ内のデフォルトのドキュメント ページにも shtml タイプを追加する必要があります)
このように、/index.shtmlを使用することで効果を確認できます。記事を追加した後は、このhot.htmlを更新するだけで、ホームページを更新する必要はありません。

この方法では、ホームページ上のコラムリストブロックもこの形式にすることができます。各ノードの追加公開機能を利用して、コラムホームページの公開と同時に、このノードのコンテンツリストを含む小さなページを公開し、SSI指示でホームページに埋め込むことができます。今後は、コラムコンテンツとコラム追加公開ページを更新するだけでよく、ホームページをいつでも更新する必要はありません。

<<:  MySQLユーザー削除バグを解決する

>>:  Docker可視化ツールPortainerの導入と中国語翻訳

推薦する

MySQL 8.0.11 MacOS 10.13 のインストールと設定方法のグラフィックチュートリアル

MacにMySQLデータベースをインストールし、環境変数を設定する手順を参考までに記録します。具体的...

3つの簡単な調整でMySQLを最適化する

私は熟練した DBA になるつもりはありませんが、MySQL を最適化するときは、いくつかの構成を調...

Vue-Routerのインストールプロセスと原理の詳細

目次1. フロントエンドルーティングの実装原則2. vue-Routerの基本的な使い方2.1. イ...

JavaScript を使用せずに HTML の a タグを無効にするには、純粋な CSS を使用します。

実際、この問題は、HTML の select タグを初めて学んだときにすでに発生していました。今日に...

独自のネイティブ JavaScript ルーターを作成する方法

目次序文導入JavaScript 履歴 API独自のネイティブJSルーティングを実装するHistor...

Vue のグローバル ウォーターマーク実装例

目次1. 透かしのJsファイルを作成する2. 導入操作2.1 App.vueや他のページでの参照2....

3つのDocker Nginxログの処理の詳細な説明

社内の同僚は Nginx ログの標準出力、つまりコンソール経由の処理を必要としているため、まずログを...

JavaScript で一意の ID を生成するいくつかの方法

考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...

行間隔が広い場合の解決策(IE では 5 ピクセル多い)

コードをコピーコードは次のとおりです。 li {幅:300px; 高さ:23px; 行の高さ:24p...

Reactの状態管理の3つのルールのまとめ

目次序文No.1 焦点No.2 複雑な状態ロジックの抽出No.3 複数状態操作の抽出要約する序文Re...

HTML フォーム送信アクションと URL ジャンプアクションの違い

フォームのアクションは URL ジャンプとは異なります。フォームはバックグラウンドにデータを渡すこと...

Docker コンテナのマウントディレクトリ操作の表示

Dockerコンテナのマウントディレクトリ情報のみを表示する docker 検査 --format ...

ウェブフロントエンドウェブ開発の一般的なプロセスの簡単な紹介

フロントエンド開発を行っている初心者の学生を多く見かけますが、彼らの効率は比較的遅いです。常にコード...

異なるページ間のJavaScriptデータ転送(URLパラメータ取得)

Web ページでは、あるページに情報を入力すると、別のページにジャンプし、入力した情報が別のページ...

HTML+CSS+JS でキャンバスがマウスの小さな円に追従する特殊効果のソースコードを実現

効果(ソースコードは最後にあります): 成し遂げる: 1. タグを定義します。 <h1>...