HTML을 처리하는 가장 간단한 방법에는 포함됩니다

HTML이 다른 HTML 파일을 포함시킬 방법이 없다는 것은 매우 놀라운 일입니다. 수평선에 그것을 다루는 것도없는 것 같습니다. 나는 HTML의 덩어리를 가져다가 다른 사람으로 묶는 것과 같은 똑바로 이야기 하고 있습니다. 예를 들어, 전체 인터넷의 대부분, 모든 페이지에 포함 된 헤더 및 바닥 글의 사용 사례는 다음과 같습니다.

 ...

   <src header.html> 

   콘텐츠

   <src footer.html> 

...</src></src>

그건 그렇고 그것은 사실이 아닙니다. 나는 단지 그랬 으면 좋겠다.

사람들은이 문제를 영원히 해결하기 위해 다른 언어를 찾고 있습니다. 그것은 어떤 의미에서 HTML 전처리입니다. CSS를 전처리하기 오래 전에 HTML을 조작하는 도구를 사용하고있었습니다. 그리고 우리는 여전히 포함 된 아이디어가 세계의 거의 모든 웹 사이트에 유용하기 때문에 여전히 있습니다.

php를 사용하십시오

대신 PHP를 사용할 수 있습니까?

 ...

    php 포함 "./header.html"?>

   콘텐츠

    php 포함 "./fofer.html"?>

...

이는 서버 수준에서 포함을 수행하므로 서버의 파일 시스템 수준에서 요청이 발생하므로 클라이언트 측 솔루션보다 훨씬 빠릅니다.

Gulp를 사용하십시오

서버 측보다 더 빠른 것은 무엇입니까? 포함이 서버에서도 전처리 된 경우. Gulp에는이를 수행 할 수있는 다양한 프로세서가 있습니다. 하나는 Gulp-file-include입니다.

그것은 다음과 같습니다.

 ...

   @@ include ( './ header.html')

   콘텐츠

   @@ include ( './ fumer.html')

...

그리고 당신은 그것을 처리 할 것입니다 :

 var fileInclude = require ( 'gulp-file-include'),
  gulp = 요구 ( 'gulp');
 
gulp.task ( 'FileInclude', function () {
  gulp.src ([ 'index.html'])
    .pipe (fileInclude ({
      접두사 : '@@',
      Basepath : '@file'
    }))
    .pipe (gulp.dest ( './'));
});

이 특정 플러그인에는 변수를 포함으로 전달할 수있는 멋진 기능이있어 데이터 중심 구성 요소가 거의 없습니다.

Grunt를 사용하십시오

이것이 Grunt-Bake 플러그인이하는 일입니다. HTML을 처리하도록 Grunt를 구성합니다.

 grunt.initconfig ({
    빵 : {
        your_target : {
            파일 : {
                "dist/index.html": "app/index.html",
            }
        }
    }
});

그런 다음 HTML은이 특수 구문을 사용할 수 있습니다.

 ...

   

   콘텐츠

   

...

핸들 바를 사용하십시오

핸들 바에는 부분이 있습니다.

등록 :

 handleBars.registerPartial ( 'myPartial', '{{name}}')

그런 다음 사용하십시오.

 {{> myPartial}}

평가 및 전달 데이터를 허용하는 멋진 기능도 있습니다. Gulp-Handlebar와 같은 것을 실행하려면 프로세서가 필요합니다.

곱슬 버팀대를 사용하는 템플릿에 대해 말하면… 콧수염도 가지고 있습니다.

퍼그를 사용하십시오

Pug는 HTML에 대한 완전히 새로운 구문을 가진 HTML 전 처리기입니다. 그래도 포함되어 있습니다.

 ...
몸
   포함 ./header.html "

   p 컨텐츠

   포함 ./footer.html "

   ...

그런 다음 Gulp Pug와 같은 것으로 실행합니다.

nunjucks를 사용하십시오

나는 나에게 nunjucks를 사랑한다! Nunjucks는 포함되어 있습니다. 당신은 다음과 같이 할 것입니다 :

 ...

   { % 포함 "./header.html" %}

   콘텐츠

   { % 포함 "./footer.html" %}

...

index.njk라는 파일에 넣으면 간단한 노드 스크립트로 index.html로 처리 할 수 ​​있습니다.

 const nunjucks = require ( "nunjucks");
const fs = 요구 사항 ( "FS");

fs.writefile ( "index.html", nunjucks.render ( "index.njk"), function (err, data) {
  if (err) console.log (err);
  Console.log ( "Nunjucks, Captain.");
});

또는 gulp-nunjucks와 같은 것으로 처리하십시오.

11ty에는 Nunjucks가 내장되어 있으며 지금까지 언급 된 많은 것들과 함께. 실제로 작은 사이트를 구축하면 좋을 것입니다.

Ajax를 사용하십시오

당신은 ...

 
  
   
  
  콘텐츠.
  
  <futer> 풋내기>

</futer>

각 파일에서 헤더와 바닥 글의 내용을 가져와 내용을 버릴 수 있습니다.

 fetch ( "./ header.html")
  . 그런데 (응답 => {
    return response.text ()
  })
  . 그런데 (data => {
    document.querySelector ( "헤더"). innerHtml = data;
  });

fetch ( "./ footer.html")
  . 그런데 (응답 => {
    return response.text ()
  })
  . 그런데 (data => {
    document.querySelector ( "바닥기"). innerHtml = data;
  });

JavaScript에 대해 말하면… 거의 모든 종류의 JavaScript 프레임 워크를 사용하여 사이트를 구축하는 경우 구성 요소를 통해 구축하는 것이 주요 거래이며 다른 파일에 포함하려는 부품을 깨는 것은 아무런 문제가 없습니다. "./header.js"의 일종의 가져 오기 헤더; 그리고 는 당신이 반응 토지에있는 영토입니다.

iframes를 사용하십시오

당신은 이것을 할 수 있습니다 :

 
  
  <iframe src="./%20header.html"> </iframe>
  
  콘텐츠.
  
  <iframe src="./%20footer.html"> </iframe>
  

그러나이 iframes의 내용은 같은 DOM을 공유하지 않으므로 스타일에 느리고 어색한 것은 말할 것도 없습니다 (Iframes는 내용의 높이를 알지 못하기 때문에).

Scott Jehl은 멋진 아이디어를 기록했습니다. Iframe 자체가 부모 페이지에 내용을 주입 한 다음 스스로 제거 할 수 있습니다.

 
  
  <iframe src="header.html" onload="this.fore
  
  콘텐츠.
  
  <iframe src = " booter.html this.contentdocument .children this.remove> </iframe>
  

Kolya Korruptis는이 적응과 함께 HTML 파일이 다음과 같은 경우 신체의 첫 번째 자녀 이상을 포함 할 수 있습니다.

 <iframe src="contlod.html" onload="this.insertadjacenthtml ( 'afterend', (this.contentDocument.body || this.contentDocument) .innerhtml); this.remove ()"> </iframe>

Jekyll을 사용하십시오

Jekyllis 루비 기반 정적 사이트 생성기는 내부에 포함됩니다. 당신은/_includes/폴더에 포함시켜 다음을 보관합니다.

 
  { % 포함 header.html %}
  
  콘텐츠.

  { % 포함 includ.html %}

Jekyll은 큰 것이기 때문에 여기에서 그것을 부르고 있지만, 정적 사이트 생성기가 수많은 지역 톤이므로 포함 할 수있는 부분이 포함되어 있습니다.

Sergey를 사용하십시오

좋아, 나는 새롭고 초점을 맞추기 때문에 하나의 moressgbece를 부를 것이다 .Sergeyhas 웹 구성 요소 스타일 형식 :

 
  <sergey-import src="%ED%97%A4%EB%8D%94"></sergey-import>

  콘텐츠.

  <sergey-import src="%EB%B0%94%EB%8B%A5%20%EA%B8%80"></sergey-import>

당신은 filesheader.htmlandfooter.htmland를 입력/포함/include/다음에 NPM 스크립트를 실행할 때 처리 된 포함과 함께 빌드를 만듭니다.

Apache SSI를 사용하십시오

Cando는 Super Duper Common Web Server 인 Apache에 포함되어 있습니다. 당신은 이것처럼 그것을합니다 :

 
		
  
  
  콘텐츠
  
  
  

그러나 물건을 허용하려면 올바른 아파치 구성이 필요합니다. 나는 일하는 데모를 얻기 위해 최선을 다했지만 운이 많지 않았습니다.

Apache 서버의 폴더를 사용하여 htaccess를 사용하고 올바른 것들을 생각했습니다.

 옵션이 포함됩니다

AddType text/html .html
AddOutputFilter에는 .html이 포함됩니다

나는 그것을 작동시킬 수있는 방법이 있다고 확신하며, 그렇게한다면 다른 종속성이 필요하다는 것은 약간 깔끔합니다.

Codekit을 사용하십시오

Mac 전용이지만 Codekit Hasa는 HTML이 포함 된 Citit Processes라고 불리는 특수 언어입니다. 특별한 HTML 주석을 사용합니다.

 ...

   

   콘텐츠

   

...

DreamWeaver를 사용하십시오

lol jk. 그러나 그것은 정말로 사물입니다.

거룩한 쓰레기

그건 많은 방법이야?

내가 맨 위에서 말했듯이, HTML 자체가 이것을 직접 해결하지 않았다는 것은 매우 놀라운 일입니다. 성능이 코드 전체에 네트워크 요청을 트리거하는 명령문을 갖는 것이 성능이 좋은 아이디어라고 생각하지는 않지만 플랫폼과 인라인으로 보입니다. 번들링없이 직접 ES6 가져 오기를 사용하는 것도 항상 좋은 아이디어는 아니지만 우리는 그것을 가지고 있습니다.@CSS 내에서 CSS를 가져 오는 것은 항상 좋은 아이디어는 아니지만 우리는 그것을 가지고 있습니다. 플랫폼에 기본 구문이있는 경우 JavaScript Bundlers가 ES6 가져 오기 형식을 지원하는 것과 마찬가지로 다른 툴링이 시작될 것입니다.

위 내용은 HTML을 처리하는 가장 간단한 방법에는 포함됩니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!