Kas yra EJS ir kodėl man jo reikia?
Kuriant žiniatinklio svetainę, kūrėjai gali pasirinkti iš daugybės įrankių. Tinkamų įrankių ir technologijų pasirinkimas gali turėti didelės įtakos projektų efektyvumui ir funkcionalumui. Vienas iš populiariausių žiniatinklio kūrimo įrankių yra EJS, kuris reiškia Embedded JavaScript . EJS yra paprasta „JavaScript“ šablonų kalba, kuri generuoja HTML su paprastu JavaScript. Šiame straipsnyje apžvelgsime, kas yra EJS, kodėl jis reikalingas, ypatybes, kaip jį įdiegti, ir pateiksime išvesties pavyzdį.
Kas yra EJS
EJS arba Embedded JavaScript yra JavaScript šablono variklis, naudojamas žiniatinklio kūrimui, leidžiantis vartotojams generuoti dinaminį HTML žymėjimą naudojant JavaScript kodą HTML šablonuose. Jis skirtas supaprastinti dinaminio turinio pateikimo žiniatinklio programose procesą. Jame yra HTML ir „JavaScript“ derinys, kuris leidžia lengvai generuoti dinaminį turinį pagal duomenis iš programos.
EJS ypatybės
- Paprasta sintaksė: EJS siūlo paprastą sintaksę, kuri sujungia HTML ir JavaScript, todėl ją lengva išmokti ir naudoti.
- Dinaminis turinys: EJS leidžia dinamiškai generuoti HTML ir JavaScript turinį naudojant HTML žymas, taip padidindamas turinio kūrimo lankstumą.
- Išdėstymas ir dalys: EJS palaiko maketus ir dalines dalis, leidžiančias vartotojams suskaidyti šablonus į daugkartinio naudojimo komponentus, sumažinant kodo dubliavimą ir pagerinant priežiūrą.
- Klaidų tvarkymas: EJS pateikia klaidų pranešimus, kurie padeda kūrėjams derinti ir pagerinti bendrą kūrimo patirtį.
Kodėl jums reikia EJS?
- Dinaminis HTML generavimas: EJS leidžia generuoti dinaminį HTML turinį, pagrįstą kintamaisiais, sąlygomis, ciklais ir kita JavaScript logika. Tai ypač naudinga pateikiant dinaminius duomenis, gautus iš duomenų bazių arba API.
- Kodo pakartotinis naudojimas: Naudodami EJS šablonus galite sukurti daugkartinio naudojimo komponentus arba dalis, kurios gali būti įtrauktos į kelis puslapius. Tai skatina kodo moduliškumą ir sumažina jūsų žiniatinklio programų dubliavimą.
- Serverio atvaizdavimas: Naudodami EJS galite atlikti tinklalapių atvaizdavimą serverio pusėje (SSR). SSR yra naudinga SEO (Search Engine Optimization), nes leidžia paieškos sistemoms efektyviau tikrinti ir indeksuoti jūsų turinį, palyginti su kliento pusės atvaizdavimu (CSR), kurį atlieka tokios sistemos kaip „React“ arba „Angular“.
- Lengvas integravimas su Node.js ir Express.js: EJS sklandžiai integruojasi su Node.js ir Express.js, todėl tai yra populiarus pasirinkimas kūrėjams, dirbantiems su serverio JavaScript programomis. Tai lengva nustatyti ir naudoti Express.js projekte.
- Pažįstama sintaksė: Jei jau esate susipažinę su HTML ir JavaScript, išmokti ir naudoti EJS yra paprasta. Sintaksė panaši į HTML su įterptu JavaScript kodu
>žymų, todėl ji pasiekiama įvairaus lygio kūrėjams. - Šablonų paveldėjimas ir išdėstymai: EJS palaiko šablonų paveldėjimą ir maketus, leidžiančius kurti nuoseklius savo tinklalapių maketus. Galite apibrėžti pagrindinį išdėstymą ir išplėsti jį kituose šablonuose, kad būtų lengviau išlaikyti nuoseklią savo programos išvaizdą.
Kaip naudotis EJS?
1 žingsnis: Įdiekite EJS kaip priklausomybę savo projekte
npm install ejs
2 žingsnis: Sukurkite aplanką „Views“ savo projekto kataloge, jei jo dar nėra. Rodinių aplanke sukurkite naują failą su plėtiniu .ejs, pavyzdžiui, index.ejs
3 veiksmas: Norėdami integruoti EJS su Express programoje Express.js, nustatykite EJS kaip peržiūros variklį savo Express programos konfigūracijoje. Ši konfigūracija leidžia „Express“ naudoti EJS rodiniams pateikti.
app.set('view engine', 'ejs'); 4 veiksmas: Pateikite EJS šabloną, jūsų Express maršruto tvarkytuvėse EJS šabloną pateikiame naudodami „res.render()“ ir pateikite reikiamus duomenis, kuriuos reikia perduoti į šabloną.
res.render('hello', { name: 'Geeks' }); Projekto struktūra:
Atnaujintos priklausomybės package.json failas atrodys taip:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' } Pavyzdys: Įdiegimas, skirtas parodyti ejs naudojimą su pavyzdžiu.
HTML EJS exampletitle> head> <body> <h1>Sveiki, <%= name %>!h1> body> html>>> </tag>JavaScript <tag data-text-1='// index.js const express = require('express'); const app = express(); const port = 3000; app.set('view engine', 'ejs'); app.get('/', (req, res) =>{ res.render('labas', { vardas: 'Geeks' }); }); app.listen(port, () => { console.log(`Serveris veikia http://localhost:${port}`); });>> </tag> <p dir='ltr'> <b> <strong>Programos paleidimo veiksmas: </strong> </b> <span>Paleiskite programą naudodami šią komandą iš projekto šakninio katalogo </span> </p> <tag data-text-3='node index.js </pre> </code> <p dir='ltr'> <b> <strong>Išvestis: </strong> </b> <span>Jūsų projektas bus rodomas URL http://localhost:3000/ </span> </p> <p dir='ltr'> <img src='//techcodeview.com/img/ejs-templating-language/39/what-is-ejs-why-do-i-need-it-2.webp' alt='išvestis'> </p> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Bendrinti </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Kas yra EJS ir kodėl man jo reikia?&url=https://www.techcodeview.com/lt/what-is-ejs-why-do-i-need-it"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/lt/what-is-ejs-why-do-i-need-it"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/lt/what-is-ejs-why-do-i-need-it&title=Kas yra EJS ir kodėl man jo reikia?"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Jums Gali Patikti </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/lt/keith-number" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/dsa/34/keith-number.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Keito numeris" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/lt/keith-number">Keito numeris </a>
</h4>
</div> <div class="group">
<a href="/lt/how-build-an-act-study-plan-131984" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/blog/90/how-build-an-act-study-plan.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip sudaryti ACT studijų planą: 4 pavyzdiniai tvarkaraščiai" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/lt/how-build-an-act-study-plan-131984">Kaip sudaryti ACT studijų planą: 4 pavyzdiniai tvarkaraščiai </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Top Straipsniai </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/lt/bash-substring">
<img src="https://techcodeview.com/img/bash-tutorial/53/bash-substring.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Bash poeilutė" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/lt/bash-substring" class="hover:text-tech-500 transition-colors line-clamp-3">Bash poeilutė </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/lt/how-underline-text-css">
<img src="https://techcodeview.com/img/css-tutorial/98/how-underline-text-css.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip pabraukti tekstą CSS?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/lt/how-underline-text-css" class="hover:text-tech-500 transition-colors line-clamp-3">Kaip pabraukti tekstą CSS? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/lt/how-add-checkbox-word">
<img src="https://techcodeview.com/img/ms-word-tutorial/76/how-add-checkbox-word.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip pridėti žymimąjį laukelį programoje Word" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/lt/how-add-checkbox-word" class="hover:text-tech-500 transition-colors line-clamp-3">Kaip pridėti žymimąjį laukelį programoje Word </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/lt/dog-chained-to-front-of-house-in-texas-flood-waters-up-to-her-head-rescue-video">
<img src="https://techcodeview.com/img/trending/65/dog-chained-to-front-of-house-in-texas-flood-waters-up-to-her-head-rescue-video.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Šuo prirakintas prie namo priekio Teksase potvynių vandenyse iki galvos [Gelbėjimo vaizdo įrašas]" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/lt/dog-chained-to-front-of-house-in-texas-flood-waters-up-to-her-head-rescue-video" class="hover:text-tech-500 transition-colors line-clamp-3">Šuo prirakintas prie namo priekio Teksase potvynių vandenyse iki galvos [Gelbėjimo vaizdo įrašas] </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/lt/best-ps2-emulators-android">
<img src="https://techcodeview.com/img/android-tutorial/30/best-ps2-emulators-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Geriausi PS2 emuliatoriai, skirti „Android“." class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/lt/best-ps2-emulators-android" class="hover:text-tech-500 transition-colors line-clamp-3">Geriausi PS2 emuliatoriai, skirti „Android“. </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/lt/how-get-into-cornell-131344">
<img src="https://techcodeview.com/img/blog/08/how-get-into-cornell.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip patekti į Kornelį: 4 ekspertų patarimai" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/lt/how-get-into-cornell-131344" class="hover:text-tech-500 transition-colors line-clamp-3">Kaip patekti į Kornelį: 4 ekspertų patarimai </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/lt/java-jbutton">
<img src="https://techcodeview.com/img/java-swing/69/java-jbutton.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java JButton" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/lt/java-jbutton" class="hover:text-tech-500 transition-colors line-clamp-3">Java JButton </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/lt/9-ways-shut-down-windows-11">
<img src="https://techcodeview.com/img/geeks-premier-league-2023/30/9-ways-shut-down-windows-11.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="9 būdai išjungti „Windows 11“." class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/lt/9-ways-shut-down-windows-11" class="hover:text-tech-500 transition-colors line-clamp-3">9 būdai išjungti „Windows 11“. </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/lt/how-fill-out-check-131396">
<img src="https://techcodeview.com/img/blog/44/how-fill-out-check.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip užpildyti čekį, žingsnis po žingsnio" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/lt/how-fill-out-check-131396" class="hover:text-tech-500 transition-colors line-clamp-3">Kaip užpildyti čekį, žingsnis po žingsnio </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/lt/computer-network-components">
<img src="https://techcodeview.com/img/computer-network/59/computer-network-components.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kompiuterių tinklo komponentai" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/lt/computer-network-components" class="hover:text-tech-500 transition-colors line-clamp-3">Kompiuterių tinklo komponentai </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Kategorija </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/lt/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Dienoraštis
</a> <a href="/lt/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java Konvertavimas
</a> <a href="/lt/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Matematika
</a> <a href="/lt/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java Kolekcijos
</a> <a href="/lt/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Skirtumai
</a> <a href="/lt/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java Eilutė
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Įdomios Straipsniai </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/maths-class-9/76/surface-area-cone.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kūgio paviršiaus plotas" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/lt/maths-class-9-cat/">Matematika-9 Klasė </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/surface-area-cone">Kūgio paviršiaus plotas </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/coa-tutorial/60/booths-multiplication-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Bootho daugybos algoritmas" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/lt/coa-tutorial/">Coa Pamoka </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/booths-multiplication-algorithm">Bootho daugybos algoritmas </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/best/47/best-movies-watch-with-friends.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Geriausi filmai, kuriuos galima žiūrėti su draugais" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/lt/best/">Geriausia </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/best-movies-watch-with-friends">Geriausi filmai, kuriuos galima žiūrėti su draugais </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/java-tutorial/20/how-enable-java-chrome.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip įjungti Java naršyklėje Chrome" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/lt/java-tutorial/">Java Pamoka </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/how-enable-java-chrome">Kaip įjungti Java naršyklėje Chrome </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/45/how-get-perfect-1600-sat-score.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip gauti puikų 1600 SAT balą, ekspertas" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/lt/blog/">Dienoraštis </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/how-get-perfect-1600-sat-score-131286">Kaip gauti puikų 1600 SAT balą, ekspertas </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/java-collections/80/java-deque-interface.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java Deque sąsaja" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/lt/java-collections/">Java Kolekcijos </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/java-deque-interface">Java Deque sąsaja </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Visos Teisės Saugomos |
<a href="//www.techcodeview.com/hu/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>