Content Types

Tämä sivu toimii kootusti kahdella tavalla:

1. Näet kaikki sisältötyypit ja shortcodet renderöitynä.
2. Löydät jokaisen esimerkin myös koodiblokista, jotta voit kopioida sellaisenaan.

Shortcodes

Google Photos -kuva

Koodi:

{{< googlephotos >}}
url: https://photos.google.com/u/1/share/AF1QipMqBF6Ajkzb4Tu6Lq0S4KBfuchwvhyYneSFII_3pNiVc8E7XaSHhu8ibYe3N63I7A/photo/AF1QipMF7QJRVXEN-hM8R0SZovxrkd-qUoQAP-VEyXhB?key=TFd2R1o0SlRoR2NEM0hUaEFmZTRfVzF6dnJLNHhn
caption: Esimerkkikuva Google Photos -linkillä.
{{< /googlephotos >}}

Esimerkki:

Google Photos -albumi

Koodi:

{{< googlephotos >}}
url: https://photos.google.com/u/1/share/AF1QipMqBF6Ajkzb4Tu6Lq0S4KBfuchwvhyYneSFII_3pNiVc8E7XaSHhu8ibYe3N63I7A?key=TFd2R1o0SlRoR2NEM0hUaEFmZTRfVzF6dnJLNHhn
caption: Esimerkkialbumi Google Photosissa.
{{< /googlephotos >}}

Esimerkki:

Img-shortcode

Koodi:

{{< img >}}
src: demo.png
alt: Gradienttikuva, jossa sekoittuu taustan tummumus ja korostevärit
sizes: (min-width: 960px) 60vw, 100vw
maxWidth: 1200
quality: 82
{{< /img >}}

Esimerkki:

Externalimg (R2/manifest)

Full:

{{< externalimg >}}
server: static2
name: reiska
alt: Reiska polulla
layout: full
title: Reiska polulla
description: Täysleveä ulkoinen kuva, joka venyy koko sisältöalueen leveydelle ja aukeaa 1920px versiona modaalissa.
{{< /externalimg >}}

Center:

{{< externalimg >}}
server: static2
name: henry-viikset-headshot
alt: Henryllä on viikset
layout: center
title: Keskitetty kuva
description: Kuva vie noin puolet sisältöalueesta ja keskittyy keskelle tekstiblokkia.
{{< /externalimg >}}

Left / Right:

{{< externalimg >}}
server: static
name: reiskasopot
alt: Reiskan katse suuntautuu vasemmalle, polku kaartaa eteenpäin
layout: left
title: Vasen asettelu, Fastmail
description: Puolileveä kuva ja kuvateksti rinnakkain leveillä näytöillä, pinoutuu allekkain mobiilissa. Kuva ladataan static (Fastmail)
{{< /externalimg >}}

{{< externalimg >}}
server: static2
name: reiska
alt: Reiska seisoo polulla ja taustalla näkyy metsän reuna
layout: right
title: Oikea asettelu
description: Kuvateksti vie vasemman palstan, kuva ankkuroituu oikealle; mobiilissa järjestys yhtenä sarakkeena.
{{< /externalimg >}}

Quote ja linkbox

Koodi:

{{< quote >}}
text: Hyvä sisältö on rakennettu kuin hyvä resepti: aineksia on sopivasti ja niille on oikea järjestys.
cite: Sisältöstrategi
{{< /quote >}}

{{< linkbox >}}
title: Tutustu meihin
href: /me/
description: Tiivis näkymä kokemukseen ja teknologioihin, painike vie esittelyyn.
tagline: Linkbox-demo
button: Avaa esittely
{{< /linkbox >}}

Esimerkki:

Värit

Alla taulukko sivuston väreistä (nimi, hex ja esikatselu).

Markdown-syntaksi

Otsikot ja korostus

H4-taso

Lihavointi, kursiivi ja inline code.

Listat

• Lista tukee korostuksia, kursiivia ja lihavoituja sanoja.
• Ulkoinen linkki: Linkki GitHubiin
• Sisäinen linkki: Evästeet

1. Ensimmäinen vaihe: otsikko ja johdanto.
2. Toinen vaihe: korostukset, lainaukset ja listat.
3. Kolmas vaihe: kuvat ja tekniset asetukset.

Lainaus

“Hyvä sisältö on rakennettu kuin hyvä resepti: aineksia on sopivasti ja niille on oikea järjestys.”

Koodiblokki

hugo server -D

Taulukko

Nappulat ja elementit

Painikkeeksi stailattu linkki (HTML):

<p><a class="btn primary" href="/me/">Katso esittely esimerkkinä painikkeesta</a></p>

Katso esittely esimerkkinä painikkeesta

Ghost-painike:

<p><a class="btn ghost" href="/jutut/">Lue jutut</a></p>

Lue jutut

Ideana tämä sivu toimii golden masterina: voit tarkistaa, että jokainen sisältötyyppi renderöityy oikein ja kopioida koodiblokeista tarvittavat shortcodet/HTML-palaset.