Share
El proceso de creación de temas para Ghost es increíblemente suave, simple y muy fácil de aprender. Pero antes de comenzar a crear un tema real de Ghost, es importante y útil comprender el papel de los temas en la ecología general de Ghost para que pueda diseñar de manera óptima..
La mejor manera de hacerlo es no meterse de cabeza en el diseño o código, sino en obtener una comprensión completa de Ghost como su base..
En esta primera parte de nuestra serie de tutoriales, obtendrás esa base y, una vez que lo hagas, estarás en una posición perfecta para comenzar a construir tu primer tema..
Ghost es una aplicación de código abierto dedicada a la publicación de contenido..
En los últimos años, las herramientas de publicación de contenido han evolucionado para permitir que las personas se autogestionen de cualquier tipo de sitio que puedan necesitar. Ya sea que se trate de una tienda en línea compleja, una presentación de negocios o un CMS completo, los usuarios pueden manejarlo todo con relativamente poca experiencia.
Pero Ghost no se trata de ninguna de esas cosas complejas. Ghost se trata de volver a centrarnos en una cosa simple: escritura.
Es una plataforma construida sobre el principio de la simplicidad. Su objetivo principal es ayudar a los escritores a bloguear más y centrarse menos en la herramienta de publicación de contenido que forma parte de la ecuación de los blogs..
Para los desarrolladores de temas esto introduce un cambio de ritmo. Mientras que la temática para otras plataformas a menudo está impulsada por la demanda de los usuarios de temas para agregar todo tipo de complejidad funcional a su sitio web, la plataforma Ghost está dirigida por una sola cosa. El lema de Ghost nos dice qué es eso:
Solo una plataforma de blogs.
Como Ghost está 100% enfocado en los blogs, Ghost es: Solo para bloggers.
Y en línea con esto, el diseño del tema Ghost también se basa en una sola cosa: Solo blogging temas.
Estas pueden parecer declaraciones obvias, pero es importante enfatizarlas, porque en una plataforma enfocada en la escritura, que está siendo utilizada por personas que están enfocadas en la escritura, también los temas de Ghost deben diseñarse con un enfoque en la escritura..
Como parte de su campaña de Kickstarter, el fundador de Ghost, John O'Nolan, dijo lo siguiente:
... no se trata solo de hacer algo que se vea bien, se trata de brindarles a los escritores herramientas para impulsar los blogs y llevar el periodismo al siguiente nivel.
Ahí radica la filosofía que los diseñadores de temas de Ghost deben adoptar para servir mejor a los usuarios de Ghost: En primer lugar, asegúrese de que el contenido de un usuario esté siempre al frente y en el centro..
Es un enfoque común en el diseño web para centrarse en los gráficos y la apariencia general del diseño, con el estilo de la tipografía y el contenido en último lugar. Pero en un tema de Ghost, el contenido nunca debe ocupar un segundo plano en otros aspectos del diseño..
Como diseñador de temas de Ghost, tu primera consideración debe ser cómo aparecerá el contenido, con un fuerte énfasis en la tipografía, y el resto del diseño del tema debería desarrollarse para respaldarlo..
Obtendrá más información sobre cómo funciona esto más adelante en la serie de tutoriales una vez que comencemos a crear un tema real, pero antes de que podamos hacer eso, necesitamos aprender más sobre la plataforma Ghost..
Hay algunos aspectos fundamentales de Ghost a tener en cuenta que lo diferencian de otras plataformas a las que puede estar acostumbrado..
A diferencia de la mayoría de las aplicaciones de creación de sitios web actualmente populares que están basadas en PHP, Ghost se basa en Node.js.
Node.js es una plataforma de software que interpreta y ejecuta JavaScript en el back-end. Puede aprender más sobre esto en Nodejs.org pero realmente no tiene que hacerlo. No se requiere un conocimiento profundo de Node.js para crear un tema de Ghost; todo lo que necesitas saber se tratará en esta serie de tutoriales..
Muchas personas consideran que Node.js es el camino del futuro por varias razones; La velocidad es uno de ellos. Se ha demostrado que Node.js tiene un rendimiento significativamente más rápido que PHP en numerosas pruebas de evaluación comparativa, es un componente clave detrás de por qué Ghost se ejecuta de forma tan veloz.
Para trabajar en un tema de Ghost en un entorno local, deberá instalar Node.js localmente. Afortunadamente, hacerlo es un proceso muy rápido y fácil. Le indicaremos cómo hacerlo antes de comenzar el proceso de creación de un tema en la segunda parte de esta serie de tutoriales..
Nota: Debe tener en cuenta que, en el corto plazo, podría encontrar algunos problemas crecientes al implementar sus sitios Ghost. Casi todos los hosts en el mundo ahora están configurados para acomodar aplicaciones PHP, pero como Node.js es relativamente nuevo, la configuración de "pulsador" en dominios en vivo a la que podría estar acostumbrado con otras aplicaciones no está del todo lista. Varios hosts ya están creando una nueva infraestructura específicamente para facilitar Ghost, por lo que solo será una breve espera hasta que la implementación de Ghost sea tan fácil como cualquier otra aplicación, si no es más fácil. Además, a partir de noviembre, podrá utilizar el servicio de alojamiento interno de Ghost..
Un aspecto adicional de Ghost que puede ser diferente a otras plataformas para las que ha sido un tema en el pasado se relaciona con la configuración que los usuarios pueden controlar en el back-end..
Las configuraciones dirigidas por el usuario de Ghost determinan un gran porcentaje de lo que se puede generar en la parte frontal, lo que, a su vez, influye en el tipo de contenido disponible para la temática.
Todavía hay muchas cosas nuevas planeadas para Ghost, sin embargo, el enfoque que vamos a tomar en esta serie de tutoriales es trabajar con la configuración que ahora se puede utilizar..
Ciertos ajustes para la futura funcionalidad de Ghost existen ahora. Por ejemplo, hay una IU de administrador para crear menús de navegación en el camino, así como una funcionalidad preliminar para generarlos en el núcleo de Ghost. Sin embargo, no sabemos exactamente cómo funcionarán estas cosas (y no lo haremos hasta que se publiquen), por lo que no haremos ningún diseño para ellas en esta serie de tutoriales. Dejaremos eso para el día en que el equipo Ghost los libere..
Esto nos lleva a lo que los usuarios pueden controlar en la parte de atrás de Ghost en este momento, que son configuraciones que se dividen en dos áreas;
Echemos un vistazo a cada una de esas áreas ahora.
La configuración de administración de Ghost se divide en dos pestañas: Configuración general y Configuración de usuario. Las pestañas de configuración general y de usuario controlan el contenido que podemos personalizar en nuestros temas..
los Ajustes> General La pestaña nos proporciona los siguientes elementos, utilizables en cualquier parte en un tema de Ghost:
los Ajustes> Usuario La pestaña nos da lo siguiente, utilizable en la vista de una sola publicación solamente:
La interfaz de edición posterior de Ghost es sin duda una de sus características más atractivas. Diseñado por escritores para escritores, ofrece un entorno fantástico para la creación de contenido..
Su mayor contraste con otros entornos de edición es lo limpio y minimalista que está diseñado para ser. No hay desorden en el formato de las barras de herramientas, metacuadros u otros campos personalizados. La gran mayoría del espacio de la pantalla está dedicado por completo al área de escritura..
El aspecto más relevante del área de edición de publicaciones para los diseñadores de temas es la columna vertebral del formato de publicación de Ghost: Markdown.
En lugar de usar botones de estilo o HTML en bruto, el contenido de Ghost se formatea con Markdown, una sintaxis en línea simple que significa que los escritores no tienen que detenerse en ningún momento durante la creación de contenido. Debido a este enfoque simplificado, hay una lista relativamente corta de cosas a ser estilizadas que el editor de publicaciones controla:
Nota: Markdown también aceptará HTML sin formato, lo que significa que los videos de servicios como YouTube se pueden incrustar fácilmente a través de copiar y pegar el código iframe. Por esa razón, también es una buena idea considerar el estilo de los iframes en sus temas también..
Ghost está diseñado alrededor de una clara separación de presentación y contenido..
Ghost maneja toda la generación de contenido y cualquier funcionalidad adicional requerida es manejada por los complementos. Esto deja el tema del fantasma dedicado a la presentación pura..
La separación de contenido y presentación es un principio de diseño web que no es nuevo. La idea básica es que si el contenido y la presentación se separan en entidades independientes, es posible cambiar una sin alterar la otra. En otras palabras, un tema se puede cambiar por otro sin que el usuario tenga que cambiar su contenido de ninguna manera..
Cuando los temas contienen una funcionalidad que no es puramente de presentación, un usuario ya no puede cambiar su tema sin alterar también el aspecto de su contenido. Se atan a la presentación que tienen, y el propósito fundamental de un tema se pierde esencialmente.
Sin embargo, con Ghost, el propósito fundamental de un tema permanece intacto en todo momento..
Nota: En el futuro, a medida que se desarrollen los complementos para Ghost, será posible crear temas Ghost con dependencias de complementos. Esta es otra característica que será posible gracias a la creación de Ghost sobre Node.js. Todavía podremos ver paquetes generales mejorados disponibles para los usuarios, pero el método para hacerlo conservará constantemente los beneficios que se derivan de una separación de contenido y presentación.
Las dos etapas muy claramente definidas con las que trabajará en el proceso de creación de un tema de Ghost son:
Las siguientes secciones de esta serie de tutoriales le proporcionarán instrucciones completas paso a paso sobre cómo proceder a través de estas etapas para crear su primer tema de Ghost. Antes de eso, sin embargo, es útil comprender un poco más sobre el lenguaje de plantillas que impulsa los temas de Ghost..
Los temas de Ghost utilizan un fantástico lenguaje de plantillas llamado Handlebars.js para potenciar la ubicación del contenido. Handlebars es un lenguaje de creación de plantillas en el sentido adecuado del término, en el que su función es simplemente generar contenido pre-captado en posiciones específicas dentro de un archivo de plantilla..
Los manillares se caracterizan por el uso de llaves (que parecen manillares), para agregar etiquetas predefinidas a las plantillas que se reemplazarán con contenido cuando se sirva el archivo..
Ejemplo de etiqueta de plantilla handlebars.js: contenido
Handlbars.js se conoce como sin lógica lenguaje de plantillas porque no se puede utilizar para escribir funciones, mantener variables o preparar el contenido para su visualización. Aparte de representar el contenido donde se colocan las etiquetas, sus únicas operaciones son simplemente para:
Es la funcionalidad sin lógica detrás de cada tema de Ghost que garantiza que cada tema controle los atributos de presentación solamente.
Los temas de Ghost tampoco hacen nada para determinar con qué contenido se reemplazarán las etiquetas de plantillas de manillares, todo eso lo maneja Ghost. El tema, sin embargo, se utiliza para determinar cómo será la salida marcado y estilo.
Gracias a las plantillas sin lógica, el marcado y el estilo de salida de Ghost se logra fácilmente y ayuda a garantizar un código muy limpio en sus plantillas. A su vez, esto facilita la escritura de marcado semántico que está actualizado con los últimos estándares de SEO y accesibilidad..
Aquí hay una lista rápida "de un vistazo" de todo lo que es, y no se incluye en las dos etapas de diseño de un tema de Ghost.
Qué es en un tema fantasma: Plantillas
Estilo
Sin embargo, los siguientes no es incluido en un tema fantasma:
Puede resultarle útil pensar que el proceso de diseño de dos etapas está resumido por el "SAMWYS" principio, o "Estilo y marcado lo que te sirven".
Al diseñar un tema de Ghost, no tenemos que trabajar con consultas lógicas o de base de datos porque Ghost maneja todo eso por nosotros. SAMWYS nos recuerda que todo lo que tenemos que hacer es colocar etiquetas de plantilla, escribir marcas de calidad y armar un estilo de tema excelente que muestre el contenido del usuario.
Todo lo que hemos discutido hasta ahora le proporciona una comprensión fundamental de Ghost.
Desde aquí podemos pasar al proceso paso a paso de crear su primer tema..
La siguiente parte de nuestra serie de tutoriales comienza con la primera etapa del proceso de creación del tema; La etapa de la plantilla. Aprenderá exactamente cómo configurar la estructura de archivos de su tema, cómo colocar etiquetas de plantilla y cómo escribir un esquema de marcado.
Accentsconagua