Share
Ce deuxième tutoriel sur la construction de sites Web statiques avec Middleman plonge un peu plus loin dans le cadre. À la fin, vous devriez en savoir assez pour construire votre propre projet à partir de zéro. Nous allons couvrir des sujets tels que les fichiers de données, les URL assez, les modèles de projet et le pipeline d’actifs, alors restons bloqués!
Donc, après avoir suivi le premier tutoriel, vous aurez déjà appris à jouer avec les données; les matières antérieures stockées dans les sections délimitées par trois tirets. Vous pouvez également écrire des fichiers de données séparés en YAML ou JSON et les placer dans un répertoire «/ data». Ceci est utile si vous avez des sites plus complexes avec des données qui changent rarement et si vous ne souhaitez pas conserver ces données directement dans votre code HTML..
Disons que vous avez le droit de vendre tous les films de James Bond. Nous pourrions en mettre une liste dans un fichier de données et les parcourir à notre avis. Si nous devions modifier ou mettre à jour ces données lorsqu'un nouveau film est disponible, il vous suffirait d'appliquer cette modification à votre .yaml ou .JSON fichier de données. Je ne recommanderais pas Faire cela pour les données qui sont de toute façon complexes; c'est faisable, mais se sent très mal et mal.
Par exemple, voici à quoi pourrait ressembler un fichier /data/bond.yaml:
ruby movies: - titre: "Dr. No" année: "1962" texte: "John Strangways, le chef de la station de renseignements britannique (SIS) en Jamaïque, est tué. En réponse, l'agent britannique James Bond - également connu sous le nom de 007 - est Au cours de son enquête, Bond rencontre Quarrel, un pêcheur caïman qui travaillait avec Strangways autour des îles voisines pour prélever des échantillons de minéraux, notamment Crab Key, où réside le Dr Reclusive. " image: "bond_movie_01.png" - titre: "De Russie avec amour" année: "1963" texte: "Le planificateur expert de SPECTRE Kronsteen conçoit un complot pour voler un dispositif cryptographique de Lektor aux Soviétiques et le revendre tout en voulant se venger Bond, pour avoir tué leur agent, Rosa Klebb, ancienne membre de SMERSH, est responsable de la mission. Elle recrute Donald "Red" Grant comme assassin et Tatiana Romanova, commis aux chiffres au consulat soviétique à Istanbul, comme appât involontaire. . " image: "bond_movie_02.png" - titre: "Goldfinger" année: "1964" texte: "On ordonne à Bond d'observer le marchand de lingots Auric Goldfinger: il voit Goldfinger tricher aux cartes et l'arrête en distrayant son employé, qui est ensuite tué par Le serviteur coréen de Goldfinger, Oddjob, est chargé d'enquêter sur la contrebande d'or de Goldfinger et le suit en Suisse. Ce dernier est capturé lorsqu'il reconnaît l'usine de Goldfinger et est drogué; il est emmené au haras de Goldfinger, au Kentucky, et est emprisonné. assistez à la rencontre de Goldfinger avec les mafios américaines, qui ont apporté le matériel nécessaire à une opération pour cambrioler Fort Knox. " image: "bond_movie_03.png"…
Sortez ensuite le fichier dans source / bond-movies.html.erb:
"html
<%= movie.text %>
"
L'un des avantages de ces fichiers de données est qu'ils sont sécurisés. Encore mieux, votre /Les données répertoire avec toutes les données YAML ou JSON ne sera pas poussé sur votre serveur live. Au cours de la phase de construction, vos données sont injectées dans vos modèles localement avant leur déploiement. Après cela, les données dans vos vues sont simplement du code HTML statique. Plutôt cool!
Un mot sur les conventions de nommage ici. Lorsque vous avez des fichiers de données dans un répertoire «data», vous avez accès à un Les données objet. Middleman crée ensuite des «objets» pour chaque .yml, .yaml ou .JSON fichier auquel vous pouvez accéder via l'inital Les données objet en l'enchaînant. Vous avez alors accès aux attributs que vous avez stockés. Dans notre cas, nous avons un films YAML “objet” avec les attributs Titre, année, texte et image.
"html <%= data.data_file_name.yaml_or_json_object.attribute %>
<%= data.bond.movies.image %> <%= data.bond.movies.title %> <%= data.bond.movies.year %> <%= data.bond.movies.text %>"
Si vous avez des sous-répertoires, il vous suffit de les ajouter. Disons que vous avez votre fichier de données de films de liaison sous un spy_movies répertoire (par exemple: /data/spy_movies/bond.yaml) Vous y accédez maintenant comme suit:
html <%= data.spy_movies.bond.movies.title %>
Enfin, je devrais ajouter que le stocker dans JSON peut être préférable à certaines personnes, mais toutes les virgules, crochets et crochets en excès me déconcertent. Non seulement dans les fichiers de données, mais aussi dans les sections frontmatter. C'est à vous de choisir ce qui vous convient le mieux, voyez par vous-même:
un_fichier.yaml:
plain bond_girls: - Champs de fraises - Jill Masterson - Affaire Tiffany
un_fichier.json:
javascript "bond_girls": ["Strawberry Fields", "Jill Masterson", "Tiffany Case"]
Si vous avez un fichier comme source / bond-movies.html.erb, il se terminera par http://appname.com/bond-movies.html. Au cours du processus de construction, nous perdons l'extension de fichier «.erb» pour aboutir à la version finale «.html» de cette page, qui est reflétée dans l'URL. C'est bon, des trucs normaux. Pour des URL plus sophistiquées comme http://appname.com/bond-movies, nous devons travailler un peu.
Vous devez activer le Index de répertoire extension dans votre config.rb. Cela crée un dossier pour chaque fichier .html. Pendant construction d'intermédiaire la page finie finit par être le fichier d'index de ce dossier, ce qui signifie que son extension n'aura pas besoin de s'afficher dans l'URL. Si vous y avez prêté attention, vous avez peut-être déjà vu cela fonctionner avec le fichier index.html standard créé pour chaque projet Middleman en tant que page de destination. Lancez votre serveur et voyez par vous-même.
Dans config.rb:
ruby activer: répertoire_indexes
Voyons ce qui s'est passé après construction d'intermédiaire dans votre fichier bond-movies.html.erb si vous avez activé cette extension. Middleman aura créé un dossier «build / bond-movies» et votre nom de fichier d'origine aura été remplacé par index.html (build / bond-movies / index.html)..
Voici la sortie du shell:
bash create build / bond-movies / index.html
Il y a cependant une petite mise en garde. Avant d’activer de jolies URL, vous pouviez utiliser le chemin des actifs. Maintenant que les index de répertoires sont en place, vous devez fournir aux actifs leur chemin d'accès complet et absolu. Donc, appeler une image simplement par son nom, par exemple, ne volera plus.
Si, pour une raison quelconque, vous souhaitez remplacer le comportement de cette extension pour un fichier particulier, vous pouvez.
Dans config.rb:
page ruby "/bond-movies.html",: index_répertoire => false
Voici la sortie du shell si vous le rétablissez pour bond-movies.html.erb:
bash create build / bond-movies.html enlever build / bond-movies / index.html enlever build / bond-movies
Maintenant, son URL est redevenue normale pour ce fichier. (http://appname.com/bond-movies.html)
De plus, vous pouvez désactiver le schéma de nommage d'index de répertoire localement dans la page de garde de vos pages individuelles:
index_répertoire: false -
… "
Si vous voulez construire cette structure avec des dossiers et leurs fichiers d’index respectifs, Middleman ne va pas vous embêter. Il fonctionne de la même manière et intermédiaire les ignore si vous mélangez et faites correspondre cette approche..
J'aimerais aller droit au but avec celui-ci et ne vous montrer que les éléments qui, à mon avis, sont vraiment pertinents.
La «ligne de vie» est le jargon Rails importé dans Middleman. Sous le capot, une gemme appelée Sprockets fait tout le travail lourd. Il vous aide à gérer la gestion des dépendances en combinant et en réduisant les actifs, ce qui contribue à réduire considérablement vos actifs. Quelques méthodes d'assistance pour référencer de manière concise les actifs sont également à votre disposition. Au-delà de cela, vous avez également les moyens d'écrire du code Sass et CoffeeScript, tout de suite..
La concaténation est l’une des caractéristiques les plus importantes de la pipline d’actifs. Au lieu de créer de nombreuses requêtes HTML distinctes pour chaque fichier CSS et JS, vous pouvez les réduire considérablement en les concaténant en un ou plusieurs fichiers. Moins vous causez de demandes, plus votre application sera chargée rapidement.
Par défaut, Sprockets presse tous les fichiers JavaScript dans un seul fichier. .js fichier. Après construction d'intermédiaire, ce fichier se trouvera sous /build/javascripts/all.js. La même chose vaut pour votre CSS. Après le processus de construction, tous les fichiers Sass seront concaténés dans build / stylesheets / all.css..
Vous combinez vos ressources JavaScript en utilisant des partiels (dont les noms de fichiers commencent par un trait de soulignement), puis exiger tout en haut de votre fichier source / javascripts / all.js. Les fichiers avec l'extension .coffee ajoutée fonctionnent exactement de la même manière. L'ordre compte pour ce processus.
Voici, par exemple, le sommet de source / javascript / all.js:
javascript // = require "_jquery" // = require "_lib_code" // = require "_animations"
Lorsque vous jetez un oeil dans votre nouveau /construire répertoire, vous ne trouverez qu’un fichier .js sous / javascripts.
Pour votre code Sass, l’histoire est fondamentalement la même, mais vous devriez utiliser Sass @importation pour importer vos partiels, au lieu de exiger de pignons. Encore une fois, placez les fichiers «requis» tout en haut, en veillant cette fois à l'ordre. Contrairement à l'utilisation de partiels JavaScript, vous laissez le trait de soulignement de côté lorsque vous importez des partiels Sass. Par exemple
css @import 'normaliser'; @import 'header'; @import 'navigation'; @import 'footer';
Une autre caractéristique intéressante des pignons est la compression, également appelée minification. Ce processus supprime beaucoup de graisse, comme se débarrasser des espaces inutiles et des commentaires. Les gens qualifient également ce processus de "moqueur" (et bien sûr, il existe un joyau appelé mugissant qui fait un travail magnifique). Comparée à la minification d’actifs JavaScript, l’agglutination des CSS n’est pas si compliquée.
Pour commencer, vous devez ajouter les éléments suivants à votre fichier config.rb:
ruby configure: build active: minify_css active: fin minify_javascript
En fait, il vous suffit de décommenter ces lignes sous votre :construire bloc. La prochaine fois que vous utilisez construction d'intermédiaire les actifs de votre dossier / build seront tous simplifiés et minces. Vous trouverez ci-dessous deux petits exemples montrant comment ce code finit par apparaître:
CSS modifié sous /build/stylesheets/all.css:
corps css couleur d'arrière-plan: # d0e4fe h1 couleur: orange; alignement du texte: centre p famille de polices: "Times New Roman"; taille de la police: 20px
JS modifié sous /build/javascripts/all.js:
commutateur javascript ((nouvelle date) .getDay ()) case 0: jour = "dimanche"; pause; cas 1: jour = "lundi"; pause; cas 2: jour = "mardi"; pause; cas 3: jour = "Mercredi"; pause; cas 4: jour = "jeudi"; pause; cas 5: jour = "vendredi"; pause; cas 6: jour = "samedi"
Sans la plateforme d'actifs, vous auriez à configurer votre propre outil pour écrire votre code JavaScript et CSS via des langages plus avancés, tels que CoffeeScript et Sass..
Pour vos fichiers Sass, vous avez quatre assistants à votre disposition:
Accentsconagua
chemin_image ()font_path ()URL de l'image()font_url ()Comme vous avez suivi les conventions jusqu'à présent, vous pouvez utiliser ces aides pour ajouter le chemin de répertoire correct à vos actifs..
Dans un fichier Sass, par exemple:
"css image_path ('logo.png') # => images / logo.png
image_path ('nested_folder / some.png') # => images / nested_folder / some.png "
Le pipeline d’actifs utilise les chemins d’importation via Sprockets pour vos actifs. Par défaut : js_dir et : css_dir sont déjà ajoutés à ce chemin. Cela signifie que les fichiers mis en / source / javascripts et / source / stylesheets sont disponibles et automatiquement importés. D'autre part, si vous avez des ressources que vous souhaitez conserver dans d'autres répertoires, vous pouvez également les ajouter au chemin d'importation en modifiant le fichier config.rb:
ruby sprockets.append_path '/ some / other / assets_folder /'
Dans cet exemple, les autres actifs de source / some / other / assets_folder / other.css sont également à la disposition de Middleman via ce chemin. C'est la même chose pour .js fichiers aussi bien.
Middleman est livré avec quelques modèles de projets pratiques que vous devriez au moins connaître. Ces modèles vous offrent un bon point de départ lorsque vous lancez une nouvelle application Middleman. Vous pouvez également ajouter ces modèles à tout moment plus tard:
Vous pouvez les utiliser comme ceci, via la ligne de commande:
intermédiaire bash init your_fancy_app --template = smacss Le modèle vous fournira tous les fichiers et dossiers nécessaires. Si vous avez déjà une application et souhaitez ajouter un modèle, vous utilisez la même commande sans mentionner le nom de votre application. Même affaire:
bash intermédiaire init --template = smacss
Maintenant vient ma partie préférée de Middleman. Il est très simple de créer vos propres modèles et de les réutiliser à tout moment. Vous commencez par créer un ~ / .middleman dossier dans votre répertoire racine (n'oubliez pas le point devant le nom). Dans ce répertoire, vous créez de nouveaux dossiers pour vos modèles. Par exemple /.middleman/podcast serait un Podcast modèle. Ensuite, vous remplissez ce répertoire podcast avec tous les fichiers et dossiers dont vous avez besoin. Par exemple, si vous souhaitez disposer de feuilles de style supplémentaires pour votre application Middleman, vous devez simuler le chemin d'accès au fichier de Middleman pour faciliter son utilisation..
Dans la capture d'écran ci-dessous, j'ai préparé un exemple factice contenant quelques fichiers dont j'ai peut-être besoin pour chaque projet placé dans un dossier «bourbon». Maintenant j'ai un modèle de bourbon.
Puisque j'ai simulé la structure de fichier de Middleman, ces feuilles de style s'afficheront exactement là où j'en ai besoin une fois que j'ai initié ce modèle. Mes fichiers sont maintenant sous / source / stylesheets et aussi prêt à être importé dans mon /source/stylesheets/all.css.scss fichier.
Depuis que j'ai déjà fait mes partiels styles de gabarits, c'est comme d'habitude. Voici mes sources / stylesheets / all.css.scss:
css @import 'bourbon_mixins / mixins'; @import 'bourbon_neat / grids'; @import 'bourbon_refills / cards';…
Fini! Une chose à laquelle il faut cependant faire attention: quand on utilise construction d'intermédiaire pour créer notre nouveau construire répertoire ces fichiers seront absorbés par all.css et aucun des dossiers de modèles de bourbon ne sera affiché là-bas. Cependant, si vous oubliez de mettre un tiret bas dans vos noms de fichiers pour ces styles, le dossier complet sera transféré dans. /construire, avec les fichiers .css respectifs. le @importation les instructions dans all.css.scss ne feront aucune différence dans ce cas non plus.
Si vous avez une tonne de modèles et que vous souhaitez simplement vérifier le nom de la liste, vous pouvez utiliser la commande suivante:
"bash intermédiaire init -help
"
Si vous souhaitez réinventer la roue, jetez un coup d’œil à ces modèles à source ouverte. Si vous n'avez jamais beaucoup joué avec les modèles, je vous recommande de lancer une application factice et de les essayer. Voir quels fichiers sont créés ou écrasés. Poke un peu. Ensuite, créez un dossier factice avec quelques fichiers Sass pour un modèle sous ~ / .middleman et voyez ce qui se passe lorsque vous lancez ce modèle. Rien ne vaut l'apprentissage en faisant ces petites expériences en cours de route!
Je crois que vous êtes maintenant plus que prêt à commencer à construire une petite application avec Middleman. Il reste quelques choses à apprendre par vous-même, mais je vous ai présenté les pièces les plus importantes du puzzle..
Middleman est très amusant et constitue un bon choix sur le plan technologique. Il est puissant, facile à utiliser et possède une API simple qui convient aux débutants. c'est tout ce qui compte pour le moment. S'amuser!
