Reading time: 3 minutes

Twitter trumpasis kodas Hugo puslapių generatoriui

Fri, Apr 1, 2022

Hugo puslapių generatorius bei jo teikiamos galimybės tikrai nėra pakankamai išnagrinėti. Verta pabrėžti dar ir tai, jog šiuo metu nėra sukurta pakankamai trumpųjų kodų, kuriuos galėtų naudoti platesnė naudotojų dalis.

Šįkart dalinuosi Twitter Embed kortelių trumpuoju kodu, kurį sukūriau remdamasis oficialia Twitter Javascript API dokumentacija ir praeitais šablonais.

twitter.html

Trumpai ir glaustai paaiškinsiu apie vykdomus veiksmus tam, kad būtų lengviau suprasti, jei atvykote į šį puslapį ir nelabai nutuokiate apie Hugo ar Javascript:

Paimamama atributo twitterlink reikšmė (https://twitter.com/artefaktas/status/1507071000306929665).
Nuoroda skeliama ties dalimi status/. Toliau paimama antroji šio perskeltos nuorodos dalis. Taip gaunamas TweetId arba - unikalus tweet pranešimo identifikacinis numeris.
Pradedamas vydyti Javascript kodas, kurio metu tikrinama ar naršyklė jau turi aprašytą window.twttr() funkciją. Jei ne, tai sukuriamas script elementas su Twitter Javascript API šaltinio nuoroda. Tuomet šis elementas pridedamas prie document dalies. onload funkcija apibrėžia veiksmus vykdomus twitter skripto krovos metu. Šiuo atveju patikrinama ar apibrėžta window.twttr.widgets dalis. Jei taip ir yra, panaudojama createTweet funkcija ir pagal id sukuriama nauja Embed kortelė. Jei window.twttr() funkcija aprašyta, tai sukuriama kortelė.

<twitter>
    {{ $twitterLink := .Get "twitterlink" }}
    {{ $className := split $twitterLink "status/" }}
    {{ $className := index ($className) 1 }}
    <div id={{ $className }}></div>
    <script defer>
        if(!window.twttr){
            window.twttr = (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0],
            t = window.twttr || {};
            if (d.getElementById(id)) return t;
            js = d.createElement(s);
            js.id = id;
            js.src = "https://platform.twitter.com/widgets.js";
            js.onload=()=>{
                let tw = {{ $className }};
                if(window.twttr.widgets){
                window.twttr.widgets.createTweet(
                tw,
                document.getElementById(tw),
                {
                    align: 'left'
                })
                .then(function (el) {
                    console.log("Tweet displayed.");
                });
             }

            }
            fjs.parentNode.insertBefore(js, fjs);
        
            t._e = [];
            t.ready = function(f) {
            t._e.push(f);
            };
            return t;
        }(document, "script", "twitter-wjs"));
        }
        else{
            let tw = {{ $className }};
            if(window.twttr.widgets){
            window.twttr.widgets.createTweet(
            tw,
            document.getElementById(tw),
            {
                align: 'left'
            })
            .then(function (el) {
                console.log("Tweet displayed.");
            });
        }
        }
    </script>
    </twitter>

<twitter twitterlink="">

Apskliauskite twitter elementą tarp skliaustų: {{  }}. Tarp twitterlink kabučių įdėkite nuorodą iškopijuotą iš naršyklės adreso juostos aplankius pavienį twitter įrašą (Copy ir Paste).

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

Artefaktas.eu is licensed under CC BY-NC-ND 4.0

Twitter trumpasis kodas Hugo puslapių generatoriui

Comments