vite plugin html inject Download - vite plugin html inject download do código fonte

vite plugin html inject

Outras categorias

vite-plugin-html-inject

Baixar

vite-plugin-html-injetar

Divida seu index.html em partes HTML estáticas menores e reutilizáveis.

 // vite.config.js
import { defineConfig } from 'vite' ;
import injectHTML from 'vite-plugin-html-inject' ;

export default defineConfig ( {
	plugins : [ injectHTML ( ) ] ,
} ) ;

Carregue esses lindos arquivos HTML separados

 <!-- 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 >

Transmita argumentos estáticos para partes HTML injetadas

O plugin também permite que você forneça alguns argumentos básicos às suas partes HTML, para que você possa reutilizar o mesmo trecho de código em vários lugares.

Por exemplo, você pode reutilizar um link com estilo semelhante em algum lugar do seu 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 >
...

E isso src/some-static-link.htm :

 <!-- src/some-static-link.htm -->
< a href =" {=$href} " class =" some-cool-link-style " > {=$label} </ a >

Isso resultará em um index.html gerado pelo desenvolvedor e pelo tempo de execução parecido com

 <!-- 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 >
...

Personalização

Você pode personalizar o nome da tag do carregador e o nome do atributo de origem.
Por exemplo, uma configuração como:

 injectHTML ( {
	tagName : 'loader' , // Default is `load`
	sourceAttr : 'file' , // Default is `src`
} ) ;

substituirá:

 <!-- Load a HTML part -->
< loader
	file =" src/some-static-link.htm "
	label =" Go to DuckDuckGo "
	href =" https://duckduckgo.com/ "
/>

Depuração

Por padrão, a opção de depuração está desativada. No entanto, se você encontrar problemas ao carregar arquivos, poderá ativar o registro de caminho.

 injectHTML ( {
	debug : {
		logPath : true ,
	} ,
} ) ;

Apoiar

Adora código aberto? Está gostando do meu projeto?
Seu apoio pode manter o ritmo! Considere fazer uma doação para fomentar a criação de software de código aberto mais inovador.