Share
Continuando con la creación de nuestro sitio web estático, en este tutorial diseñaremos la página de detalles para las publicaciones, incrustaremos el widget de podcast y dedicaremos un poco de tiempo a poner en forma nuestra lista de índices. También nos encargaremos de las duplicaciones de estilo y enlaces relativos..
Estaremos cubriendo lo siguiente:
Creo que deberíamos cambiar nuestra atención y darle a nuestra página de detalles un poco de amor básico antes de ajustar la aplicación para mostrar nuestros episodios de podcast. No hemos terminado completamente con la página de índice. Si nos queda espacio en este tutorial, probablemente agregaré un par de consultas de medios para tratar con diferentes resoluciones de pantalla. Por ahora, diría, sigamos adelante. ¿Cuál es el status quo?
¡Vaya, esto no se ve muy bien! Nuestro texto está por todas partes. Vamos a arreglar eso primero. Es una buena idea volver a activar la cuadrícula visual..
En "source / stylesheets / base / _grid-settings.scss":
$ cuadrícula visual: verdadero;
Una vez hecho esto, debemos crear un diseño separado para las páginas de detalles de nuestras publicaciones. El diseño será flexible para que podamos usarlos para publicaciones de blogs puros y también para publicar episodios de podcast. Una pequeña declaración condicional nos ayudará con eso. Más sobre eso más tarde, sin embargo. Abramos config.rb y agreguemos esta línea:
activar: blog hacer | blog | blog.layout = "layouts / blog-layout" final
Esto le dirá a Middleman que tenemos un diseño separado para las páginas de detalles y que se puede encontrar en "layouts / blog-layout". Luego necesitamos crear "layouts / blog-layout.erb". Recuerde que el .erb es necesario sin la extensión .html para que esto funcione correctamente.
En “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 %>
Así que vamos a hablar de lo que está pasando aquí. En primer lugar, tenemos que envolver este diseño del blog dentro de nuestro general diseño. O, dicho de otra manera, envolvemos el diseño de nuestra aplicación alrededor del diseño del blog..
<% wrap_layout :layout do %>... <% end %>
¿Por qué? Porque queremos reutilizar muchas cosas del diseño original y no duplicar cosas como la pie de página parcial o los enlaces de activos en cabeza. Solo dale un minuto o dos para que se hunda si esto te parece extraño al principio. El diseño que utilizamos anteriormente era más global. Ahora necesitamos un poco más de especificidad para satisfacer nuestras necesidades..
Dentro de artículo contenedor de etiquetas, construimos manualmente lo que necesitamos para crear nuestra publicación. Tiene un título, una fecha, un widget embebido de SoundCloud opcional y, por supuesto, el propio cuerpo del artículo. Dentro de nuestros diseños, tenemos acceso a cada individuo. BlogArtículo. Nosotros podemos usar artículo actual para obtener la información de cada artículo para crear nuestra plantilla personalizada. título, fecha y cuerpo son solo métodos para extraer los atributos del artículo individual. Tambien usamos tiempo fuerte Para formatear la fecha como hicimos anteriormente en la página de índice..
Accentsconagua
<%= current_article.title %> <%= current_article.date.strftime('%b %e') %> <%= current_article.body %> Como ya se mencionó, un condicional simple se encarga de manejar los datos que se proporcionan opcionalmente para cada publicación individual a través de su matriz, que está delimitada por tres guiones. Aquí estamos viendo si la página tiene el id de una pista de SoundCloud, y para mostrar el widget si es así:
<% if current_page.data.soundcloud_id %>... <% end %>
En caso de que necesite una actualización, obtenemos acceso a los datos a través de página actual objetar y preguntar su datos para el valor que almacenamos en el frontmatter a través de su clave. En nuestro ejemplo, la clave que necesitamos es soundcloud_id. Si nuestra plantilla encuentra esta clave a través del condicional, muestra el widget e interpola la identificación de SoundCloud para que la pista encuentre la correcta. Si se trata de una simple publicación de blog, no necesitamos proporcionar la soundcloud_id en el frontmatter y el widget de SoundCloud no se incrustarán.
Aquí hay una muestra de ejemplo para una publicación de podcast con un widget de SoundCloud:
--- título: Mi súper impresionante undécima publicación titulada de asno largo que irrumpe en otra línea fecha: 2015-11-30 22:14 UTC soundcloud_id: 138095821 etiquetas: --- Su descripción de episodio de podcast impresionante ... <%= lorem.sentences 10 %> - Pregunta # 01 - Pregunta # 02 ...
Cuando hace clic en "compartir" en cualquiera de las pistas de SoundCloud, tiene la opción de incrustar un iframe para esa pista y solo necesitas copiarla y pegarla en algún lugar de tu código. Usamos este iframe como base y usamos el id para la pista que necesitamos para interpolarlo en la url. Hay dos opciones, un widget grande y uno pequeño: elegí el grande. El otro tiene la ventaja de ser un poco más personalizable: por ejemplo, puede ajustar el color del botón de reproducción. Tu decides:
La magia sucede en esta parte:
… Api.soundcloud.com/tracks/<%= current_page.data.soundcloud_id %>& auto_play =…
Después de que preguntáramos si estos datos están disponibles para nosotros a través del condicional, usamos los datos del controlador de referencia para inyectar el ID para mostrar la pista que deseamos. Echemos otro vistazo a cómo resultaron las cosas hasta ahora:
Ugh En el lado positivo, tenemos toda la estructura y los datos que necesitamos. Y mira, porque anidamos la diseño del blog dentro de diseño diseño, tenemos la ventaja de tener el pie de página ya en la parte inferior. No hay necesidad de duplicar las cosas-cool! Con solo un poco de estilo, podríamos cambiar las cosas y hacer que este se vea un poco más decente.
En "source / stylesheets / all.sass":
@import 'posts_detail'
Y luego en el parcial "source / stylesheets / _posts_detail.sass":
#main + artículo del contenedor externo. detalle del artículo + cambio (2) + columnas-span (8) .detail-post-title color: $ matcha-green tamaño de letra: 1.7em margin-top: 40px .detail-post -date font-size: 1.1em color: $ text-color .article-detail p font-size: 1.05em margin-bottom: 4em color: $ text-color line-height: 1.35em .soundclould-player-big margin- abajo: 50px
Tengamos otro pico rápido.
Bueno, está llegando allí. Comprometámonos por ahora, y hagamos un poco de limpieza después de eso:
git add --todos git commit -m 'Primer intento de la página de detalles de la publicación con la opción de podcast. Agrega el diseño del blog.
Es posible que el lector ávido ya haya visto lo que deberíamos limpiar a continuación. Hay un poco de duplicación en "_posts_detail.sass" y "_index_posts.sass". Me gustaría extraer los estilos duplicados en un archivo Sass separado llamado "_blog_post_extractions.sass". Estoy experimentando con esta técnica últimamente, una idea que obtuve de la Programación Orientada a Objetos. Cosas como BEM o SMACSS pueden ser geniales, especialmente para proyectos más grandes con equipos más grandes si se conforman con seguir las convenciones, pero para proyectos más pequeños, siempre estoy buscando soluciones simples y sin fricción. Voy a intentarlo hasta que la próxima nueva cosa brillante me convenza de un mejor enfoque..
En "source / stylesheets / all.sass":
@import 'bourbon' @import 'base / base' @import 'neat' @import 'blog_post_extractions' @import 'footer' @import 'index_posts' @import 'posts_detail'
Una en "source / stylesheets / _blog_post_extractions.sass":
# principal, .posts + contenedor externo .posts p, .post-title, article.article-detail + shift (2) + span-columnas (8) .post-title a, .detail-post-title color: $ matcha-green .post-title, .detail-post-title font-size: 1.7em .posts p, .article-detail p font-size: 1.05em line-height: 1.35em .posts p, .article-detail p , .detail-post-date, .post-date color: $ text-color .posts p, .article-detail p margin-bottom: 4em
Si comparas lo anterior con los archivos originales, puedes ver que eliminamos una buena parte de la duplicación. También es fácil de entender y encontrar porque importo tales archivos extraídos directamente en la parte superior de "all.sass". Es fácil detectar estas extracciones para personas nuevas en el código base. En este caso, utilizo estos archivos para recopilar los estilos extraídos que se aplican a las publicaciones del blog. Un enfoque similar podría funcionar para duplicaciones en diferentes apariencias de barras laterales, dispositivos o similares, aunque debería haber un hilo común..
En "source / stylesheets / _index_posts.sass":
.post-título a + transición (color .4s eas-in-out) &: hover color: $ text-color .post-date fuente-tamaño: 0.7em margen: izquierda: em (-80px) derecha: em (20px)
En "source / stylesheets / _posts_detail.sass":
.detail-post-title margin-top: 40px .detail-post-date font-size: 1.1em .soundclould-player-big margin-bottom: 50px
Los archivos anteriores ahora son mucho más pequeños, agradables y ordenados, exactamente como me gustan. Los archivos son baratos, así que no me importa si tengo muchos que hacen su pequeño trabajo específico. Una separación de preocupaciones. No es una solución perfecta, pero es tan simple para cosas pequeñas que me gusta experimentar más con ese enfoque.
También deberíamos comentar nuestra cuadrícula visual en "source / stylesheets / base / _grid-settings.scss" y ver cómo se ve:
Es lo mismo que antes, pero con estilos mucho más limpios. ¡Me gusta! Es hora de comprometerse y de desplegar nuestros cambios:
git add --todos git commit -m 'Extrae estilos en _blog_post_extractions Extrae duplicaciones de _index_posts.sass _posts_detail.sass Importa el despliegue de intermediarios de estilos
Vayamos a nuestra página de páginas de GitHub y verifiquemos si todo funciona como se espera. Oh querido. A primera vista, se ve bien, pero si intentamos ir a la página de detalles del índice, obtenemos un 404 mensaje de error. GitHub no puede encontrar lo que necesitamos.
Si ha observado detenidamente, es posible que haya visto que nos falta información en nuestra URL. Ahora dice algo así como "http://tu_nombre_de_usuario.github.io/2015/11/30/my-super-awesome-post.html". Lo que debería decir es algo como "http://tu_nombre_usuario.github.io/matcha-nerdz/2015/11/30/my-super-awesome-post.html". La parte "matcha-nerdz" faltaba por completo. No te preocupes, esta es una solución fácil. Necesitamos activar enlaces relativos en nuestro archivo de configuración:
set: relative_links, true
Tener enlaces absolutos en las páginas de GitHub apuntará en la dirección incorrecta. Con este pequeño cambio, sus enlaces tienen espacio de nombre en relación con la raíz de su aplicación. Como puede ver en este pequeño ejemplo, la implementación temprana y con frecuencia es ideal para capturar cosas como esas. Encontrar estas cosas fuera de contexto, cuando ya estás trabajando en algo completamente diferente y tienes que profundizar en los errores, puede alterar tu flujo enormemente..
git commit --todos git commit -m 'Establece los vínculos relativos en el despliegue de intermediarios config.rb'
Todo debería funcionar bien ahora. La tipografía aún no es perfecta, pero me gustaría continuar y usted puede ajustar estas cosas una vez que el sitio esté configurado de la manera que lo necesitamos. Echemos un vistazo:
Como puedes ver, nos falta el widget de audio; y la longitud de la publicación mostrada no es ideal para una lista de índice. Vamos a arreglar eso a continuación. Quiero usar el reproductor SoundCloud más pequeño para mostrar el episodio de podcast en la lista de índices. Por lo tanto, no tiene sentido extraer un parcial para el jugador tanto para el índice como para la página de detalles: cada página necesita su propio widget. Si te gusta usar solo uno de los jugadores para ambos diseños, definitivamente deberías extraer un parcial para él. Te dejaré ese paso ya que ya has aprendido cómo se hace esto..
En "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 %>
El ejemplo del código se enfoca en la sección donde iteramos page_articles. Agregué un condicional que solo muestra el widget de audio si el artículo tiene una sound_cloud_id en la parte frontal del artículo, al que accedemos a través de su atributo de datos. Es muy similar a la forma en que resolvimos esto anteriormente. En este caso utilizamos el parámetro de bloque. artículo para acceder a la información que necesitamos.
A continuación, quiero acortar el texto que se muestra antes de aplicar algunos estilos. En la lista de índice, solo queremos ver algo así como un resumen de 300 caracteres: no demasiado pero, definitivamente, tampoco muy poco texto. Experimente por su cuenta y vea qué funciona mejor para sus necesidades.
Primero tenemos que añadir la gema. Nokogiri para nuestro Gemfile:
gema 'nokogiri'
y lánzalo:
instalación de paquete
En el índice necesitamos cambiar solo una línea. Dejé un comentario para lo que necesita ser reemplazado. Usamos el método de resumen y lo suministramos con la cantidad de caracteres que queremos ver por artículo en la lista de índice.
Entonces, en "source / index.html.erb":
<%# article.body %> <%= article.summary(300) %>
Y luego "source / stylesheets / _index_posts.sass":
Y debemos agregar los estilos para el pequeño jugador de SC en .soundcloud-player-small a nuestro archivo extraído "source / stylesheets / _blog_post_extractions.sass":
.publicaciones p, .post-title, article.article-detail, .soundclould-player-small + shift (2) + span-column (8)
Empuje el espacio un poco y hemos terminado:
.soundclould-player-small margin-bottom: 1em
Muy bien, estamos llegando allí. Ahora tenemos una lista de índice que muestra artículos de episodios de solo texto y de podcast sin complicaciones, sin ningún tipo de confusión. Si tienes un mejor texto ficticio, este debería verse bastante decente ahora. Cometamos!
git add --todos git commit -m 'Agrega un resumen del artículo y un pequeño widget al índice Agrega estilos a la lista de índices El widget de SC agrega Nokogiri Agrega un widget de SC opcional al índice Agrega un resumen de 300 caracteres' despliegue de intermediarios
Creo que te has ganado una bebida fresca en este momento, por lo que podemos dejarlo así por ahora. En el siguiente y último tutorial lo ajustaremos un poco más y también agregaremos algo para navegar por el sitio..
"¿Por qué alojar el podcast en SoundCloud?", Podría preguntar. Bueno, mi razonamiento fue simple: en primer lugar (y no estoy afiliado a SoundCloud de ninguna manera) ciertamente estará disponible por mucho tiempo, algo que no necesariamente se puede esperar de muchos proyectos que ofrecen alojar sus archivos de audio de podcast. No quiero meterme en la situación de tratar con la migración de toneladas de pistas de audio ya publicadas a otro servicio solo porque alguien fue adquirido o fue destruido..
En segundo lugar, es bastante barato alojar una tonelada de pistas, e incluso tienen una opción gratuita para las personas que publican canciones solo ocasionalmente..
El jugador y sus opciones también están bien, no tengo ninguna razón para quejarme de la velocidad o algo así hasta ahora. Las estadísticas también son útiles y ya hay personas en la plataforma que están interesadas en los podcasts, lo que es bueno para el factor de descubrimiento. No me malinterpretes, hay muchas razones por las que quise abrazar a alguien con suavidad cuando traté de cargar y hacer UX, pero en comparación con las desventajas de los grandes dolores de cabeza con otras opciones de alojamiento, SoundCloud me pareció el más razonable. elección en general. Por último, no me gustan los sitios personalizados que ofrecen estos sitios de podcast. Se ven super genéricos y me gusta construir mis propias cosas que se ajusten a mis necesidades y me permita crear mi propia identidad visual.
