الصفحة الرئيسية>كود مصدر ASP>فئات أخرى
تنزيل

vite-plugin-html-inject

قم بتقسيم 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 >

سيؤدي هذا إلى ظهور ملف 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 ,
	} ,
} ) ;

يدعم

أحب المصادر المفتوحة؟ هل تستمتع بمشروعي؟
دعمكم يمكن أن يحافظ على استمرار الزخم! فكر في التبرع لدعم إنشاء المزيد من البرامج مفتوحة المصدر المبتكرة.

عبر كو فاي اشتري لي قهوة عبر باي بال
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل