HTML 코드 재사용 사례에 대한 자세한 소개-HTML 튜토리얼-php.cn

머리말

메소드를 제공하는

집

웹 프론트엔드

HTML 튜토리얼

HTML 코드 재사용 사례에 대한 자세한 소개

黄舟

May 27, 2017 pm 02:30 PM

머리말

보통 우리가 만드는 일부 페이지의 경우 디자인 도면을 보면 몇 가지 유사점이 있음을 알 수 있습니다. 예: 헤더, 하단, 사이드바 등 정적인 페이지를 만드는 학생이라면 이렇게 반복되는 부분을 복사해서 새 페이지에 붙여넣기만 하면 되고, 공통적인 부분에 수정이 필요한 부분이 있을 경우에만 가능합니다. 하지만 10개 이상의 페이지에서 이 공개 html 코드를 사용하고 있습니다. 수정하면 곤란하지 않을까요?

백엔드 학생들의 경우 템플릿을 통해 분할할 수 있습니다. 이렇게 하면 코드 재사용성과 유지 관리성이 향상될 수 있습니다. 하지만 단지 디자인 도면으로 정적인 페이지를 만드는 학생들에게는 템플릿과 같은 방법을 제공하지 않습니다. 하지만 백엔드 템플릿을 사용하고 싶지 않다면 제가 소개할 다음 도구가 도움이 될 수 있습니다. htmlhtmlgulp-file-includeinclude

첫 번째 소개하고 싶은 것은 백엔드 템플릿처럼 공개 부분을 분리할 수 있는

메소드를 제공하는

플러그인입니다. 그리고 제공된

메소드에는 많은 구성 항목이 있습니다. 자세한 내용은 gulp-file-include를 확인하세요. gulpinclude빠른 이해를 위해 include를 짧게 써보겠습니다.

와

를 먼저 설치해야 합니다. demo

npm install -g gulp
mkdir gulp-file-include && cd gulp-file-include
npm install  gulp --save-dev
npm install gulp-file-include

로그인 후 복사

gulp가 설치된 후 간단히 파일 디렉터리를 구성해 보겠습니다. gulp-file-include

|-node_modules|-src // 生产环境的 html 存放文件夹    |-include // 公共部分的 html 存放文件夹    |-*.html 
|-dist // 编辑后的 html 文件
gulpfile.js

로그인 후 복사

새

에서

를 구성합니다.

var gulp = require(&#39;gulp&#39;);var fileinclude  = require(&#39;gulp-file-include&#39;);

gulp.task(&#39;fileinclude&#39;, function() {
    gulp.src(&#39;src/**.html&#39;)
        .pipe(fileinclude({          prefix: &#39;@@&#39;,          basepath: &#39;@file&#39;
        }))
    .pipe(gulp.dest(&#39;dist&#39;));
});

로그인 후 복사

gulpfile.js 그런 다음 헤더와 하단에 gulp-file-include

header라는 두 개의 html 파일을 만듭니다.

footer.html

<h1>这是 header 的内容</h1>

로그인 후 복사

마지막으로 새 것을 만들고

및 을

에 추가하세요.

htmlheaderlayout.htmlfooterinclude

<h1>这是 footer 的内容</h1>

로그인 후 복사

마지막으로 명령줄 도구로 돌아가서

를 실행하세요. 컴파일이 완료된 후

디렉토리로 이동하면 최종적으로 컴파일된

파일이 있는지 확인하세요. . gulp fileinclude

알겠습니다. 위의 작은 예를 이해하신 후. 아마도 향후 작업의 생산성을 크게 향상시켜 작성한 코드를 더욱 유지 관리하고 재사용할 수 있게 만들 수 있습니다.

dist프런트 엔드 템플릿layout.html

위에서 언급했듯이

간단하고 사용하기 쉽습니다. 템플릿을 사용하고 싶지 않은 학생들에게 좋은 작은 도구입니다. 그러나 프런트 엔드 템플릿에 익숙한 학생들의 경우 템플릿을 사용하여 코드 유지 관리 및 재사용성을 달성할 수도 있습니다. 그런 다음 공개 부분 html 파일을 분리하는 방법에 대해 이야기하기 위해 일반적으로 사용하는

템플릿을 사용하겠습니다.

이전 예제의 폴더 전체를 새 위치로 복사하고 이름을

로 변경합니다. 그런 다음 gulp-file-include 폴더를 삭제하고 html 폴더 아래의 모든 ejs 파일을 삭제합니다. html

템플릿을 사용하는 경우 ejs에 있는 node_modules 파일의 접미사를 dist로 변경해야 합니다. html 파일을

로 컴파일하는 도구는 여전히

를 사용하고 있습니다. ejs 설치만 하면 끝입니다. src

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>
    @@include(&#39;include/header.html&#39;)    <p> 这是 layout 的内容 </p>

    @@include(&#39;include/footer.html&#39;)</body></html>

로그인 후 복사

html다음 단계는 .ejs 파일을 수정하는 것입니다: ejs

npm install gulp --save-dev
npm install gulp-ejs --save-dev

로그인 후 복사

html그런 다음 gulp 파일을 수정합니다: gulp-ejs

var gulp = require(&#39;gulp&#39;);var ejs  = require(&#39;gulp-ejs&#39;);

gulp.task(&#39;ejs&#39;, function() {
    gulp.src(&#39;src/**.ejs&#39;)
        .pipe(ejs())
    .pipe(gulp.dest(&#39;dist&#39;));
});

로그인 후 복사

마지막으로 명령줄 도구에서

를 실행하면 gulpflie.js 디렉터리에 컴파일된

파일이 표시됩니다. 그리고 당신은 끝났습니다.

layout.ejs사실 템플릿에는 강력한 방법이 많이 있으며 위의 예는 주로 설명하기 위한 것입니다.

이 방법은 약간 커 보이지만 거의 쓸모가 없습니다. 관심 있는 학생들은 템플릿의 일부 방법에 대해 자세히 알아볼 수 있습니다.

위 내용은 HTML 코드 재사용 사례에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.