如何使用 Node js、ExpressJS、hbs 或 ejs 在多頁網站的 html 頁面中添加通用頁眉和頁腳

Question

我想創建公共頁眉（導航欄）和頁腳頁面以包含在網站的多頁/幾頁中。 使用 nodejs 和 expressjs 創建動態網站

將導航欄和頁腳的代碼放在公共header.html和footer.html 中，並在其他 html 頁面中調用或包含此公共頁眉/導航欄和頁腳 html 頁面。

如何使用hbs 或 ejs等模板引擎使用 Nodejs 和 expressJs 創建網站

我知道它可以使用 php 或 jquery 來完成。

<html>
<head>
<title>document</title>

</head>
<body>
<div id="header">navbar</div>

<!--Remaining section-->

<div id="footer">footer</div>
</body>
</html>

但不使用以下方式：

W3school w3-包括

<div w3-include-html="content.html"></div>

PHP

<?php include 'header.php' ?>
    ''Page content''
    <?php include 'footer.php' ?>

Answer 1

您可以保留您的 html 文件，例如

header.html只包含標題代碼
footer.html只包含頁腳代碼
content.html包含以下內容：

這里標題

頁面內容
在您的.htaccess文件中
添加類型應用程序/x-httpd-php5 .html .htm

所以它將所有的 html 文件解析為 PHP 文件並包含並執行所有的 php 代碼。

如果通過 js/jquery 加載。

你的 html 應該是

<header></header>
<div class="middle">page content here</div>
<footer></footer>

<script>
$(document).ready(function(){
    $('header').load("header.html");
    $('footer').load("footer.html");


});
</script>

Answer 2

您已經提供了所有（直接）的解決方案。 您可以使用：

服務器端的 PHP、ASP.NET、JSP 等功能，或
客戶端 JavaScript 中的 AJAX / XHR / Fetch API 功能。

據我所知，沒有辦法僅使用 HTML 和 JavaScript 來使用純客戶端（瀏覽器內部）之類的“母版頁”或“模板頁”。 :-(

曾經有一些稱為HTML 導入的功能（作為 HTML Web 組件的一部分），但不久前它已被放棄。

如果有辦法做你想做的事，我也很樂意學習。 :-)

如何使用 Node js、ExpressJS、hbs 或 ejs 在多頁網站的 html 頁面中添加通用頁眉和頁腳

問題描述

2 個解決方案

解決方案1
1 2019-05-20 04:42:45

這里標題

解決方案2
0 2019-05-10 11:59:10

如何使用 Node js、ExpressJS、hbs 或 ejs 在多頁網站的 html 頁面中添加通用頁眉和頁腳

問題描述

2 個解決方案

解決方案1 1 2019-05-20 04:42:45

這里標題

解決方案2 0 2019-05-10 11:59:10

解決方案1
1 2019-05-20 04:42:45

解決方案2
0 2019-05-10 11:59:10