정적 HTML이있는 공통 머리글 / 바닥 글

Question 1

정적 HTML / XHTML을 사용하여 사이트의 각 페이지에 표시 할 공통 머리글 / 바닥 글 파일을 만드는 적절한 방법이 있습니까? 분명히 PHP 또는 서버 측 지시문으로이 작업을 수행 할 수 있다는 것을 알고 있지만 서버에 대한 종속성이 전혀없이 모든 것을 함께 연결하는 방법이 있습니까?

편집 : 모든 아주 좋은 대답과 내가 기대했던 것입니다. HTML은 정적이고 마침표입니다. 서버 측이나 클라이언트 측을 실행하지 않고는 실제로 변경할 수 없습니다. Server Side Includes는 매우 간단하고 스크립팅이 필요하지 않기 때문에 가장 좋은 옵션 인 것 같습니다.

Question 2

원하는 작업을 수행하는 세 가지 방법이 있습니다.

서버 스크립트

여기에는 php, asp, jsp와 같은 것이 포함됩니다.

서버 측 포함 사항

귀하의 서버가 페이지를 제공하고 있으므로 내장 된 서버 측 포함 기능 을 활용하지 않으 시겠습니까? 각 서버에는이를 수행하는 고유 한 방법이 있으며이를 활용하십시오.

클라이언트 측 포함

이 솔루션은 페이지가 이미 클라이언트에로드 된 후 서버로 다시 호출하도록합니다.

Question 3

JQuery load () 함수는 공통 머리글 및 바닥 글을 포함하는 데 사용할 수 있습니다. 코드는 다음과 같아야합니다.

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

여기에서 데모를 찾을 수 있습니다 (보관 됨).

Question 4

HTML에는 "include"지시문이 없기 때문에 세 가지 해결 방법 만 생각할 수 있습니다.

프레임
자바 스크립트
CSS

각 방법에 대한 약간의 의견.

프레임은 표준 프레임 또는 iFrame 일 수 있습니다. 어느 쪽이든 고정 된 높이를 지정해야하므로 원하는 솔루션이 아닐 수 있습니다.

Javascript는 매우 광범위한 주제이며 원하는 효과를 얻기 위해 Javascript를 사용하는 방법은 여러 가지가있을 것입니다. 그러나 나는 두 가지 방법을 생각할 수 있습니다.

머리글 / 바닥 글을 요청한 다음 페이지의 올바른 위치에 배치하는 본격적인 AJAX 요청
<script type="text/javascript" src="header.js"> 다음과 같은 내용이 있습니다. document.write('My header goes here');

CSS를 통해하는 것은 정말 남용입니다. CSS에는 contentHTML 콘텐츠를 삽입 할 수 있는 속성이 있지만 실제로는 이와 같이 사용하기위한 것은 아닙니다. 또한이 구성에 대한 브라우저 지원에 대해 확신하지 못합니다.

Question 5

자바 스크립트로 할 수 있으며 그렇게 화려할 필요는 없다고 생각합니다.

header.js 파일과 footer.js가있는 경우.

그런 다음 header.js의 내용은 다음과 같을 수 있습니다.

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

작성중인 문자열에서 중첩 된 따옴표 문자 를 이스케이프 해야합니다 . 그런 다음 정적 템플릿에서이를 호출 할 수 있습니다.

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

footer.js도 비슷합니다.

참고 : 저는이 솔루션을 권장하지 않습니다. 해킹이고 여러 가지 단점이 있습니다 (SEO가 좋지 않고 처음에는 유용성이 낮음).하지만 질문자의 요구 사항을 충족합니다.

Question 6

jquery를 사용하여 쉽게 할 수 있습니다. 그런 간단한 작업에는 PHP가 필요하지 않습니다. 웹 페이지에 한 번만 포함하면됩니다.

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

이제 모든 요소에서 데이터로드를 사용하여 외부 html 파일에서 해당 콘텐츠를 호출하려면 콘텐츠를 배치하려는 html 코드에 줄을 추가하기 만하면됩니다.

예

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

Question 7

가장 좋은 해결책은 템플릿이 있거나 지원을 포함하는 정적 사이트 생성기를 사용하는 것입니다. Mac 용 Hammer를 사용합니다. 훌륭합니다. 파일 변경 사항을 모니터링하고, sass를 컴파일하고, 파일을 연결하고, 포함 할 수있는 Ruby gem 인 Guard도 있습니다.

Question 8

이를 수행하는 가장 간단한 방법은 일반 HTML을 사용하는 것입니다.

다음 방법 중 하나를 사용할 수 있습니다.

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

또는:

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

Question 9

가장 실용적인 방법은 Server Side Include 를 사용하는 것입니다 . 두 페이지 이상의 페이지가있을 때 구현하기가 매우 쉽고 많은 작업을 절약 할 수 있습니다.

Question 10

HTML 프레임이지만 이상적인 솔루션은 아닙니다. 기본적으로 한 번에 3 개의 별도 HTML 페이지에 액세스하게됩니다.

다른 옵션은 AJAX를 사용하는 것입니다.

Question 11

gulp 또는 grunt와 같은 태스크 러너를 사용할 수 있습니다.

즉석에서 파일을 포함하고 결과를 출력 HTML 파일로 컴파일하는 NPM gulp 패키지가 있습니다. 부분에 값을 전달할 수도 있습니다.

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

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

꿀꺽 꿀꺽 작업의 예 :

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'));
    });

Question 12

다음과 같이 클라이언트 측을 통해로드 할 수 있습니다.

<!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>

참고 : 콘텐츠는 위에서 아래로로드되며로드 한 컨테이너의 콘텐츠를 대체합니다.

Question 13

아니요. 정적 HTML 파일은 변경되지 않습니다. 멋진 Javascript AJAXy 솔루션으로 잠재적으로 이것을 할 수 있지만 그것은 나쁠 것입니다.

Question 14

수백 같은 지역의 템플릿 시스템을 사용하여 짧은 이제 모든 스크립트 언어에 존재하거나 사용하여 homebrewed 하나를 사용 sed하거나 m4당신의 서버로 결과를 전송, 아니, 당신은 적어도 SSI 필요 했어.

Question 15

정적 HTML 만있는 다른 파일을 포함하는 유일한 방법은 iframe입니다. 나는 그것이 머리글과 바닥 글에 대한 좋은 해결책이라고 생각하지 않을 것입니다. 서버가 기괴한 이유로 PHP 또는 SSI를 지원하지 않는 경우 PHP를 사용하여 업로드하기 전에 로컬에서 사전 처리 할 수 있습니다. iframe보다 더 나은 솔루션이라고 생각합니다.