06-11-2020

Plibonigi mian retejon per simplaj trukoj de GoHugo

2 minutoj

Kiel vi eble vidis, mi komencis vere labori en mia retejo lastatempe, mi unue ŝanĝis al memfarita temo (la artikolo troveblas ĉi tie) kaj tiam komencis labori pri pli malgrandaj tajloj. de la temo aldonante malvarmetajn funkciojn kiel ekzemple kartoj de Twitter aŭ integrante la protokolon OpenGraph.

Kiel vi eble scias, mia retejo uzas la retejon-generilon GoHugo (cetere laŭ licenco MIT) kiu estas tre facila por uzi kaj havas vere bonan integriĝon kun Gitlab Pages.

Funkciigi OpenGraph estas unu el la unuaj vere facilaj paŝoj por havi pli belan ĉeeston kiam via retejo estas ligita al alia loko. Ĝi esence montras kiel karteton kun iom da informoj kiel la nomo de la retejo, la aŭtoro, la priskribo de la paĝo kaj bildo. La karto de Twitter baze estas la sama afero krom por Twitter.

Por aldoni OpenGraph al viaj paĝoj, simple aldonu ĉi tion en la “” de via ŝablono:

1
    {{ template "_internal/opengraph.html" . }}

Lin sama okazas kun la kartoj de Twitter:

1
    {{ template "_internal/twitter_cards.html" . }}

Je la fino, la OpenGraph devas produkti tian rezulton:

1
2
3
4
5
6
7
<meta property="og:site_name" content="Jae" />
<meta property="og:locale" content="nn_NO" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://jae.moe/blog/nov2020-improvements/" />
<meta property="og:title" content="Improving my website with simple GoHugo tricks" />
<meta property="og:image" content="http://jae.moe/images/logo.svg" />
<meta property="og:description" content="As you may have seen, I started to really work on my website lately..." />

Kaj la Twitter-kartoj:

1
2
3
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Improving my website with simple GoHugo tricks"/>
<meta name="twitter:description" content="As you may have seen, I started to really work on my website lately..."/>

Iuj aliaj plibonigoj rilatas al kutimaj mallongaj kodoj, kiel tiu, kiun mi kreis por spoilers, kiu montras kiel tio:

Don't open me

Boo!

Kiu generas ĉi tiun HTML-eliron:

1
2
3
4
<details>
 <summary>Don&#39;t open me</summary>
 <p>Boo!</p>
</details>

Kiel vi vidas, ĉi tio efektive estas vere facile plibonigi malgrandajn pecojn de via retejo, se vi vere volas.

Tamen, se vi ne estas la prizorganto de la temo, kiun vi nun uzas, malfermu numeron dirante al la prizorganto (j), ke tiuj mallongaj kodoj efektive ekzistas aŭ, se vi povas, kontribuu!

Tamen, pli da mallongaj kodoj haveblas ĉe la retejo de GoHugo inkluzive de tiuj por Youtube, Instagram aŭ Twitter.

Jen ĉio por hodiaŭ, Ni revidos vin venontfoje! Se vi ŝatas mian enhavon, ne forgesu aboni tra RSS!