Share
Poursuivant avec la construction statique de notre site Web, dans ce tutoriel, nous allons styliser la page de détail des articles, intégrer le widget podcast et passer un peu de temps à mettre en forme notre liste d’index. Nous nous occuperons également des duplications de style et des liens relatifs.
Nous couvrirons les points suivants:
Je pense que nous devrions déplacer notre attention et donner à notre page de détails un peu d'amour de base avant d'ajuster l'application pour afficher nos épisodes de podcast. Nous n'avons pas entièrement terminé la page d'index. S'il reste de la place dans ce didacticiel, j'ajouterai probablement quelques requêtes aux médias pour traiter différentes résolutions d'écran. Pour l'instant, je dirais, passons à autre chose. Quel est le statu quo?
Ouais, ça n'a pas l'air bien! Notre texte est partout. Réparons-le en premier. C'est une bonne idée d'activer à nouveau la grille visuelle.
Dans “source / stylesheets / base / _grid-settings.scss”:
$ visual-grid: true;
Cela fait, nous devons créer une mise en page distincte pour les pages de détail de nos publications. La mise en page sera flexible afin que nous puissions les utiliser pour des articles de blog pur et pour publier des épisodes de podcast ainsi qu'un petit énoncé conditionnel nous aidera dans cette tâche. Plus sur cela plus tard cependant. Ouvrons le fichier config.rb et ajoutons cette ligne:
activer: blog faire | blog | blog.layout = "layouts / blog-layout" end
Cela indiquera à Middleman que nous avons une mise en page distincte pour les pages de détails et qu'elle se trouve dans «layouts / blog-layout». Ensuite, nous devons créer «layouts / blog-layout.erb». Rappelez-vous que le .erb est nécessaire sans l'extension .html pour que cela fonctionne correctement.
Dans “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 %>
Alors parlons de ce qui se passe ici. Tout d’abord, nous devons envelopper mise en page de blog à l'intérieur de notre général disposition. Ou, autrement dit, nous enroulons notre présentation d'application autour de la présentation de blog.
<% wrap_layout :layout do %>… <% end %>
Pourquoi? Parce que nous voulons réutiliser une grande partie des éléments de la mise en page originale et ne pas dupliquer des éléments comme le bas de page liens partiels ou d'actifs dans tête. Donnez-lui juste une minute ou deux pour s’enfoncer si cela vous semble étrange au début. La mise en page que nous utilisions précédemment était plutôt globale. Maintenant, nous avons besoin d'un peu plus de spécificité pour répondre à nos besoins..
À l'intérieur de article tag conteneur, nous construisons manuellement ce dont nous avons besoin pour modéliser notre publication. Il a un titre, une date, un widget optionnel SoundCloud intégré et, bien sûr, le corps de l'article lui-même. Dans nos mises en page, nous avons accès à chaque individu BlogArticle. On peut utiliser article courant pour obtenir les informations pour chaque article afin de construire notre modèle personnalisé. Titre, rendez-vous amoureux et corps ne sont que des méthodes pour extraire les attributs de chaque article. Nous avons également utilisé strftime formater la date comme nous l'avons fait précédemment sur la page d'index.
Accentsconagua
<%= current_article.title %> <%= current_article.date.strftime('%b %e') %> <%= current_article.body %> Comme nous l’avons déjà mentionné, un simple conditionnel est chargé de traiter les données fournies en option pour chaque message via son panneau avant, qui est délimité par trois tirets. Ici, nous cherchons si la page a l'identifiant d'une piste SoundCloud, et pour afficher le widget si c'est le cas:
<% if current_page.data.soundcloud_id %>… <% end %>
Si vous avez besoin d’un rappel, nous avons accès aux données via le page actuelle objet et demander sa Les données pour la valeur que nous avons stockée dans le frontmatter via sa clé. Dans notre exemple, la clé dont nous avons besoin est soundcloud_id. Si notre modèle trouve cette clé via le conditionnel, il affiche le widget et interpole l'identifiant SoundCloud de cette piste pour trouver celui qui convient. S'il ne s'agit que d'un simple article de blog, nous n'avons pas besoin de fournir la soundcloud_id dans le frontmatter et le widget SoundCloud ne seront pas intégrés.
Voici un exemple de frontmatier pour un post de podcast avec un widget SoundCloud:
--- title: Mon onzième titre super génial intitulé post qui se brise dans une autre ligne date: 2015-11-30 22:14 soundcloud_id: 138095821 tags: --- Votre description de l'épisode de podcast génial… <%= lorem.sentences 10 %> - Question n ° 01 - Question n ° 02…
Lorsque vous cliquez sur «Partager» sur l’une des pistes SoundCloud, vous avez la possibilité d’intégrer une iframe pour cette piste et juste besoin de copier coller quelque part dans votre code. Nous utilisons cette iframe comme base et utilisons l'id pour la piste dont nous avons besoin pour l'interpoler dans l'URL. Il y a deux options, un gros et un petit widget. J'ai choisi le grand. L'autre a l'avantage d'être un peu plus personnalisable: vous pouvez par exemple ajuster la couleur du bouton de lecture. C'est à vous:
La magie opère dans cette partie:
… Api.soundcloud.com/tracks/<%= current_page.data.soundcloud_id %>& auto_play =…
Après avoir demandé si ces données sont disponibles via le conditionnel, nous utilisons les données de fronmatter pour injecter l’id afin d’afficher la piste souhaitée. Voyons un peu comment les choses se sont passées jusqu'à présent:
Pouah. Du côté positif, nous avons toute la structure et les données dont nous avons besoin. Et voyez, parce que nous avons imbriqué le mise en page de blog à l'intérieur de disposition mise en page, nous avons l’avantage d’avoir le pied de page déjà en bas. Pas besoin de dupliquer les choses-cool! Avec juste un peu de style, nous pourrions changer les choses et rendre ce look un peu plus décent.
Dans “source / stylesheets / all.sass”:
@import 'posts_detail'
Et ensuite dans la partie "source / stylesheets / _posts_detail.sass":
#main + article du conteneur externe.article-detail + shift (2) + span-colonnes (8) .detail-post-title couleur: $ matcha-green taille de la police: 1.7em margin-top: 40px .detail-post -date font-size: 1.1em couleur: $ text-color .article-detail p taille de fonte: 1.05em margin-bottom: 4em couleur: $ text-color line-height: 1.35em .soundclould-player-big margin- en bas: 50px
Ayons un autre pic rapide.
Eh bien, ça y va. Engageons pour l'instant, et faisons quelques tâches ménagères après cela:
git add --all git commit -m '1ère tentative de publication d'une page de détail avec l'option podcast Ajoute la mise en page de blog Ajuste la configuration pour la mise en page de blog Ajoute des styles pour la page de détail Ajoute Sass partielle Importe Sass partielle Met à jour le contenu de blog'
Le lecteur passionné a peut-être déjà remarqué ce que nous devrions nettoyer ensuite. Il y a un peu de duplication dans “_posts_detail.sass” et “_index_posts.sass”. J'aimerais extraire les styles dupliqués dans un fichier Sass séparé appelé «_blog_post_extractions.sass». J'expérimente avec cette technique récemment, une idée que je tire de la programmation orientée objet. Des choses comme BEM ou SMACSS peuvent être formidables, en particulier pour les grands projets avec des équipes plus grandes si elles ont choisi de suivre les conventions suivantes, mais pour les plus petits projets, je suis toujours à la recherche de solutions simples et sans frictions. Je vais essayer ceci jusqu'à ce que la nouvelle chose brillante me convaince d'une meilleure approche.
Dans “source / stylesheets / all.sass”:
@import 'bourbon' @import 'base / base' @import 'soignée' @import 'blog_post_extractions' @import 'pied de page' @import 'index_posts' @import 'posts_detail'
Un “source / stylesheets / _blog_post_extractions.sass”:
#main, .posts + outer-container .posts p, .post-title, article.article-detail + shift (2) + span-columns (8) .post-title a, .detail-post-title couleur: $ vert matcha. titre-poste, .détail-poste-titre police-taille: 1.7em .posts p, .article-detail p taille de police: 1.05em hauteur-ligne: 1.35em .posts p, .article-detail p , .detail-post-date, .post-date color: $ text-color .posts p, .article-detail p margin-bottom: 4em
Si vous comparez ce qui précède aux fichiers d'origine, vous constaterez que nous nous sommes débarrassés d'une bonne partie de la duplication. Il est également facile à comprendre et à trouver car j’importe de tels fichiers extraits directement dans «all.sass». Il est facile de repérer ces extractions pour les nouveaux venus dans la base de code. Dans ce cas, j’utilise ces fichiers pour collecter les styles extraits s’appliquant aux articles de blog. Une approche similaire pourrait fonctionner pour les duplications sous différentes apparences de barres latérales, de périphériques ou similaires, mais il devrait exister un fil conducteur..
Dans “source / stylesheets / _index_posts.sass”:
.post-titre a + transition (couleur .4s easy-in-out) &: survol couleur: $ text-color .post-date taille de police: 0.7em marge: gauche: em (-80px) droite: em (20px)
Dans “source / stylesheets / _posts_detail.sass”:
.detail-post-title margin-top: 40px .detail-post-date taille de police: 1.1em .soundclould-player-big margin-bottom: 50px
Les fichiers précédents sont maintenant beaucoup plus petits, agréables et bien rangés - exactement comme je les aime. Les fichiers ne coûtent pas cher, alors je m'en fiche si j'en ai beaucoup qui font tous leur petit travail spécifique. Une séparation des préoccupations. Ce n'est pas une solution parfaite, mais c'est tellement simple comme bonjour que j'aime expérimenter davantage avec cette approche..
Nous devrions également commenter notre grille visuelle dans «source / stylesheets / base / _grid-settings.scss» et voir à quoi elle ressemble:
C'est la même chose qu'avant, mais avec des styles beaucoup plus propres. Moi comme toi! Il est temps de s’engager et de déployer nos changements:
git add --all git commit -m 'Extrait les styles dans _blog_post_extractions Extrait les duplications à partir de _index_posts.sass _posts_detail.sass Importe les styles de déploiement
Allons sur notre page GitHub Pages et vérifions si tout fonctionne comme prévu. Oh cher. Au premier abord, cela semble bien, mais si nous essayons d’aller à la page de détail de l’index, nous avons un 404 Message d'erreur. GitHub ne trouve pas ce dont nous avons besoin.
Si vous avez regardé de près, vous avez peut-être vu qu'il nous manque des informations dans notre URL. Maintenant, il est écrit quelque chose comme «http://votre_nom_utilisateur.github.io/2015/11/30/my-super-awesome-post.html». Ce qu'il devrait dire est quelque chose comme "http://votre_nom_utilisateur.github.io/matcha-nerdz/2015/11/30/my-super-awesome-post.html". La partie "matcha-nerdz" était complètement absente. Ne vous inquiétez pas, c'est une solution facile. Nous devons activer les liens relatifs dans notre fichier de configuration:
set: liens_relatifs, true
Avoir des liens absolus sur GitHub Pages va dans la mauvaise direction. Avec ce petit changement, vos liens sont nommés par rapport à la racine de votre application. Comme vous pouvez le constater à partir de ce petit exemple, le déploiement précoce et fréquent est idéal pour prendre ce genre de choses. Trouver ces choses hors contexte, quand vous travaillez déjà sur quelque chose de complètement différent et que vous devez creuser à la recherche de bugs, peut gâcher énormément votre flux.
git commit --all git commit -m 'Définir des liens relatifs dans le fichier intermédiaire de config.rb'
Tout devrait bien fonctionner maintenant. La typographie n'est pas encore parfaite, mais j'aimerais passer à autre chose et vous pourrez ajuster ces éléments une fois le site configuré comme nous en avons besoin. Regardons:
Comme vous pouvez le constater, le widget audio nous manque. et la longueur de la publication affichée n'est pas idéale pour une liste d'index. Réparons cela ensuite. Je souhaite utiliser le lecteur SoundCloud plus petit pour afficher l'épisode de podcast dans la liste d'index. Par conséquent, il est inutile d'extraire un partiel pour le lecteur à la fois pour l'index et la page de détail - chaque page doit avoir son propre widget. Si vous souhaitez utiliser un seul des joueurs pour les deux présentations, vous devez absolument en extraire un partiel. Je vais vous laisser cette étape puisque vous avez déjà appris comment cela se fait.
Dans “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 %>
L’exemple de code est centré sur la section où nous parcourons page_articles. J'ai ajouté une condition qui affiche uniquement le widget audio si l'article a une sound_cloud_id au premier plan de l'article auquel nous accédons via son attribut data. Cela ressemble beaucoup à la façon dont nous avons résolu ce problème précédemment. Dans ce cas, nous avons utilisé le paramètre block article pour accéder aux informations dont nous avons besoin.
Ensuite, je veux raccourcir le texte affiché avant d'appliquer quelques styles. Dans la liste d'index, nous voulons seulement voir quelque chose comme un résumé de 300 caractères - pas trop, mais surtout pas trop peu de texte. Expérimentez vous-même et voyez ce qui vous convient le mieux.
Nous devons d'abord ajouter la gemme Nokogiri à notre Gemfile:
gem 'nokogiri'
et le grouper:
installation groupée
Dans l'index, nous ne devons changer qu'une seule ligne. J'ai laissé un commentaire pour ce qui doit être remplacé. Nous utilisons la méthode summary et lui fournissons le nombre de caractères que nous voulons voir par article dans la liste d'index..
Donc, dans “source / index.html.erb”:
<%# article.body %> <%= article.summary(300) %>
Et ensuite “source / stylesheets / _index_posts.sass”:
Et nous devrions ajouter les styles pour le petit lecteur SC sur .soundcloud-player-small dans notre fichier extrait «source / stylesheets / _blog_post_extractions.sass»:
.posts p, .post-title, article.article-detail, .soundclould-player-small + shift (2) + span-colonnes (8)
Déplacez un peu l'espacement et nous avons terminé:
.soundclould-player-small margin-bottom: 1em
Bon, nous y arrivons. Nous avons maintenant une liste d'index qui affiche à la fois des articles d'épisode en texte seul et en podcast, sans complications, sans fuzz. Si vous avez un meilleur texte factice, cela devrait paraître assez décent maintenant. Commençons!
ajoute --all git commit -m 'Ajoute un résumé d'article et un petit widget à l'index Ajoute des styles pour la liste d'index Ajout d'un widget SC Ajoute Nokogiri Ajoute un widget SC facultatif à l'index Ajoute un résumé de 300 caractères' intermédiaire
Je pense que vous avez gagné une boisson fraîche à ce stade, nous pouvons donc en rester là pour le moment. Dans le prochain et dernier didacticiel, nous allons le peaufiner un peu et ajouter un petit quelque chose pour naviguer sur le site..
"Pourquoi héberger le podcast sur SoundCloud?", Pourriez-vous demander. Eh bien, mon raisonnement était simple: tout d’abord (et je ne suis pas affilié à SoundCloud), ce sera certainement pour longtemps, ce que vous ne pouvez pas nécessairement attendre d’un grand nombre de projets qui offrent héberger vos fichiers audio podcast. Je ne veux pas me retrouver dans la situation de migrer des tonnes de pistes audio déjà publiées vers un autre service simplement parce que quelqu'un a été acquis ou a fait faillite..
Deuxièmement, héberger une tonne de morceaux coûte très cher, et ils ont même une option gratuite pour ceux qui ne publient que rarement des morceaux..
Le joueur et ses options sont également acceptables. Je n’ai aucune raison de me plaindre de vitesse ni de rien jusqu’à présent. Les statistiques sont également utiles et il y a déjà des personnes sur la plate-forme qui s'intéressent aux podcasts, ce qui est bon pour le facteur de découverte. Ne vous méprenez pas, il y a de nombreuses raisons pour lesquelles je voulais serrer doucement quelqu'un autour du cou lorsque je traitais des choses UX importées et absentes. choix global. Enfin, je n'aime pas les sites personnalisés proposés par ces sites de podcast. Ils ont l’air super générique et j’aime créer mes propres contenus qui répondent à mes besoins et me permettent de créer ma propre identité visuelle..
