Saltar al contenido

Tutorial de MD Bootstrap Ruby on Rails

Felicitaciones a kenc138 por preparar la versión original de esta guía.

¡Hoy aprenderá cómo hacer que su proyecto Ruby on Rails sea totalmente MDBed!

La sintaxis del lenguaje Ruby es fácil de entender, mientras que Rails ayuda a los desarrolladores a aumentar su productividad permitiéndoles enfocarse en diseñar e implementar funciones, sin preocuparse por configurar conexiones de servidor o planificar la estructura de carpetas. Por último, pero no menos importante, el marco es de código abierto.

Si observa un error, o algo a continuación no está claro para usted, lo invitamos a visitar nuestro foro de soporte.

¿Que voy a aprender?

Tenga en cuenta que la guía lo lleva de abajo hacia arriba, y sus dos primeros pasos deben ser omitidos por personas que ya tienen sus proyectos listos.

1. Consíguete algunos rieles:
Asegúrese de tener todo lo necesario para comenzar un nuevo proyecto:

2. Preparando el proyecto:

La CLI le preguntará acerca de su contraseña de RubyGems; si no tiene una, no hay problema, simplemente presione CTRL + C.

Para instalar gemas, simplemente presione

desde el directorio raíz del proyecto.

3. ¡Es hora de conseguir las gemas básicas! Si su proyecto no los usa ya, vaya a ./Gemfile y agregue estos, preferiblemente alrededor de las líneas 29/30:

4.

5. Es hora de ser real y obtener su paquete MDB en algún lugar a mano.
Crear /vendor/assets/javascirpts/ directorio en su proyecto de rieles, y mueva estos chicos malos adentro:

6. Cree, de manera similar, un /vendor/assets/stylesheets/ directorio, y coloque nuestros estilos ardientes dentro para que reinen:

7. Agregar JavaScript
Ok, ahora, ¡el doctor está adentro! Es hora de trabajar un poco en el manifiesto de JavaScript. Define qué scripts se procesan exactamente en la denominada “tubería de activos”: es el punto crucial para adjuntar sus scripts personalizados a un proyecto de Rails. Ve, mira hacia arriba en app/assets/javascripts/application.jsy, dado que está allí, reorganice la lista de scripts para que se vea de la siguiente manera:

Estos pueden parecer extraños y comentados, ¡pero no temas! Este es el archivo que usa Rails para saber qué y desde dónde tomar y concatinar, huellas digitales y adjuntar a lo que sea que esté construyendo.

8. Agregar CSS
¡Muy bien, tiempo de giro de la trama! También hay un manifiesto CSS, que hace las mismas cosas, ¡pero con hojas de estilo! Vive en app/assets/stylesheets/application.css, déle un golpe y vea qué puede hacer por usted hoy. Asegúrese de que la lista de activos tenga este aspecto:

¡Un canal de proyecto predeterminado también está listo para compilar Sass! Es realmente útil por sí mismo, pero también para la depuración: en caso de algunas inconsistencias CSS, la canalización de la hoja de estilo puede fallar silenciosamente, lo que no hará que se incluyan en el archivo generado. Para depurar este proceso, puede intentar precompilar .scss archivos usando Rake:

9. Agregar fuente Roboto
¡Es hora de algo completamente diferente! Queremos que los archivos de fuentes se adjunten al producto final de nuestro trabajo, pero esta vez no hay un manifiesto de fuentes. Crear un app/assets/font/ directorio si no está allí y poner el /roboto carpeta de fuentes en el interior. Ahora navega a config/application.rb y agregue lo siguiente a la línea 13:

10. Ajustar el archivo CSS
Dado que movimos las hojas de estilo a un proyecto diferente, nuestro CSS url() ¡la función apunta a un lugar equivocado! Para abordar este cambio, tenemos que modificar nuestra mdb.css archivar un poco. Encuentra instancias de @font-face y reemplazar su url()parámetro de función con el directorio apropiado, también – deshacerse del local sintaxis para que Rails no tenga ideas tontas:


11. Ejecución de su proyecto

¡Casi llegamos! Asegúrese de que la plantilla (que se encuentra por defecto en vendor/bundle/ruby/2.3.0/gems/railties-5.2.0/lib/rails/templates/rails/welcome/index.html.erb) se inicia con nuestros archivos de salida. Para hacerlo, vea si contiene las etiquetas adecuadas:

Existe la posibilidad de que tenga que modificar la Política de seguridad de contenido predeterminada del proyecto, por lo que permite los scripts y hojas de estilo adjuntos.

12. Uso de complementos de MDB
Es lo que acabamos de hacer aquí: obtener activos en los bloques de partida y conectarlos a la canalización de activos. Dupdo img y mdb-addons a /vendor/assets y actualiza tu config/application.rb archivo para incluir estos:

De manera similar a la fuente Roboto, aquí también necesitamos modificar las URL en nuestro CSS, reemplazando ../img/ con /assets/:

13. Extra: conseguir que módulos JavaScript MDB específicos funcionen solo en páginas específicas:
En tus application.html.erb file, use Ruby incrustado para definir una clase de cuerpo de la siguiente manera:

Ahora, si hay una solicitud de home#index ruta, la <body> La etiqueta de esta página se representará como <body class="home index"> en el DOM. Ahora es posible apuntar al DOM con JS usando .home.index selector. Si, por ejemplo, desea que un Selector de fechas se cargue solo en una página particular de su aplicación, puede hacerlo rodeando el contenido de su vendor/assets/javascripts/custom.js con una envoltura como esta:

Cuando se carga tu aplicación, application.html.erb se carga una vez, al igual que todos sus activos. De esa manera <body> etiqueta tiene nombres de clases que cambian dinámicamente que dependen de controller#action, que cambios es <%= yield %>, sustitutos dinámicos de los cuales se ajustan adecuadamente a sus respectivas vistas.

¡Felicidades!

¡Está ejecutando un proyecto MDB Rails ahora!

Este contenido se publicó originalmente aquí.