Probablemente has oído hablar de Fantasma , la nueva plataforma de blogs que ha tomado al mundo de los blogs por sorpresa; es simple, es elegante, es sexy; tiene esa cosa de vista previa en vivo. ¿Que es no gustar?
Me estoy mudando a Fantasma , como muchos diseñadores web, desde un fondo de WordPress. Pero antes de que realmente me las arreglara para entender WordPress 'funciones de plantilla, intenté docenas, posiblemente cientos, de opciones de CMS. Algunos de los más memorables incluyen ExpressionEngine , Textpattern , el malogrado FrogCMS , un viejo y viejo script llamado CuteNews , y muchos más.
Durante mucho tiempo WordPress me dio todo lo que necesitaba: poderosas funciones de plantilla; un suministro interminable de complementos; solo viendo lo que podría hacer.
Pero WordPress ha sido mucho más que un motor de blogs desde hace algún tiempo. Se está moviendo constantemente hacia el ámbito del marco de algunas maneras. Un marco de publicación, si lo desea.
Llegué al punto en que quiero software que bloguee, y eso es todo. Quiero escribir mis publicaciones en Reducción , escriba algunas palabras clave, agregue una o dos imágenes y presione publicar, luego olvídese de todo.
Resulta que no estoy solo en mi deseo de tener una plataforma de blogs completamente simple. Los creadores detrás de Ghost han hecho todo lo posible para quitar todo el material que hemos agregado al proceso de creación de blogs y crear una plataforma de publicación rápida y sencilla que hará el trabajo. Es una bestia completamente diferente.
Funciona según la filosofía de que un CMS para blogs debe hacer una cosa, y hacerlo bien. No verá ninguna revista lanzada en esta plataforma sin mucha personalización. Es un blog, y convertirlo en cualquier otra cosa podría vencer su propósito.
Luego, está el hecho de que está basado en nuevas tecnologías. Ghost se basa en Node.js , que ejecuta código JavaScript en el servidor en lugar de en el navegador. Es amado por las mismas personas que aman PaaS hosting, y todos estos nuevos sistemas que las personas como yo luchan por comprender. En cierto sentido, ha sido a prueba de futuro desde el primer momento. Es parte de la primera generación de una nueva generación de CMS.
Eso sí, desde la perspectiva del blogger, es solo una interfaz simple para bloguear. Desde la perspectiva del usuario final, nada ha cambiado realmente, excepto que tal vez el tema del blog predeterminado se ve un poco "plano". Pero bajo el capó, estamos viendo algo totalmente nuevo, y eso es algo bueno.
Instalando Ghost de la manera más fácil.
Normalmente, debe instalar uno o dos componentes por separado para instalar Ghost instalado y ejecutándolo en una máquina local. Tendría que instalar Node.js, y luego tendría que entrar y comenzar a instalar algunos paquetes adicionales de Nodo manualmente desde la línea de comandos.
Así es, la configuración típica para Ghost requiere el uso de la línea de comando. Para las personas más acostumbradas al proceso de "configuración de cinco minutos" de WordPress con bases de datos MySQL y un instalador gráfico, esto puede ser incómodo.
Podría ser una molestia si no está acostumbrado a usar la línea de comando en una máquina Mac o Linux.
Afortunadamente, las personas amables en Bitnami instaladores gráficos para Windows, Mac y Linux.
Estos son todos los pasos que deberá seguir:
Dado que el instalador le proporciona todos los componentes que necesitará, como Node.js y un mini servidor, el directorio de archivos no es exactamente sencillo.
Deberá abrir cualquier carpeta en la que haya instalado Ghost, y luego navegar a apps / ghost / htdocs / . Esa es la instalación real de Ghost.
Los temas se encuentran en aplicaciones / fantasma / htdocs / content / themes / .
Los temas fantasmas son bastante fáciles de hacer, siempre que conozcas HTML y CSS. El conocimiento de programación es útil, pero no estrictamente necesario. El sistema de plantillas de Ghost es simple, e incluso bastante intuitivo, si ha creado temas para WordP ... ejem, otros CMS anteriores.
Sé que sé. La comparación con WordPress es antigua. Pero ese pequeño software ha dominado el mercado durante años, al igual que Photoshop tiene para las imágenes, las comparaciones son inevitables. En este caso, incluso son útiles.
Las personas que han creado temas de WordPress encontrarán parte de la estructura del archivo y del lenguaje de plantillas que les resultará familiar, aunque mucho más simple. Las funciones PHP de WordPress te dan mucha flexibilidad; pero también complican el proceso de codificación del tema.
El sistema de plantillas de Ghost (construido con Bigote daliniano ), es semántica, potente y mucho más legible que las funciones PHP sin procesar con las que estamos acostumbrados a trabajar. Personalmente, me resulta mucho más fácil de usar.
Por otro lado, es puramente para construir blogs. No creará un sitio de noticias híbrido / red social / foro con esto. Más simple, pero limitado. Esa es la compensación inherente en toda la plataforma.
Creando un tema básico para Ghost.
Ahora, si has visto el video (realmente deberías), sabrás lo básico. Tendrás tu instalación de Ghost en modo de desarrollo, y tendrás un tema muy, muy limitado para trabajar.
Para recapitular, técnicamente solo necesitas tres archivos para crear un tema Fantasma:
index.hbs (This template will list your posts)post.hbs (This will display a single post)package.json (This contains theme information)
Sin embargo, hay otras plantillas básicas que probablemente quiera incluir. Por supuesto, puede crear plantillas personalizadas para páginas, publicaciones, autores, etiquetas y más. Llegaremos a todo eso con el tiempo.
Por ahora, quiero centrarme solo en lo básico: estructura del tema, ampliación de archivos de plantilla y dónde colocar todo el HTML. Esto significa agregar algunos archivos y carpetas adicionales a nuestro tema de Fantasmas allí arriba. Echemos un vistazo a la estructura revisada:
default.hbsindex.hbspage.hbspost.hbspackage.jsonassets/css/images/javascript/partials/ (Just examples, here. Not required.)navigation.hbsloop.hbs
default.hbs actuará como la base de su tema. Tu ,
y las etiquetas irán aquí. Cada otra plantilla se representará 'dentro' de esta. Ahora, no tienes que hacerlo de esta manera; pero es una práctica estándar, y viene muy recomendado por los propios desarrolladores de Ghost.page.hbs es exactamente lo que crees que es, la plantilla para páginas estáticas. La carpeta de activos es bastante autoexplicativa.
La carpeta / parciales es donde puede guardar trozos y piezas de código que usa más de una vez, en varias plantillas. Por ejemplo, navigation.hbs puede incluir el nombre / logotipo de su sitio y la navegación principal. loop.hbs podría generar una lista de publicaciones con algo de HTML genérico y estilo. Esto podría usarse en varios lugares del sitio.
Entonces, le mostraremos exactamente qué tan simple puede ser la creación de plantillas. Primero, configuraremos nuestro archivo default.hbs :
{{! Here we see the functions for page titles and descriptions. }}{{meta_title}} {{! Anything in the assets/ folder can be easily linked to, like so: }}{{! This function here outputs meta keywords, some styling information, stuff like that. }}{{ghost_head}}{{! Any .hbs file in the partials folder can be called in like this. }}{{> header}}{{! This is where the content of all the sub-templates will be output. }}{{{body}}}{{! Like ghost_head, this outputs scripts, data, that sort of thing. Currently adds a link to jQuery by default. }}{{ghost_foot}}
Ahora, creemos la plantilla navigation.hbs , porque va a estar en cada página:
{{! This should be fairly self-explanatory. }} {{@blog.title}}
{{! Each post excerpt will be displayed with this same markup. }}{{#foreach posts}}» {{/para cada}}{{! Enlaces a las siguientes y anteriores páginas de enlaces. Puede definir cuántos enlaces hay en cada página en el panel de administración. }}{{paginación}}
Ahora vamos a vincularlo todo con la plantilla index.hbs , que también actuará como página de inicio, a menos que especifique lo contrario. El código para esto, viendo cómo hemos dividido y organizado la mayor parte del HTML en otro lugar, es muy simple:
{{!< default}}{{! That isn't a comment up there. It tells Ghost that everything on this page must be rendered inside the default.hbs template.}}{{! This next function can be used to call in anything in the partials/ folder. In this case, we're calling up everything we just put into "loop.hbs". }}{{> loop}}
Y eso es. ¡Te dije que era simple!
Si tiene problemas, consulte el tema predeterminado de Ghost, y documentación . Juega con HTML, juega con el sistema de plantillas y comienza a diseñar tu tema.
La próxima vez, profundizaremos un poco más. Mientras tanto, ¡diviértete!
Usos de imágenes destacadas Imagen fantasma a través de Shutterstock.