Đầu trang / Chân trang chung với HTML tĩnh

Có cách nào phù hợp với HTML / XHTML tĩnh để tạo các tệp đầu trang / chân trang chung để hiển thị trên mỗi trang của trang web không? Tôi biết rõ ràng là bạn có thể làm điều này với PHP hoặc các lệnh phía máy chủ, nhưng có cách nào để thực hiện việc này mà hoàn toàn không phụ thuộc vào máy chủ kết hợp mọi thứ lại với nhau cho bạn không?

Chỉnh sửa: Tất cả các câu trả lời rất tốt và là những gì tôi mong đợi. HTML tĩnh, dấu chấm. Không có cách thực sự nào để thay đổi điều đó nếu không có thứ gì đó đang chạy phía máy chủ hoặc phía máy khách. Tôi thấy rằng Server Side Bao gồm có vẻ là lựa chọn tốt nhất của tôi vì chúng rất đơn giản và không yêu cầu tập lệnh.

Có ba cách để làm những gì bạn muốn

Tập lệnh máy chủ

Điều này bao gồm một cái gì đó như php, asp, jsp .... Nhưng bạn đã nói không với điều đó

Phía máy chủ bao gồm

Máy chủ của bạn đang phục vụ các trang, vậy tại sao không tận dụng lợi thế của bao gồm phía máy chủ được tích hợp sẵn ? Mỗi máy chủ có một cách riêng để làm điều này, hãy tận dụng nó.

Phía khách hàng bao gồm

Giải pháp này cho phép bạn gọi lại máy chủ sau khi trang đã được tải trên máy khách.

Hàm load () trong jQuery có thể sử dụng để bao gồm đầu trang và chân trang chung. Mã phải như thế nào

<script>
    $("#header").load("header.html");
    $("#footer").load("footer.html");
</script>

Bạn có thể tìm thấy bản demo ở đây

Vì HTML không có chỉ thị "bao gồm", tôi chỉ có thể nghĩ đến ba cách giải quyết

1. Khung
2. Javascript
3. CSS

Nhận xét một chút về mỗi phương pháp.

Khung có thể là khung chuẩn hoặc iFrames. Dù bằng cách nào, bạn sẽ phải chỉ định chiều cao cố định cho chúng, vì vậy đây có thể không phải là giải pháp bạn đang tìm kiếm.

Javascript là một chủ đề khá rộng và có thể tồn tại nhiều cách mà người ta có thể sử dụng nó để đạt được hiệu quả mong muốn. Tuy nhiên, tôi có thể nghĩ ra hai cách:

1. Yêu cầu AJAX toàn diện, yêu cầu đầu trang / chân trang và sau đó đặt chúng vào đúng vị trí của trang;
2. <script type="text/javascript" src="header.js"> có một cái gì đó như thế này trong đó: document.write('My header goes here');

Làm điều đó thông qua CSS sẽ thực sự là một sự lạm dụng. CSS có thuộc contenttính cho phép bạn chèn một số nội dung HTML, mặc dù nó không thực sự được sử dụng như thế này. Ngoài ra, tôi không chắc về sự hỗ trợ của trình duyệt cho cấu trúc này.

Bạn có thể làm điều đó với javascript, và tôi không nghĩ nó cần phải đẹp như vậy.

Nếu bạn có tệp header.js và footer.js.

Sau đó, nội dung của header.js có thể giống như

document.write("<div class='header'>header content</div> etc...")

Hãy nhớ thoát khỏi bất kỳ ký tự trích dẫn lồng nhau nào trong chuỗi bạn đang viết. Sau đó, bạn có thể gọi điều đó từ các mẫu tĩnh của mình bằng

<script type="text/javascript" src="header.js"></script>

và tương tự cho footer.js.

Lưu ý: Tôi không đề xuất giải pháp này - đó là một cuộc tấn công và có một số nhược điểm (kém cho SEO và khả năng sử dụng chỉ dành cho người mới bắt đầu) - nhưng nó đáp ứng các yêu cầu của người hỏi.

bạn có thể làm điều này dễ dàng bằng cách sử dụng jquery. không cần php cho một nhiệm vụ đơn giản như vậy. chỉ bao gồm điều này một lần trong trang web của bạn.

$(function(){
    $("[data-load]").each(function(){
        $(this).load($(this).data("load"), function(){
        });
    });
})

bây giờ sử dụng tải dữ liệu trên bất kỳ phần tử nào để gọi nội dung của nó từ tệp html bên ngoài, bạn chỉ cần thêm dòng vào mã html của mình nơi bạn muốn đặt nội dung.

thí dụ

<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>

Giải pháp tốt nhất là sử dụng trình tạo trang tĩnh có hỗ trợ tạo khuôn mẫu / bao gồm. Tôi sử dụng Hammer cho Mac, nó rất tuyệt. Ngoài ra còn có Guard, một viên ngọc ruby ​​theo dõi các thay đổi của tệp, biên dịch sass, nối bất kỳ tệp nào và có thể bao gồm.

Cách đơn giản nhất để làm điều đó là sử dụng HTML thuần túy.

Bạn có thể sử dụng một trong những cách sau:

<embed type="text/html" src="header.html">

hoặc là:

<object name="foo" type="text/html" data="header.html"></object>

Cách thực tế nhất là sử dụng Bao gồm phía máy chủ . Nó rất dễ thực hiện và tiết kiệm rất nhiều công việc khi bạn có nhiều hơn một vài trang.

Khung HTML, nhưng nó không phải là một giải pháp lý tưởng. Về cơ bản, bạn sẽ truy cập 3 trang HTML riêng biệt cùng một lúc.

Tùy chọn khác của bạn là sử dụng AJAX, tôi nghĩ.

Bạn có thể sử dụng một người chạy nhiệm vụ chẳng hạn như nuốt hoặc grunt.

Có một gói NPM gulp thực hiện tệp bao gồm một cách nhanh chóng và biên dịch kết quả thành tệp HTML đầu ra. Bạn thậm chí có thể chuyển các giá trị cho các thành viên của mình.

https://www.npmjs.com/package/gulp-file-include

<!DOCTYPE html>
<html>
  <body>
  @@include('./header.html')
  @@include('./main.html')
  </body>
</html>

một ví dụ về nhiệm vụ gulp:

var fileinclude = require('gulp-file-include'),
    gulp = require('gulp');

    gulp.task('html', function() {
        return gulp.src(['./src/html/views/*.html'])
            .pipe(fileInclude({
                prefix: '@@',
                basepath: 'src/html'
            }))
            .pipe(gulp.dest('./build'));
    });

Bạn có thể thử tải chúng qua phía máy khách, như sau:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>

    <div id="headerID"> <!-- your header --> </div>
    <div id="pageID"> <!-- your header --> </div>
    <div id="footerID"> <!-- your header --> </div>

    <script>
      $("#headerID").load("header.html");
      $("#pageID").load("page.html");
      $("#footerID").load("footer.html");
    </script>
  </body>
</html>

LƯU Ý: nội dung sẽ tải từ trên xuống dưới và thay thế nội dung của vùng chứa mà bạn tải vào.

Không. Tệp HTML tĩnh không thay đổi. Bạn có thể làm điều này với một số giải pháp Javascript AJAXy ưa thích nhưng điều đó sẽ tệ.

Không cần sử dụng một hệ thống tạo khuôn mẫu cục bộ như nhiều hàng trăm hiện đang tồn tại trong mọi ngôn ngữ kịch bản hoặc thậm chí sử dụng ngôn ngữ viết tắt của bạn có sedhoặc m4và gửi kết quả đến máy chủ của bạn, không, bạn cần ít nhất SSI.

Cách duy nhất để bao gồm một tệp khác chỉ với HTML tĩnh là iframe. Tôi sẽ không coi đó là một giải pháp rất tốt cho đầu trang và chân trang. Nếu máy chủ của bạn không hỗ trợ PHP hoặc SSI vì một số lý do kỳ lạ, bạn có thể sử dụng PHP và xử lý trước nó cục bộ trước khi tải lên. Tôi sẽ coi đó là một giải pháp tốt hơn iframe.