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 ,
} ,
} ) ; オープンソースが好きですか?私のプロジェクトを楽しんでいますか?
あなたのサポートが勢いを維持することができます！より革新的なオープンソース ソフトウェアの作成を促進するために寄付を検討してください。
| Ko-Fi経由 | コーヒーを買ってきて | PayPal経由 |
|---|---|---|
