Share
Continuând cu construirea site-ului nostru static, în acest tutorial vom modela pagina de detaliu pentru postări, vom încorpora widgetul podcast și vom petrece puțin timp pentru a ne forma lista indexului. De asemenea, vom avea grijă de duplicări de stil și de legături relative.
Vom acoperi următoarele:
Cred că ar trebui să ne îndreptăm atenția și să oferim o pagină de detalii despre dragostea de bază înainte de a ajusta aplicația pentru a afișa episoadele noastre de podcast. Nu suntem complet făcuți cu pagina de index, dacă avem puțin spațiu în acest tutorial, probabil voi adăuga câteva întrebări media pentru a rezolva diferite rezoluții ale ecranului. Pentru moment, aș spune, hai să mergem mai departe. Care este status quo-ul??
Yikes, asta nu arată prea bine! Textul nostru este peste tot. Să o rezolvăm mai întâi. Este o idee bună să activați din nou grila vizuală.
În "sursă / stiluri / bază / _grid-settings.scss":
$ visual-grid: true;
Aceasta a fost făcută, trebuie să creați un aspect separat pentru paginile detaliate ale postărilor noastre. Amenajarea va fi flexibilă, astfel încât să le putem folosi pentru postări pure de blog și pentru postarea episoadelor de podcast, de asemenea - o declarație puțin condiționată ne va ajuta cu asta. Mai multe despre asta mai târziu. Să deschidem config.rb și să adăugăm această linie:
activați: blog.layout = "layouts / layout blog"
Acest lucru va spune Middleman că avem un aspect separat pentru paginile detaliate și că poate fi găsit în "layouts / blog-layout". Apoi trebuie să creați "layouts / blog-layout.erb". Amintiți-vă că .BER este necesară fără extensia .html pentru ca aceasta să funcționeze corect.
În "layouts / blog-layout.erb":
<% wrap_layout :layout do %><% end %> <%= current_article.title %>
<%= current_article.date.strftime('%b %e') %>
<% if current_page.data.soundcloud_id %><% end %> <%= current_article.body %>
Hai să vorbim despre ce se întâmplă aici. Mai întâi de toate, trebuie să înfășurăm acest lucru Blogul cu aspect în interiorul generalului nostru schemă. Sau, puneți altfel, împachetăm aspectul aplicației în jurul layout-ului blogului.
<% wrap_layout :layout do %>... <% end %>
De ce? Pentru că vrem să reutilizăm o mulțime de lucruri din aspectul original și să nu duplicăm lucruri precum subsol parțiale sau legate de active în cap. Dați-i un minut sau două să se scufunde dacă acest lucru ți se pare ciudat la început. Structura pe care am folosit-o anterior a fost mai mult un lucru global. Acum avem nevoie de puțin mai multă specificitate pentru a se potrivi nevoilor noastre.
În interiorul articol tag container, construim manual ceea ce trebuie să șablonăm postul nostru. Are un titlu, o dată, un widget integrat SoundCloud opțional și, bineînțeles, corpul articolului în sine. În interiorul dispunerilor noastre, avem acces la fiecare individ BlogArticle. Putem folosi current_article pentru a obține informațiile pentru fiecare articol pentru a construi șablonul personalizat. titlu, Data și corp sunt doar metode de extragere a atributelor din articolul individual. De asemenea, am folosit strftime pentru a formata data, așa cum am făcut-o anterior pe pagina index.
Accentsconagua
<%= current_article.title %> <%= current_article.date.strftime('%b %e') %> <%= current_article.body %> Așa cum am menționat deja, un simplu condițional este responsabil de manipularea datelor care sunt furnizate opțional pentru fiecare post individual prin matricea frontală - care este delimitată de trei liniuțe. Aici ne uităm dacă pagina are ID-ul unei melodii SoundCloud și pentru a afișa widget-ul dacă este așa:
<% if current_page.data.soundcloud_id %>... <% end %>
În cazul în care aveți nevoie de o reîmprospătare, accesăm datele prin pagina curenta obiecte și cereți-i date pentru valoarea pe care am stocat-o în matricea frontală prin intermediul cheii. În exemplul nostru, cheia de care avem nevoie este soundcloud_id. Dacă șablonul nostru găsește această cheie prin condiționată, afișează widget-ul și interpolează ID-ul SoundCloud pentru piesa respectivă pentru a găsi cea potrivită. Dacă este doar un post blog simplu, nu este necesar să furnizăm soundcloud_id în panoul frontal și widgetul SoundCloud nu vor fi încorporate.
Iată câteva exemple de referință pentru un post podcast cu un widget SoundCloud:
--- titlul: Un super-minunat al unsprezecelea meu postat cu titlul de post care se incadreaza intr-o alta linie: 2015-11-30 22:14 UTC soundcloud_id: 138095821 tags: --- descrierea minunata a episodului podcast ... <%= lorem.sentences 10 %> - Întrebarea nr. 01 - Întrebarea nr. 02 ...
Când faceți clic pe "partajați" pe oricare dintre piesele SoundCloud, veți avea opțiunea de a încorpora un iframe pentru acea piesă și trebuie doar să o copiați inserați undeva în codul dvs. Folosim acest framework iframe și folosim ID-ul pentru piesa de care avem nevoie pentru ao interpola în url. Există două opțiuni, un widget mare și unul mic - am ales cel mare. Celălalt are avantajul de a fi mai ușor de personalizat - de exemplu, puteți regla culoarea pentru butonul de redare. Depinde de tine:
Magia se întâmplă în această parte:
... api.soundcloud.com/tracks/<%= current_page.data.soundcloud_id %>& Auto_play = ...
După ce ne-am întrebat dacă aceste date sunt disponibile pentru noi prin intermediul condiționării, folosim datele fronmatter pentru a injecta id-ul pentru a afișa piesa dorită. Să vedem încă o dată cum s-au dovedit lucrurile până acum:
Ugh. Pe partea strălucitoare, avem toată structura și datele de care avem nevoie. Și vezi, pentru că am îmbrăcat-o Blogul cu aspect în interiorul schemă aspectul, avem avantajul de a avea subsolul deja în partea de jos. Nu este nevoie să copiați lucrurile - cool! Cu doar un pic de stil, am putea să transformăm lucrurile în jurul nostru și să facem acest aspect un pic mai decent.
În "source / stylesheets / all.sass":
@import 'posts_detail'
Și apoi în "sursa / stiluri / _posts_detail.sass" parțială:
#main + articol-container exterior.article-detail + shift (2) + span-coloane (8) .detail-post-titlu culoare: $ matcha-verde font-size: 1.7m margine-top: -dată font-size: 1.1cm culoare: $ text -color .article-detaliu p font-size: 1.05em margin-bottom: 4em culoare: $ text -color linie înălțime: fund: 50 px
Să mai avem un vârf rapid.
Păi, ajunge acolo. Să ne comportăm acum și să facem ceva după aceea:
git add -all git commit -m 'prima încercare la pagina cu detaliile postului w / opțiunea podcast Adăugă blog-layout Ajustează config pentru blog-layout Adaugă stiluri pentru pagina de detaliu Adăugă Sass Parțial Importuri Sass Actualizări parțiale frontmatter blog post'
Cititorul avid ar fi văzut deja ceea ce ar trebui să curățăm în continuare. Există un pic de duplicare în "_posts_detail.sass" și "_index_posts.sass". Aș dori să extrag stilurile duplicate într-un fișier separat Sass numit "_blog_post_extractions.sass". Experimentez cu această tehnică în ultima vreme - o idee pe care am primit-o de la programarea orientată pe obiecte. Lucruri precum BEM sau SMACSS pot fi minunate, mai ales pentru proiecte mai mari, cu echipe mai mari dacă s-au stabilit pentru următoarele convenții, dar pentru proiecte mai mici caut mereu soluții fără fricțiune și morți simple. O să încerc până când următorul lucru strălucitor mă va convinge de o abordare mai bună.
În "source / stylesheets / all.sass":
@import '@import' @import 'bimbo' @import 'base / base' @import 'neat' @import 'blog_post_extractions' @import 'footer @import' index_posts '
Unul în "source / stylesheets / _blog_post_extractions.sass":
###########################################################################################################################>>> match-green .post-title, .detail-post-titlu font-size: 1.7m .posts p, .article-detail p font-size: 1.05em line-height: .detail-post-date, .post-data culorii: $ text-color .posts p, .article-detail p margin-bottom: 4em
Dacă comparăți cele de mai sus cu fișierele originale, puteți vedea că am scăpat de o bucată frumoasă de duplicare. De asemenea, este ușor de înțeles și de găsit, deoarece importesc astfel de fișiere extrase chiar în partea de sus în "all.sass". Este ușor să vedeți aceste extracții pentru persoane noi la baza de cod. În acest caz, folosesc aceste fișiere pentru a colecta stiluri extrase care se aplică postărilor din blog. O abordare similară ar putea fi folosită pentru duplicarea diferitelor apariții ale barelor laterale, a dispozitivelor sau a altor dispozitive asemănătoare - ar trebui să existe un fir comun.
În "sursă / stiluri / _index_posts.sass":
.post-titlu a + tranziție (culoarea .4s ușurință în exterior) &: hover color: $ text-color .post-date font-size: 0.7mm margine: left: em (-80px)
În "source / stylesheets / _posts_detail.sass":
.detaliu-post-titlu marginea-sus: 40px .detail-post-data-font-size: 1.1em .soundclould-player-mare margin-bottom: 50px
Fișierele anterioare sunt acum mult mai mici, frumoase și ordonate - exact cum îmi plac. Fișierele sunt ieftine, așa că nu-mi pasă dacă am o mulțime de oameni care își fac toate treburile specifice. O separare a preocupărilor. Nu este o soluție perfectă, dar este atât de moartă simplu pentru lucruri mici pe care îmi place să experimentez mai mult cu această abordare.
De asemenea, trebuie să comentăm grila noastră vizuală în "source / stylesheets / base / _grid-settings.scss" și să vedem cum arată:
Este la fel ca înainte, dar cu stiluri mult mai curate. Îmi place! Este timpul să ne angajăm și să implementăm modificările noastre:
git add - tot git commit -m 'Extrage stiluri în _blog_post_extractions Extrage duplicarea de la _index_posts.sass _posts_detail.sass Importul de middleman
Să mergem la pagina paginilor GitHub și să verificăm dacă totul funcționează așa cum era de așteptat. Aoleu. La prima vedere arata bine, dar daca incercam sa mergem la pagina de detaliu din index, primim a 404 mesaj de eroare. GitHub nu poate găsi ceea ce avem nevoie.
Dacă te-ai uitat atent, s-ar putea să fi văzut că ne lipsesc câteva informații în urlul nostru. Acum se spune ceva de genul "http://your_username.github.io/2015/11/30/my-super-awesome-post.html". Ceea ce ar trebui să spună este ceva de genul "http://your_username.github.io/matcha-nerdz/2015/11/30/my-super-awesome-post.html". Partea "matcha-nerdz" lipsea complet. Nu vă faceți griji, aceasta este o rezolvare ușoară. Trebuie să activați legăturile relative în fișierul nostru de configurare:
set: relative_links, true
Având linkuri absolute pe GitHub Paginile vor indica în direcția greșită. Cu această mică modificare, legăturile dvs. sunt asociate în funcție de radacina aplicației dvs. După cum puteți vedea din acest mic exemplu, desfășurarea devreme și deseori este ideal pentru a prinde lucruri de genul asta. Găsirea acestor lucruri în afara contextului, atunci când deja lucrați la ceva complet diferit și trebuie să săturați adânc pentru bug-uri, vă pot mizeria cu fluxul vostru tremendos.
git commit - tot git commit -m 'Setați relative_links în configurarea config.rb' middleman
Totul ar trebui să funcționeze bine acum. Tipografia nu este încă perfectă, dar aș dori să trec mai departe și puteți să reglați aceste lucruri odată ce site-ul este setat așa cum avem nevoie. Haideți să aruncăm o privire:
După cum puteți vedea, lipsește widgetul audio; iar lungimea postului afișat nu este ideală pentru o listă de indexuri. Să rezolvăm următoarea problemă. Vreau să utilizez playerul mai mic SoundCloud pentru a afișa episodul podcast din lista index. Prin urmare, nu are sens să extrageți parțial pentru player atât pentru index, cât și pentru pagina cu detalii - fiecare pagină are nevoie de propriul widget. Dacă doriți să utilizați numai unul dintre jucători pentru ambele machete, ar trebui să extrageți cu siguranță un parțial pentru el. Voi părăsi acest pas de la tine, deoarece ați învățat deja cum se face acest lucru.
În "sursa / index.html.erb":
...<% page_articles.each_with_index do |article, i| %>...<%= article.date.strftime('%b %e') %> <%= link_to article.title, article %>
<% if article.data.soundcloud_id %><% end %> <%= article.body %> <% end %>
Exemplul de cod este axat pe secțiunea în care se repetă page_articles. Am adăugat o condiție care afișează widgetul audio numai dacă articolul are a sound_cloud_id în partea frontală a articolului - pe care accesăm prin atributul său de date. Este foarte similar cu modul în care am rezolvat acest lucru anterior. În acest caz, am folosit parametrul bloc articol pentru a accesa informațiile de care avem nevoie.
În continuare, vreau să scurtez textul afișat înainte de a aplica câteva stiluri. În lista de indexuri, dorim să vedem doar un rezumat de 300 de caractere - nu prea mult, dar cu siguranță și nu prea puțin text. Experimentați pe cont propriu și vedeți ce funcționează cel mai bine pentru nevoile dvs..
Mai întâi trebuie să adăugăm bijuteria Nokogiri pentru noi Gemfile:
gem 'nokogiri'
și bundle:
instalare pachet
În index trebuie să schimbăm doar o singură linie. Am lăsat un comentariu pentru ceea ce trebuie înlocuit. Utilizăm metoda sumară și o furnizăm cu numărul de caractere pe care dorim să le vedem pe articol în lista de indexuri.
Deci, în "sursa / index.html.erb":
<%# article.body %> <%= article.summary(300) %>
Și apoi "source / stylesheets / _index_posts.sass":
Și ar trebui să adăugăm stilurile pentru playerul SC mic .SoundCloud-player-mici la fișierul extras "source / stylesheets / _blog_post_extractions.sass":
.posturi p, .post-titlu, articol.articol-detaliu, .soundclould-player-small + shift (2) + span-coloane (8)
Mărește distanța un pic și am terminat:
.soundclould-player-margine mică: 1em
Bine, ajungem acolo. Acum avem o listă de index care afișează atât articole text numai, cât și articole episodice podcast-necomplicate, fără nici un fuzz. Dacă aveți un text fictiv mai bun, acest lucru ar trebui să pară destul de decent până acum. Să ne angajăm!
git add - tot git commit -m 'Adăugă Rezumatul articolului și Widget-ul mic la index Adăugă stiluri pentru lista de indexuri SC widget Adăugă Nokogiri Adaugă widgetul SC opțional la index Adăugă un rezumat de 300 de caractere'
Cred că ți-ai câștigat o băutură răcoritoare în acest moment, așa că o putem lăsa la asta deocamdată. În tutorialul următor și final îl vom îmbunătăți și vom adăuga ceva pentru navigarea pe site.
"De ce găzduiți podcast-ul pe SoundCloud?", Ați putea întreba. Ei bine, raționamentul meu a fost simplu: mai întâi de toate (și nu sunt afiliat în niciun fel la SoundCloud), va fi destul de sigur în jur de mult timp - ceva ce nu vă puteți aștepta neapărat de la o mulțime de proiecte care oferă găzduiți fișierele audio podcast. Nu vreau să mă trezesc în situația de a se ocupa de migrarea tonurilor de piste audio deja publicate către un alt serviciu doar pentru că cineva a fost dobândit sau a bătut.
În al doilea rând, este ieftin ieftin pentru a găzdui o tona de piese, și chiar au o opțiune gratuită pentru oameni care publică piese doar ocazional.
Jucătorul și opțiunile lui sunt în regulă - nu am nici un motiv să mă plâng de viteză sau de ceva până acum. Statisticile sunt de asemenea utile și există deja oameni de pe platformă care sunt interesați de podcasturi - ceea ce este bun pentru factorul de descoperire. Nu mă înțelegeți rău, există multe motive pentru care am vrut să îmbrățișez pe cineva ușor în jurul gâtului atunci când se ocupa cu încărcarea și prostiile UX, dar în comparație cu dezavantajele durerilor de cap mai mari cu alte opțiuni de găzduire, SoundCloud părea cel mai rezonabil alegerea generală. În cele din urmă, nu-mi plac site-urile personalizate pe care le oferă aceste site-uri podcast. Acestea arată super generice și îmi place să-mi construiesc propriile lucruri care se potrivesc nevoilor mele și îmi permit să-mi creez propria identitate vizuală.
