Share
Wenn Sie mit der Erstellung statischer Websites fortfahren, gestalten wir in diesem Lernprogramm die Detailseite für Beiträge, binden das Podcast-Widget ein und verbringen etwas Zeit, um unsere Indexliste in Form zu bringen. Wir kümmern uns auch um Stilvervielfältigungen und relative Links.
Wir werden folgendes abdecken:
Ich denke, wir sollten unsere Aufmerksamkeit verschieben und unserer Detailseite ein wenig grundlegende Liebe geben, bevor wir die App anpassen, um unsere Podcast-Episoden anzuzeigen. Mit der Indexseite sind wir noch nicht ganz fertig. Wenn wir in diesem Tutorial noch etwas Platz haben, füge ich wahrscheinlich ein paar Medienanfragen hinzu, um mit unterschiedlichen Bildschirmauflösungen umzugehen. Im Moment würde ich sagen, lass uns weitergehen. Wie ist der Status Quo??
Ja, das sieht nicht gut aus! Unser Text ist überall. Lassen Sie uns das zuerst beheben. Es empfiehlt sich, das visuelle Raster erneut zu aktivieren.
In "source / stylesheets / base / _grid-settings.scss":
$ visual-grid: true;
Danach müssen wir ein separates Layout für die Detailseiten unserer Beiträge erstellen. Das Layout wird flexibel sein, so dass wir sie für reine Blogbeiträge und für das Posten von Podcast-Episoden verwenden können - eine kleine bedingte Aussage wird uns dabei helfen. Aber dazu später mehr. Öffnen wir config.rb und fügen Sie diese Zeile hinzu:
aktivieren: blog do | blog | blog.layout = "layouts / blog-layout" ende
Dies wird Middleman mitteilen, dass wir ein separates Layout für Detailseiten haben und es unter "Layouts / Blog-Layout" zu finden ist. Als nächstes müssen wir "layouts / blog-layout.erb" erstellen. Denken Sie daran, dass das .erb-Element ohne die Erweiterung .html erforderlich ist, damit dies ordnungsgemäß funktioniert.
In "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 %>
Sprechen wir über das, was hier los ist. Zuerst müssen wir das einpacken Blog-Layout in unserem allgemeinen Layout. Oder anders ausgedrückt, wir wickeln das Layout der Anwendung um das Blog-Layout.
<% wrap_layout :layout do %>… <% end %>
Warum? Weil wir eine Menge des Materials aus dem ursprünglichen Layout wiederverwenden wollen und keine Dinge wie die kopieren möchten Fußzeile teilweise oder die Asset-Links in Kopf. Geben Sie ihm nur ein oder zwei Minuten Zeit, um einzutauchen, wenn Ihnen das zunächst komisch vorkommt. Das Layout, das wir zuvor verwendet haben, war eher eine globale Sache. Jetzt brauchen wir etwas mehr Spezifität, um unsere Bedürfnisse zu erfüllen.
In der Artikel Mit dem Tag-Container erstellen wir manuell das, was wir für die Erstellung unseres Posts benötigen. Es hat einen Titel, ein Datum, ein optionales eingebettetes SoundCloud-Widget und natürlich den Artikeltext selbst. Innerhalb unserer Layouts haben wir Zugriff auf jeden Einzelnen BlogArtikel. Wir können benutzen current_article Die Informationen zu jedem Artikel erhalten Sie, um unsere benutzerdefinierte Vorlage aufzubauen. Titel, Datum und Karosserie sind nur Methoden, um die Attribute aus dem einzelnen Artikel zu extrahieren. Wir haben auch gebraucht Spielzeit um das Datum wie zuvor auf der Indexseite zu formatieren.
Accentsconagua
<%= current_article.title %> <%= current_article.date.strftime('%b %e') %> <%= current_article.body %> Wie bereits erwähnt, ist eine einfache Bedingung für den Umgang mit Daten vorgesehen, die optional für jeden einzelnen Beitrag über sein Frontmatter bereitgestellt werden, das durch drei Striche begrenzt ist. Hier prüfen wir, ob die Seite die ID einer SoundCloud-Spur hat, und zeigt das Widget an, wenn dies der Fall ist:
<% if current_page.data.soundcloud_id %>… <% end %>
Falls Sie eine Auffrischung benötigen, erhalten wir über die aktuelle Seite Objekt und fragen Sie sein Daten für den Wert, den wir im Frontmatter über seinen Schlüssel gespeichert haben. In unserem Beispiel ist der Schlüssel, den wir brauchen soundcloud_id. Wenn unsere Vorlage diesen Schlüssel über die Bedingung findet, wird das Widget angezeigt und die SoundCloud-ID für diese Spur interpoliert, um die richtige zu finden. Wenn es sich nur um einen einfachen Blogbeitrag handelt, müssen wir das nicht angeben soundcloud_id im Frontmatter und das SoundCloud-Widget werden nicht eingebettet.
Hier ein Beispiel für ein Frontmatter für einen Podcast-Beitrag mit einem SoundCloud-Widget:
--- Titel: Mein super toller elfter Titel mit langer Betreffzeile, der in eine andere Zeile einbricht: 2015-11-30 22:14 UTC soundcloud_id: 138095821 tags: --- Ihre geniale Podcast-Episodenbeschreibung <%= lorem.sentences 10 %> - Frage Nr. 01 - Frage Nr. 02…
Wenn Sie auf einer der SoundCloud-Tracks auf „share“ klicken, haben Sie die Möglichkeit, eine iframe für diesen Track und muss nur kopiert werden, fügen Sie ihn irgendwo in Ihren Code ein. Wir verwenden diesen iframe als Basis und verwenden die ID für die Spur, die wir benötigen, um ihn in die URL zu interpolieren. Es gibt zwei Optionen, ein großes und ein kleines Widget. Ich habe das große ausgewählt. Der andere hat den Vorteil, dass er etwas anpassbarer ist - Sie können zum Beispiel die Farbe für die Wiedergabetaste anpassen. Es liegt an dir:
Die Magie geschieht in diesem Teil:
… Api.soundcloud.com/tracks/<%= current_page.data.soundcloud_id %>& auto_play =…
Nachdem wir gefragt wurden, ob uns diese Daten über die Bedingung zur Verfügung stehen, verwenden wir die Fronmatter-Daten, um die ID einzugeben, um die gewünschte Spur anzuzeigen. Lassen Sie uns noch einen Blick darauf werfen, wie sich die Dinge bisher entwickelt haben:
Pfui. Auf der positiven Seite haben wir alle Strukturen und Daten, die wir brauchen. Und sehen Sie, weil wir das verschachtelt haben Blog-Layout in der Layout Layout haben wir den Vorteil, dass die Fußzeile bereits unten ist. Keine Notwendigkeit, Dinge zu kopieren - cool! Mit ein bisschen Styling könnten wir die Dinge umdrehen und das Aussehen etwas anständiger machen.
In "source / stylesheets / all.sass":
@import 'posts_detail'
Und dann im partiellen "source / stylesheets / _posts_detail.sass":
#main + outer-container article.article-detail + shift (2) + span-column (8) .detail-post-title Farbe: $ matcha-green Schriftgröße: 1.7em Rand: 40px .detail-post -date font-size: 1.1em color: $ text-color .article-detail p font-size: 1.05em margin-bottom: 4em color: $ text-color line-height: 1.35em .soundclould-player-großer rand- unten: 50px
Lassen Sie uns noch einen kurzen Höhepunkt haben.
Nun, es ist soweit. Lassen Sie uns erst einmal festlegen und danach etwas Housekeeping durchführen:
git add --all git commit -m '1. Versuch der Beitragsdetailseite mit Podcast-Option Fügt Blog-Layout hinzu. Korrigiert die Konfiguration für das Blog-Layout. Fügt Stile für die Detailseite hinzu. Sass Teilimporte hinzufügen.
Der begeisterte Leser hat vielleicht schon entdeckt, was wir als nächstes bereinigen sollten. In "_posts_detail.sass" und "_index_posts.sass" gibt es ein paar Duplikate. Ich möchte die duplizierten Stile in eine separate Sass-Datei mit dem Namen "_blog_post_extractions.sass" extrahieren. Ich experimentiere in letzter Zeit mit dieser Technik - eine Idee, die ich von der objektorientierten Programmierung erhielt. Dinge wie BEM oder SMACSS können großartig sein, vor allem für größere Projekte mit größeren Teams, wenn sie sich mit folgenden Konventionen zufrieden geben. Bei kleineren Projekten suche ich immer nach reibungslosen, unkomplizierten Lösungen. Ich werde es versuchen, bis das nächste neue glänzende Ding mich von einem besseren Ansatz überzeugt.
In "source / stylesheets / all.sass":
@import 'Bourbon' @import 'Basis / Basis' @import 'ordentlich' @import 'blog_post_extractions' @import 'Fußzeile' @import 'index_posts' @import 'posts_detail'
Ein in "source / stylesheets / _blog_post_extractions.sass":
#main, .posts + outer-container .posts p, .posttitel, article.article-detail + shift (2) + span-column (8) .posttitel a, .detail-posttitel farbe: $ matcha-green .post-title, .detail-post-title Schriftgröße: 1.7em .posts p, .article-detail p Schriftgröße: 1.05em Zeilenhöhe: 1.35em .posts p, .article-detail p , .detail-post-date, .post-date-color: $ text-color .posts p, .article-detail p rand-bottom: 4em
Wenn Sie die oben genannten Dateien mit den Originaldateien vergleichen, können Sie feststellen, dass wir einen schönen Teil der Duplikate entfernt haben. Es ist auch leicht zu verstehen und zu finden, da ich solche extrahierten Dateien direkt in "all.sass" importiere. Es ist leicht, diese Extraktionen für Leute zu erkennen, die mit der Code-Basis neu sind. In diesem Fall verwende ich diese Dateien, um extrahierte Stile zu sammeln, die für Blogbeiträge gelten. Ein ähnlicher Ansatz könnte für Duplikate bei verschiedenen Erscheinungsbildern von Seitenleisten, Geräten oder Ähnlichem funktionieren. Es sollte jedoch ein gemeinsamer Thread vorhanden sein.
In "source / stylesheets / _index_posts.sass":
.Post-Titel a + Übergang (Farbe .4s Leichtgängigkeit) &: Schwebefarbe: $ Textfarbe .Post-Datum Schriftgröße: 0.7em Rand: links: em (-80px) rechts: em (20px)
In "source / stylesheets / _posts_detail.sass":
.detail-post-title margin-top: 40px .detail-post-date Schriftgröße: 1.1em .soundclould-player-big margin-bottom: 50px
Die vorherigen Dateien sind jetzt viel kleiner, nett und aufgeräumt - genau wie ich sie mag. Die Dateien sind billig, also ist es mir egal, ob ich viele davon habe, die alle ihren ganz speziellen Job erledigen. Eine Trennung der Bedenken. Es ist keine perfekte Lösung, aber für kleine Dinge ist es so einfach, dass ich mehr mit diesem Ansatz experimentiere.
Wir sollten auch unser visuelles Raster in „source / stylesheets / base / _grid-settings.scss“ auskommentieren und sehen, wie es aussieht:
Es ist das gleiche wie zuvor, aber mit viel saubereren Styles. Ich mag es! Zeit zum Festschreiben und zur Implementierung unserer Änderungen:
git add --all git commit -m 'Extrahiert Stile in _blog_post_extractions Extrahiert Duplikationen aus _index_posts.sass _posts_detail.sass Importiert den Mittelsmann von Styles
Gehen wir zu unserer GitHub-Seite und prüfen, ob alles wie erwartet funktioniert. Ach je. Auf den ersten Blick sieht es gut aus, aber wenn wir versuchen, aus dem Index auf die Detailseite zu gelangen, erhalten wir eine 404 Fehlermeldung. GitHub kann nicht finden, was wir brauchen.
Wenn Sie genau hinschauen, haben Sie vielleicht schon gesehen, dass einige Informationen in unserer URL fehlen. Nun heißt es so etwas wie "http://your_username.github.io/2015/11/30/my-super-awesome-post.html". Was es sagen soll, ist so etwas wie "http://your_username.github.io/matcha-nerdz/2015/11/30/my-super-awesome-post.html". Der Matcha-Nerdz-Teil fehlte komplett. Keine Sorge, das ist eine einfache Lösung. Wir müssen relative Links in unserer Konfigurationsdatei aktivieren:
set: relative_links, true
Absolute Links auf GitHub-Seiten weisen in die falsche Richtung. Mit dieser kleinen Änderung werden Ihre Links relativ zum Stamm Ihrer App mit einem Namespace versehen. Wie Sie an diesem kleinen Beispiel sehen können, ist die frühzeitige Bereitstellung ideal, um solche Dinge abzufangen. Wenn Sie diese Dinge außerhalb des Kontextes finden, wenn Sie bereits an etwas völlig anderem arbeiten und tief nach Fehlern suchen müssen, kann dies Ihren Fluss enorm beeinflussen.
git commit --all git commit -m 'Setze relative_links in config.rb'
Jetzt sollte alles gut funktionieren. Die Typografie ist noch nicht perfekt, aber ich würde gerne weitermachen und Sie können diese Dinge fein abstimmen, sobald die Site so eingerichtet ist, wie wir sie brauchen. Werfen wir einen Blick:
Wie Sie sehen, fehlt das Audio-Widget. und die Länge des angezeigten Beitrags ist nicht ideal für eine Indexliste. Lass uns das als nächstes beheben. Ich möchte den kleineren SoundCloud-Player verwenden, um die Podcast-Episode in der Indexliste anzuzeigen. Daher ist es nicht sinnvoll, einen Teil für den Player für die Index- und die Detailseite zu extrahieren. Jede Seite benötigt ein eigenes Widget. Wenn Sie nur einen der Player für beide Layouts verwenden möchten, sollten Sie auf jeden Fall einen Teil davon extrahieren. Ich überlasse diesen Schritt Ihnen, da Sie bereits gelernt haben, wie dies getan wird.
In "source / 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 %>
Das Codebeispiel konzentriert sich auf den Abschnitt, in dem wir iterieren page_articles. Ich habe eine Bedingung hinzugefügt, die das Audio-Widget nur dann anzeigt, wenn der Artikel über ein sound_cloud_id im Frontmatter des Artikels, auf den wir über sein Datenattribut zugreifen. Es ist sehr ähnlich wie wir es zuvor gelöst haben. In diesem Fall haben wir den Blockparameter verwendet Artikel um auf die Informationen zuzugreifen, die wir benötigen.
Als Nächstes möchte ich den angezeigten Text kürzen, bevor wir einige Stile anwenden. In der Indexliste möchten wir nur eine Zusammenfassung mit 300 Zeichen sehen - nicht zu viel, aber auf jeden Fall auch nicht zu wenig Text. Experimentieren Sie selbst und sehen Sie, was für Ihre Anforderungen am besten geeignet ist.
Zuerst müssen wir den Edelstein hinzufügen Nokogiri zu unserer Gemfile:
Juwel 'nokogiri'
und bündeln Sie es:
Bundle installieren
Im Index müssen wir nur eine Zeile ändern. Ich habe einen Kommentar hinterlassen, was ersetzt werden muss. Wir verwenden die Summary-Methode und geben die Anzahl der Zeichen an, die pro Artikel in der Indexliste angezeigt werden sollen.
Also in "source / index.html.erb":
<%# article.body %> <%= article.summary(300) %>
Und dann "source / stylesheets / _index_posts.sass":
Und wir sollten die Styles für den kleinen SC-Player hinzufügen .Soundcloud-Player-klein in unsere extrahierte Datei "source / stylesheets / _blog_post_extractions.sass":
.Beiträge p, .post-title, article.article-detail, .soundclould-player-small + shift (2) + span-column (8)
Verschiebe den Abstand ein wenig und wir sind fertig:
.Soundclould-Player-kleiner Rand unten: 1em
Okay, wir kommen dort an. Jetzt haben wir eine Indexliste, die sowohl Text- als auch Podcast-Artikel unkompliziert ohne Fuzz anzeigt. Wenn Sie einen besseren Dummy-Text haben, sollte dieser jetzt ziemlich anständig aussehen. Lass uns begehen!
git add --all git commit -m 'Fügt Artikelzusammenfassung und kleines Widget zum Index hinzu. Fügt Formatvorlagen für die Indexliste hinzu. SC-Widget Fügt Nokogiri hinzu. Fügt optionales SC-Widget zum Index hinzu
Ich denke, Sie haben sich an dieser Stelle ein cooles Getränk verdient, also können wir es jetzt belassen. Im nächsten und letzten Tutorial werden wir noch ein wenig weiter optimieren und ein wenig für die Navigation auf der Website hinzufügen.
„Warum hosten Sie den Podcast auf SoundCloud?“, Könnten Sie fragen. Nun, meine Überlegungen waren einfach: Erstens (und ich bin in keiner Weise mit SoundCloud verbunden), wird es sicherlich für eine lange Zeit da sein - etwas, das man nicht unbedingt von vielen Projekten erwarten kann, die sich anbieten hosten Sie Ihre Podcast-Audiodateien. Ich möchte mich nicht in die Lage versetzen, Tonnen von bereits veröffentlichten Audiotiteln zu einem anderen Dienst zu migrieren, nur weil jemand erworben wurde oder pleite ging.
Zweitens ist es absolut billig, eine Menge Tracks zu hosten, und sie haben sogar eine kostenlose Option für Leute, die Tracks nur gelegentlich veröffentlichen.
Der Spieler und seine Optionen sind auch in Ordnung - ich habe keinen Grund, mich über Geschwindigkeit oder irgendetwas zu beklagen. Die Statistiken sind auch nützlich und es gibt bereits Leute auf der Plattform, die sich für Podcasts interessieren - was für den Entdeckungsfaktor gut ist. Versteht mich nicht falsch, es gibt viele Gründe, warum ich jemanden beim Hochladen und dummen UX-Dingen um den Hals sanft umarmen wollte, aber verglichen mit den Nachteilen größerer Kopfschmerzen bei anderen Hosting-Optionen schien SoundCloud das vernünftigste Wahl insgesamt. Schließlich mag ich nicht die benutzerdefinierten Websites, die diese Podcast-Websites bieten. Sie sehen super-generisch aus und ich baue gerne meine eigenen Sachen, die meinen Bedürfnissen entsprechen und ich meine eigene visuelle Identität schaffen kann.
