El gestor de contenidos Ghost, únicamente nos da la posibilidad de configurar mediante la interfaz web dos iconos sociales con el tema Casper. Afortunadamente, es muy sencillo añadir nuevos iconos haciendo unos pequeños retoques en un par de ficheros. Nos llevará a penas cinco minutos.

Lo único que necesitamos además de realizar las modificaciones que veremos a continuación, es tener un fichero vectorial en formato SVG para el icono. Podemos utilizar cualquier banco de imágenes vectoriales para localizar el que más nos guste. En caso de que el fichero vectorial esté en un formato como .ai (de Adobe Illustrator), podemos abrirlo con la aplicación gratuita Inkscape y salvarlo en .svg.

Una vez tengamos esto, nos vamos al directorio del tema Casper, y finalmente a la carpeta partials es decir, themes/casper/partials, donde editaremos el fichero site-nav.hbs

Si vemos el contenido de este fichero con un editor de texto, veremos que tenemos un bloque de código <div class="social-links">, es dentro de éste donde añadiremos nuestro pequeño fragmento, que es el siguiente:

<a class="social-link" href="ENLACE_AL_SITIO_WEB" title="TITULO_DEL_SITIO" target="_blank" rel="noopener">{{> "icons/NOMBRE_DEL_ICONO"}}</a>

De dicho código modificamos lo resaltado en mayúscula.

  • ENLACE_AL_SITIO_WEB: El enlace comenzando con https://
  • TITULO_DEL_SITIO: El nombre del sitio enlazado, por ejemplo: adevnull
  • NOMBRE_DEL_ICONO: El nombre sin extensión del icono que dejaremos más adelante en la ruta themes/casper/partials/icons

Tras ello ya podemos pasar a la parte del icono. Como se indicó al inicio necesitamos una imagen vectorial en formato SVG. Un fichero .svg, es un archivo vectorial que contiene un código XML.

Para empezar, con un editor de texto creamos un fichero en themes/casper/partials/icons, con el nombre del servicio o web que vamos a enlazar NOMBRE_DEL_ICONO.hbs y con el siguiente contenido:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="XXXX"/></svg>

Una vez creado el fichero, lo que debemos hacer es abrir el fichero .svg que queremos que pase a ser nuestro icono, y buscar el atributo viewBox, copiar su contenido, y pegarlo entre las comillas del código anterior (sustituyendo las XXXX).

Una vez hecho todos estos pasos, reiniciamos la instancia de Ghost para que adquiera todos los cambios realizados y comprobamos si aparece nuestro nuevo icono.

Añadir que es posible que sea necesario limpiar la caché del navegador para que se llegue a ver.