vite plugin html inject herunterladen – vite plugin html inject Quellcode herunterladen

vite plugin html inject

Andere Kategorien

vite-plugin-html-inject

Herunterladen

vite-plugin-html-inject

Teilen Sie Ihre index.html in kleinere, wiederverwendbare statische HTML-Teile auf.

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

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

Laden Sie diese süßen separaten HTML-Dateien

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

Übergeben Sie statische Argumente an injizierte HTML-Teile

Das Plugin ermöglicht Ihnen außerdem, Ihre HTML-Teile mit einigen grundlegenden Argumenten zu versehen, sodass Sie denselben Code an mehreren Stellen wiederverwenden können.

Sie können beispielsweise einen ähnlich gestalteten Link irgendwo in Ihrer index.html wiederverwenden:

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

Und das src/some-static-link.htm :

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

Dies führt dazu, dass eine von Entwickler und Laufzeit generierte index.html aussieht

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

Anpassung

Sie können den Loader-Tag-Namen und den Quellattributnamen anpassen.
Zum Beispiel eine Konfiguration wie:

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

ersetzt:

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

Debuggen

Standardmäßig ist die Debugging-Option deaktiviert. Sollten beim Laden von Dateien jedoch Probleme auftreten, können Sie die Pfadprotokollierung aktivieren.

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

Unterstützung

Lieben Sie Open Source? Hat Ihnen mein Projekt Spaß gemacht?
Ihre Unterstützung kann den Schwung aufrechterhalten! Erwägen Sie eine Spende, um die Entwicklung innovativerer Open-Source-Software voranzutreiben.