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.

Facebook Chat: Emoticons, Tips og triks for å forbedre samtalen

Helt siden Facebook utgav sin direktemeldingsprogram på nettstedet i 2008, har mange av brukerne benyttet chat-funksjonen for å holde kontakten med sine Facebook-venner. Det er en enkel funksjon, men likevel brukervennlig. Sammenligne hva det er nå og hva det var tre år tilbake, ikke mange ville si at det har forandret seg mye; Det er fortsatt en liten bar plassert nederst til høyre som utvides for å la deg se hvem som er online når du klikker på den.Det sto

(Tekniske og design tips)

5 måter å holde deg selv fokusert på jobb

Å holde deg fokusert på jobb kan være vanskelig noen ganger. Her er en forekomst du ser for mange ganger før - du starter dagen din ved å fortelle deg selv at du vil få (sett inn mengde) oppgaven gjort i dag. Som bestemt som du er, kan du ende opp med å ha stump samtale med vennene dine, svare på og sende ut e-post og selvfølgelig bli veldig opptatt på sosiale utsalgssteder - akkurat som de fleste av oss her .Så hvorda

(Tekniske og design tips)