What is this?

Andamos con todo, anoche terminamos la tercera entrada de Pelican para modificar la construcción del sitio y configurar algunas cositas del sitio, sé que no es mucho, pero es trabajo honesto haha

Bueno, esta cuarta entrada será para configurar un tema a nuestro sitio.

Y el disclaimer de siempre, como ya hemos dicho, toda la documentación necesaria (y extendida) se encuentra en el blog oficial de Pelican, por lo que si se necesita mayor información o detalle de algo, visitar el sitio oficial.

pelican-themes

Dentro de las herramientas que necesitamos utilizar con Pelican se encuentra pelican-themes la cual como su nombre lo indica es para trabajar con temas :'v

Esta herramientas nos va a permitir gestionar temas pudiendo instalarlos en nuestro equipo para utilizarlos al desarrollar el sitio, así como eliminarlos.

Esta herramienta ya viene instalada junto con Pelican asi que no necesitamos realizar pasos extras.

Los parámetros que toma la herramienta son los siguientes:

-l, --list
  Show the themes already installed

-i theme_path, --install theme_path
  One or more themes to install

-r theme_name, --remove theme_name
  One or more themes to remove

-s theme_path, --symlink theme_path
  Same as “–install”, but create a symbolic link instead of copying the theme.
  Useful for theme development

-v, --verbose
  Verbose output

Si quieres ver algunos ejemplos de uso más detallados puedes revisar la sección correspondiente de la documentación de Pelican dando click aquí.

Seleccionando e instalando un tema

Vale, ya vimos que podemos instalar temas y utilizarlos, pero, ¿donde están los temas? Tranqui, para eso, Pelican tiene un listado de temas en GitHub que puedes revisar entrando aquí.

Ahí mismo en el GitHub podrás encontrar otra forma de trabajar con temas por si la que vemos aquí no te agrada.

Para utilizar un tema primero necesitamos clonar el repositorio de temas de Pelican. Este repositorio no tiene que estar dentro de tu repositorio actual del blog, así que guardalo en otra ubicación..

Para descargarlo utilizaremos el parámetro --recursive para clonar el repo junto a sus submodulos, y a los submodulos de los submodulos, y así recursivamente xD. Esto es básicamente para que los temas no se rompan al clonarlos por falta de algún submodulo.

git clone --recursive https://github.com/getpelican/pelican-themes ~/path-to-projects/pelican-themes

Ya tenemos clonados los temas en nuestro equipo, por lo cual podemos instalar uno el sitio que estamos desarrollando. Para esto le indicaremos a pelican-themes la ruta donde se encuentran los archivos del tema.

Del listado de temas vamos a probar con bootstrap2-dark, hemos elegido este tema simplemente porque somos demasiado cliche. La carpeta donde se encuentran los archivos fuente del tema en este caso es ~/path-to-projects/pelican-themes/bootstrap2-dark, y es la que indicaremos a pelican-themes.

pelican-themes --install ~/path-to-projects/pelican-themes/bootstrap2-dark

Si queremos ver cuales temas se encuentran instalados podemos ejecutar:

pelican-themes --list

El cual nos dará una salida como la siguiente:

notmyidea
bootstrap2-dark
simple

En la salida anterior podemos observar que tenemos tres instalados, los dos que vienen predeterminados en Pelican que son notmyidea y simple, y el que hemos instalado previamente, bootstrap2-dark.

En caso de querer eliminar algún tema instalado podemos ejecutar:

# Para eliminar un solo tema
pelican-themes --remove nombre-del-tema

# Para eliminar varios temas
pelican-themes --remove nombre-del-tema-1 nombre-del-tema-2 nombre-del-tema-3

Aplicando el tema instalado

Para poder utilizar nuestro tema instalado tenemos que ir al archivo pelicanconf.py y asignarle un valor a la variable THEME, en este caso la variable quedaría como THEME = u'bootstrap2-dark'.

Con este pequeño cambio basta para construir el sitio con el tema seleccionado. recuerda que utilizaremos los comandos de la entrada anterior.

# Desarrollo
invoke livereload

# Producción
invoke gh-pages

Para probar otros temas basta con seguir los pasos anteriores hasta encontrar uno que sea de tu agrado :)

Siguientes pasos (this is (not) the end)

Nuestro sitio ya tiene un poco más de personalidad aunque sigue siendo bastante cliché, al menos ya es responsivo y se podrá leer en dispositivos móviles.

Para siguientes entradas nos haria falta revisar como agregar algunas secciones como un about o un contact y revisar el tema de plugins, y probablemente con eso habremos terminado de configurar el sitio :)

Ejemplos de temas aplicados

Sé que puedes pensar lo siguiente:

Penserbjorne, pero … ya termino la entrada, ¿por qué añades otra sección?

Bueno, te quería mostrar algunas imágenes de cómo se ve el tema aplicado al sitio, solo que las imágenes son muy largas y por eso decidí dejarlas al final.

Durante el desarrollo de esta entrada utilizamos el tema bootstrap2-dark porqué se vería chido pero ya en producción realmente no era muy responsivo por lo que cambiamos al tema elegant.

A continuación te muestro la página de inicio del blog con cada uno de los temas aplicados.

Not my idea

Es el tema que trae Pelican por defecto, y no, no es responsivo.

Alt Text

bootstrap2-black

Fue el tema juakeril que habíamos elegido, pero no, tampoco es responsivo y después se volvió complicado de leer.

Alt Text

elegant

Es el último tema que hemos probado, sí, es responsivo y es fácil de leer en él, por lo cual se ha quedado cómo tema final (es el actual a este momento de publicación).

Alt Text

The End of the Post

Bueno, ahora sí, nos vemos en otra ocasión piloto.


Published

Category

pelican

Tags

Contact