집 > 기사 > 웹 프론트엔드 > HTML 코드 재사용 사례에 대한 자세한 소개

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

黄舟원래의: 2017-05-27 14:30:232193검색

머리말

보통 우리가 만드는 일부 페이지의 경우 디자인 도면을 보면 몇 가지 유사점이 있음을 알 수 있습니다. 예: 헤더, 하단, 사이드바 등 정적인 페이지를 만드는 학생이라면 이렇게 반복되는 부분을 복사해서 새 페이지에 붙여넣기만 하면 되고, 공통적인 부분에 수정이 필요한 부분이 있을 경우에만 가능합니다. 하지만 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML의 양식 구성 요소에 대한 자세한 소개다음 기사：HTML의 양식 구성 요소에 대한 자세한 소개