ChartJS
Jag testar att inkludera en Chart.js-graf i bloggposten med hjälp av Jekyll’s template-system. Såhär ser det ut:
Att baka in chartjs-grafer i en bloggpost fungerar alldeles utmärkt. För att göra små minikomponenter som kan användas i sidor eller bloggposter så lägger man dessa .html-filer i underkatalogen _includes och sedan skriver man {% snippetfilnamn.html %} i själva markdownkoden så kommer den att läsas in när sidan genereras och bli del av bloggpostens genererade html-kod. I html-kodsnutten så kan man t.ex. lägga till egen javascript och annat kul som man vill kunna lägga till runt om i webbsajten.
Jag la till en script-tagg som laddar chartjs från cdnjs och sedan snodde jag det första exemplet på Chart.js-hemsidan och la in hela klabbet i en fil som heter chartjs.html i underkatalogen _includes. Därefter går det att inkludera filen enligt ovan och den dyker upp.
Lärdom om mallspråket Liquid
När jag skrev det ovanstående stycket så tänkte jag inte på att man måste gömma måsvingarna och procenttecknen i markdownfilen eftersom den annars inte fattar att det är exempelkod som ska visas och inte en liquid-platshållare. Jag fick följande felmeddelande i Github pages när jag pushade och sidorna skulle byggas:
Tricket för att “gömma” liquidkoden och visa den som den egentligen skrivs är att omsluta kodexemplet med taggarna {% raw %} *kodexemplet här* {% SLUTTAGG %} och då fungerar det. OBS: Man får ersätta SLUTTAGG i exemplet ovan med ordet endraw. Att nästla flera raw/endraw inuti varandra verkar nämligen skapa strul. Förmodligen ett lite buggigt beteende i Liquid (Github pages använder v 4.0.0 i skrivande stund) där raw-taggen matchar på sluttaggen endraw, oavsett var den ligger. Ett relativt svårlöst problem om man inte inför ytterligare ett sätt att gömma tecken och strängar eller om man inför några magiska konventioner (typ att man bara kan ha ett liquid-kodcitat per stycke och att man sedan matchar taggarna “utifrån och in”) per stycke.
Här finns en Stack Overflow-postning om raw-taggen och här finns dokumentationen för taggen.