vite plugin html inject
vite-plugin-html-inject
index.html 더 작고 재사용 가능한 정적 HTML 조각으로 나눕니다.
// vite.config.js
import { defineConfig } from 'vite' ;
import injectHTML from 'vite-plugin-html-inject' ;
export default defineConfig ( {
plugins : [ injectHTML ( ) ] ,
} ) ; <!-- index.html -->
<!DOCTYPE html >
< html lang =" en " >
< head >
< meta charset =" UTF-8 " />
< meta http-equiv =" X-UA-Compatible " content =" IE=edge " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
</ head >
< body >
<!-- Loads the specified .html file -->
< load src =" src/html/header/branding.html " />
<!-- Loads index.html or index.htm file inside the specified directory -->
< load src =" src/html/header " />
< div >
< load src =" src/html/body/sidebar.html " />
< load src =" src/html/body " />
</ div >
< load src =" src/html/footer " />
</ body >
</ html > 또한 플러그인을 사용하면 HTML 부분에 몇 가지 기본 인수를 제공할 수 있으므로 동일한 코드 조각을 여러 위치에서 재사용할 수 있습니다.
예를 들어 index.html 어딘가에서 비슷한 스타일의 링크를 재사용할 수 있습니다.
<!-- index.html -->
...
< div class =" some-cool-menu " >
<!-- Load a HTML part -->
< load
src =" src/some-static-link.htm "
label =" Go to DuckDuckGo "
href =" https://duckduckgo.com/ "
/>
< load
src =" src/some-static-link.htm "
label =" Go to Google "
href =" https://google.com "
/>
</ div >
... 그리고 그 src/some-static-link.htm :
<!-- src/some-static-link.htm -->
< a href =" {=$href} " class =" some-cool-link-style " > {=$label} </ a >그러면 다음과 같은 개발 및 런타임 생성 index.html이 생성됩니다.
<!-- generated index.html -->
...
< div class =" some-cool-menu " >
<!-- Load a HTML part -->
< a href =" https://duckduckgo.com/ " class =" some-cool-link-style " >
Go to DuckDuckGo
</ a >
< a href =" https://google.com " class =" some-cool-link-style " > Go to Google </ a >
</ div >
... 로더 태그 이름과 소스 속성 이름을 사용자 정의할 수 있습니다.
예를 들어 다음과 같은 구성이 있습니다.
injectHTML ( {
tagName : 'loader' , // Default is `load`
sourceAttr : 'file' , // Default is `src`
} ) ;다음을 대체합니다:
<!-- Load a HTML part -->
< loader
file =" src/some-static-link.htm "
label =" Go to DuckDuckGo "
href =" https://duckduckgo.com/ "
/> 기본적으로 디버깅 옵션은 꺼져 있습니다. 그러나 파일을 로드하는 데 문제가 발생하면 경로 로깅을 설정할 수 있습니다.
injectHTML ( {
debug : {
logPath : true ,
} ,
} ) ; 오픈 소스를 좋아하시나요? 내 프로젝트가 재미있나요?
여러분의 지원이 추진력을 계속 유지할 수 있습니다! 더욱 혁신적인 오픈 소스 소프트웨어 개발을 촉진하기 위한 기부를 고려해 보세요.
| 코파이를 통해 | 나에게 커피를 사다 | 페이팔을 통해 |
|---|---|---|
