Sivuston komponentit. WordPressistä Jekyll 2: een

Että artículo etupäätä Aloin selittää eroja kolmen tyyppisten työkalujen välillä blogin luomiseen ja miksi nämä erot saivat minut päättämään hylätä käyttämäni vaihtoehdon; WordPress, Jekyllin kaltaisten staattisten sivustojen rakentajien puolesta.

Joten kunkin edut ja haitat ymmärretään paremmin Meidän on määriteltävä joitain termejä ja havainnollistettava niitä esimerkillä, hypoteettisella puutarhanhoitoa koskevalla blogilla.

Sivuston komponentit

Sivuston kolme perusainesosaa ovat:

• HTML: Tarjoaa sivuston perusrakenteen
• CSS: käsittelee sisällön esityksen.
• Javascript: Hallitsee sivuston eri osien vuorovaikutteisuutta.

HTML

HTML tarkoittaa HyperText Markup Language: Sitä kutsutaan "Markup Language", koska tunnisteiden avulla tunnistaa erityyppiset sisällöt ja tarkoitukset, jotka kullakin niistä on verkkoon. Voit jo ohittaa asiantuntijan, joka katsoo halveksivasti niitä, jotka sanovat sen olevan ohjelmointikieli.

Esimerkiksi nykyinen eritelmä HTML5 käyttää seuraavia tunnisteita

• päätä osoittamaan, että kyseisessä tilassa on asiakirjaa koskevia teknisiä tietoja.
• keho kehystää sivulla näytettävän sisällön.
• artikkeli pääsisältöä varten
• sivusivulle
• alatunniste sivun alaosaa varten.

Väitetyssä puutarhanhoitoblogissamme olisi jotain tällaista.

Laitoin sen kuvan, koska turvallisuuspolitiikkaa Linux Adictos Ne eivät salli HTML-koodin sisällyttämistä.

Jos kopioit tämän tekstin tekstieditoriin ja tallennat sen nimellä index.html, näet tekstin Tämä on puutarhanhoitoblogi.

Koodin ensimmäinen rivi kertoo selaimelle, että seuraava on tulkittava HTML: ksi, toinen rivi osoittaa, että tunnisteet alkavat täältä ja että sivuston kieli on argentiinan espanja. Pään sisällä merkistö ja blogin otsikko on merkitty.

Kohdassa elin näemme, että lause on suljettu toiseen tarraan,

Tämä kertoo selaimelle, että sen on kohdeltava sitä kappaleena.

Merkkikoodauksen lisäksi metaparametri sallii muun tyyppisten tietojen sisällyttämisen, vaikka niitä ei näy selaimessa, mutta ne ovat hyödyllisiä hakukoneille.

Esimerkiksi metanimen kirjoittaja-sisältöparametri tunnistaa sivun tekijän, kun taas metanimen kuvauksen sisältöparametri tiivistää hakukoneiden sivun sisällön.

Pään sisällä on vielä kaksi elementtiä, jotka ovat linkit tyylitaulukoihin ja Javascript-koodiin.

CSS

Jos muistat esimerkkisivumme, vain lause näytettiin "Tämä on puutarhablogini." Tietenkin verkkosivuston on oltava houkuttelevampi kuin tyylitaulukkoa tarvitaan.

Tyylitaulukot ovat ne, jotka määrittelevät, miten sivun eri elementit näytetään.

Jos esimerkiksi haluamme, että tekstimme näytetään mustalla taustalla ja keltaisilla kirjaimilla, luomme tiedoston nimeltä my-style-css.ss ja kirjoitamme nämä rivit

p {
background-color: black;
väri: keltainen;
}

Vaihdamme esimerkkisivun koodiksi:

Muista, että molempien tiedostojen on toimittava samassa kansiossa, jotta se toimisi.

Javascript

Vaikka tänään, HTML5 ja CSS voivat antaa paljon animaatioita sivustolle. Jos tarvitsemme monimutkaisempaa vuorovaikutteisuutta, meidän on käytettävä Javascriptia.

Javascript on ohjelmointikieli, jonka avulla verkkosivuston sisältöä voidaan muuttaa käyttäjän käyttäytymisen mukaan.

Staattisena pysyvällä verkkosivustolla pyrkimys luoda sivuja tyhjästä voi korvata alhaisella resurssien kulutuksella ja mukautettavuudella. Blogi on kuitenkin erityinen verkkosivusto, joka vaatii jatkuvaa huomiota. Ja avain on sisällön määrä ja moninaisuus. Siksi kaiken automatisoitavan on oltava automatisoitu. On totta, että kaikille sivuille yhteiset tiedot voidaan kopioida ja liittää. Mutta luota minuun, virheitä tehdään ja niitä on vaikea löytää.

Huomaa, kuinka monta koodia tarvitaan yhden rivin näyttämiseen ja sen värin muuttamiseen. Keskimäärin blogiviestissä on 300 sanaa, pari tekstitystä ja kuvaa. Ja sinun on yritettävä saada kaikki näyttämään hyvältä erilaisilla näyttömuotoilla.

Seuraavissa artikkeleissa näemme kuinka käsitellä tätä monimutkaisuutta WordPressin kanssa, Jekyll ja kehys Bootstrap