vite plugin html inject Download - vite plugin html inject Source Download

vite plugin html inject

หมวดหมู่อื่นๆ

vite-plugin-html-inject

ดาวน์โหลด

Vite-plugin-html-inject

แยก index.html ของคุณ 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 และ runtime สร้าง index.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 >
...

การปรับแต่ง

คุณสามารถปรับแต่งชื่อแท็กตัวโหลดและชื่อแอตทริบิวต์แหล่งที่มา
ตัวอย่างเช่นการกำหนดค่าเช่น:

 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 ,
	} ,
} ) ;

สนับสนุน

รักโอเพ่นซอร์ส? สนุกกับโครงการของฉัน?
การสนับสนุนของคุณสามารถทำให้โมเมนตัมดำเนินต่อไปได้! พิจารณาการบริจาคเพื่อกระตุ้นการสร้างซอฟต์แวร์โอเพ่นซอร์สที่เป็นนวัตกรรมมากขึ้น