vite plugin html inject Unduh - vite plugin html inject Unduh kode sumber

vite plugin html inject

Kategori lainnya

vite-plugin-html-inject

Unduh

vite-plugin-html-inject

Pisahkan index.html Anda menjadi bagian HTML statis yang lebih kecil dan dapat digunakan kembali.

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

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

Muat file HTML terpisah yang manis itu

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

Berikan argumen statis ke bagian HTML yang dimasukkan

Plugin ini juga memungkinkan Anda untuk memberikan beberapa argumen dasar pada bagian HTML Anda, sehingga Anda dapat menggunakan kembali potongan kode yang sama di banyak tempat.

Misalnya, Anda dapat menggunakan kembali tautan dengan gaya serupa di suatu tempat di index.html Anda:

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

Dan src/some-static-link.htm itu :

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

Ini akan menghasilkan seperti apa index.html yang dihasilkan dev dan runtime

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

Kustomisasi

Anda dapat menyesuaikan nama tag pemuat dan nama atribut sumber.
Misalnya konfigurasi seperti:

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

akan menggantikan:

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

Men-debug

Secara default, opsi debugging dinonaktifkan. Namun, jika Anda mengalami masalah saat memuat file, Anda dapat mengaktifkan pencatatan jalur.

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

Mendukung

Suka sumber terbuka? Menikmati proyek saya?
Dukungan Anda dapat menjaga momentum ini tetap berjalan! Pertimbangkan untuk memberikan donasi untuk mendorong terciptanya perangkat lunak sumber terbuka yang lebih inovatif.