Hier habe ich auch die Stile aus dem Musterabschnitt von Refills kopiert und in eine neue Datei eingefügt, die diesem Bannerabschnitt gewidmet ist. Die bereitgestellten Stile befinden sich im .scss Syntax und so gehe ich mit dem Fluss-es gibt keine Notwendigkeit, dies in zu konvertieren .sass Ja wirklich.

In "source / stylesheets / _hero_banner.scss":

 .hero $ base-border-radius: 3px! default; $ action-color: # 477DCA! default; $ large-screen: em (860)! default; $ hero-background-top: # 7F99BE; $ hero-background-bottom: # 20392B; $ hero-color: weiß; $ Gradientenwinkel: 10 Grad; $ hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'; @ include-Hintergrund (URL ($ hero-image), linearer Gradient ($ gradient-angle, $ hero-background-bottom, $ hero-background-top), keine Wiederholung $ hero-background-top scroll); Hintergrundfarbe: # 324766; Hintergrundposition: oben; Hintergrundwiederholung: keine Wiederholung; Hintergrundgröße: Cover; Polsterung unten: 3em; .hero-logo img height: 4em; Rand unten: 1em;  .hero-inner @include outer-container; @include clearfix; Marge: auto; Polsterung: 3.5em; Text ausrichten: Mitte; .hero-copy text-align: center; h1 color: $ hero-color; Schriftgröße: 1.6em; Rand unten: 0,5 em; @include media ($ large-screen) Schriftgröße: 1.8em;  p color: $ hero-color; Zeilenhöhe: 1.4em; Marge: 0 auto 3em auto; @include media ($ large-screen) Schriftgröße: 1.1em; Max-Breite: 40%;  

Wir werden dies in einer Sekunde anpassen, aber lassen Sie uns zuerst einen Blick darauf werfen:

Es passt genau hinein - so mag ich es! Lassen Sie uns dies an unsere Bedürfnisse anpassen, indem wir das Bild und das Symbol loswerden. Beginnen wir jedoch mit dem Text, also in „source / index.html.erb“:

Sie können dies beliebig anpassen. Ich möchte das schnell machen und einfach die Größe erhöhen h1 für große bildschirme und kleinere geräte. Der Kopf der Heldeneinheit ist jetzt 2em und 3em bzw. nicht zu viel. Die Polsterung an .Heldeninneres muss auch einen Anstoß bewegen.

Wieder in "source / stylesheets / _hero_banner.scss":

 .hero-inner // padding: 3.5em; Polsterauflage: 1.2em;  .hero-copy text-align: center; h1 color: $ hero-color; Schriftgröße: 2em; Rand unten: 0,5 em; @include media ($ large-screen) Schriftgröße: 3em;  

Als nächstes töten wir den Logo-Platzhalter. Ich finde sie oft etwas nervig. In "source / index.html.erb":

 
 
 
 
MATCHA NERDZ
 
Podcast für Grüntee-Kenner
 
 
 
 

Das ist alles was wir brauchen. Da wir das Heldenlogo nicht verwenden, wollen wir deren Styles-Dead-Weight loswerden, also in „source / stylesheets / _hero_banner.scss“:

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

Hintergrundbild

Das generische Hintergrundbild muss ebenfalls verschwinden. Ich zeige dir zuerst, wie ich es sehen will, dann erkläre ich, wie ich dorthin komme.

Ignorieren Sie die Typografie vorerst, Sie können sie später anpassen. Ich habe das Bild ersetzt und einen leichten Farbverlauf darauf gesetzt. Da der Typ weiß ist, brauchte ich für ein besseres Leseerlebnis etwas mehr Kontrast. Wenn Sie ein Bild auswählen, für das kein zusätzlicher Verlauf erforderlich ist, wählen Sie es aus!

Ich habe den Refills-Code mit ein paar Änderungen angepasst. Zuerst habe ich ein Bild zu „Quelle / Bilder“ hinzugefügt und dieses Bild in der Variablen gespeichert $ hero-image. Dann habe ich diese Variable im verwendet Hintergrund mixin von Bourbon und ordnete das Bild und das linearer Gradient (auch ein Bourbon Mixin). Da der Farbverlauf an erster Stelle steht, wird er über Matcha_Nerdz.png eingeblendet. Noch einmal in "source / stylesheets / _hero_banner.scss":

 .hero $ hero-image: '… /images/Matcha_Nerdz.png'; $ hero-background-top: dunkler ($ matcha-green, 65%); $ hero-background-bottom: rgba (aufhellen ($ matcha-green, 10%), .3); @ include-Hintergrund (linearer Farbverlauf ($ gradient-angle, $ hero-background-bottom, $ hero-background-top), URL ($ hero-image), keine Wiederholung $ hero-background-top scroll); Rand unten: 2em; // Hintergrundfarbe: # 324766; // Hintergrundgröße: Cover; 

Für den Farbverlauf selbst habe ich unser verwendet $ matcha-green die wir in "source / stylesheets / base / _variables.scss" gespeichert haben. Die obere Farbe ist mit einer Sass-Funktion um 65% dunkel; Die andere wird um 10% aufgehellt und auch über eine andere Sass-Funktion transparent gemacht rgba. Wir verwenden diese Variablen dann erneut in unserem Hintergrund mixin. Das Steigungswinkel gleich geblieben. Ich habe auch eine kleine Marge von hinzugefügt 2em die Indexliste etwas nach unten drücken. Die Styles, die ich für Sie kommentiert habe, sind totes Gewicht und deshalb habe ich sie gelöscht.

Mit einem solchen Farbverlauf können Sie natürlich auch direkt in Photoshop spielen, aber ich wollte Ihnen zeigen, wie Sie sie in Sass verwenden können. Unten ist ein Screenshot, bei dem der Heldeneinheit kein linearer Farbverlauf hinzugefügt wurde. Als kleine Übung überlasse ich die Bereinigung der Stile, die wir Ihnen kopiert haben. Wenn Sie Duplikate oder nicht verwendete Stile finden, empfiehlt es sich, dies zu beheben, bevor Sie fortfahren.

Commit und Deploy

Zeit für ein weiteres Commit und Bereitstellen.

 git add --all git commit -m 'Fügt index.html.erb Heldeneinheit hinzu. Fügt Heldenbild mit Farbverlauf hinzu. Fügt _hero_banner hinzu. Sass Partielle Importe Sass Partielle Mittlerimplementierung 

Ohne das visuelle Raster sieht es nicht so aus, als hätten Sie noch viel Arbeit, um diese Seite an Ihre Podcasting-Anforderungen anzupassen. Ein paar Dinge, die ich Ihnen empfehlen würde, ist, eine Schrift zu finden, die Ihr Projekt unverkennbar kommuniziert, ohne zu exotisch zu sein, und die Größe und den Abstand Ihres Textes so anpassen, dass er zu Ihrem Hintergrundbild der Heldeneinheit passt. Da dies Teil Ihres Brandings ist, schlage ich vor, dass Sie sich Zeit nehmen und Spaß haben!

Navigation

Es ist eine gute Zeit, eine Navbar hinzuzufügen. Wir werden wieder ein Muster von Refills verwenden und es an unsere eigenen Bedürfnisse anpassen. Ich habe die "Zentrierte Navigation" ausgewählt, die Sie unter "Muster" finden. Dafür müssen wir den HTML-, SCSS- und den CoffeeScript-Code kopieren. Zuerst füge ich das Markup unserer globalen Datei "layout.erb" hinzu

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

Whoa! Das ist ziemlich viel Code. Denkst du genauso wie ich? Das sieht fies aus, oder? Lassen Sie uns dies auf eine partielle setzen. Wir ändern "source / layouts / layout.erb" in:

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

Und fügen Sie "source / partials / _navbar.erb" hinzu:

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

Ich habe ein paar Sachen entfernt, die ich nicht brauche, und nur noch mein Logo, das ich in "/ images" gespeichert habe, und zwei Links für Zuhause und über Seiten. Für die beiden Links habe ich die Link zu Hilfsmethode. Es braucht zwei Argumente:

• Die Zeichenfolge, auf die Benutzer klicken sollen
• und den Ort, zu dem Sie einen Link erstellen möchten.

Ich bin sicher, dass Leute, die ein bisschen mit Rails oder Sinatra gespielt haben, damit vertraut sind. Praktisch, aber keine große Sache. Der Link für „Home“ (/ matcha-nerd) wird für Ihren lokalen Host unterbrochen, funktioniert aber auf GitHub Pages, auf denen der Namespace benötigt wird.

Der begeisterte Leser hat möglicherweise auch entdeckt, dass unser About-Link auf eine einfache HTML-Seite verweist, die ich in ein neues Verzeichnis mit dem Namen "pages" eingefügt habe. Ich schlage vor, Sie setzen HTML-Seiten wie contact, faq oder was auch immer in dieses Verzeichnis. Wenn Sie diese statischen Seiten dort ablegen, sollten Sie keine Probleme haben, sie an Ihre Bedürfnisse anzupassen. Haben Sie einfach Spaß und wenden Sie an, was Sie bisher mit diesen Seiten gelernt haben. Von hier an sind Sie damit allein, wissen aber jetzt alles, was Sie brauchen. Samo, Samo!

Asset-Pfad

Ein Wort zu den Image-Tags und dem Asset-Pfad auf GitHub-Pages. Ich entschied mich dafür, die Ebene zu ersetzen img Tags für das Logo mit einem Middleman-Helfer image_tag. Es ist nicht nur ziemlich prägnant und lesbar, sondern behebt auch ein Problem, mit dem Sie in Verbindung treten werden img Tag, wenn Sie die Site erstellen und auf GitHub Pages bereitstellen. Die URL für den Asset-Link für einzelne Artikel wird auf den Kopf gestellt, und dies ist die einfachste Lösung, um dies zu beheben.

Vor Gebrauch image_tag, Die URL für das Logo sah folgendermaßen aus: http://Ihr_Benutzername.github.io/images/matcha_nerdz_logo-hash_numbers.png

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

Dieser Middleman-Helfer gab der App den Namen der App Matcha-Nerdz-Es gab dem Asset einen korrekten Namensraum und gewährt GitHub Pages Zugriff auf diese Bilddatei (http://Ihr_Benutzername.github.io/matcha-nerdz/images/matcha_nerdz_logo-hash_numbers.png).

Mehr Organisation

Die von Refills kopierten Styles sind natürlich in einem neuen Sass-Part. In "source / stylesheets / all.sass" verweisen wir auf:

 @import 'header_navbar' 

Und der eigentliche Teil "source / stylesheets / _header_navbar.scss" sieht folgendermaßen aus:

 .zentrierte Navigation $ base-border-radius: 3px! default; $ dunkelgrau: # 333! default; $ large-screen: em (860)! default; $ base-font-color: white; $ zentrierte Navigation-Auffüllung: 1em; $ zentriertes -Navigationslogo-Höhe: 2em; $ zentrierter Navigationshintergrund: # E7F1EC; $ zentrierte Navigationsfarbe: $ base-font-color; $ centered-navigation-color-hover: $ text-color; $ zentrierte Navigationshöhe: 60px; $ zentrierte Navigationselementauffüllung: 1em; $ centered-navigation-submenu-padding: 1em; $ centered-navigation-item-nudge: 2.2em; $ horizontal-bar-mode: $ large-screen; Hintergrundfarbe: $ matcha-green; Rahmen unten: 1px dunkler ($ matcha-green, 5%); min-height: $ zentrierte Navigationshöhe; Breite: 100%; z-Index: 9999; // Mobile Ansicht .mobile-logo display: inline; Schwimmer: links; max-height: $ zentrierte Navigationshöhe; Padding-Left: $ zentrierte Navigationsauffüllung; img max-height: $ zentrierte Navigationshöhe; Polsterung: .8em 0;  @ include media ($ horizontal-bar-mode) display: none;  .centered-navigation-mobile-menu color: $ centered-navigation-color; Bildschirmsperre; schweben rechts; Zeilenhöhe: $ zentrierte Navigationshöhe; Marge: 0; padding-right: $ centered-navigation-submenu-padding; Textdekoration: keine; Text-Transformation: Großbuchstaben; @include media ($ horizontal-bar-mode) display: none;  &: focus, &: hover color: $ zentriert-navigation-color-hover;  // Nav-Menü .centered-navigation-wrapper @include outer-container; @include clearfix; Position: relativ; z-Index: 999;  ul.centered-navigation-menu -webkit-transform-style: preserve-3d; // Stoppen Sie das Webkit. Flimmern Sie klar: Beide; Anzeige: keine; Marge: 0 auto; Überlauf: sichtbar; Polsterung: 0; Breite: 100%; z-Index: 99999; & .show display: block;  @ include media ($ horizontal-bar-mode) display: block; Text ausrichten: Mitte;  // Die Navigationselemente .nav-link: first-child @include media ($ horizontal-bar-mode) margin-left: $ centered-navigation-item-nudge; Polsterung rechts: 0px;  ul li.nav-link background: aufhellen ($ matcha-green, 8%); Bildschirmsperre; Zeilenhöhe: $ zentrierte Navigationshöhe; Überlauf versteckt; padding-right: $ centered-navigation-submenu-padding; Textausrichtung: rechts; Breite: 100%; z-Index: 9999; eine color: $ zentrierte-Navigationsfarbe; Anzeige: Inline-Block; Umriss: keine; Textdekoration: keine; &: focus, &: hover color: $ zentriert-navigation-color-hover;  @include media ($ horizontal-bar-mode) background: transparent; Anzeige: Inline; Zeilenhöhe: $ zentrierte Navigationshöhe; a padding-right: $ zentrierte Navigationselementauffüllung;  li.logo.nav-link display: none; Zeilenhöhe: 0; @include media ($ large-screen) display: inline;  .logo img margin-bottom: - $ zentrierte-navigation-logo-height / 3; Max-Höhe: $ zentrierte-Navigation-Logo-Höhe;  

Ich habe den CoffeeScript-Code von Refills in "all.coffee" eingefügt. Sobald ich mehr Code als den hinzufügen musste, würde ich ihn an einen eigenen Platz stellen. "Source / javascripts / all.coffee":

 // = jquery $ (document) .ready erforderlich -> menuToggle = $ ('# js-centered-navigation-mobile-menu'). unbind () $ ('# js-centered-navigation-menu'). removeClass ' zeige 'menuToggle.on' click ', (e) -> e.preventDefault () $ (' # js-centered-navigation-menu '). slideToggle -> if $ (' # js-centered-navigation-menu ') .is (': hidden') $ ('# js-zentriertes Navigationsmenü'). removeAttr 'style' return return return 

Dieses Snippet ist für das Umschalten des Menüs für kleinere Bildschirme verantwortlich.

Da ich ein paar Sachen gelöscht habe, die ich nicht aus dem Navbar-Markup-wie dem Untermenü - brauchte, konnte ich einen bedeutenden Teil der relevanten Stile in dieser Datei loswerden. Da ich nicht weiß, ob Sie eine umfangreichere Navbar benötigen und den Code direkt aus diesen Beispielen entnehmen möchten, sollten Sie den Originalcode kopieren, wenn Sie größere Pläne für die Navbar haben. Spielen Sie mit dem Sass, um Ihren Stil anzupassen, und entfernen Sie Code und Duplikate. Ich habe die Hintergrund- und Linkfarben angepasst, mit der Transparenz des Logos gespielt, den Rand geändert und weitergezogen. Viel Spaß und verrückt, wenn du magst. Ich wollte nur eine super einfache Navbar mit der Markenfarbe und einem zentrierten Logo verwenden. Es war ziemlich gut für diese kleine Arbeit, würde ich sagen.

Hier ist die Indexseite:

Und hier ist die Detailseite:

Zeit, dies in ein Git-Commit zu packen und die Site bereitzustellen.

 git add --all git commit -m 'Implementiert einen Header mit der Navigationsleiste. Fügt einen Header für ein Teil des Layouts hinzu. Er kümmert sich um die URL des bereitgestellten Objekts. Imports Sass für das Navigationsfeld. Fügt Logo hinzu. Fügt CoffeeScript-Code hinzu 

Titel

Die nächste Änderung ist eine kleine, nur eine Berührung. Wir müssen das Titel-Tag in unserem Layout ("source / layouts / layout.erb") aktualisieren:

Dies gibt uns einen dynamischen Titel, der immer mit dem Namen unserer Site beginnt und, falls verfügbar, den Titel des Artikels anfügt.

 git add --all git commit -m 'Passt den Titel der Website' an 

Seitennummerierung

Wenn Sie unten in der Indexliste der Artikel nachschauen, werden Sie etwas Wesentliches vermissen, indem Sie durch unsere Liste der Beiträge navigieren.

Ich bin kein Fan von übermäßig geschickten Paginierungslinks - sperrige Links gewinnen bei mir auch keine Preise. Lassen Sie uns es einfach halten und zwei Links für die nächste und vorherige Seite bereitstellen. Middleman macht das unglaublich bequem. Wir müssen nur unsere "config.rb" anpassen und dem Frontmatter unserer Indexseite mitteilen, dass es fein abgestimmt werden soll.

 blog.paginate = wahr 

Zuerst kommentieren Sie die Zeile oben. Danach teilen Sie der Indexseite mit, wie viele Artikel Sie sehen möchten. Ich denke, zehn Beiträge pro Seite reichen aus. In "source / index.html.erb":

 --- per_page: 10 pageable: true --- 

Der letzte Schritt, bevor wir etwas Styling anwenden, besteht darin, beide Links bequem am Ende der Liste zu platzieren. Zuerst müssen wir die folgenden Codezeilen loswerden, die auskommentiert wurden. Sie wurden ganz oben auf Ihrer Indexseite platziert.

Und dann platzieren Sie dies am Ende dieser Seite:

 <% if paginate %> <% if prev_page %> 
<%= link_to '<< Previous page', prev_page %>
 <% end %> <% if next_page %> 
<%= link_to 'Next page >> ', nächste_Seite%>
 <% end %> <% end %> 

Dies gibt uns die Navigationslinks, die wir nebeneinander benötigen, und gibt uns die Möglichkeit, ein paar Dinge zu optimieren. Ich entschied mich für einen Part für den Sass-Code, da er weder in die Fußzeile noch in die Index-Post-Stile passt. Außerdem verdient er einen eigenen Part, besonders wenn er an Größe zunimmt. In "source / stylesheets / all.sass":

 @import 'Paginierung' 

Und in den partiellen "source / stylesheets / _pagination.sass":

 .pagination-link + shift (2) margin-bottom: 4em &: first-of-type float: linker rand-right: 4em a + übergang (Farbe 0,25s komfort-in-out) color: $ text-color font-size : 1.1em &: Schwebeflugfarbe: $ matcha-green 

Wir verschieben die Links ein wenig nach rechts, ordnen sie an, um nebeneinander zu schweben - standardmäßig würde das Blockverhalten aufeinander gestapelt werden - und ein wenig Übergangseffekt angewendet, wenn der Benutzer den Link überquert. Das ist alles, was wir jetzt brauchen. Werfen wir einen Blick.

Okay, Zeit für ein weiteres Commit.

 git add -all git commit -m 'Fügt Paginierung zur Indexliste der Posts hinzu. Anpassungen config.rb Passt Markierungen auf der Indexseite an. Fügt Stile in _pagination hinzu 

Abschließende Gedanken

Ich denke, das sollte für Version 01 ausreichen! Als nächsten Schritt sollten Sie mit Medienabfragen spielen, um das Layout an die verschiedenen Bildschirmgrößen anzupassen. Die Typografie könnte auch ernsthafte Liebe brauchen.

Wählen Sie ein oder zwei Schriftarten aus, die am besten zum Thema Ihres Podcasts passen. Vergessen Sie nicht, es super lesbar zu halten.

Wenn Sie sich für einen echten Podcast entscheiden, kann ich Ihnen nur gratulieren. Es ist eine großartige Möglichkeit, von Experten zu lernen und Ihr Netzwerk erheblich zu erweitern. Etwas Wertvolles für die Community zu tun, ist immer eine gute Idee und kann sich bezahlt machen. Ein letzter Tipp: Versuchen Sie zu lernen, indem Sie so viel tun, wie Sie können! Das Lesen alleine macht es einfach nicht - da war's schon! Wenn Sie die Lektionen teilen möchten, die Sie durch das Schreiben erhalten haben, werden Sie Ihr Verständnis für das Thema noch weiter vertiefen. Habe Spaß!