Hier heb ik de stijlen uit de patroonsectie van Refills ook gekopieerd en in een nieuw bestand geplaatst dat aan deze bannersectie is gewijd. De beschikbare stijlen bevinden zich in de .SCSS syntaxis en dus ga ik met de stroom - het is niet nodig dit om te zetten in .sass werkelijk.

In "source / stylesheets / _hero_banner.scss":

 .held $ base-border-radius: 3px! standaard; $ actiekleur: # 477DCA! standaard; $ groot scherm: em (860)! standaard; $ hero-background-top: # 7F99BE; $ hero-background-bottom: # 20392B; $ heldenkleur: wit; $ hellingshoek: 10 graden; $ hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'; @ include background (url ($ hero-image), lineair verloop ($ gradient-angle, $ hero-background-bottom, $ hero-background-top), no-repeat $ hero-background-top scroll); achtergrondkleur: # 324766; achtergrond-positie: top; achtergrondherhaling: geen herhaling; achtergrondformaat: omslag; padding-bottom: 3em; .hero-logo img height: 4em; margin-bottom: 1em;  .hero-inner @include outer-container; @ include clearfix; marge: automatisch; opvulling: 3.5em; text-align: center; .hero-copy text-align: center; h1 kleur: $ heldenkleur; font-size: 1.6em; margin-bottom: 0,5em; @omvat media ($ groot scherm) font-size: 1.8em;  p kleur: $ heldenkleur; regelhoogte: 1,4em; marge: 0 auto 3em auto; @ include media ($ groot scherm) font-size: 1.1em; max. breedte: 40%;  

We zullen dit binnen een seconde aanpassen, maar laten we eerst een kijkje nemen:

Het past er precies in - zo vind ik het leuk! Laten we dit aanpassen aan onze behoeften door de afbeelding en het pictogram te verwijderen. Maar laten we beginnen met de tekst, dus in "source / index.html.erb":

Je kunt dit op elke gewenste manier aanpassen. Ik wil dit snel maken en de grootte van het h1 voor zowel grote schermen als kleinere apparaten. De header van de hero-eenheid is nu 2em en 3em respectievelijk - niet te veel. De opvulling aan .held binnenzijde moet ook een duwtje geven.

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

 .hero-inner // padding: 3.5em; padding-top: 1.2em;  .hero-copy text-align: center; h1 kleur: $ heldenkleur; font-size: 2em; margin-bottom: 0,5em; @omvat media ($ groot scherm) font-size: 3em;  

Laten we de tijdelijke plaatsaanduiding van het logo doden. Ik vind ze vaak een beetje vervelend. In "source / index.html.erb":

 
 
 
 
MATCHA NERDZ
 
Podcast voor kenners van groene thee
 
 
 
 

Dat is alles wat we nodig hebben. Omdat we geen gebruik maken van het hero-logo, laten we ons ontdoen van hun stijlen-dood gewicht, dus in "source / stylesheets / _hero_banner.scss":

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

Achtergrond afbeelding

De generieke achtergrondafbeelding moet ook gaan. Ik zal je eerst laten zien hoe ik wil dat het eruit ziet, dan zal ik je uitleggen hoe je daar moet komen.

Negeer de typografie nu, je kunt deze later aanpassen. Ik heb de afbeelding vervangen en er een beetje verloop op geplaatst. Omdat het type wit is, heb ik een beetje meer contrast nodig voor een betere leeservaring. Als je een afbeelding kiest die geen extra verloop nodig heeft, ga ervoor!

Ik heb de Refills-code aangepast met een paar wijzigingen. Eerst heb ik een afbeelding toegevoegd aan "bron / afbeeldingen" en deze afbeelding in de variabele opgeslagen $ Hero-afbeelding. Vervolgens heb ik deze variabele opnieuw gebruikt in de achtergrond mixin van Bourbon en herschikte de afbeelding en de lineaire gradiënt (ook een Bourbon-mixin). Omdat het verloop eerst voorkomt, wordt het overlay op de Matcha_Nerdz.png. Nogmaals, in "source / stylesheets / _hero_banner.scss":

 .held $ hero-image: '... /images/Matcha_Nerdz.png'; $ hero-background-top: donkerder ($ matcha-green, 65%); $ hero-background-bottom: rgba (lichter ($ matcha-green, 10%), .3); @include background (lineair verloop ($ gradient-hoek, $ hero-background-bottom, $ hero-background-top), url ($ hero-image), no-repeat $ hero-background-top scroll); margin-bottom: 2em; // achtergrondkleur: # 324766; // achtergrondformaat: omslag; 

Voor de gradiënt zelf heb ik onze hergebruikt $ Matcha-green die we hebben opgeslagen in "source / stylesheets / base / _variables.scss". De bovenste kleur is 65% donker met een Sass-functie; de andere wordt met 10% verlicht en ook transparant gemaakt via een andere Sass-functie genaamd RGBA. Vervolgens gebruiken we deze variabelen opnieuw in onze achtergrond mixin. De gradiënt-angle het zelfde gebleven. Ik heb ook een kleine marge toegevoegd van 2em om de indexlijst een beetje naar beneden te duwen. De stijlen die ik voor jou opmerkte, zijn deadweight en dus heb ik ze verwijderd.

Je kunt natuurlijk ook in Photoshop met zo'n verloop spelen, maar ik wilde je laten zien hoe je ze in Sass kunt gebruiken. Hieronder ziet u een schermafbeelding die geen lineair verloop heeft toegevoegd aan de hero-eenheid. Als een kleine oefening laat ik de opruiming achter van de stijlen die we naar u hebben gekopieerd. Als u dubbele of ongebruikte stijlen vindt, raad ik u aan dit te corrigeren voordat u verdergaat.

Vastleggen en inzetten

Tijd voor een nieuwe commit en deploy.

 git add --all git commit -m 'Voegt hero-eenheid toe aan index.html.erb Voegt hero image met verloop toe Voegt _hero_banner toe Sass partial Importeert Sass partial' tussenpersoon deploy 

Zonder het visuele raster ziet het er niet naar uit dat je nog veel werk overhoud om deze pagina aan te passen aan je podcastingbehoeften. Een paar dingen die ik je zou aanraden is een lettertype te vinden dat je project op een unieke manier communiceert zonder te exotisch te zijn en de grootte en spatiëring van je tekst aan te passen zodat het past bij de achtergrondafbeelding van je heldenunit. Omdat dit deel uitmaakt van je branding, raad ik je aan je tijd te nemen en plezier te hebben!

Navigatie

Het is een goed moment om een ​​navigatiebalk toe te voegen. Nogmaals, we zullen een bestaand patroon uit Refills gebruiken en het aanpassen aan onze eigen behoeften. Ik koos voor de "Gecentreerde navigatie" die u zult vinden onder "Patronen". Voor deze moeten we de HTML-, SCSS- en de CoffeeScript-code kopiëren. Ik zal eerst beginnen met het toevoegen van de opmaak aan ons globale "layout.erb" bestand

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

Whoa! Dat is nogal een stuk code. Denk je hetzelfde als ik? Dit ziet er vies uit, toch? Laten we dit een deel maken. We zullen "source / layouts / layout.erb" wijzigen in:

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

En voeg "source / partials / _navbar.erb" toe:

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

Ik heb een heleboel dingen verwijderd die ik niet nodig heb en krijg alleen een logo dat ik heb opgeslagen in "/ images" en twee links voor thuispagina's en pagina's. Voor de twee links gebruikte ik de link naar helper methode. Er zijn twee argumenten voor nodig:

• De tekenreeks waarop gebruikers moeten klikken
• en de locatie waarnaar u een koppeling wilt maken.

Ik ben er zeker van dat mensen die een beetje met Rails of Sinatra hebben gespeeld hier bekend mee zijn. Handig, maar geen groot probleem. De link voor "Home" (/ matcha-nerd) zal breken voor je lokale host, maar hij werkt op GitHub-pagina's waar we de naamruimte nodig hebben.

De fervent lezer zou ook hebben ontdekt dat onze over-link linkt naar een eenvoudige HTML-pagina die ik in een nieuwe map met de naam "pagina's" heb geplaatst. Ik stel voor dat je HTML-pagina's zoals contact, faq of wat dan ook in deze map plaatst. Als u deze statische pagina's daarin plaatst, zou u geen problemen moeten hebben om ze aan uw behoeften aan te passen. Gewoon wat plezier en toepassen wat je tot nu toe hebt geleerd met deze pagina's. Vanaf hier staat u er alleen voor, maar nu weet u alles wat u nodig heeft. Samo, samo!

Asset pad

Een woord over de afbeeldingstags en het activapad op GitHub-pagina's. Ik besloot de vlakte te vervangen img tags voor het logo met een Middleman-helper genoemd image_tag. Het is niet alleen vrij beknopt en leesbaar, maar lost ook een probleem op waar je tegenaan loopt img tag wanneer u de site bouwt en deze naar GitHub-pagina's distribueert. De URL voor de activumkoppeling op afzonderlijke artikelen wordt helemaal verknoeid en dit is de eenvoudigste oplossing om dit te verhelpen.

Voor gebruik image_tag, de URL voor het logo zag er zo uit: http://your_username.github.io/images/matcha_nerdz_logo-hash_numbers.png

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

Deze Middleman-helper heeft de URL de app-naam gegeven matcha-nerdz-het heeft het item correct namespaced en geeft GitHub Pages toegang tot dit imagebestand (http://your_username.github.io/matcha-nerdz/images/matcha_nerdz_logo-hash_numbers.png).

Meer organisatie

De stijlen die ik heb gekopieerd uit Refills zijn natuurlijk in een nieuwe Sass-partitie. In "source / stylesheets / all.sass" verwijzen we naar:

 @import 'header_navbar' 

En de feitelijke gedeeltelijke "bron / stylesheets / _header_navbar.scss" ziet er zo uit:

 .gecentreerde navigatie $ base-border-radius: 3px! default; $ donkergrijs: # 333! standaard; $ groot scherm: em (860)! standaard; $ base-font-color: white; $ gecentreerd-navigatie-opvulling: 1em; $ centered-navigation-logo-height: 2em; $ centered-navigation-background: # E7F1EC; $ centered-navigation-color: $ base-font-color; $ centered-navigation-color-hover: $ text-color; $ centered-navigation-height: 60px; $ centered-navigation-item-padding: 1em; $ centered-navigation-submenu-padding: 1em; $ centered-navigation-item-nudge: 2.2em; $ horizontal-bar-mode: $ groot scherm; achtergrondkleur: $ matcha-groen; border-bottom: 1px solid darken ($ matcha-green, 5%); min-height: $ centered-navigation-height; breedte: 100%; z-index: 9999; // Mobile view .mobile-logo display: inline; zweven: links; max-hoogte: $ centered-navigation-height; padding-left: $ centered-navigation-padding; img max-height: $ centered-navigation-height; opvulling: .8em 0;  @ omvat media ($ horizontal-bar-mode) display: none;  .centered-navigation-mobile-menu color: $ centered-navigation-color; weergave: blok; zweven: rechts; regelhoogte: $ centered-navigation-height; marge: 0; padding-right: $ centered-navigation-submenu-padding; tekstdecoratie: geen; text-transform: hoofdletters; @ include media ($ horizontal-bar-mode) weergave: geen;  &: focus, &: hover color: $ centered-navigation-color-hover;  // Nav-menu .centered-navigation-wrapper @include outer-container; @ include clearfix; positie: relatief; z-index: 999;  ul.centered-navigation-menu -webkit-transform-style: preserverve-3d; // stop webkit flicker clear: both; Geen weergeven; marge: 0 auto; overloop: zichtbaar; opvulling: 0; breedte: 100%; z-index: 99999; & .show display: block;  @omvat media ($ horizontal-bar-mode) display: block; text-align: center;  // De navigatie-items .nav-link: first-child @include media ($ horizontal-bar-mode) margin left: $ centre-navigation-item-nudge; opvulling rechts: 0px;  ul li.nav-link background: lighten ($ matcha-green, 8%); weergave: blok; regelhoogte: $ centered-navigation-height; overloop verborgen; padding-right: $ centered-navigation-submenu-padding; text-align: right; breedte: 100%; z-index: 9999; een color: $ centered-navigation-color; weergave: inline-block; overzicht: geen; tekstdecoratie: geen; &: focus, &: hover color: $ centered-navigation-color-hover;  @ include media ($ horizontal-bar-mode) background: transparent; weergave: inline; regelhoogte: $ centered-navigation-height; a padding-right: $ centered-navigation-item-padding;  li.logo.nav-link display: none; regelhoogte: 0; @ include media ($ groot scherm) display: inline;  .logo img margin-bottom: - $ centered-navigation-logo-height / 3; max-hoogte: $ centered-navigation-logo-height;  

Ik heb de CoffeeScript-code van Refills in "all.coffee" gezet. Zodra ik meer code moest toevoegen, zou ik het op een eigen aangewezen plek plaatsen. “Bron / javascripts / all.coffee”:

 // = jQuery $ (document) .ready -> menuToggle = $ ('# js-centered-navigation-mobile-menu'). unbind () $ ('# js-centered-navigation-menu'). removeClass ' toon 'menuToggle.on' klik ', (e) -> e.preventDefault () $ (' # js-centered-navigation-menu '). slideToggle -> if $ (' # js-centered-navigation-menu ') .is (': hidden') $ ('# js-centered-navigation-menu'). removeAttr 'style' return return return 

Dit fragment is verantwoordelijk voor het omschakelen van het menu naar kleinere schermen.

Omdat ik een heleboel dingen die ik niet nodig had uit de navbar-opmaak verwijderde, zoals het submenu, kon ik een aanzienlijk deel van de relevante stijlen in dit bestand verwijderen. Aangezien ik niet weet of u een uitgebreidere navigatiebalk nodig hebt en de code wilt gebruiken in deze voorbeelden, raad ik u aan de originele code te kopiëren als u grotere plannen hebt voor de navigatiebalk. Speel met de Sass om in jouw stijl te passen, verwijder dode code en duplicaten. Ik heb de achtergrondkleur aangepast en kleuren gekoppeld, gespeeld met de transparantie van het logo, de rand veranderd en verder gegaan. Veel plezier en gek als je wilt. Ik wilde gewoon een supereenvoudige navbar gebruiken met de merkkleur en een gecentreerd logo. Het bleek redelijk goed voor dit kleine werk dat ik zou zeggen.

Dit is de indexpagina:

En hier is de detailpagina:

Tijd om dit te verpakken in een git commit en voor het inzetten van de site.

 git add --all git commit -m 'Implementeert een header met navbar Voegt header partial toe aan layout Zorgt voor geïmplementeerde activum-URL voor logo Importeert Sass partial voor navbar Voegt logo toe Voegt CoffeeScript-code toe Past vullingen aan stijlen Past vullingen-opmaak aan' tussenpersoon deploy 

Titel

De volgende verandering is klein, gewoon een beetje. We moeten het title-tag in onze lay-out bijwerken ("source / layouts / layout.erb"):

Dit geeft ons een dynamische titel die altijd begint met de naam van onze site en die de titel van het artikel toevoegt, indien beschikbaar.

 git add --all git commit -m 'Past de site-titel aan' tussenpersoon deploy 

Paginering

Wanneer u de onderkant van de indexlijst met artikelen bekijkt, ziet u iets dat van essentieel belang is voor het missen van het navigeren in onze lijst met berichten.

Ik ben geen fan van overdreven slimme paginakoppelingen - omvangrijke degenen winnen ook geen prijzen met mij. Laten we het eenvoudig houden en twee links bieden voor de volgende en vorige pagina's. Middleman maakt dit ongelooflijk handig. We moeten gewoon onze "config.rb" aanpassen en de frontmatter van onze indexpagina vertellen om het af te stemmen.

 blog.paginate = true 

Reageer eerst de regel hierboven. Daarna vertel je de indexpagina hoeveel artikelen je wilt zien. Ik denk dat tien berichten per pagina voldoende is. In "source / index.html.erb":

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

De laatste stap voordat we wat styling toepassen, is door beide links handig onder aan de lijst te plaatsen. Eerst moeten we ons ontdoen van onderstaande coderegels die werden toegelicht. Ze zijn bovenaan de indexpagina geplaatst.

En plaats dit helemaal onderaan deze pagina:

 <% if paginate %> <% if prev_page %> 
<%= link_to '<< Previous page', prev_page %>
 <% end %> <% if next_page %> 
<%= link_to 'Next page >> ', volgende_pagina%>
 <% end %> <% end %> 

Dit geeft ons de navigatielinks die we naast elkaar nodig hebben en voorziet ons van een klasse om een ​​paar dingen aan te passen. Ik besloot om met een deel voor de Sass-code te gaan omdat het niet paste in de footer, noch in de indexstijlen, en het verdient een gedeeltelijke eigen, vooral als het meer in omvang toeneemt. In "source / stylesheets / all.sass":

 @import 'pagination' 

En in de gedeeltelijke "source / stylesheets / _pagination.sass":

 .pagination-link + shift (2) margin-bottom: 4em &: first-of-type float: linkermarge-rechts: 4em a + transition (color 0.25s ease-in-out) kleur: $ text-colour font-size : 1.1em &: hover color: $ matcha-green 

We schuiven de links een beetje naar rechts, schikken ze naast elkaar - default is het blokgedrag dat bovenop elkaar wordt gestapeld - en pas een klein overgangseffect toe wanneer de gebruiker over de link zweeft. Dat is alles wat we nu nodig hebben. Laten we eens kijken.

Alrighty, tijd voor nog een commit.

 git add -all git commit -m 'Voegt paginering toe aan indexlijst met posts Past config.rb aan Past markup aan op indexpagina voegt stijlen toe in _pagination Sass partial' interleman deploy 

Laatste gedachten

Ik denk dat dat zou moeten volstaan ​​voor versie 01! Als volgende stap moet u spelen met mediaquery's om de lay-out te laten reageren op verschillende schermformaten. De typografie kan ook serieuze liefde nodig hebben.

Kies een of twee typetjes die het beste bij het thema van je podcast passen, vergeet niet om het super leesbaar te houden.

Als je besluit om een ​​echte podcast te doen, kan ik je alleen maar feliciteren. Het is een geweldige manier om van experts te leren en ook om uw netwerk aanzienlijk te vergroten. Iets van waarde doen voor de gemeenschap is altijd een goed idee en kan veel geld opleveren. Nog een laatste tip, probeer zoveel mogelijk te leren door te doen en te experimenteren! Alleen lezen snijdt het gewoon niet - er is geweest, dat is gedaan! Als je de geleerde lessies graag wilt delen door erover te schrijven, verdiep je je begrip van het onderwerp nog meer. Veel plezier!