Процесът на разработване на уебсайт се развива всеки ден.

Имаше време, когато разработвахме сайтове само с 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]. Бих искал да видя как ще го използвате за бъдещите си проекти.