Hvordan bygge en statisk blogg ved hjelp av å samle

I dag skal vi ta en titt på Assemble, et Grunt-plugin som lar oss enkelt lage og administrere statiske nettsteder . Montering kan være litt lik Jekyll, men det gir mer fleksibilitet og funksjoner til bordet som gjør det kraftigere.

Permalink, Bootstrap Boilerplates, og LESS compiler er funksjonene som gjør Assemble til et komparativt verktøy til en fullverdig CMS-applikasjon. Her vil vi vise deg hvordan du bruker Assemble for å lage en statisk blogg .

Trinn 1. Installere prosjektavhengighet

Assembly krever Grunt å fungere (se våre tidligere innlegg på Node.js og Grunt hvis du trenger ytterligere hjelp). Når en gang Node og Grunt er satt, må du opprette en package.json fil i prosjektmappen for å angi nodepakker som vi skal ansette for å bygge bloggen vår.

Legg til følgende kode i package.json:

 {"devDependencies": {"assemble": "~ 0.4.40", "grunt": "~ 0.4.5", "grunt-contrib-connect": "~ 0.8.0", "Grunt-Contrib-Watch" : "^ 0.6.1"}} 

Disse kodelinjene i package.json forteller Node at prosjektet vårt vil være avhengig av Grunt, Grunt Connect, Grunt Watch og Assemble. Nå skal vi installere disse pakkene ved å kjøre denne kommandoen via Terminal.

 npm installasjon 

Trinn 2. Last inn og registrer Grunt-oppgaver

Når alle avhengighetene er lastet ned, lager du grunfile.js og legg inn følgende linjer:

 module.exports = funksjon (grunt) {grunt.initConfig ({pkg: grunt.file.readJSON ('package.json')}); grunt.loadNpmTasks ( 'sammen'); grunt.loadNpmTasks ( 'grov-contrib-connect'); grunt.loadNpmTasks ( 'grynt-contrib-watch'); grunt.registerTask ('default', ['connect: leverload', 'assemble', 'watch']); }; 

Linjene vi legger inn i gruntfile.js ovenfor, bare laster inn og registrerer de avhengighetene vi nettopp har lastet ned via kommandoen npm install . Vi vil gjøre disse oppgavene "arbeid" senere i de følgende trinnene.

Trinn 3. Mappe og filstruktur

Vi vil nå organisere mappen og filstrukturen til bloggen vår som følger:

 MyBlog / package.json gruntfile.js app / layout / default.hbs innhold / side / index.hbs blog / first-posting.hbs partials / 

Assemble lar oss konfigurere fil- og katalogorganisasjonen via gruntfile.js. Men for nå, la oss bare fortsette med standardkonfigurasjonen, som vist ovenfor.

Trinn 4. Bloggoppsettet

I samlingen lagde Layouts grunnlaget for en side . I trinn 3 har vi opprettet en layoutfil med navnet default.hbs i MyBlog/app/layout/ mappen. .hbs utvidelsen brukes fordi Assemble bruker .hbs .

Standard.hbs vil bli brukt av alle sidene i bloggen som refererer til denne filen. Her vil vi bruke Bootstrap via BootstrapCDN til å sette stilbase for bloggen vår. Vi legger da til i følgende koder i default.hbs :

 MIN BLOGG 
 {{> body}} 

Trinn 5. Konfigurere Grunt-oppgavene

Som det neste trinnet, opprett en Gruntfile.js å konfigurere kataloger og filer for Assemble å kompilere . Åpne Gruntfile.js og legg til følgende koder i Grunt.initConfig delen:

 grunt.initConfig ({pkg: grunt.file.readJSON ('package.json'), se: {assemble: {files: ['app / content / blog / *. hbs', 'app / innhold / sider / *. hbs ', ' app / layouts / *. hbs ', ' app / partials / *. hbs '], oppgaver: [' assemble ']}, levereload: {options: {livereload:' '}, filer: ['. /dist/*.html ']}, }, sett sammen: {options: {layoutdir:' app / layouts ', flatt: true, layout:' default.hbs ', partials:' app / partials / *. hbs '}, side: {files: {'dist /': ['app / innhold / side / *. hbs']}}, blogg: {files: {'dist /': ['app / content / blog / *. ']}}}, koble til: {alternativer: {port: 8800, // endre dette til' 0.0.0.0 'for å få tilgang til serveren fra eksternt vertsnavn:' localhost ', levereload: 35728}, levereload: {options: {open : sant, base: './dist'}}}})); 

Trinn 6. Genererer side og første innlegg

Vi kan nå bygge en side . La oss åpne index.hbs-filen i MyBlog/app/content/page/ mappe og legge til innholdet.

Hjemmeside 
Dette er vår hjemmeside.

Gjennom kommandoprompt eller terminal, kjør grunt kommando. Denne kommandoen vil generere index.hbs filen i en html fil og umiddelbart starte filen i nettleseren. La oss se på resultatet i nettleseren.

Vi vil også generere det første innlegget i bloggen vår. Åpne first-post.hbs i MyBlog/app/content/blog/ mappe og legg ut innholdet, slik som det.

Første innlegg 
Jeg er det første innlegget. Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Odio, esse, perferendis, earum i sunt voluptate officius voluptates quam pariatur veritatis quis deliti fugit expedita aliquam er repellendus autem dolor non?

Kjør igjen grunt kommandoen, og du vil se filen first-post.html generert i en nylig opprettet mappe med navnet dist . Naviger til localhost:8800/first-post.html i nettleseren, bør du finne det første innlegget som er det samme som bildet nedenfor.

Du kan opprette flere innlegg ved å lage flere .hbs filer og plassere dem inne i MyBlog/app/content/blog/ mappe.

Trinn 7. Opprett en liste over blogginnlegg

Nå skal vi opprette en liste over innlegg og legge den inn i sidebaret i bloggen . For å gjøre det, vil vi bruke Partial- funksjonen til Assemble. En "Delvis" er et gjenbrukbart fragment av koder som kan inkluderes i de andre sidene.

Sidebjellet er ment å inneholde en liste over våre blogginnlegg, samt lenken til respektive innlegg. La oss lage en ny fil med navnet sidebar.hbs . Legg til følgende kode og lagre den i MyBlog/app/partials/ mappen.

sidebar 
 {{#each sider}} 
{{/Hver}} 

Deretter kan du ringe sidefeltet delvis i default.hbs, som følger:

 {{> sidebar}} 

#each er en loop som vil liste opp alle våre blogginnlegg i MyBlog/app/content/blog/ folder. Resultatet er vist nedenfor:

Trinn 8. Bruke variabler

Med Assemble kan vi bruke en variabel som bruker YAML-frontmateriell. YFM (YAML frontmateriell) er en valgfri seksjon som er plassert øverst på en side og brukes til å opprettholde metadata for siden og dens innhold . Vi vil bruke den til å spesifisere posttittelen; åpne first-post.hbs, og modifiser koden slik:

 --- tittel: Post One --- 
{{title}} 
 bla bla... 

{{title}} -koden vil bli fylt med "Post One" som vi har definert øverst.

Trinn 9. Bestilling av innlegg

Assemble tillater oss å bestille og sortere listen over innlegg basert på den angitte terminen . Som et eksempel, her vil vi bestille våre blogginnlegg på sidebar innen datoen. La oss endre innlegget vårt ved å legge til dato på YML-saken som nedenfor:

 --- tittel: Post En dato: 2014-07-10 --- 

Endre også andre innleggsfiler i MyBlog/app/content/blog/ . Deretter, på sidebar.hbs, viser vi datoen under posttittelen. Endre koden slik:

{{#withSort pages "data.title"}} 
 Skrevet på: {{formatDate data.date "% B% d, % Y"}}
{{/}} WithSort

Resultatet er postlisten i sidefeltet som er bestilt etter dato.

Konklusjon

Nå har vi en enkel blogg generert med Assemble. Assemble kan brukes som et alternativt verktøy for å bygge nettsteder som vi allerede har vist deg. Og hvis du vil, kan du bruke en gratis web hosting-tjeneste som Github Pages eller servere som støtter Node.js som Heroku for å sette nettstedet ditt på nettet.

Erstatt JavaScript Alert Boxes med dette responsive alternativet

JavaScript alert popup-vinduer er avskyet av stort sett alle. De tvinger oppmerksomheten din og overtar nettleseren, så du må lukke dem før du kan samhandle med siden.I den moderne tid kan vi gjøre det bedre enn JavaScript-varselbokser . SweetAlert2 er sannsynligvis den beste løsningen.Det er et JavaScript-drevet popup-skript som er utformet for å være fullt responsivt og støtter tilgjengelighet for alle brukere. Det er

(Tekniske og design tips)

Inspirerende arbeidsområde: 60 fantastiske oppsett

Vi bruker mesteparten av dagen foran datamaskinene våre. Det er her alt arbeidet blir gjort, e-post blir tatt vare på, og det sosiale forholdet blir gjort. Sannheten er at datamaskinen har blitt en stift for nesten alle aspekter av moderne livsstil, og nå er folk selv vedta flere enheter for høyere arbeidsferdigheter.Ett

(Tekniske og design tips)