Sukurkite savo „Ghost“ tinklaraščio temą

Vaiduoklis yra nauja ir nemokama atviro kodo tinklaraščių platforma. Sėkmingai finansuotas per „Kickstarter“, jis viršijo savo pradinį prašymą skirti tik 25 000 svarų, o 2013 m. Gegužę bendruomenė finansavo daugiau nei 196 000 svarų. Pradėjo Johnas O'Nolanas, „Ghost“ turi unikalų tikslą - suteikti tinklaraštininkams paprastą sąsają, leidžiančią jiems rašykite ir skelbkite jų turinį be vargo ir nesiblaškydami dėl tradicinių platformų tobulėjimo.

Žiūrėkite išskirtinį šios mokymo programos ekraną:



„Ghost“ buvo gražiai suprojektuotas nuo pat pradžių. Jo švarus ir supaprastintas vartotojo sąsaja leidžia greitai naršyti archyve, todėl galite praleisti mažiau laiko tvarkydami savo tinklaraštį ir daugiau laiko rašydami tinklaraščius. Jis turi išmanųjį rašymo ekraną, kuriame naudojamas „Markdown“ su realiuoju laiku rodomu ekranu dešiniajame ekrane, ir paprastą „drag and drop“ funkciją, kad vaizdai būtų pridėti vietoje.

„Ghost“ turi tris pagrindinius principus: jis sukurtas vartotojams, o ne kūrėjams, pavyzdžiui, daugeliui tinklaraščių ir TVS platformų; platforma turi MIT licenciją, todėl naudodamiesi šia platforma galite daryti tai, kas jums patinka, su keliais apribojimais; galiausiai tai sukurta meilei. „Ghost“ yra ne pelno organizacija; jos motyvai yra paremti tinklaraštininkus, o ne patenkinti investuotojus. Šioje pamokoje aš jums parodysiu, kaip įdiegti ir nustatyti „Ghost“ vietoje ir sukurti pirmąją „Ghost“ temą.

Atsisiųskite palaikymo failai šiai pamokai .

Norėdami pradėti kurti „Ghost“ temą, pradėkite „Ghost“ diegimo aplanke. Pagal Turinys> Temos sukurti naują temą pavadinimu mitema . Įsitikinkite, kad tai yra mažosios raidės be tarpų (brūkšneliai yra priimtini). Tai bus katalogas, kuriame yra mūsų temos kodų bazė. Šiame kataloge sukurkite šiuos failus ir aplankus:

- /assets/ — /css/ — normalize.css — screen.css — /images/ — /js/ — /fonts/ - /partials/ — header.hbs - default.hbs - index.hbs - post.hbs

Tiek rodyklė.hbs ir post.hbs yra vieninteliai failai, kurie turi būti tinkama tema. Be šių elementų gausite klaidą.

Mes atskiriame antraštę kaip dalinį šabloną, kad galėtume geriau valdyti ir pakartotinai naudoti kodą visoje temoje

Mes atskiriame antraštę kaip dalinį šabloną, kad galėtume geriau valdyti ir pakartotinai naudoti kodą visoje temoje

Suaktyvinkite naują temą

Dabar „Ghost“ informacijos suvestinėje eikite į Nustatymai> Bendrieji . Pagal Tema , pasirinkite naują ką tik sukurtą temą mitema . Jei jo trūksta, turėsite eiti į terminalą ir iš naujo paleisti „Ghost“. Spustelėkite Sutaupyti norėdami suaktyvinti šią temą. Dar nieko nematysite frontende. Taip yra todėl, kad mes dar neturėjome pridėti jokių žymių prie savo temos.

Photoshop kaip pakeisti spalvą kita

Naudojant vairą

„Ghost“ naudoja šablonų kalbą, vadinamą Vairas.js . Iš anksto apibrėžtos vairo išraiškos palengvina vaiduoklių temų kūrimą ir palaikymą.

Vairas atskiria šablonus nuo neapdoroto HTML. Atminkite, kad naudodami vairą negalite rašyti funkcijų ar laikyti kintamųjų. Vairas yra sukurtas tiesiog rodyti turinį ten, kur pateikiamos išraiškos.

Vairo išraiškos suvyniotos garbanotais skliaustais ir atrodo taip: {{autorius.vardas}} . Tai iš esmės ieško autorius.pavadinimas nuosavybę ir ją išleidžia.

Default.hbs

Susitepkime rankas ir pradėkime kurti savo temą. Atidarykite nutylėjimas.hbs mėgstamiausiame teksto rengyklėje. Tai yra pagrindinis šablonas ir apima visus pagrindinius , , žymos, naudojamos visoje jūsų svetainėje.

Šiame šablone mes įveskite savo HTML doctype, pagrindines meta žymeles ir galvos bei kūno žymes. (Matyti nutylėjimas.hbs pamokų failuose.) Pastebėsite išraiškos žymas: {{! Reaguojančios meta žymos}} . Bet kokios išraiškos, užrašytos šauktuku garbanotuose skliaustuose, yra komentarai ir nebus atspausdintos galutiniame šaltinio kode.

Galite naudoti pagalbininką {{date}}, kad išleistumėte tinklaraščio paskelbimo datą, ir naudokite formato parinktį, kad valdytumėte datos formatą

{{ghost_head}} pagalbininkas naudojamas bet kokiems sistemos scenarijams, stiliams ir metažymams išleisti. {{ghost_foot}} pagalbininkas naudojamas scenarijų išvedimui dokumento apačioje. Vairo išraiška {{{kūnas}}} yra svarbus. Čia bus rodomas visas jūsų turinys, kuris pratęsia numatytąjį šabloną. Sekantis {{body_class}} yra naudojamas automatiškai sugeneruoti CSS klasių pavadinimus, skirtus konkretiems puslapiams:

{{{body}}} {{ghost_foot}} index.hbs

Dabar mūsų rodyklė.hbs (žr. šį šaltinio kodą projekto failuose), mes naudojame vairo išraišką {{!< default}} pačiame šio dokumento viršuje, nurodant mūsų ankstesnį pagrindinį šabloną. Šis šablonas bus naudojamas mūsų pagrindiniame puslapyje. Kiekvieną tinklaraščio įrašą norėsime suformuoti foreach pagalbininke. Naudojant angą {{# # foreach posts}} ir uždarymas {{/kiekvienam}} kilpa, bet kas, kas yra viduje, parodys kiekvieną įrašą su žymėjimu.

Kiekvieno tinklaraščio įrašo turiniui rodyti naudojame vairo išraiškas {{turinys}} . Taip pat galime apriboti žodžių skaičių naudodami parametrą žodžiai = '100' .

Klasių ir asmens vardų suteikimo taisyklės

Jūs pastebėsite, kad visi klasių pavadinimai tęsiami miteme_ . Tai yra rekomenduojama praktika kuriant vaiduoklių temą. „Ghost“ tam tikriems jūsų temos elementams automatiškai priskirs tam tikrus klasių pavadinimus ir konkrečiau ID. Jūs norite išvengti susidūrimų ir atsižvelgti į savo klasių pavadinimų apimtį.

Daliniai

Paprastai antraštės žymėjimą galime įterpti tiesiai po {{!< default}} , bet vairo šablonų privalumas yra hierarchinė parama, kai vienas šablonas gali išplėsti kitą. Tai apima dalelių naudojimą. Tai padeda pašalinti kodo pasikartojimą ir skatinti pakartotinį naudojimą. Mes galime atskirti antraštę į dalinį šabloną.

Naudodamas foreach pagalbininką, index.hbs tvarko pranešimą

Naudodamas foreach pagalbininką, index.hbs tvarko įrašo objektą, kad kiekvienas tinklaraščio įrašas būtų rodomas pagrindiniame puslapyje

Dalių kataloge atidarykite antraštė.hbs . „Ghost“ informacijos suvestinėje Nustatymai , galite įkelti savo tinklaraščio logotipą ir tinklaraščio viršelio vaizdą. Mes naudosime jei pareiškimą, kad patikrintumėte, ar yra tinklaraščio viršelio vaizdas. Jei taip, mes jį pateiksime kaip fono paveikslėlį:

{{#if @blog.cover}}style='background-image: url({{@blog.cover}})'{{/if}}

Šį kartą patikrinsime, ar yra tinklaraščio logotipas.

{{#if @blog.logo}} {{/if}}

@Blog visuotinis duomenų prieigos prieigos atstovas gali pasiekti „Ghost“ pasaulinius nustatymus, kuriuos galime pateikti savo temoje. Dabar pasinerkime į įdomią mūsų temos stiliaus dalį. Mūsų temoje mes susiejame su normalizuoti.css HTML5 paruoštam CSS atstatymui. „Screen.css“ yra ta vieta, kur įvesime visus pasirinktinius temų stilius. Tada pridėsime keletą visuotinių stilių, tada sukursime antraštę ir nustatysime a maks. plotis kad maketas neišplėstų per tam tikrą taškų dydį:

.mytheme_page { max-width: 980px; margin: 0 auto; } .mytheme_header { padding:20px 0; text-shadow: 2px 2px 2px rgba(26, 26, 26, 0.1); text-align: center; color: #2f3727; }

Dabar sukurkite kiekvieną tinklaraščio įrašą straipsnių talpykloje:

main article { margin: 30px 0; borderz-left:1px solid #DBDBDB; border-right:1px solid #DBDBDB; background-color: #FFFFFF; } .mytheme_post_content { padding: 0 20px; } .mytheme_post_title { margin: 0 0 20px 0; padding: 10px; font-size: 2em; letter-spacing: 2px; text-align: center; text-shadow: 2px 2px 2px rgba(26, 26, 26, 0.2); color: #FFFFFF; background-color: #8ACD36; } .mytheme_post_title a { text-decoration: none; color: #FFFFFF; } .mytheme_main_img img { width: 100%; max-width: 100%; border: 0; }

Datą įrašykite kairėje pusėje ir Skaityti daugiau mygtukas priešais. Suteikite šiai nuorodai mygtuką:

.mytheme_post_info { overflow: auto; padding: 0 20px; background-color: #98C148; } .mytheme_date { float: left; padding-top: 20px; color: #FFFFFF; } .button { float: right; padding: 20px 0; } .button a { padding: 5px; transition: ease .3s; text-decoration: none; color: #FFFFFF; background-color: #39A9DA; } .button a:hover { background-color: #199ED9; }

Mes palietėme pagrindinius vaiduoklių temos kūrimo aspektus. Tikimės, kad ši įžvalga atvėrė galimybių kurti savo asmeninę temą. Pamatysite, kad „Ghost“ temą sukurti yra labai paprasta, jei pasirenkate iš anksto nustatytas vairo išraiškas.

kaip padaryti animacinį pikselių meną

Informacijos suvestinėje pasirinkite naujai sukurtą temą, kad ją suaktyvintumėte. Jums gali tekti iš naujo paleisti „Ghost“ terminale, kad pasirinktumėte temą

Nepamirškite atsisiųsti mokymo programos pridedamos bylos . Taip pat peržiūrėkite „Ghost“ dokumentus daugiau informacijos padėti kurti ir pritaikyti savo temą.

Žodžiai : Stevenas Wu

Šis straipsnis iš pradžių pasirodė tinklinis žurnalas 252 leidimas.