vite plugin html inject Télécharger - vite plugin html inject Source code télécharger

vite plugin html inject

Autres catégories

vite-plugin-html-inject

Télécharger

vite-plugin-html-inject

Divisez votre index.html en morceaux HTML statiques plus petits et réutilisables.

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

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

Chargez ces jolis fichiers HTML séparés

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

Transmettre des arguments statiques aux parties HTML injectées

Le plugin vous permet également de fournir à vos parties HTML quelques arguments de base, afin que vous puissiez réutiliser le même morceau de code à plusieurs endroits.

Par exemple, vous pouvez réutiliser un lien de style similaire quelque part dans votre 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 >
...

Et ça src/some-static-link.htm :

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

Cela se traduira par un index.html généré par le développement et l'exécution ressemblant à

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

Personnalisation

Vous pouvez personnaliser le nom de la balise du chargeur et le nom de l'attribut source.
Par exemple une configuration comme :

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

remplacera :

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

Débogage

Par défaut, l'option de débogage est désactivée. Toutefois, si vous rencontrez des problèmes lors du chargement des fichiers, vous pouvez activer la journalisation du chemin.

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

Soutien

Vous aimez l’open source ? Vous appréciez mon projet ?
Votre soutien peut maintenir l’élan ! Envisagez un don pour alimenter la création de logiciels open source plus innovants.