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 | 給我買杯咖啡 | 透過貝寶 |
|---|---|---|
