Share
Esta es la segunda parte de nuestra serie de tutoriales de diseño de temas de Ghost. Todo desde aquí supone que tienes una comprensión fundamental de Ghost. Si no es así, antes de continuar, tómese el tiempo para leer Entendiendo Ghost: Etapas del diseño).
Como vimos en la parte anterior, hay dos etapas para diseñar un tema para Ghost: Creación de archivos de plantillas y estilo..
En este tutorial nos centraremos en la primera etapa, guiándole paso a paso a través del proceso de configuración de las plantillas de su tema. Aprenderá sobre el archivo de plantillas y el sistema parcial de Ghost, sus etiquetas de plantillas de Manillares y cómo escribir el esquema de marcado de su tema.
Nota: Este tutorial se lleva a cabo en una máquina con Windows, así que siga los pasos equivalentes en su sistema operativo preferido.
También necesitarás tener a mano tu editor de código preferido; Este tutorial se llevará a cabo en Sublime Text 2..
Lo primero que deberá hacer es instalar Ghost en su máquina local. Hacerlo es bastante fácil, siempre y cuando tenga los requisitos previos requeridos en su sistema. No es necesario ejecutar XAMPP o su equivalente para ejecutar Ghost en su máquina local, ya que en realidad se ejecutará solo..
Nota: Ocasionalmente, cuando crea un nuevo tema, reinicia Ghost y luego selecciona el nuevo tema en el administrador, aún puede cargar CSS desde el tema anterior. Si experimenta este problema mientras completa esta serie de tutoriales o en cualquier momento mientras crea un nuevo tema, todo lo que necesita hacer es realizar un segundo reinicio de Ghost. Un reinicio adicional debería borrar el caché para que el nuevo tema del CSS se vuelva visible..
Una vez que haya seguido las instrucciones e instalado Ghost en su máquina local (y haya verificado que todo funciona correctamente), estará listo para comenzar a crear su tema Ghost comenzando con los pasos a continuación..
Para comenzar, vamos a crear y activar un tema de Ghost en blanco con el mínimo absoluto de archivos necesarios..
En el Explorador de Windows (o equivalente), navegue hasta la carpeta en la que instaló Ghost. Deberías ver la siguiente estructura dentro de tu carpeta principal de Ghost:
Navegue a la carpeta "contenido> temas", donde verá la carpeta del tema predeterminado "casper".
En esta ubicación, cree una nueva carpeta y asígnele el nombre que quiera que se llame a su tema. En este tutorial crearemos un tema llamado "UberTheme" y ese es el nombre de la carpeta que crearemos:
Ahora vamos a agregar los archivos de plantilla necesarios, sin los cuales obtendrás errores si intentas activar tu nuevo tema.
Los dos archivos que son absolutamente esenciales para que se ejecute un tema de Ghost son:
En su editor de código preferido, cree un nuevo archivo y luego guárdelo en su carpeta "UberTheme" como "index.hbs". Todavía no tiene ningún código para agregar al archivo, por lo que el archivo que cree estará en blanco..
Cree un segundo archivo nuevo, luego guárdelo también en su carpeta "UberTheme", esta vez como "post.hbs". Al igual que el archivo "index.hbs" que creó durante el paso anterior, este archivo también estará vacío / en blanco.
El interior de su carpeta "UberTheme" ahora debería verse así:
Ahora necesitamos iniciar / reiniciar Ghost para que aparezca "UberTheme" en la lista de temas disponibles en el panel de administración para que podamos seleccionarlo y activarlo..
Si ya tiene Ghost en ejecución, apáguelo presionando CTRL + C en su terminal y luego, cuando se le solicite, escriba "y" seguido de ENTER.
Inicie / reinicie Ghost escribiendo "npm start" en su terminal.
Propina: Si no está seguro de cómo abrir el terminal para poder realizar el paso anterior, vaya a su carpeta "Fantasma", mantenga presionado MAYÚS, haga clic con el botón derecho para abrir el menú de opciones de Windows y luego haga clic con el botón izquierdo en "Abrir la ventana de comandos aquí".
Nota: Los pasos anteriores suponen que has visitado Cómo instalar Ghost para obtener instrucciones sobre cómo instalar y ejecutar Ghost.
Visite el panel de administración de Ghost, (inicie sesión si es necesario), que generalmente se encuentra en http: // localhost: 2368 / ghost
Haga clic en el botón "CONFIGURACIÓN" en el menú superior de su panel de administración:
Esto lo llevará a la sección "CONFIGURACIÓN> General" de su panel de administración.
Desplácese hasta la parte inferior de la página, luego localice y expanda la lista desplegable "Tema". Debería ver "UberTheme" como una de las opciones:
Seleccione "UberTheme" de la lista, luego haga clic en el botón azul "GUARDAR" en la parte superior derecha de la página.
En su navegador, visite la parte delantera de su instalación de Ghost, que generalmente se encuentra en http: // localhost: 2368 /
Resultado: no debería ver más que una ventana blanca en blanco del navegador.
Si no ve una ventana blanca en blanco del navegador y en cambio ve algo como la imagen de abajo, siga los pasos anteriores nuevamente y asegúrese de que haya nombrado correctamente los archivos de su plantilla:
Los únicos archivos absolutamente necesarios son los archivos de plantilla "index.hbs" y "post.hbs" como se describe en la sección anterior..
Sin embargo, hay dos archivos más que querrá usar en casi cualquier tema, aunque no son estrictamente necesarios, así que los agregaremos ahora. También organizaremos una estructura de carpetas para guardar cualquier archivo adicional agregado a su tema más adelante..
Solo hay un archivo de plantilla principal más que deseará en la carpeta raíz de su tema, y ese es el archivo "default.hbs".
Este archivo crea el código de "envoltorio" para su tema, es decir, el código de cabeza y pie que se envolverá alrededor de cada página de un sitio que ejecuta su tema. Contendrá su estándar , y secciones, así como algunas etiquetas de plantilla que generarán un importante código Ghost.
Cubriremos lo que realmente debe escribirse en este archivo con más detalle más adelante. Por ahora, vamos a crear el archivo vacío..
En su editor de código preferido, cree un nuevo archivo y luego guárdelo en su carpeta "UberTheme" como "default.hbs".
Con las plantillas de Handlebars usted tiene la capacidad de crear lo que se llama archivos de plantillas "parciales". Estos archivos de plantillas parciales le permiten dividir su tema en componentes más pequeños para una estructura más modular y bien organizada.
Por ejemplo, es posible que desee dividir su diseño en las secciones "encabezado", "principal" y "pie de página", con el código de cada contenido en su propio archivo parcial. Verás este proceso en la práctica más adelante. Por ahora, solo crearemos la carpeta que se usará para guardar estos archivos "parciales".
En el Explorador de Windows (o equivalente) navegue a su carpeta "UberTheme".
Crea una nueva carpeta y llámala "parciales".
Nota: Es importante asegurarse de que esta carpeta tenga un nombre correcto y esté ubicada en la carpeta raíz del tema, o Ghost no podrá encontrar sus archivos de plantilla parcial.
Cuando lleguemos a la etapa de estilo, todos los archivos relacionados con su estilo entrarán en su carpeta de "elementos", incluidos CSS, JS, archivos de fuente e imagen..
Nota: No es necesario que asigne un nombre a la carpeta "elementos", ya que puede asignarle el nombre que desee. Simplemente estamos siguiendo las pautas de mejores prácticas de Ghost en este tutorial..
En el Explorador de Windows (o equivalente) navegue a su carpeta "UberTheme".
Crea una nueva carpeta y llámala "activos".
Navega en tu carpeta de "activos".
Crea una nueva carpeta y llámala "css".
Crea una nueva carpeta y llámala "fuentes".
Crea una nueva carpeta y llámala "imágenes".
Crea una nueva carpeta y llámala "js".
La estructura de carpetas y archivos de temas ahora debería tener este aspecto:
Técnicamente, agregar el archivo de la hoja de estilo se podría llamar parte del proceso de estilo. Sin embargo, vamos a escribir el sección en la siguiente etapa del tutorial, y como parte de eso, queremos vincular la hoja de estilos de su tema y verificar que se está cargando.
Para ello, crearemos un archivo de hoja de estilo que agregará un color de fondo a su tema para que podamos asegurarnos posteriormente de que esté vinculado en su seccion correctamente.
En su editor de código preferido, cree un nuevo archivo.
Agrega el siguiente CSS al archivo:
cuerpo fondo-color: # F0F0F0;
Guarde el archivo en su carpeta "UberTheme> assets> css" como "style.css".
Ahora vamos a pasar a escribir el código de plantilla real de su tema, comenzando con el archivo "default.hbs". (Ver más arriba para un resumen de lo que es este archivo).
Nota: Para diferenciar entre etiquetas html y etiquetas de plantillas de barras de control, utilizaremos el término "etiquetas html" o "etiquetas de plantilla" para que sepa a qué tipo se refiere..
En su editor de código preferido, abra su archivo "default.hbs" desde la carpeta raíz del tema, es decir, "UberTheme".
Agregue el siguiente código:
! Configuraciones de documentos ! Etiquetas meta sensibles
Todo lo que hemos hecho aquí es agregar las etiquetas esenciales doctype, html, head y body. También hemos agregado algunas etiquetas meta básicas para configurar el conjunto de caracteres, Chrome Frame habilitado (si está disponible) o bien el modo Edge (el más alto disponible) para IE, y para inicializar nuestra pantalla receptiva.
Nota: En el código anterior también verá dos ejemplos de cómo se pueden escribir los comentarios en los archivos de los manillares (los comentarios de "Configuración del documento" y "Etiquetas de metadatos sensibles"). Los comentarios se diferencian cuando se agrega un signo de exclamación inmediatamente después de la apertura de dos conjuntos de llaves, con el cierre del comentario marcado por dos conjuntos de cierre de llaves. Aquí hay otro ejemplo:
! Tu comentario aquí
Agregue el siguiente fragmento de código justo encima de la ! Etiquetas meta sensibles código:
! Página metameta_title
Esto agrega etiquetas meta HTML específicas de la página..
Agregue el siguiente fragmento de código arriba del ! Etiquetas meta sensibles código y directamente debajo de la página meta html tag líneas que agregó previamente:
! Estilos
Esto agrega el enlace externo a su hoja de estilo.
Nota: No necesita una ruta completa a su hoja de estilo, solo una ruta relativa a la carpeta raíz de su tema.
Agregue lo siguiente sobre el cierre. etiqueta html:
cabeza fantasma
Ghost usa esta etiqueta para generar metadatos y estilos importantes en la sección de encabezado.
Nota: Para aquellos con un fondo de temática de WordPress, puede comparar esto con la inclusión de wp_head () en todo el tema secciones.
Reemplace el Etiqueta html con el siguiente código:
Esta etiqueta de plantilla generará un nombre de clase CSS diferente dependiendo de qué área del sitio se está cargando:
Bajo la Donde sea que coloque el También hemos añadido un div con el Nota: Todas las clases de CSS deben incluir espacios de nombre para asegurarse de que no coincidan con ningún otro estilo que el sitio pueda estar cargando. En este caso, estamos agregando todos los nombres de clase con Importante: Es muy importante el Directamente encima de la etiqueta html agregar el siguiente código: Como el Guarde el archivo "default.hbs". Tu archivo "default.hbs" ahora debería verse así: Ahora está listo para probar su archivo de plantilla "default.hbs" y asegurarse de que todo sea correcto. Para hacer esto, solo debe informarle a Ghost que desea que cargue la plantilla "default.hbs". Abra los archivos "index.hbs" y "post.hbs" en su editor de código. Agregue el siguiente código a cada uno y luego guarde: Cuando el fantasma ve el Ahora, para probar su archivo "default.hbs", vuelva al inicio de su sitio de Ghost, normalmente ubicado en http: // localhost: 2368 / ghost, y actualice la página. Donde antes solo veía una ventana blanca en blanco del navegador, ahora debería ver el color de fondo de la ventana convertido a gris claro. Si ve esto, ha verificado que su hoja de estilo se está cargando correctamente. Si la ventana del navegador sigue siendo blanca, verifique que la ubicación y el nombre de su hoja de estilo estén ingresados correctamente en la Usa tu navegador para ver la fuente de la página. Si se ve así, ha creado con éxito su archivo "default.hbs": Nota: Es posible que el contenido de su título y meta descripción aparezca de manera diferente cuando vea la fuente de su página. Si es así, eso es perfectamente normal ya que los datos en esos campos se extraen del título y la descripción del blog tal como se ingresó en la página "Configuración> General" de Ghost admin. Aunque este es el final de la segunda entrega, aún no hemos terminado con la etapa de creación de plantillas para crear su tema Ghost. Sin embargo, estamos listos para comenzar a agregar contenido para que se pueda mostrar en una página y para que podamos seguir probando la configuración de nuestras plantillas a medida que avanzamos.. La siguiente etapa de nuestra serie de tutoriales continúa y finaliza el proceso de creación de plantillas. Aprenderá cómo agregar etiquetas y marcas de plantilla, finalizar los tres archivos principales de la plantilla de su tema y agregar los archivos de la plantilla que colocan un encabezado y pie de página comunes en su tema. Al final de la siguiente parte, el proceso de creación de plantillas para crear su tema estará completo.cuerpo La etiqueta en su archivo "default.hbs" es donde se mostrará su contenido principal, es decir, su última lista de publicaciones o la vista de una sola publicación..wrapper_uber nombre de la clase, más tarde aplicaremos el estilo de envoltorio, usándolo para controlar el ancho y otros estilos del área de contenido principal del tema._uber.cuerpo la etiqueta está rodeada por llaves dobles, ya que esto evita que los valores devueltos aquí se escapen. Si no utilizara los corchetes triples aquí, obtendría una carga de HTML en su pantalla en lugar del contenido real.Paso 8:
ghost_foot
cabeza fantasma etiqueta que agregamos arriba, esta ghost_foot La etiqueta de la plantilla debe incluirse para generar scripts y datos importantes..Paso 9:
! Configuraciones de documentos ! Página meta
Probando tu archivo "default.hbs"
Paso 1:
Paso 2:
!< default
!< default etiqueta sabrá que quieres envolver la página en el código de la plantilla "default.hbs".Paso 3:
Etapa 4:
línea que agregaste a tu sección.Paso 5:
A continuación
Accentsconagua