Aici am copiat stilurile din secțiunea modelului Refills, plasându-le într-un fișier nou dedicat acestei secțiuni banner. Stilurile furnizate sunt în .SCSS sintaxă și așa că merg cu fluxul - nu este nevoie să-l convertiți .Sass într-adevăr.

În "sursă / stiluri / _hero_banner.scss":

 .erou $ base-border-radius: 3px! $ action-color: # 477DCA! implicit; $ big-screen: em (860)! implicit; $ hero-fundal-top: # 7F99BE; $ hero-fundal-fund: # 20392B; $ hero-color: alb; $ unghi de gradient: 10deg; $ hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'; @ include fundal (url ($ hero-image), gradient liniar ($ gradient-angle, $ hero-background-bottom, $ hero-background-top); fundal-culoare: # 324766; fundal-poziție: sus; background-repeat: nu-repeta; dimensiunea fundalului: capac; pad-bottom: 3cm; .ro-logo img inaltime: 4m; marginea inferioară: 1em; . hero-interior @ include containerul exterior; @ include clarfix; marja: auto; umplutură: 3,5 cm; text-align: centru; .ro-copy text-align: center; h1 culoare: $ hero-color; font-size: 1.6; marginea inferioară: 0,5; @ include media ($ big-screen) font-size: 1.8em;  p culoare: $ ero-culoare; linie înălțime: 1,4; marja: 0 auto 3em auto; @ include media ($ big-screen) font-size: 1.1em; max-lățime: 40%;  

Vom regla acest lucru într-o secundă, dar să aruncăm o privire mai întâi:

Se potrivește chiar înăuntru - așa îmi place! Să ne tweak asta în funcție de nevoile noastre, scăpând imaginea și pictograma. Dar să începem cu textul, deci în "source / index.html.erb":

Puteți schimba acest lucru în orice fel doriți. Vreau să fac acest lucru rapid și doar să măresc dimensiunea h1 atât pentru ecrane mari, cât și pentru dispozitive mai mici. Antetul unității de erou este acum 2em și 3em respectiv - nu prea mult. Plăcuța .erou interior trebuie, de asemenea, să mute.

Din nou, în "source / stylesheets / _hero_banner.scss":

 .eroi-interior // padding: 3.5em; pad-top: 1.2cm;  .ro-copie text-align: center; h1 culoare: $ hero-color; font-size: 2m; marginea inferioară: 0,5; @ include media ($ big-screen) font-size: 3em;  

Înainte să ucidem substituentul pentru logo. Le găsesc adesea un pic enervant. În "sursa / index.html.erb":

 
 
 
 
MATCHA NERDZ
 
Podcast pentru cunoscătorii de ceai verde
 
 
 
 

Asta e tot ce avem nevoie. Deoarece nu folosim logo-ul eroului, să scăpăm de greutatea lor, așa că în "source / stylesheets / _hero_banner.scss":

 //.herologo img // height: 4em; // margin-bottom: 1em; // 

Imagine de fundal

Imaginea de fundal generică trebuie, de asemenea, să meargă. Mai întâi vă arăt cum vreau să văd, atunci voi explica cum să ajung acolo.

Ignoră tipografia pentru moment, o puteți ajusta mai târziu. Am inlocuit imaginea si am pus un mic gradient pe partea de sus a acesteia. Deoarece tipul este alb, aveam nevoie de un contrast mai mic pentru o experiență mai bună de citire. Dacă alegeți o imagine care nu are nevoie de un gradient suplimentar, mergeți la ea!

Am ajustat codul Refills cu câteva modificări. Mai întâi, am adăugat o imagine la "sursă / imagini" și am salvat această imagine în variabilă $ Erou-imagine. Apoi am reutilizat această variabilă în fundal mixin din Bourbon și reordonat imaginea și liniar gradient (un amestec Bourbon, de asemenea). Deoarece gradientul vine primul, acesta este suprapus pe partea de sus a Matcha_Nerdz.png. Încă o dată, în "source / stylesheets / _hero_banner.scss":

 .erou $ hero-image: '... /images/Matcha_Nerdz.png'; $ hero-background-top: întuneric ($ matcha-green, 65%); $ hero-fundal-jos: rgba (lighten ($ matcha-green, 10%), .3); @ include fundal (gradient liniar ($ gradient-angle, $ hero-background-bottom, $ hero-background-top), url ($ hero-image); marginea inferioară: 2cm; // background-color: # 324766; // background-size: cover; 

Pentru gradientul în sine, refolosesc $ Matcha-verde pe care le-am stocat în "source / stylesheets / base / _variables.scss". Culoarea de top este întunecată cu 65% cu o funcție Sass; celălalt este luminat cu 10% și, de asemenea, făcut transparent prin intermediul altei funcții Sass numite RGBA. Apoi reutilizăm aceste variabile în nostru fundal mixin. gradient de unghi a rămas la fel. Am adăugat, de asemenea, o mică marjă de 2em pentru a împinge puțin lista indexului. Stilurile pe care le-am comentat pentru tine sunt greutate și așadar le-am șters.

Puteți juca cu un astfel de gradient direct în Photoshop, desigur, dar am vrut să vă arăt cum le puteți folosi în Sass. Mai jos este o captură de ecran care nu are un gradient liniar adăugat unității de eroi. Ca un mic exercițiu, voi lăsa curățarea stilurilor pe care le-am copiat. Dacă găsiți duplicate sau stiluri neutilizate, vă recomandăm să remediați acest lucru înainte de a vă deplasa.

Commit și Deploy

E timpul să se angajeze și să se desfășoare altfel.

 git add - tot git comită -m 'Adaugă unitatea de eroi la index.html.erb Adăugă o imagine eroică cu gradient Adăugă _hero_banner Sass Parțial importuri Sass parțial " 

Fără rețeaua vizuală, nu pare că aveți prea multă muncă pentru a ajusta această pagină pentru nevoile dvs. de podcast. Câteva lucruri pe care aș recomanda să le faceți este să găsiți o notă care să comunice proiectul dvs. în mod distinct, fără a fi prea exotică și să ajustați dimensiunea și spațierea textului astfel încât să se potrivească imaginii de fundal a unității de erou. Deoarece aceasta face parte din branding, vă sugerez să vă faceți timp și să vă distrați!

Navigare

Este un moment bun pentru a adăuga o navbar. Din nou, vom folosi un model existent de la Refills și îl vom adapta pentru nevoile noastre. Am ales "Navigația centrată" pe care o veți găsi sub "Modele". Pentru aceasta, trebuie să copiem codul HTML, SCSS și codul CoffeeScript. Voi începe mai întâi prin adăugarea marcajului la fișierul global "layout.erb"

        <%= feed_tag :atom, "#blog.options.prefix.to_s/feed.xml", title: "Atom Feed" %> <%= stylesheet_link_tag "all" %> <%= javascript_include_tag "all" %>   
 
    MENIUL  
  
 <%= yield %> 
 <%= partial "partials/footer" %>   

Uau! E o bucată de cod. Te gândești la fel ca mine? Arată urât, nu? Să facem asta parțial. Vom schimba "sursa / layouts / layout.erb" pentru a:

...  <%= partial "partials/navbar" %> 
 <%= yield %> 
 <%= partial "partials/footer" %>   

Și adăugați "sursă / partiale / _navbar.erb":

 
 
  <%= image_tag "matcha_nerdz_logo.png", alt: "Logo image" %>  MENIUL  
  

Am eliminat o grămadă de lucruri de care nu am nevoie și termin doar cu logo-ul pe care l-am stocat în "/ images" și două linkuri pentru acasă și despre pagini. Pentru cele două linkuri am folosit LINK_TO metoda helper. Este nevoie de două argumente:

• Șirul pe care doriți să îl acceseze utilizatorii
• și locația la care doriți să vă conectați.

Sunt sigur că oamenii care au jucat un pic cu Rails sau Sinatra sunt familiarizați cu acest lucru. Handy, dar nu prea mare. Linkul pentru "Home" (/ matcha-nerd) se va rupe pentru gazda dvs. locală, dar lucrează la paginile GitHub unde avem nevoie de spațiul de nume.

Cititorul avid ar fi putut, de asemenea, să fi descoperit că legăturile noastre despre o legătură într-o pagină HTML simplă pe care am plasat-o într-un director nou numit "pagini". Vă sugerăm să introduceți pagini HTML, cum ar fi contact, faq sau orice altceva în acest director. Dacă puneți aceste pagini statice acolo, nu ar trebui să aveți probleme cu personalizarea acestora în funcție de nevoile dvs. Doar să te distrezi și să aplici ceea ce ai învățat până acum cu aceste pagini. De aici, sunteți singur cu voi, dar acum știți tot ce aveți nevoie. Samo, samo!

Calea activelor

Un cuvânt despre etichetele de imagine și calea de material din paginile GitHub. Am decis să înlocuiesc câmpia img tag-uri pentru logo-ul cu un helper Middleman numit IMAGE_TAG. Nu este doar destul de concisă și lizibilă, dar rezolvă și o problemă cu care veți avea parte img atunci când construiți site-ul și îl implementați în paginile GitHub. URL-ul pentru link-ul de activ pe articole individuale devine tot greșit și aceasta este cea mai simplă soluție pentru a rezolva asta.

Înainte de utilizare IMAGE_TAG, urlul pentru logo-ul arăta astfel: http://your_username.github.io/images/matcha_nerdz_logo-hash_numbers.png

 <%= image_tag "matcha_nerdz_logo.png", alt: "Logo image" %> 

Acest ajutor Middleman a furnizat adresa URL cu numele aplicației Matcha-nerdz-numele corect a introdus materialul și îi oferă paginilor GitHub accesul la acest fișier imagine (http://your_username.github.io/matcha-nerdz/images/matcha_nerdz_logo-hash_numbers.png).

Mai multe organizații

Stilurile pe care le-am copiat de la Refills sunt într-un nou Sass parțial, desigur. În "source / stylesheets / all.sass" menționăm:

 @import 'header_navbar' 

Și parțial actualul "source / stylesheets / _header_navbar.scss" arată astfel:

 .centrate-navigare $ base-border-radius: 3px! default; $ dark-gray: # 333! $ big-screen: em (860)! implicit; $ base-font-color: alb; $ centru-navigare-padding: 1em; $ centrate-navigation-logo-height: 2m; $ centrate-navigation-background: # E7F1EC; $ cent-navigation-color: $ base-font-color; $ centrate-navigation-color-hover: $ text-culoare; $ centrate-navigation-height: 60px; $ centrate-navigation-item-padding: 1em; $ centrate-navigation-submeniu-padding: 1em; $ centrate-navigation-item-nudge: 2.2; $ orizontal-bar-mode: $ big-screen; fundal-culoare: $ matcha-green; margine de fund: 1px de culoare închisă ($ matcha-green, 5%); min-înălțime: $ centrate-navigation-height; lățime: 100%; z-index: 9999; // Vizualizare mobilă .mobile-logo display: inline; plutește la stânga; max-height: $ centrate-navigation-height; padding-left: $ centrate-navigation-padding; img max-height: $ centrate-navigație-înălțime; padding: .8em 0;  @ include media ($ orizontal-bar-mode) display: none;  .centrate-navigation-mobile-menu culoare: $ centtered-navigation-color; afișare: bloc; float: dreapta; linia-înălțime: $ centrate-navigation-height; marja: 0; padding-right: $ centrate-navigation-submeniu-padding; text-decoration: nici unul; text-transform: majuscule; @ include media ($ orizontal-bar-mode) display: none;  &: focalizare, &: hover culoare: $ centtered-navigation-color-hover;  // meniul Nav .centered-navigation-wrapper @ include outer-container; @ include clarfix; poziție: relativă; z-index: 999;  ul.centered-navigare-meniu -webkit-transform-style: preserve-3d; // stop webkit flicker clar: ambele; afișare: niciunul; marja: 0 auto; overflow: vizibil; umplutura: 0; lățime: 100%; z-index: 99999; & .show display: bloc;  @ include media ($ orizontal-bar-mode) display: block; text-align: centru;  // Articolele nav .nav-link: primul copil @include media ($ orizontal-bar-mode) margin-left: $ centtered-navigation-item-nudge; umplutură-dreapta: 0px;  ul li.nav-link fundal: lighten ($ matcha-green, 8%); afișare: bloc; linia-înălțime: $ centrate-navigation-height; overflow: ascuns; padding-right: $ centrate-navigation-submeniu-padding; text-aliniere: drept; lățime: 100%; z-index: 9999; o culoare: $ centrate-navigation-color; afișare: inline-block; contur: nici unul; text-decoration: nici unul; &: focalizare, &: hover culoare: $ centtered-navigation-color-hover;  include media ($ orizontal-bar-mode) fundal: transparent; afișare: inline; linia-înălțime: $ centrate-navigation-height; o padding-right: $ centrate-navigation-item-padding;  li.logo.nav-link afișare: niciunul; linia-înălțime: 0; @ include media (ecran mare) display: inline;  .logo img marginea-jos: - $ centored-navigation-logo-height / 3; maximă înălțime: $ centrate-navigation-logo-height;  

Am pus codul CoffeeScript de la Refills în "all.coffee". De îndată ce trebuia să adaug codul mai mult decât atât, aș fi pus-o în locul lui desemnat. „Sursă / javascripts / all.coffee“:

 // = necesita jquery $ (document) .ready -> menuToggle = $ ('# js-centered-navigation-mobile-menu' arată 'menuToggle.on' faceți clic pe ', (e) -> e.preventDefault () $ (' js-centrate-navigation-menu '). .is (': ascuns') $ ('# js-centrate-navigation-menu'). 

Acest fragment este responsabil pentru comutarea meniului pentru ecrane mai mici.

Pentru că am șters o grămadă de lucruri de care nu aveam nevoie de marcajele navbar - ca și submeniul - am reușit să scot o mare parte din stilurile relevante din acest fișier. Deoarece nu știu dacă aveți nevoie de o navbar mai elaborată și doriți să luați codul din aceste exemple, vă sugerăm să copiați codul original dacă aveți planuri mai mari pentru navbar. Joaca-te cu Sass pentru a se potrivi cu stilul tau, elimina codul mort si duplicate. Am ajustat culoarea de fundal și culorile link-ului, jucat cu transparența logo-ului, schimbat marginea și mișcat. Distreaza-te si mergi nebun daca vrei. Am vrut doar să folosesc o navbar super simplu, cu culoarea mărcii și un logo centrat. Sa dovedit destul de bine pentru acest mic lucru pe care l-aș spune.

Iată pagina index:

Iată pagina cu detalii:

Este timpul să împachetați acest lucru într-un angajament de tip git și să desfășurați site-ul.

 git add -all git commit -m 'Implementează un antet cu navbar Adăugă antetul parțial la aspect Are grijă de url de activ implementat pentru logo Importuri Sass parțial pentru navbar Adăugă logo-ul Adăugă codul CoffeeScript Ajustează stilurile de refill Reglează refill markup' middleman deploy 

Titlu

Următoarea schimbare este una mică, doar într-adevăr o atingere. Trebuie să actualizăm eticheta titlului în aspectul nostru ("source / layouts / layout.erb"):

Acest lucru ne oferă un titlu dinamic care începe întotdeauna cu numele site-ului nostru și atribuie titlul articolului dacă este disponibil.

 git add --all git commit -m 'Ajustarea titlului site-ului' implementarea intermediarului 

Paginare

Când te uiți în partea de jos a listei de articole de index, vei vedea ceva lipsit de esențial - navigând lista noastră de postări.

Nu sunt un fan al legăturilor de paginare prea inteligente - și cele voluminoase nu câștigă niciun premiu cu mine. Să o păstrăm simplu și să oferim două linkuri pentru paginile următoare și anterioare. Middleman face acest lucru incredibil de convenabil. Trebuie doar să ne ajustăm "config.rb" și să îi spunem cadranului frontal al paginii noastre de index pentru ao regla.

 blog.paginate = true 

Mai întâi dezactivați linia de mai sus. După aceea, spuneți paginii indexului câte articole doriți să vedeți. Cred că zece postări pe pagină sunt suficiente. În "sursa / index.html.erb":

 --- per_page: 10 pagini: true --- 

Ultimul pas înainte de a aplica un stil este să plasați ambele linkuri convenabil în partea de jos a listei. Mai întâi trebuie să scăpăm de aceste linii de cod de mai jos care au fost comentate. Acestea au fost plasate chiar în partea de sus a paginii dvs. de index.

Apoi, plasați-o în partea de jos a acestei pagini:

 <% if paginate %> <% if prev_page %> 
<%= link_to '<< Previous page', prev_page %>
 <% end %> <% if next_page %> 
<%= link_to 'Next page >> ', următoarea pagină%>
 <% end %> <% end %> 

Acest lucru ne oferă legăturile de navigație de care avem nevoie unul lângă celălalt și ne furnizează o clasă pentru a schimba câteva lucruri. Am decis sa merg cu un cod partial pentru codul Sass pentru ca nu se incadreaza in subsolul publicului, nici stilurile post index, plus merita o partiala proprie, mai ales daca ar creste mai mult in dimensiune. În "source / stylesheets / all.sass":

 @import "paginare" 

Și în parțial "sursa / stiluri / _pagination.sass":

 .paginare-link + schimbare (2) margin-bottom: 4em &: float de primă tip: marginea stângă-dreapta: 4em a + tranziție (color 0.25s ease-in-out) : 1.1em &: hover color: $ matcha-green 

Vom schimba linkurile puțin spre dreapta, le aranjăm să plutească alături una de alta - implicit ar fi comportamentul blocului să fie stivuit unul peste celălalt - și să aplice un mic efect tranzitoriu atunci când utilizatorul se deplasează peste link. Asta e tot ce avem nevoie acum. Haideți să aruncăm o privire.

Bine, ai timp să faci altul.

 git add -all git comită -m "Adaugă paginare în lista indexată de postări Reglează config.rb Reglează marcarea pe pagina indexului Adaugă stiluri în _pagination Sass partial" middleman deploy 

Gândurile finale

Cred că ar fi suficient pentru versiunea 01! Ca următorul pas, ar trebui să jucați cu interogări media pentru a face aspectul să răspundă la diferite dimensiuni ale ecranului. Tipografia ar putea avea nevoie și de o dragoste serioasă.

Alegeți o mostră tipică sau două care se potrivește cel mai bine cu tema podcast-ului dvs. - nu uitați să îl păstrați foarte ușor de citit.

De asemenea, dacă vă decideți să faceți un podcast adevărat, vă pot felicita doar. Este o modalitate foarte bună de a învăța de la experți și, de asemenea, de a vă mări semnificativ rețeaua. A face ceva de valoare pentru comunitate este întotdeauna o idee bună și poate plăti mult timp. Un ultim sfat, incearca sa inveti prin a face si experimenta cat de mult poti! Citind singură nu taie-a fost acolo, fă asta! Dacă doriți să împărtășiți leziunile învățate prin scrierea despre aceasta, veți aprofunda mai mult înțelegerea subiectului. A se distra!