Скачать vite plugin html inject - vite plugin html inject Source Code Скачать

vite plugin html inject

Другие категории

vite-plugin-html-inject

Скачать

Vite-Plugin-HTML-инъекция

Разделите свой index.html на более мелкие, многоразовые статические статические часы HTML.

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

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

Загрузите эти сладкие отдельные HTML -файлы

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

Передавать статические аргументы в области введенных HTML

Плагин также позволяет вам предоставить ваши чашки HTML некоторыми основными аргументами, поэтому вы можете повторно использовать один и тот же кусок кода в нескольких местах.

Например, вы можете повторно использовать аналогичную ссылку где -то в своем 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 >
...

И это src/some-static-link.htm :

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

Это приведет к созданию индекса DEV и времени выполнения. HTML выглядит как

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

Настройка

Вы можете настроить имя тега Loader и имя атрибута источника.
Например, конфигурация как:

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

заменит:

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

Отладка

По умолчанию вариант отладки отключен. Однако, если вы сталкиваетесь с проблемами загрузки файлов, вы можете включить регистрацию путей.

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

Поддерживать

Любите открытый исходный код? Наслаждаюсь моим проектом?
Ваша поддержка может поддерживать импульс! Рассмотрим пожертвование, чтобы подпитывать создание более инновационного программного обеспечения с открытым исходным кодом.