Процесът на разработване на уебсайт се развива всеки ден.
Имаше време, когато разработвахме сайтове само с html и css. По-късно JS се появява и революционизира играта за уеб разработка.
Сега има няколко предни рамки (React, Angular, Svelte, Vue) за разработване на почти всеки тип уебсайтове.
Тези рамки са много полезни и могат да ви помогнат да кодирате изчистени и функционални дизайни, но недостатъкът е, че въвеждат много javascript в кода.
Ами ако просто искам да направя своя html код лесен за поддръжка, без да използвам толкова тежки рамки и машини?
Може да си помислите какво точно се опитвам да постигна и защо да не използвам рамка, когато те очевидно са полезни.
Ще се опитам да обясня моята ситуация:
Бях нает да направя фейслит на уебсайт за фармацевтична марка Emcure. Работата беше да проектират техния уебсайт в wordpress от нулата.
Срокът беше доста кратък. Сега може би си мислите каква е сделката тук?
Всъщност говорим за сайт от 50 страници, където всяка страница има уникален дизайн. Клиентът не беше сигурен за дизайна, който видя в Adobe XD, и искаше да го проектирам в HTML/CSS/JS. Цялото съдържание трябва да е там, дори формата за контакт трябва да работи. За да могат да споделят отзивите си.
След преобразуването на XD дизайна в html те ме занимаваха с толкова много промени в съдържанието и дизайна.
Това не беше идеалният начин за правене на уеб проект, но нещата вървяха доста гладко. Но след това в един момент осъзнах, че за основни промени трябва да го внедря в 50 html файла, като разработчик не съм фен на повтарянето на едни и същи неща отново и отново.
Тъй като редовно пиша код в реакция, липсваше ми гъвкавостта на частичните елементи. С други думи, ако има начин да използвам повторно html компонент или малка част от кода, това ще реши проблема ми, защото тогава няма да се налага да правя промени в тези 50 страници.
Потърсих машини за HTML шаблони и, честно казано, вече има толкова много опции, които са много по-зрели и мощни. Този, който наистина харесах, се казва MarkoJS, но търсех нещо много леко и лесно за използване, нещо, което решава проблема ми, който в момента е частичен.
Реших да кодирам един от нулата, имайки предвид моите изисквания. Така се появи Gluu.
Скучно? наистина съжалявам, но трябваше да споделя причината, поради която правя това, което правя...
В момента Gluu е в началния си етап (версия v0.0.17), където все още лъскам кода му и го правя по-използваем.
Как да го използвам?
За да използвате Gluu, трябва да имате инсталирани Nodev14 и NPM.
създайте нов npm проект и инсталирайте зависимостта на gluu:
npm i gluu
За да инициализирате проекта, въведете тази команда:
npx gluu init
Ще направи две директории (частични)
Сега ще запишем нашите компоненти за многократна употреба в частична папка
Тези три реда код (показани на изображението по-горе) могат да се използват повторно в целия проект като частичен, така че сега, в случай че искам да променя нещо по-късно в тази карта, мога да го направя в този частичен файл и това ще се отрази в всички места, където се използва.
сега, за да направим частичното по-практично и полезно, нека видим как да предаваме данни към него.
В горния пример имаме h1 таг, вместо да го кодирам твърдо, би било по-добре, ако мога да предам данни към него.
Нека да видим как може да се направи:
Както можете да видите, замених твърдо кодираното съдържание с променлива {title}. Сега ще мога да използвам частичното толкова пъти, колкото искам с уникални заглавия. Това е истинската сила на частичното.
Сега нека да видим как да импортирате частично в обикновен html файл.
Gluu може да разпознава различни персонализирани тагове, които не са естествени тагове. Частичният етикет е един от тях. За да използвате част от вашия проект html, просто добавете кода по-долу:
‹partial name=”частично име на файл” variableName=”value”›
Малко факти за частичните:
- Всеки html файл в частичната папка може да се използва като компонент за многократна употреба.
- За да импортирате частичния, трябва да се използва частичен етикет. Всеки частичен таг трябва да има атрибут име с частичен път. (Пътят трябва да е относителен към частичната папка, независимо от дървото, където се използва)
- За да използвате параметъра вътре в частичното, просто използвайте {variable}. Променливите могат да се използват многократно в частичния.
- Не всички данни могат да бъдат изпратени чрез параметри, поради което частичните също могат да имат вложено съдържание.
- Partial може да се използва като дете на друг partial.
- За да използвате вложено съдържание вътре в частично използваната променлива{content}
Как да прехвърлите съдържание към частично?
‹ignore› Таг
Тагът за игнориране е доста интересен и може да стане удобен, когато проектирате частично само с помощта на live-сървър във VSCode.
Да кажем, че проектирам частично, което изисква някои css/js, но не искам те да бъдат импортирани в крайния html. нека приемем, че index.html също ще има този css/js, така че няма смисъл да предаваме тези стилове и скриптове.
Как да се справим с това?
Тагът за игнориране ни позволява да игнорираме част от съдържанието (html/css/js) в производствения код. Те ще съществуват в частичен файл и ще работят според очакванията, но няма да бъдат добавени към крайния html файл. Нека го видим в действие:
Това е много полезно, когато проектирате частично самостоятелно.
Сега, когато всичко е готово, за да създадете окончателни файлове, изпълнете тази проста команда:
npx gluu
Той ще генерира всички html файлове в папката dist. Можете безопасно да ги качите или да ги използвате, както искате.
Ограничения:
- Трябва да създавате файловете всеки път, когато трябва да видите промените.
- Частичните не могат да изпращат данни до родителския html файл.
- Няма цикли и условия, исках да го направя прост и лесен за използване. Добавянето на нежелани функционалности ще го направи по-подобен на други рамки. Което ще провали цялата цел.
Последни думи
Използвал съм го в няколко проекта досега и съм много доволен от това, което предоставя. Наясно съм, че има място за подобрение и съм склонен да го подобрявам с времето.
В случай, че използвате го намерите за полезно и имате някаква обратна връзка/предложения, моля, пишете ми на [email protected]. Бих искал да видя как ще го използвате за бъдещите си проекти.