정적 HTML / XHTML을 사용하여 사이트의 각 페이지에 표시 할 공통 머리글 / 바닥 글 파일을 만드는 적절한 방법이 있습니까? 분명히 PHP 또는 서버 측 지시문으로이 작업을 수행 할 수 있다는 것을 알고 있지만 서버에 대한 종속성이 전혀없이 모든 것을 함께 연결하는 방법이 있습니까?
편집 : 모든 아주 좋은 대답과 내가 기대했던 것입니다. HTML은 정적이고 마침표입니다. 서버 측이나 클라이언트 측을 실행하지 않고는 실제로 변경할 수 없습니다. Server Side Includes는 매우 간단하고 스크립팅이 필요하지 않기 때문에 가장 좋은 옵션 인 것 같습니다.
답변
원하는 작업을 수행하는 세 가지 방법이 있습니다.
서버 스크립트
여기에는 php, asp, jsp와 같은 것이 포함됩니다.
서버 측 포함 사항
귀하의 서버가 페이지를 제공하고 있으므로 내장 된 서버 측 포함 기능 을 활용하지 않으 시겠습니까? 각 서버에는이를 수행하는 고유 한 방법이 있으며이를 활용하십시오.
클라이언트 측 포함
이 솔루션은 페이지가 이미 클라이언트에로드 된 후 서버로 다시 호출하도록합니다.
답변
JQuery load () 함수는 공통 머리글 및 바닥 글을 포함하는 데 사용할 수 있습니다. 코드는 다음과 같아야합니다.
<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>
여기에서 데모를 찾을 수 있습니다 (보관 됨).
답변
HTML에는 “include”지시문이 없기 때문에 세 가지 해결 방법 만 생각할 수 있습니다.
- 프레임
- 자바 스크립트
- CSS
각 방법에 대한 약간의 의견.
프레임은 표준 프레임 또는 iFrame 일 수 있습니다. 어느 쪽이든 고정 된 높이를 지정해야하므로 원하는 솔루션이 아닐 수 있습니다.
Javascript는 매우 광범위한 주제이며 원하는 효과를 얻기 위해 Javascript를 사용하는 방법은 여러 가지가있을 것입니다. 그러나 나는 두 가지 방법을 생각할 수 있습니다.
- 머리글 / 바닥 글을 요청한 다음 페이지의 올바른 위치에 배치하는 본격적인 AJAX 요청
<script type="text/javascript" src="header.js">다음과 같은 내용이 있습니다.document.write('My header goes here');
CSS를 통해하는 것은 정말 남용입니다. CSS에는 contentHTML 콘텐츠를 삽입 할 수 있는 속성이 있지만 실제로는 이와 같이 사용하기위한 것은 아닙니다. 또한이 구성에 대한 브라우저 지원에 대해 확신하지 못합니다.
답변
자바 스크립트로 할 수 있으며 그렇게 화려할 필요는 없다고 생각합니다.
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가 좋지 않고 처음에는 유용성이 낮음).하지만 질문자의 요구 사항을 충족합니다.
답변
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>
답변
가장 좋은 해결책은 템플릿이 있거나 지원을 포함하는 정적 사이트 생성기를 사용하는 것입니다. Mac 용 Hammer를 사용합니다. 훌륭합니다. 파일 변경 사항을 모니터링하고, sass를 컴파일하고, 파일을 연결하고, 포함 할 수있는 Ruby gem 인 Guard도 있습니다.
답변
이를 수행하는 가장 간단한 방법은 일반 HTML을 사용하는 것입니다.
다음 방법 중 하나를 사용할 수 있습니다.
<embed type="text/html" src="header.html">
또는:
<object name="foo" type="text/html" data="header.html"></object>
