Proiect Continuarea site-ului nostru construit cu Middleman

În acest tutorial vom continua construirea site-ului nostru podcast. Vom începe să modelați indexul nostru de postări, să creați un mic subsol și să aruncați un pic de culoare în amestec. Tot ce folosește Sass și suita Bourbon.

Indexul posturilor noastre

Corect, unde am fost? În momentul în care site-ul nostru nu arată prea grozav:

În prezent, postările noastre nu sunt aliniate la altceva decât la stânga, deci avem nevoie de o rețea pentru a rezolva această problemă. Dragostea noastră Bourbon Neat pentru salvare! Mai întâi vom adăuga o clasă posturi ca un ambalaj pentru posturile noastre și să o facem exterior container care centrează conținutul paginii.

În "sursa / index.html.erb":

 <% page_articles.each_with_index do |article, i| %> 
<%= link_to article.title, article %> <%= article.date.strftime('%b %e') %>
  <%= article.body %> <% end %> 
 

Apoi trebuie să creăm un nou Sass parțial pentru stilurile noastre de index și să aplicăm unele magice, deci în "source / stylesheets / all.sass":

@import 'index_posts' 

Și în "source / stylesheets / _index_posts.sass":

.posturi + container exterior 

De asemenea, simt că este o idee bună să adăugați o culoare de fundal pentru a face containerul nostru exterior vizibil - deocamdată.

Apoi, angajați-vă la Git:

git add -all git commit -m 'Adaugă parțial Sass pentru postările din index Conținutul conținutului' 

Articolele recente, etichetele și chestiile din calendar sunt în "layout.erb" și nu ne privesc în prezent. Să ne concentrăm în schimb pe crearea acestei liste de indexuri de postări pop. Să dăm h2 titlu o clasă post-titlu și lăsați titlul și paragrafele din intervalul de copiere a corpului pentru opt (din douăsprezece) coloane din pagină. Postările trebuie să schimbe și două coloane, deoarece dorim să evităm copierea noastră pe întreaga pagină și, prin urmare, să depășim o lățime de linie sănătoasă (măsură) pentru citirea a 45-75 de caractere.

Deci, în "sursa / index.html.erb":

 <% page_articles.each_with_index do |article, i| %> 
<%= link_to article.title, article %> <%= article.date.strftime('%b %e') %>
  <%= article.body %> <% end %> 
 

Și în "source / stylesheets / _index_posts.sass":

.post-titlu, .posturi p + shift (2) + span-coloane (8) 

Acum noi vorbim. Conținutul nostru este aliniat și centrat frumos pe pagină. Ceea ce lipsește este orice formă de ierarhie vizuală; al nostru h2 titlurile nu sunt mult mai mari decât conținutul postărilor noastre. Pentru a oferi o experiență mai bună de citire, trebuie să ne asigurăm că titlurile și textul corespunzător au un contrast vizual mai bun decât acesta.

În primul rând, avem nevoie de un text mai bun pentru a lucra cu, deci să folosim un helper Middleman pentru textul fals. Să adăugăm un ERB extindeți-vă la blog-urile noastre și adăugați următoarele la posturile de test.

Notă: avem nevoie de extensia ".erb" doar pentru că vrem să rulam un cod rubin între această construcție <%= %>.

În "sursă / posturi / 2012-01-01-example-article.html.markdown.erb":

Acesta este un exemplu de articol. Probabil doriți să îl ștergeți și să scrieți propriile articole! <%= lorem.sentences 5 %> 

Vom trece detaliile într-un moment, dar mai întâi mai multe stiluri din "source / stylesheets / _index_posts.sass":

.post-titlu font-size: 1.7m .posturi p font-size: 1.05em margin-bottom: 4em 

E un pic mai ușor pentru ochi, nu-i așa? Am ajustat antetele și paragrafele la un nivel rezonabil. O mică marjă suplimentară între posturi face diferența. În ceea ce privește ierarhia, este un început bun.

Angajați la Git:

git add - tot git commit -m 'Reglează dimensiunea pentru text și pentru text Adăugă text inactiv Adaugă extensie. 

Subsol

Pe subsol. Cred că ar trebui să avem grijă de elementele plutitoare care plutesc pe fundul întâi. Să împachetăm "Articole recente" și "Etichete" într-un subsol și să scăpăm de "An de an". Marcajul relevant face parte din structura globală din "source / layouts / layout.erb". Găsiți codul în deoparte eticheta de mai jos Randament și adaptați-o după cum urmează. În "sursa / layouts / layout.erb":

Afacerea implicită de mai sus de a face doar prin mesajele noastre și etichetele care vine cu Middleman este bine. Vreau totuși să fie puțin mai inteligent și să introduc amestecări atât la posturile și etichetele recente. În acest fel, utilizatorul nu văd doar ultimele zece articole sau o listă uriașă de etichete, ci o versiune aleatorie a ambelor, care este întotdeauna lungă de zece articole. Ei, de asemenea, nu consumă o mulțime de spațiu și permiteți-mi să aliniez ambele elemente în mod consistent în subsol. Am redenumit h3 pentru posturi, de asemenea, în "sursa / layouts / layout.erb":

### Aliniere

Cred că am îmbunătățit destul de mult experiența utilizatorului prin intermediul acestui accesoriu mic. Ruby ne-a făcut foarte ușor treaba. Acum, acest marcaj necesită doar o mică împingere pentru o aliniere mai bună. Creăm un nou Sass parțial doar pentru subsol. În "source / stylesheets / all.sass":

@import 'footer' 

Și apoi în "sursa / foile de stil / _footer.sass" parțiale:

footer + marginea frontală a containerului exterior: 1 pixel solid de bază de bază pentru fundul culorii: partea superioară: partea inferioară 4em: 4em .recent-posts + shift (2) + span-coloane (6) .footer-tags + span-columns 2) .recent-posturi, .footer-etichete h3 font-size: 1.7em li font-size: 1.05em 

Pentru a avea câteva date teste de testare, am adăugat câteva exemple de post prin intermediul generatorului intermediar și i-am dat un text fals. Prin terminal:

articol intermediar "Titlul tău fancy" 

Probabil că ar trebui să menționez că am adăugat o extensie ".erb" la aceste postări noi pentru generatorul de text lorem dummy. Frontmatter-ul conține și mai multe etichete pentru a se juca cu el.

În "sursa / posts / 2015-12-01-your-fancy-title.html.markdown.erb":

--- titlu: Exemplu Data postării: 2015-12-01 etichete: exemplu, bourbon, îngrijit, intermediar --- Acesta este un exemplu de articol. Probabil doriți să îl ștergeți și să scrieți propriile articole! <%= lorem.sentences 5 %> 

Scopul era să ai cel puțin zece postări și etichete pentru a vedea dacă totul se aliniază corect. Să vedem ce avem aici:

Culorile de fundal și-au îndeplinit datoria deocamdată. Să le ucidem și să verificăm dacă suntem mulțumiți de rezultatul real:

Cred că o putem lăsa așa, deocamdată. Este timpul să ne angajăm schimbările!

git add ... /layouts/layout.erb gco -m 'Adaptă aspectul și adaugă subsolul "git add ... /stylesheets/_footer.sass ... /stylesheets/all.sass git commit -m" Adaugă stiluri pentru subsol și importă parțială Sass "git adăugați ... /posts/*.markdown.erb git commit -m "Adaugă o grămadă de postări manechin cu: dummy lorem tag-uri fictive text" 

lansa

Înainte de a continua, trebuie să ne deplasăm la paginile GitHub, să verificăm progresul și să ne asigurăm că nu ne întâlnim cu niciun fel de surprize.

mijlocul de desfășurare 

Deschideți browserul dvs., mergeți la yourusername.github.io/your_project_name și vedeți dacă sunteți mulțumiți de site-ul dvs. până acum.

Extracţie

Ce ar trebui să facem în continuare? Ai dreptate, subsolul strigă cu litere mari EXTRACȚIE! Vom lua