Reading time: 4 minutes

Hugo ir Bootstrap | Bootstrap karuselės kodas



newpost hugo bootstrap carousel



Jei nenori išsamesnių paaiškinimų, visą kodą rasi pateiktą apačioje.

Šiek tiek informacijos

Ši dalis gauna keturis naujausius įrašus iš Hugo generatoriaus. Kiekvienam įrašui priskiriamas atitinkamas indeksas. Kadangi {{range}} veikia kaip įprastai gerai žinomas for ciklas, tai pirmąjam gautam įrašui priskiriama indekso vertė lygi nuliui. Antrojo įrašo indekso vertei priskiriamas 1 ir t.t. kylant iki nurodyto skaičiaus.

{{range $index, $element := first 4 .Site.RegularPages }}
<li data-target="#carouselExampleIndicators" data-slide-to="{{$index}}" class="active"></li>
{{end}}

Ši dalis kiek sudėtingesnė. Bet ją suprasti irgi nėra sunku. Joje vyksta tas pats keturių naujausių įrašų paieškos ciklas, bet skirtumas tik tas, jog jei suradus pirmajį įrašą ir patikrinus jo indekso vertę ši yra lygi nuliui, sugeneruojamas <div class="carousel-item active"> elementas. Jis reikalingas tam, kad būtų galima nurodyti pirmąjį aktyvų karuselės elementą (be šio žingsnio karuselė neveiks).

{{range $index, $element := first 4 .Site.RegularPages }}   
                <a aria-label="to article" style="text-decoration: none !important;" href="{{ .Permalink }}">      
                    {{ if (eq $index 0) }}
                    <div class="carousel-item active">
                    {{else}}
                    <div class="carousel-item">
                    {{end}}
                        {{ with .Params.image }} 
                        <img src="{{ . | absURL}}" style="height:22rem !important;width:100% !important;max-width:100% !important;" alt="{{ . | absURL}}"/>
                        {{else}}
                        <img src="{{ .Site.Params.ogimage | absURL }}" style="height:22rem !important;width:100% !important;max-width:100% !important;" alt="{{ .Site.Params.imgalt }}"/>
                        {{end}}
                        <div class="carousel-caption d-block">
                          <h5><a aria-label="to article" style="text-decoration: none !important;color: white !important;" href="{{ .Permalink }}">{{ .Title }}</a></h5>
                        </div>
                      </div>
                    </a>   
                {{ end }}

Čia vyksta paveikslėlių sutikrinimas. O jei tiksliau, tai tikrinama ar įrašams yra priskirta po paveikslėlį. Jeigu ne, karuselė panaudoja paveikslėlį, kurio nuoroda nurodyta config.toml faile. Jeigu taip, paveikslėlis paimamas iš įrašo.

 {{ with .Params.image }} 
                        <img src="{{ . | absURL}}" style="height:22rem !important;width:100% !important;max-width:100% !important;" alt="{{ . | absURL}}"/>
                        {{else}}
                        <img src="{{ .Site.Params.ogimage | absURL }}" style="height:22rem !important;width:100% !important;max-width:100% !important;" alt="{{ .Site.Params.imgalt }}"/>
                        {{end}}

Visas karuselės kodas

Dalinuosi visu Bootstrap karuselės kodu pritaikytu Hugo statinių puslapių generatoriui.

  <div class="col-lg-8 col-md-8 mx-auto mt-2 mb-2 col-sm-12 col-xs-12">
    <div class="card">
        <div class="card-body" style="padding:0 !important;">
            <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
                <ol class="carousel-indicators">
                    {{range $index, $element := first 4 .Site.RegularPages }}
                  <li data-target="#carouselExampleIndicators" data-slide-to="{{$index}}" class="active"></li>
                    {{end}}
                </ol>
                <div class="carousel-inner">
        
                {{range $index, $element := first 4 .Site.RegularPages }}   
                <a aria-label="to article" style="text-decoration: none !important;" href="{{ .Permalink }}">      
                    {{ if (eq $index 0) }}
                    <div class="carousel-item active">
                    {{else}}
                    <div class="carousel-item">
                    {{end}}
                        {{ with .Params.image }} 
                        <img src="{{ . | absURL}}" style="height:22rem !important;width:100% !important;max-width:100% !important;" alt="{{ . | absURL}}"/>
                        {{else}}
                        <img src="{{ .Site.Params.ogimage | absURL }}" style="height:22rem !important;width:100% !important;max-width:100% !important;" alt="{{ .Site.Params.imgalt }}"/>
                        {{end}}
                        <div class="carousel-caption d-block">
                          <h5><a aria-label="to article" style="text-decoration: none !important;color: white !important;" href="{{ .Permalink }}">{{ .Title }}</a></h5>
                        </div>
                      </div>
                    </a>   
                {{ end }}
            </div>
              
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>    
        </div>
      </div>
  
</div>

Nereikėtų pamiršti config.toml failo, kurio parametrai turėtų atrodyti šitaip:

[params]
  ogimage = "/example.jpg"
  imgalt="altiusimage"

Numatytąjį paveikslėlį reikėtų įkelti į viešą direktoriją, kaip kad pavyzdžiui:

Pvz: E:\hugosite\static

Žemiau pateiktas pavyzdys kaip turėtų atrodyti įrašo šablonas:

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
tags: [newpost]
---

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

Comments

comments powered by Disqus