정적 HTML이있는 공통 머리글 / 바닥 글
정적 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도 있습니다.
가장 실용적인 방법은 Server Side Include 를 사용하는 것입니다 . 두 페이지 이상의 페이지가있을 때 구현하기가 매우 쉽고 많은 작업을 절약 할 수 있습니다.
이를 수행하는 가장 간단한 방법은 일반 HTML을 사용하는 것입니다.
다음 방법 중 하나를 사용할 수 있습니다.
<embed type="text/html" src="header.html">
또는:
<object name="foo" type="text/html" data="header.html"></object>
HTML 프레임이지만 이상적인 솔루션은 아닙니다. 기본적으로 한 번에 3 개의 별도 HTML 페이지에 액세스하게됩니다.
다른 옵션은 AJAX를 사용하는 것입니다.
gulp 또는 grunt와 같은 태스크 러너를 사용할 수 있습니다.
There is an NPM gulp package that does file including on the fly and compiles the result into an output HTML file. You can even pass values through to your partials.
https://www.npmjs.com/package/gulp-file-include
<!DOCTYPE html>
<html>
<body>
@@include('./header.html')
@@include('./main.html')
</body>
</html>
an example of a gulp task:
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'));
});
No. Static HTML files don't change. You could potentially do this with some fancy Javascript AJAXy solution but that would be bad.
Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server, no, you'd need at least SSI.
You can try loading them via the client-side, like this:
<!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>
NOTE: the content will load from top to bottom and replace the content of the container you load it into.
The only way to include another file with just static HTML is an iframe. I wouldn't consider it a very good solution for headers and footers. If your server doesn't support PHP or SSI for some bizarre reason, you could use PHP and preprocess it locally before upload. I would consider that a better solution than iframes.
참고URL : https://stackoverflow.com/questions/418503/common-header-footer-with-static-html
'Programing' 카테고리의 다른 글
| PHP + PDO + MySQL : MySQL의 정수 및 숫자 열을 PHP에서 정수 및 숫자로 반환하려면 어떻게해야합니까? (0) | 2020.10.22 |
|---|---|
| 빌드 버전 또는 앱 버전을 변경해도 ITMS-4238 "중복 바이너리 업로드"오류가 발생합니다. (0) | 2020.10.22 |
| 다른 데이터로 동일한 JUnit 테스트 케이스를 여러 번 실행 (0) | 2020.10.22 |
| 음수가 될 수없는 값에 대해 C #에서 uint를 사용해야합니까? (0) | 2020.10.22 |
| 자산 (이미지, CSS, JS)에 대한 명명 규칙? (0) | 2020.10.22 |