Share
Este segundo tutorial sobre la creación de sitios web estáticos con Middleman profundiza un poco más en el marco. Al final, debe saber lo suficiente como para construir su propio proyecto desde cero. Cubriremos temas como archivos de datos, URL bonitas, plantillas de proyectos y la canalización de activos, así que estancamos!
Por lo tanto, después de haber seguido el primer tutorial, ya habrá aprendido a jugar con los datos; Materia frontal almacenada en las secciones delimitadas por tres guiones de páginas individuales. También puede escribir archivos de datos separados en YAML o JSON y colocarlos en un directorio "/ data". Esto es útil si tiene sitios más complejos con datos que rara vez cambian, y donde no desea mantener esos datos directamente en su HTML.
Digamos que tienes los derechos para vender todas las películas de James Bond. Podríamos poner una lista de ellos en un archivo de datos e iterarlos en nuestra vista. Si necesitaríamos cambiar o actualizar esos datos cuando haya una nueva película disponible, solo tendría que aplicar ese cambio en su .yaml o .json archivo de datos. No recomendaria obra que para datos que son de alguna manera complejos; Es factible, pero se siente muy dudoso e incorrecto..
Por ejemplo, aquí está el aspecto que podría tener un archivo /data/bond.yaml:
ruby movies: - título: "Dr. No" año: "1962" texto: "John Strangways, el jefe de la Estación de Inteligencia Británica (SIS) en Jamaica, es asesinado. En respuesta, el agente británico James Bond, también conocido como 007-is enviado a Jamaica para investigar las circunstancias. Durante su investigación, Bond se encuentra con Quarrel, un pescador de las Islas Caimán, que había estado trabajando con Strangways alrededor de las islas cercanas para recolectar muestras de minerales. Una de las islas era Crab Key, hogar del recluso Dr. No. " imagen: "bond_movie_01.png" - título: "From Russia with Love" año: "1963" texto: "La experta planificadora de SPECTRE, Kronsteen, diseña un plan para robar un dispositivo criptográfico Lektor de los soviéticos y venderlo de nuevo a ellos mientras exigen venganza Bono por matar a su agente, el Dr. No; la ex agente de SMERSH, Rosa Klebb, está a cargo de la misión. Recluta a Donald "Red" Grant como asesina y Tatiana Romanova, una empleada de cifrado en el consulado soviético en Estambul, como el cebo involuntario. . " imagen: "bond_movie_02.png" - título: "Goldfinger" año: "1964" texto: "Bond recibe la orden de observar al vendedor de lingotes Auric Goldfinger: ve a Goldfinger haciendo trampas en las cartas y lo detiene distrayendo a su empleado, quien posteriormente es asesinado por El criado coreano de Goldfinger, Oddjob. Bond recibe instrucciones para investigar el contrabando de oro de Goldfinger y él sigue al comerciante hasta Suiza. Bond es capturado cuando reconoce la planta de Goldfinger y está drogado; lo llevan a la granja de caballos de Kentucky de Goldfinger y es encarcelado. presenciar la reunión de Goldfinger con mafiosos estadounidenses, que han traído los materiales que necesita para una operación para robar Fort Knox ". imagen: "bond_movie_03.png" ...
Luego muestre como es así en source / bond-movies.html.erb:
"html
<%= movie.text %>
"
Una de las ventajas de estos archivos de datos es que son seguros. Aún mejor, tu /datos El directorio con todos los datos YAML o JSON no se enviará a su servidor en vivo. Durante la fase de compilación, sus datos se inyectan en sus plantillas localmente antes de que se implementen. Después de eso, los datos en tus vistas son simplemente HTML estático. Muy genial!
Una palabra sobre las convenciones de nombres aquí. Cuando tiene archivos de datos en un directorio de "datos", obtiene acceso a un datos objeto. Middleman entonces crea "objetos" para cada .yml, .yaml o .json Archivo al que se puede acceder a través del inital. datos Objeto encadenándolo. A continuación, tendrá acceso a los atributos que ha almacenado. En nuestro caso, tenemos un películas YAML “objeto” con los atributos. título, año, texto y imagen.
"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 tienes subdirectorios, solo tienes que pegarlos. Digamos que tiene su archivo de datos de películas de bond bajo una spy_movies directorio (por ejemplo: /data/spy_movies/bond.yaml) Ahora deberías acceder a él de esta manera:
html <%= data.spy_movies.bond.movies.title %>
Por último, debo agregar que el almacenamiento en JSON podría ser preferible a algunas personas, pero todas las comas, corchetes y llaves en exceso me apagan para ser honesto. No solo en archivos de datos, sino también en secciones frontales. Depende de usted lo que más le convenga, por supuesto, vea usted mismo:
some_file.yaml:
sencillo bond_girls: - Strawberry Fields - Jill Masterson - Tiffany Case
some_file.json:
javascript "bond_girls": ["Strawberry Fields", "Jill Masterson", "Tiffany Case"]
Si tiene un archivo como source / bond-movies.html.erb, terminará como http://appname.com/bond-movies.html. Durante el proceso de construcción, perdemos la extensión de archivo ".erb" y terminamos con la versión final ".html" de esa página, que se refleja en la URL. Eso está bien, cosas normales. Para URLs más sofisticadas como http://appname.com/bond-movies tenemos que trabajar un poco.
Necesitas activar el Índices de directorio extensión en su config.rb. Esto crea una carpeta para cada archivo .html. Durante compilación de intermediarios La página terminada termina como el archivo de índice de esa carpeta, lo que significa que, como archivo de índice, su extensión no tendrá que aparecer en la URL. Si prestó atención, es posible que ya haya visto esto en funcionamiento con el archivo index.html estándar que se crea para cada proyecto de Middleman como página de destino. Enciende tu servidor y compruébalo por ti mismo..
En config.rb:
ruby activar: directory_indexes
A ver que paso despues compilación de intermediarios a su archivo bond-movies.html.erb si ha activado esa extensión. Middleman habrá creado una carpeta de "compilar / crear películas" y su nombre de archivo original habrá sido cambiado a index.html (construir / enlazar películas / index.html).
Aquí está la salida de Shell:
bash crear build / bond-movies / index.html
Sin embargo, hay una pequeña advertencia. Antes de activar URL bonitas, puede confiar en el uso de la ruta de los activos. Ahora, con los índices de directorios en su lugar, debe suministrar activos con su ruta completa y absoluta. Así que llamar a una imagen solo por su nombre, por ejemplo, ya no volará.
Si, por algún motivo, desea anular el comportamiento de esa extensión para un archivo en particular, puede.
En config.rb:
página ruby "/bond-movies.html",: directory_index => false
Aquí está la salida de Shell si la cambias de nuevo para bond-movies.html.erb:
bash create build / bond-movies.html remove build / bond-movies / index.html remove build / bond-movies
Ahora su URL vuelve a la normalidad para ese archivo de nuevo. (http://appname.com/bond-movies.html)
Además, puede optar por excluirse del esquema de denominación de índice del directorio localmente en el frontmatter de sus páginas individuales:
directory_index: false -
... "
Si quieres construir esa estructura con carpetas y sus respectivos archivos de índice, Middleman no te va a molestar. Funciona de la misma manera y los intermediarios los ignoran si se mezclan y combinan ese enfoque..
Me gustaría ir al grano con este y solo mostrarte las piezas que creo que son realmente relevantes.
El "pipleline del activo" es la jerga de Rails importada a Middleman. Debajo del capó, una gema llamada Sprockets hace todo el trabajo pesado. Le ayuda a manejar la administración de dependencias, combinando y minimizando los activos, lo que ayuda a reducir significativamente sus activos. También se encuentran a su disposición algunos métodos de ayuda para hacer referencia de manera concisa a los activos. Más allá de eso, también se le proporcionan los medios para escribir código Sass y CoffeeScript, de inmediato..
La concatenación es una de las características más importantes de la tubería de activos. En lugar de tener muchas solicitudes HTML separadas para cada archivo CSS y JS, puede reducirlas drásticamente concatenándolas en uno o en un puñado de archivos. Cuantas menos solicitudes hagas, más rápido se cargará tu aplicación..
Por defecto, Sprockets presionará todos los archivos JavaScript en una sola .js expediente. Después compilación de intermediarios, este archivo se encontrará en /build/javascripts/all.js. Lo mismo ocurre con tu CSS. Después del proceso de compilación, tendrá todos los archivos Sass concatenados juntos en compilación / hojas de estilo / all.css.
Combina sus recursos de JavaScript utilizando parciales (cuyos nombres de archivo comienzan con un guión bajo) y luego exigir en la parte superior del archivo source / javascripts / all.js. Los archivos con una extensión .coffee agregada funcionan exactamente igual. El orden importa para este proceso.
Aquí, por ejemplo, está la parte superior de source / javascript / all.js:
javascript // = requiere "_jquery" // = requiere "_lib_code" // = requiere "_animaciones"
Cuando echas un vistazo a tu nuevo /construir directorio, solo encontrará un archivo .js en / javascripts.
Para tu código Sass, la historia es básicamente la misma, pero debes usar Sass's @importar para importar sus parciales, en lugar de exigir de piñones. Nuevamente, coloque los archivos "requeridos" en la parte superior, esta vez prestando atención al pedido. A diferencia de requerir los parciales de JavaScript, usted deja fuera el guión bajo cuando importa parciales de Sass. Por ejemplo
css @import 'normalize'; @import 'header'; @importar 'navegación'; @import 'footer';
Otra característica interesante de las ruedas dentadas es la compresión, también llamada minificación. Este proceso reduce mucho la grasa, como deshacerse de espacios en blanco y comentarios innecesarios. La gente también llama a este proceso uglifying (y, por supuesto, hay una gema llamada uglifier que hace un hermoso trabajo). Comparada con la minificación de activos de JavaScript, la uglificación de CSS no es tan complicada.
Para comenzar, deberá agregar lo siguiente a su archivo config.rb:
ruby configure: construir hacer activar: minify_css activar: minify_javascript end
En realidad, solo necesitas descomentar estas líneas debajo de tu :construir bloquear. La próxima vez que uses compilación de intermediarios los activos en su carpeta / build serán todos uglificados y delgados. A continuación se muestran dos pequeños ejemplos de cómo este código termina apareciendo:
CSS reducido en /build/stylesheets/all.css:
css body background-color: # d0e4fe h1 color: naranja; text-align: center p font-family: "Times New Roman"; font-size: 20px
JS reducido en /build/javascripts/all.js:
javascript switch ((new Date) .getDay ()) case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Miércoles"; pausa; caso 4: día = "Jueves"; pausa; caso 5: día = "Viernes"; pausa; caso 6: día = "Sábado"
Sin el flujo de activos, tendría que configurar su propio dispositivo para escribir su JavaScript y CSS a través de lenguajes de nivel superior como CoffeeScript y Sass..
Para tus archivos Sass tienes a tu disposición cuatro ayudantes:
Accentsconagua
ruta de la imagen()font_path ()URL de la imagen()font_url ()Como ha seguido las convenciones hasta el momento, puede usar estos ayudantes para anteponer la ruta de directorio correcta a sus activos.
En un archivo Sass, por ejemplo:
"css image_path ('logo.png') # => images / logo.png
image_path ('nested_folder / some.png') # => images / nested_folder / some.png "
La canalización de activos utiliza rutas de importación a través de Sprockets para sus activos. Por defecto : js_dir y : css_dir Ya se han añadido a ese camino. Eso significa que los archivos se ponen en / source / javascripts y / fuente / hojas de estilo Están disponibles y se importan automáticamente. Por otro lado, si tiene recursos que desea mantener en otros directorios, también puede agregarlos a la ruta de importación editando config.rb:
ruby sprockets.append_path '/ some / other / asset_folder /'
En este ejemplo, otros activos en source / some / other / asset_folder / other.css También están a disposición de Middleman a través de este camino. Lo mismo va para .js archivos también.
Middleman viene con un par de plantillas de proyectos útiles que al menos debes conocer. Estas plantillas le brindan un buen punto de partida cuando inicia una nueva aplicación Middleman. También puede agregar estas plantillas en cualquier momento más tarde:
Puedes usarlos así, a través de la línea de comando:
bash middleman init your_fancy_app --template = smacss La plantilla le proporcionará todos los archivos y carpetas que necesita. Si ya tiene una aplicación y desea agregar una plantilla, use el mismo comando sin mencionar el nombre de la aplicación. La misma oferta:
bash middleman init --template = smacss
Ahora viene mi parte favorita de Middleman. Es muy sencillo crear sus propias plantillas y reutilizarlas cuando lo desee. Empiezas creando un ~ / .middleman carpeta en su directorio raíz (no olvide el punto delante del nombre). Dentro de ese directorio creas nuevas carpetas para tus plantillas. Por ejemplo /.middleman/podcast seria un podcast modelo. Luego llene este directorio de podcast con todos los archivos y carpetas que necesita. Por ejemplo, si desea tener disponibles hojas de estilo adicionales para su aplicación Middleman, entonces necesita simular la ruta de archivo de Middleman para que sea muy fácil de usar..
En la captura de pantalla a continuación, preparé un ejemplo ficticio que contiene un par de archivos que podría necesitar para cada proyecto ubicado en una carpeta "bourbon". Ahora tengo una plantilla de bourbon.
Desde que simulé la estructura de archivos de Middleman, estas hojas de estilo se mostrarán exactamente donde las necesito después de que inicie esa plantilla. Mis archivos están ahora bajo / fuente / hojas de estilo y también listo para ser importado en mi /source/stylesheets/all.css.scss expediente.
Como ya hice los parciales de mis estilos de plantilla, es como siempre. Aquí está mi fuente / stylesheets / all.css.scss:
css @import 'bourbon_mixins / mixins'; @import 'bourbon_neat / grids'; @import 'bourbon_refills / cards';…
¡Terminado! Sin embargo, debe tener cuidado con una cosa: cuando usamos compilación de intermediarios para crear nuestro nuevo construir directorio de estos archivos serán absorbidos por all.css y ninguna de las carpetas de plantillas de bourbon aparecerá allí. Sin embargo, si olvida tener un guión bajo en sus nombres de archivo para estos estilos, la carpeta completa se transferirá a /construir, junto con los respectivos archivos .css. los @importar Las declaraciones en all.css.scss tampoco harán una diferencia en ese caso..
Si tiene un montón de plantillas y solo quiere buscar un nombre en la lista, puede usar el siguiente comando:
"bash middleman init -help
"
En caso de que quiera reinventar la rueda, eche un vistazo a estas plantillas de código abierto. Si nunca has jugado mucho con las plantillas, te recomiendo que inicies una aplicación ficticia y las pruebes. Vea qué archivos se crean o se sobrescriben. Poke alrededor un poco. Luego, cree una carpeta de relleno con un par de archivos Sass para una plantilla en ~ / .middleman y ver qué pasa cuando inicias esa plantilla. Nada mejor que aprender haciendo estos pequeños experimentos en el camino.!
Creo que ahora estás más que listo para comenzar a construir una pequeña aplicación con Middleman. Te quedan algunas cosas por aprender por tu cuenta, pero te he presentado las piezas más importantes del rompecabezas..
Middleman es muy divertido y una buena opción en cuanto a tecnología. Es potente, fácil de usar y tiene una API sencilla que es fácil para principiantes; eso es todo lo que importa por ahora. Que te diviertas!
