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 | 给我买杯咖啡 | 通过贝宝 |
|---|---|---|
