Negaliu praleisti progos pasidalinti dar vienu kodo gabaliuku. Gana seniai, o jei tiksliau, beveik prieš porą metų nutariau susikurti tinklaraštį naudojantis Blogger paslaugomis. Tik net neįtariau, jog tai sukels keletą keblumų. Pavyzdžiui, pastebėjau, kad Blogger naudoja specifines sąlygas ir kintamuosius, kurių nežinant neįmanoma sukonstruoti norimos temos, bet net ir juos naudojant šablone ne visada gauni tiek informacijos kiek iš API. Tikrai verta pabrėžti ir tai, jog dauguma šios turinio sistemos plėtinių pavyzdžių internete smarkiai atsilieka nuo šiuolaikinių standartų ir neveikia arba veikia tik dalinai. Todėl reikėjo išbandyti šį tą naujo.

Tuo metu jau turėjau šiek tiek Javascript patirties sprendžiant panašias situacijas. Tad buvo įdomu pabandyti sukurti keletą puslapio elementų naudojantis Blogger API V3.

Blogger API V3 - programuojama prieigos sąsaja (arba tiesiog API) į kurią nusiuntus GET užklausą su turimu prieigos žetonu (token) galima gauti JSON formato srautą, kuriame talpinama informacija apie įrašus (paveiksliukai, pavadinimai, įrašo turinys ir nuorodos).

Karuselės HTML kodas

Čia pateiktas minimalus karuselės kodas. Geriau įsižiūrėjus galima pastebėti ketvertą statiškai įtrauktų <li> elementų. Jie sukurti statiškai, nes pasirinkau rodyti būtent tokį skaičių naujausių paveikslėlių su nuorodomis.

<div class='container-fluid'><div class='row text-center'><div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'><div class='carousel slide carousel-fade' data-ride='carousel' id='carouselId'>
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='#carouselId'></li>
<li data-slide-to='1' data-target='#carouselId'></li>
<li data-slide-to='2' data-target='#carouselId'></li>
<li data-slide-to='3' data-target='#carouselId'></li>
</ol>
<div class='carousel-inner' role='listbox'>
</div><a class='carousel-control-prev' data-slide='prev' href='#carouselId' role='button'>
<span aria-hidden='true' class='carousel-control-prev-icon'></span>
<span class='sr-only'>Previous</span>
</a>
<a class='carousel-control-next' data-slide='next' href='#carouselId' role='button'>
<span aria-hidden='true' class='carousel-control-next-icon'></span>
<span class='sr-only'>Next</span>
</a>
</div></div></div>

Javascript dalis

Visų pirma, šioje dalyje vykdoma užklausa į API endpoint (nuorodą iš kurios galima gauti įrašus). Užklausos metu nurodoma, kad norima gauti keturis naujausius įrašus (jei jie paskelbti) bei jų paveikslėlius Po šio žingsnio gaunamas atsakas, kuris yra apdorojamas ir paverčiamas JSON formatu. Toliau vyksta kiekvieno įrašo paveikslėlių nuorodų apdorojimas (keičiamas plotis) ir <div class="carousel-item"> elementų talpinimas į karuselę.

<script defer='defer'>
       window.addEventListener('load', (event)=>{
       fetch('https://www.googleapis.com/blogger/v3/blogs/1016451689931209365/posts?maxResults=4&status=live&fetchImages=true&fetchBodies=false&key=12345678910').then((res)=>res.json()).then((d)=>{
    d.items.forEach(element => {
        let newarsrc = element.images[0].url; let photoUrl; 
        if(newarsrc.includes('/d/')){photoUrl=newarsrc.replace('/d/','/w600-l10-e3/');} 
        else if(newarsrc.includes('/s16000/')){photoUrl=newarsrc.replace('/s16000/','/w800-l10-e3/')} else{photoUrl=newarsrc.replace(/sBd{3,4}/,'w800-l10-e3');}        
        document.querySelector(".carousel-inner").innerHTML+='<div class="carousel-item"><a href="'+element.url.replace('http','https')+'" style="text-decoration:none;"><img style="width:100%;filter:contrast(70%);" data-src="'+element.images[0].url+'" src="'+photoUrl+'" class="lazyload lozad" alt="altiusImage" style="width:100%;height:25rem;"></a><div class="carousel-caption d-md-block d-sm-block d-xs-block d-lg-block"><a href="'+element.url.replace('http','https')+'" style="text-decoration:none;color:white;"><h3>'+element.title+'</a></h3></div></div>';
        document.querySelectorAll('.carousel-item')[0].classList.add('active');
    });
})
       }); 
   </script>

Na, o kodo dalis esanti žemiau yra atsakinga už pirmojo karuselės įrašo padarymą aktyviu (jam pridedana ‘active’ klasė).

document.querySelectorAll('.carousel-item')[0].classList.add('active');

Vienintelė dalis, kurią reikia pakeisti yra &key=12345678910. Po ženklo lygu reikėtų įdėti savo prieigos žetoną (token). Jį gauti galima iš:

“Google Dev Console”

Prisijungus tereikia paspausti “Enable API’s and Services”, pasirinkti norimą API (šiuo atveju tai būtų Blogger API V3) ir prisiskirti norimus kredencialus (Credentials).

Įspėju, kad Blogger API suteikia ribotą užklausų kiekį per mėnesį (10,000). Todėl neverta bandyti generuoti visos esamos svetainės su Javascript.

Visa pateikiama informacija - asmeninė autoriaus nuomonė. Kilus naiškumams rekomenduojama susisiekti elektroniniu paštu: admin@artefaktas.eu