PHPドキュメントをHTMLドキュメントにインポートする

Question

ナビゲーション要素用にnavbar.phpを作成しました。私のindex.htmlにそのnavbarをインポートして、すべてのHTMLページに機能するnavbarを作る方法は？私は自分のHTMLページをPHPに変換する必要がありますか？ navbarのために各ページを個別にリメイクする必要がありますか？

はここにあなたの助け

いただきありがとうございます私のフォルダディレクトリのスクリーンショットです： directory listing

Answer 1

A PHPの

例は、それが取るすべてである含みます。インクルードすると、HTML（またはPHP）が挿入されます。

PHPはサーバー側の言語です。ファイルがサーバーによってアセンブルされ、クライアントに送信されたことを意味します。したがって、PHPには、基本的にファイルを読み込み、ドキュメントに直接挿入することが含まれています。

somePage.php

<?php include "navbar.php" ?> 
THIS IS GREAT CONTENT 

のポスターのコメントパー

<ul> 
    <li><a href="#">Great link</a></li> 
    <li><a href="#">I don't like this link</a></li> 
    <li><a href="#">This link is cool</a></li> 
    <li><a href="#">Links are the bomb</a></li> 
</ul> 

navbar.php：

ここ

JavaScriptでそれを行う方法は次のとおりです。

navbar.html

<ul> 
    <li><a href="#">Great link</a></li> 
    <li><a href="#">I don't like this link</a></li> 
    <li><a href="#">This link is cool</a></li> 
    <li><a href="#">Links are the bomb</a></li> 
</ul> 

今、私たちのsomePageを書き換えてみましょう。ファイル拡張子が.htmlになり、すべてが解析されたことを意味します。クライアント側。だから、ページがロードされた後、私たちのコードは、ブラウザにnavbar.htmlを取り出し、それを私たちのdivにid "navBar"で挿入するようブラウザに指示しています。

somePage.htmlこれは間違いなくハックです

<div id="navBar"></div> 
THIS IS GREAT CONTENT 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
$.get("navbar.html", function (data) { 
    $("#navBar").html(data); 
}); 
</script> 

、これを使用しないでください。

somePage.html

<div id="navBar"> 

</div> 
THIS IS GREAT CONTENT 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

<script src="navbar.html"></script> 

ナビゲーションバー。迅速かつ簡単なヘルプのHTML

$("#navBar").html(`<ul> 
    <li><a href="#">Great link</a></li> 
    <li><a href="#">I don't like this link</a></li> 
    <li><a href="#">This link is cool</a></li> 
    <li><a href="#">Links are the bomb</a></li> 
</ul>`); 

Answer 2

この場合、同じディレクトリ、PHP（index.phpを）内のすべてのページを変換します。

ページにあなたのナビゲーションバーをインポートするために使用

include_once "navbar.php"; 

。 index.phpの

<?php 
include_once "navbar.php"; 
?> 
Your html code