vite plugin html inject Descargar - vite plugin html inject Descarga del código fuente

vite plugin html inject

Otras categorias

vite-plugin-html-inject

Descargar

vite-plugin-html-inyectar

Divida su index.html en partes HTML estáticas más pequeñas y reutilizables.

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

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

Cargue esos dulces archivos 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 >

Transmitir argumentos estáticos a partes HTML inyectadas

El complemento también le permite proporcionar a sus partes HTML algunos argumentos básicos, para que pueda reutilizar el mismo fragmento de código en varios lugares.

Por ejemplo, puedes reutilizar un enlace con un estilo similar en algún lugar de tu 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 >
...

Y ese src/some-static-link.htm :

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

Esto dará como resultado un index.html generado por el desarrollador y el tiempo de ejecución con el aspecto siguiente:

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

Personalización

Puede personalizar el nombre de la etiqueta del cargador y el nombre del atributo de origen.
Por ejemplo una configuración como:

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

reemplazará:

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

Depuración

De forma predeterminada, la opción de depuración está desactivada. Sin embargo, si tiene problemas para cargar archivos, puede activar el registro de ruta.

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

Apoyo

¿Te encanta el código abierto? ¿Disfrutando de mi proyecto?
¡Su apoyo puede mantener el impulso! Considere una donación para impulsar la creación de software de código abierto más innovador.