Actualización ¿Qué hay de nuevo en temas de fantasmas?

#etiqueta 
 
Mensajes etiquetados: nombre
 
 /etiqueta

Esto agregará un encabezado a sus páginas de lista de etiquetas que muestran el nombre de la etiqueta actual.

En su archivo "layout.less", después la .article_uber Selector de estilo, añade este código:

.tag_heading font-size: 2rem; relleno: 0 0 2rem 0; text-align: center; margen inferior: 0.25rem;  

Cuando vaya a una página de listado de etiquetas, ahora debería tener una sección de encabezado para esto:

Para crear diferentes plantillas para etiquetas específicas, use la sintaxis de nombres de archivo "etiqueta - slug. Hbs". Esto puede ser genial para cosas como crear galerías de imágenes a partir de las publicaciones etiquetadas como "galería", por ejemplo, usando una plantilla llamada "tag-gallery.hbs".

Home Context / Home Template

Es posible que desee tener una plantilla diferente para su página de inicio que para las listas subsiguientes de publicaciones a medida que la página de personas. Por ejemplo, puede tener una imagen de portada grande o una presentación de diapositivas en su página de inicio que no desea que los visitantes tengan que desplazarse de nuevo en la siguiente página de publicaciones..

Para personalizar la visualización de su página de inicio, cree una plantilla llamada "home.hbs".

Lee más en la documentación del desarrollador de Ghost..

Páginas de error personalizadas

Si desea controlar la presentación exacta de las páginas de error, ahora puede crear una plantilla llamada "error.hbs".

Lee más en (¿puedes adivinarlo?) Documentos de desarrolladores de Ghost!

Nuevos ayudantes

Ghost ha introducido varios nuevos ayudantes; tipo de etiquetas de plantilla que le ayudan a generar ciertos tipos de contenido en su tema.

navigation Ayudante

Ahora es posible crear menús básicos de navegación en Ghost, yendo a Ajustes> Navegación en el área de administración.

Para hacer que aparezca un menú de navegación en su UberTheme, abra el archivo "header.hbs" de la carpeta "partials" y agregue este código antes de la última etiqueta div de cierre:

Desde la carpeta “MENOS” del proyecto, abra “layout.less” y localice el .header_uber clase. En ella, en la línea 33, cambia el fondo acolchado valor de:

parte inferior de relleno: 3 * @golden + 0em;

… a:

parte inferior de relleno: 1.5 * @golden + 0em;

Luego agrega el siguiente código para darle estilo a tu nuevo menú de navegación:

ul.nav list-style-type: none; margen superior: 1.5 * @golden + 0em; relleno: 0; pantalla: flexión; justificar-contenido: centro; borde superior: 0.0625rem sólido aclarar (@ color_03, 33%); borde inferior: 0.0625 relé sólido (@ color_03, 33%); color de fondo: aclarar (@ color_03, 42%); li margen: 0 0.25em; relleno: 0.75em 1em; a texto-decoración: ninguno; 

Nota: Estamos usando flexbox aquí para una implementación rápida y fácil del menú, pero si necesita admitir navegadores heredados, es posible que desee utilizar un enfoque diferente.

Tu tema ahora debería tener un menú de navegación que se vea así:

Lea más sobre la navegación en el ... ya sabes.

image Ayudante

Ghost ahora ofrece la posibilidad de agregar una imagen destacada a cualquier publicación. Para agregar una imagen, haga clic en el pequeño icono de engranaje en la parte inferior derecha de la interfaz de edición posterior, luego haga clic en Añadir imagen de publicación cuadrado en la parte superior de la barra lateral que salta. Alternativamente, arrastra y suelta una imagen sobre ella.

Para dar salida a la imagen de la publicación use la imagen ayudante. En UberTheme, abra el archivo "index.hbs" y localice el contenido etiqueta en la línea 12:

 contenido 

Directamente encima de él, agregue un elemento de imagen usando la imagen ayudante en el src atributo. También usaremos el título del post en el alt atributo, y envolverlo con un #if imagen… / if Compruebe para asegurarse de que hay una imagen para mostrar:

 #if imagen  / if content 

Ahora debería poder ver cualquier imagen de publicación agregada justo debajo del título de la publicación en su tema, así:

Vamos docs.

#has Ayudante

El nuevo #tiene el helper le permite verificar si una publicación tiene un autor determinado como autor y / o tiene ciertas etiquetas asociadas. Esto le permite hacer cosas como crear diferentes tipos de presentación para diferentes autores o, en el caso de las etiquetas, configurar diferentes tipos de publicaciones similares a los temas de Tumblr o los formatos de publicación de WordPress.

Por ejemplo, puede hacer que todas las publicaciones etiquetadas como "foto" se presenten con un diseño de foto especial, todas las publicaciones etiquetadas como "video" se presenten a su manera, y otras publicaciones vuelvan al marcado predeterminado:

#has tag = "photo" Presentación de publicación de foto especial aquí else #has tag = "video" Presentación de publicación de video especial aquí else Volver a la presentación predeterminada / tiene / has

Docs.

#is ayudante

Hasta ahora, hemos pasado por muchos de los nuevos "contextos" dentro de un sitio de Ghost, como "publicar", "autor", "página", "etiqueta" y "inicio". los #es el ayudante le proporciona una forma de controlar el resultado en una plantilla dependiendo del contexto en el que se utiliza la plantilla.

Por ejemplo, en lugar de crear una plantilla diferente de "tag.hbs" como hicimos anteriormente, puede agregar lo siguiente a su archivo "index.hbs":

# es "tag" #tag 
 
Mensajes etiquetados: nombre
 
 / tag / is

los # es "etiqueta" la línea verifica si el contexto actual es "etiqueta", es decir, que el espectador está mirando una lista de publicaciones bajo una etiqueta determinada, y solo así se mostrará el encabezado de la etiqueta.

Lee mas.

#prev_post y #next_post Ayudantes

Si lo desea, ahora puede agregar un Siguiente post y un Publicación anterior Enlace para permitir que los lectores pasen directamente de leer una publicación a otra. Estos enlaces deben agregarse a la plantilla "post.hbs".

Un ejemplo de cómo se pueden implementar estos enlaces, (desde la página de documentos de Ghost), es el siguiente:

#enviar 
título
 
 contenido 
 #prev_post title / prev_post #next_post title / next_post / post

Plantillas primordiales

Todas las plantillas que hemos cubierto hasta ahora se corresponden con ciertos contextos, sin embargo, hay algunas que se pueden usar para controlar la salida de ciertos ayudantes, por ejemplo,. navegación y paginación. Por defecto, Ghost maneja la salida de estos ayudantes automáticamente, pero tiene la opción de definir su propia salida dentro de su tema.

Plantilla de navegación

La salida de marcado por defecto por el navegación ayudante es:

 #para navegar por navegación 
etiqueta
 /para cada 

Para utilizar su propio marcado de navegación, cree un archivo llamado "navigation.hbs" y colóquelo en el directorio de parciales de su tema.

Leer más en los documentos..

Plantilla de paginación

La posibilidad de crear una plantilla personalizada para el paginación helper no es realmente nuevo, pero es algo que no cubrimos previamente en la serie y, por lo tanto, vale la pena mencionar aquí. El valor por defecto paginación El código en Ghost es:

Anula este código con el tuyo creando una plantilla llamada "pagination.hbs" en la carpeta "parciales" de tu tema.

Más aquí en los documentos..

Características adicionales

Además de nuevos contextos, plantillas y ayudantes, Ghost también tiene algunas cosas más agregadas a la mezcla.

Publicaciones destacadas

Si desea marcar una publicación específica como "Destacada", ahora hay dos formas en la interfaz de administración.

Desde el espacio de administración que enumera todas tus publicaciones, haz clic en la pequeña estrella en la esquina superior derecha de la ventana de vista previa de la publicación.

Desde el interior del editor de publicaciones, haga clic en el pequeño icono de engranaje en la parte inferior derecha de la pantalla, luego marque la casilla etiquetada Destacar este post.

En su tema, si desea utilizar un marcado diferente para las publicaciones destacadas, compruebe si una publicación aparece con # si aparece

#para publicar mensajes # si aparece  más  / if / foreach

Publicaciones destacadas también llevan la clase destacado Permitiéndote apuntarlas para diferentes estilos en tu CSS. Para que esta clase sea de salida, incluya el post_class ayudante en tus mensajes. 

Por ejemplo, en los archivos "index.hbs", "post.hbs" y "page.hbs" de UberTheme, cambie esta línea:

… a:

De forma predeterminada, las publicaciones destacadas no se ubican por encima de otras publicaciones, se encuentran en su posición habitual según el momento en que se publicaron. Sin embargo, si desea que las publicaciones destacadas aparezcan primero, necesitará dos bucles de publicaciones: una para las publicaciones destacadas y otra para las publicaciones regulares.

#foreach posts # si aparece ! - Muestra las publicaciones destacadas aquí - / if / foreach # # foreach posts #unless destacado ! - Muestra publicaciones regulares aquí - / menos / foreach

Todo el mundo canta ahora: lee más en los documentos..

Favicons personalizados

Para configurar un favicon personalizado, coloque su archivo "favicon.ico" en la carpeta "elementos" y cárguelo en el sección de tu tema con

asset "/favicon.ico"

Lea más en Wikipedia (bromeando, pruebe los documentos de Ghost).

Terminando

Eso es un montón de nuevo poder agregado en el desarrollo del tema Ghost, con una gran cantidad de nuevas oportunidades para el desarrollo creativo del tema!

Para resumir, tenemos:

• Archivo "package.json" y activo se requiere uso del ayudante
• Navegación agregada, con la posibilidad de personalizar su salida HTML.
• Imágenes destacadas añadidas
• Nuevos ayudantes para permitir muchas más opciones en el marcado.
• Páginas estáticas y plantillas personalizadas para ellos.
• Etiqueta páginas y plantillas personalizadas para ellos.
• Páginas de autor y plantillas personalizadas para ellos.
• Plantilla de página de inicio
• Plantilla de error personalizada
• Publicaciones destacadas
• Favicons personalizables

Incluso con todo lo que hemos cubierto aquí, hay más nuevos ayudantes y funciones disponibles en Ghost, así como más detalles sobre todo lo anterior, así que asegúrese de tener una buena lectura en themes.ghost.org para obtener todos los detalles y salidas.

Adjunto a este tutorial encontrará una descarga del archivo fuente donde puede obtener el tema actualizado, así como el archivo "layout.less" editado. Utilice UberTheme como su área de juegos de prueba para familiarizarse con todo lo nuevo en Ghost, luego salga y cree algunos temas asombrosos!

Mercado de envato

No te olvides de revisar la categoría Fantasma en Envato Market!