Diseñar un Tema o Plantilla para la Plataforma de Blogs (Ghost)

Anteriormente escribí un post sobre la plataforma de blogs Ghost, ahora he decidido enseñarles o mas bien darles las pautas de como crear su propio tema o plantilla.

Tener nuestro blog es algo que a la mayoría nos agrada, pero mejor aún seria tener nuestra propia plantilla o tema personalizado ya que el tema que viene por defecto casper seria muy común.

En este post vamos a implementar nuestro primer tema para ghost, les confieso que la primera vez que lo intente me fue difícil pero con la practica ya tengo mas dominio.

Estructura para el tema ghost

La página con la documentación oficial es la siguiente: http://themes.ghost.org/.

Con esta estructura de archivos sera mas que suficiente para comenzar a desarrollar nuestro tema.

.
├── /assets
    ├── /css
        ├── screen.css
    ├── /fonts
    ├── /images
    ├── /js
├── /partials
    ├── loop.hbs
├── default.hbs
├── index.hbs [required]
└── post.hbs [required]
└── package.json [required]
  • En la carpeta assets se guardan los ficheros css, js, imágenes, fuentes, videos, etc.
  • En la carpeta partials se guardan partes que compondrán un layout o templates.
  • El archivo default.hbs contiene la estructura que usaran la mayoría de layout.
  • El archivo index.hbs sera el archivo principal de nuestro template.
  • El archivo post.hbs es el layout donde se mostraran nuestros post.
  • El archivo package.json contendrá información como nombre del tema y la versión.

Templates

Estos son todos los templates que puedes agregar en tu tema, cada uno mostrara información especifica.

index.hbs  
home.hbs  
post.hbs, post-{{slug}}.hbs  
page.hbs, page-{{slug}}.hbs  
tag.hbs, tag-{{slug}}.hbs  
author.hbs, author-{{slug}}.hbs  
private.hbs  
subscribe.hbs (Beta)  
error.hbs  
amp.hbs  

Ruta donde debe alojarse el tema o plantilla.

La ruta donde debe alojarse tu tema es el siguiente: C:\<PATH>\ghost\content\themes

  • PATH vendrá a ser la ruta donde esta alojado ghost.
  • Una vez encontrándonos en la carpeta de ghost accedemos a la sub carpeta content > luego a la sub carpeta themes es ahí donde alojaremos nuestro tema.

Contenido para el archivo package.json

Este archivo contendrá información que usara ghost, con los siguientes datos sera más que suficiente, debe de estar alojado en raíz del proyecto.

{
  "name": "speedy",
  "description": "Tema diseñado para blog.",
  "version": "0.1.0",
  "author": "Luis Rene Mas Mas",
  "license": "MIT"
}

Contenido para el archivo default.hbs

Archivo importante que vendrá a ser el esqueleto de nuestros layout, debe de estar alojado en raíz del proyecto.

<!DOCTYPE html>  
<html lang="es">  
<head>  
    {{!--archivo que contiene configuración head se encuentra en la carpeta -> partials--}}
    {{> "head"}}

</head>  
<body class="{{body_class}}">

    {{!--Menu de navegación--}}
    {{navigation}}

    {{!-- Todo el contenido principal se inserta aquí, index.hbs, post.hbs, etc --}}
    {{{body}}}

    {{!-- Footer o pie de pagina se encuentra en la carpeta -> partials --}}
    {{> "footer"}}

    {{!-- Insertar jQuery antes de `{{ghost_foot}}` para que jQuery pueda ser utilizado en la inyección de código --}}
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    {{!-- Ghost genera scripts y datos importantes con esta etiqueta --}}
    {{ghost_foot}}
    {{!-- Librería highlight.js --}}
    <script src="{{asset "js/highlight.js"}}"></script>
    {{!--Script principal--}}
    <script src="{{asset "js/app.js"}}"></script>
</body>  
</html>  

Contenido del archivo index.hbs

Archivo importante que vendrá a ser nuestro home o pagina inicial, deberá estar en la raíz del proyecto.

{{!-- Agrega la plantilla por defecto que contiene configuraciones predeterminadas --}}
{{!< default}}
<header class="container">  
    {{!-- Titulo del blog --}}
    <h1 class="page-title">{{@blog.title}}</h1>
    {{!-- Descripción del blog --}}
  <h2 class="page-description">{{@blog.description}}</h2>    
</header>

<main role="main" class="container">  
  {{!-- Incluye el bucle de los posts - partials/loop.hbs --}}
  {{> "loop"}}
</main>

{{!-- Anterior/Siguiente enlaces de paginas --}}
{{pagination}}

Contenido del archivo loop.hbs

Este archivo contiene el loop de los post, debe de estar alojado en la carpeta partials.

<!-- Este es el bucle de post - cada puesto se emitirá utilizando este marcado -->  
  {{#foreach posts}}
  <article class="{{post_class}}">
    <header class="post-header">
      {{!-- Titulo del post --}}
      <h2><a href="{{url}}">{{title}}</a></h2>
    </header>
    <section class="post-excerpt">
      {{!-- Extracto del post --}}
      <p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">[...]</a></p>
    </section>
    <footer class="post-meta">
      {{!-- Autor del post --}}
      {{#author}}
        <a href="{{url}}" class="author-link">
          <img class="author-image" src="{{image}}" alt="Author image" />
          <p>{{name}}</p>
        </a>
      {{/author}}
      {{!-- Etiquetas --}}
      {{#if tags}}
        <div class="tags">
          {{tags separator=", " prefix="Etiquetado en: "}}
        </div>
      {{/if}}
      {{!--Fecha de publicación--}}
      <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
    </footer>
  </article>
  {{/foreach}}

Contenido del archivo post.hbs

Archivo importante que mostrara los items, deberá estar en la raíz del proyecto.

{{!-- Agrega la plantilla por defecto que contiene configuraciones predeterminadas --}}
{{!< default}}
<!-- Todo dentro de las etiquetas #post extrae datos de la publicación -->  
{{#post}}
<article class="{{post_class}} container">  
  <header class="post-header">
    {{!-- Titulo del post --}}
    <h1 class="post-title">{{title}}</h1>
    <section class="post-meta">
      {{!-- Fecha de publicación --}}
      <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">
        {{date format="DD MMMM YYYY"}}
      </time> 
      {{!-- Etiquetas --}}
      {{#if tags}}
        <div class="tags">
          {{tags separator=", " prefix="Etiquetado en: "}}
        </div>
      {{/if}}
    </section>  
  </header>
  <section class="post-content">
    {{!-- Contenido del post --}}
    {{content}}
  </section>     
</article>  
{{/post}}

Contenido para el archivo head.hbs

Este archivo contiene los meta, debe de estar alojado en la carpeta partials.

{{!-- Configuración del documento --}}
<meta charset="utf-8" />

{{!-- Page Meta --}}
<title>{{meta_title}}</title>  
<meta name="description" content="{{meta_description}}" />

{{!-- Meta viewport --}}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />

{{!-- Favicon --}}
<link rel="shortcut icon" href="{{asset "images/favicon.ico"}}" />  
{{!-- Etilos para el theme --}}
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" media="all" />  
{{!-- Estilos que utiliza highlight.js para formatear código --}}
<link rel="stylesheet" type="text/css" href="{{asset "css/androidstudio.css"}}" media="all" />  
{{!-- Fuentes que utilizaremos para el theme --}}
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700|Lato:300,400,700" media="all" />

{{!-- Ghost produce estilos y metadatos importantes con esta etiqueta --}}
{{ghost_head}}

Contenido para el archivo footer.hbs

Este archivo contiene nuestro copyright, debe de estar alojado en la carpeta partials.

<footer class="footer">  
    <section class="container">
        <p>&copy; {{@blog.title}} {{date format="YYYY"}}</p>
    </section>
</footer>  

Contenido para el archivo navigation.hbs

Este archivo contiene el menú de nuestro blog, debe de estar alojado en la carpeta partials.

<nav class="menu">  
    {{!-- Lista de items menú --}}
    <ul class="nav no-lista container">
          <li class="nav-item home">
            <a class="nav-link" href="{{@blog.url}}" title="{{@blog.title}}">
            {{@blog.title}}
          </a>
        </li>
      {{#foreach navigation}}
      <li class="nav-item nav-{{slug}}{{#if current}} nav-current{{/if}}">
        <a class="nav-link" href="{{url absolute="true"}}">{{label}}</a></li>
      </li>
      {{/foreach}}
    </ul>
</nav>  

Contenido para el archivo pagination.hbs

Este archivo contiene la paginación de nuestro blog, debe de estar alojado en la carpeta partials.

<nav class="pagination container" role="navigation">  
    {{#if prev}}
        <a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
    {{/if}}
    <span class="page-number">Page {{page}} of {{pages}}</span>
    {{#if next}}
        <a class="older-posts" href="{{page_url next}}">Older Posts &rarr;</a>
    {{/if}}
</nav>  

Estilos CSS

Puedes utilizar estos estilos para comenzar a desarrollar tu tema o simplemente explora el código de la plantilla casper que viene por defecto.

body{  
    font-family: 'Roboto', sans-serif;
    margin: 0;
}
h1,h2,h3,h4,h5,h6{  
    font-family: 'Lato', sans-serif;
}
img{  
    max-width: 100%;
}
.container{
    width: 60%;
    margin: 0 auto;
}
/*Titulo del blog*/
.page-title{
    color: #557AF1;
    text-align: center;
    font-size: 2.5em;
    position: relative;
}
.page-title::before{
    background: #557AF1;
    content: "";
    height: 3px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0;
    left: 50%;
}

/*Descripción del blog*/
.page-description{
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    text-align: center;
    padding: 1em;
}
/*Menú de navegación*/
.menu{
    background: #C3CFF6;
    padding: 15px 5px;
}
.menu .nav{
    display: flex;
    align-items: center;
    list-style-type: none;
    padding-left: 0;
}
.menu .nav .nav-item{
    margin-right: 5px;
}
.menu .nav .nav-item.home .nav-link{
    color: #2F2D2D;
    font-size: 1.5em;
    margin-right: 20px;
}
.menu .nav .nav-item.home .nav-link:hover{
    text-decoration: none !important;
    border: thin solid transparent !important;
}
.menu .nav .nav-item .nav-link{
    border: thin solid transparent;
    color: #2D57A5;
    text-decoration: none;
    transition: 0.500s;
    padding: 10px;
}
.menu .nav .nav-item .nav-link:hover{
    text-decoration: underline;
    border: thin solid #FDFDFD;
    border-radius: 3px;
}
.nav-current .nav-link{
    border: thin solid #FDFDFD !important;
    border-radius: 3px;
    padding: 10px;
}
/*Estilos para el loop*/
.post-meta{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.author-link{
    display: flex;
    align-items: center;
}
.author-image{
    border-radius: 100%;
    margin-right: 10px;
    height: 25px;
    width: 25px;
}
.tags{
    margin: 0 10px;
}
/*Paginación*/
.pagination{
    display: flex;
    justify-content: center;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
.newer-posts{
    margin-right: 10px;
}
.older-posts{
    margin-left: 10px;
}
/*Footer*/
.footer{
    background: #CECDCD;
    overflow: hidden;
    padding: 10px;
}
.footer p{
    text-align: center;
    padding: 0;
    margin: 0;
}

Código JavaScript

$( document ).ready(function() {
    //Código highlight.js
    $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
    });
    //reemplaza esta linea de código por el tuyo
    console.log( "Funciona!" );
});

Una vez creado todos los archivos, recuerda reiniciar ghost para que aparezca el nuevo tema en la lista y luego haz clic en la opción ACTIVATE.

Lista de temas

Ahora dirígete a la siguiente ruta para ver los cambios http://127.0.0.1:2368.

Descargar archivos

Aqui te dejo el link del repositorio donde esta alojado el tema de este blog, espero que te sirva.

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Hola, soy desarrollador front-end & dasarrollador móvil (Android), me encanta las tecnologías web - móvil, también administro este blog.

Trujillo - Perú @01luisrene

Únete al Blog

Obtén los últimos artículos publicados directamente en tu bandeja de entrada.

O suscríbase vía RSS con Feedly!

Comparte tu Opinión