Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Evernote

Crear un tema para un blog desde Evernote desarrollado con Postach.io

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

Final product image
What You'll Be Creating

Postach.io es un sistema de blog con una diferencia. Tiene una característica en particular que la hace especialmente interesante: en lugar de un panel de administración simplemente creas tus mensajes dentro de Evernote.

Puedes usar cualquier aplicación de Evernote, lo que significa que los blogs de Postach.io son multi-plataformas, se hacen copias de seguridad automáticas y (si ya eres un usuario de Evernote) es muy familiar.

En este tutorial vamos a aprender a configurar tu propio Postach.io/Evernote y a cómo crear un tema personalizado para él.

1. Configurando tu blog

Para empezar, si aún no tienes una cuenta de Evernote, deberás configurar una. Una vez que hayas configurado una cuenta de Evernote, ve a Postachi.io y haz clic en el botón "Iniciar sesión" usando Evernote.

Serás llevado a una página para que autorices a Postach.io para obtener acceso a tu cuenta de Evernote. Haz clic en el botón verde "Autorizar" para continuar.

En la siguiente pantalla ingresa tu nombre, dirección de correo electrónico, el título del sitio y el subdominio que deseas para tu sitio; después, haz clic en el botón amarillo "Crear Sitio".

Después de unos segundos, la configuración del blog estará completa y verás una pantalla de éxito con un enlace que puedes seguir para ir a tu nuevo sitio:

Por defecto tu nuevo blog lucirá como esto:

Si echas un vistazo a tu área de 'notebooks' en Evernote, verás una nueva entrada con un nombre que coincide con tu sitio. Crearás todo el contenido de tu blog dentro de este 'notebook' (cuaderno).

¡Tadaaa!

Creando las publicaciones

Puedes publicar en tu blog a través de cualquier aplicación de Evernote que te resulte más cómoda con la importancia de que puedes editar en tu computador de escritorio, dispositivo móvil o mediante la aplicación basada en el navegador. Postach.io recomienda utilizar la aplicación del navegador para acceder a más herramientas. Sin embargo, en mi experiencia entre el navegador y la versión de escritorio en Mac no pude encontrar ninguna diferencia importante, por lo que en este momento siento que se reduce a la preferencia personal.

Añadir entradas de blog a través de Postach.io es ridículamente simple. Basta con crear una nueva nota en el bloc de notas asignado a tu blog, redactar tu mensaje, y luego etiquetarlo como "publicado".

Pulsa el botón "Sync" (Sincronizar) de Evernote y la publicación se enviará a tu blog.

A la inversa, si deseas eliminar una publicación, simplemente elimina tu etiqueta "publicada" y vuelve a sincronizarla.

Añadiendo imágenes

Agregar imágenes también es muy fácil. Arrastra una imagen de tu computador a la nota y ésta se cargará automáticamente en la nube y se incluirá en tu publicación. Como alternativa, puedes hacer clic en el ícono del pequeño clip para navegar directamente a un archivo para su inserción.

Formato de las publicaciones

Existen dos formas de darle formato al contenido de las publicaciones en Postach.io. Puedes usar las herramientas de formato predeterminadas de Evernote:

... o puedes activar el 'Markdown' (Marcado) a través de tu Panel de Control en Postach.io en la pestaña "Detalles":

Nota: Si eres nuevo en Markdown echa un vistazo a Markdown: Entradas y Salidas

Con cualquiera puedes colocar HTML en línea para dar un mayor control sobre tus publicaciones, sin embargo, hay algunas diferencias claras entre los dos enfoques que pueden determinar cuál prefieres.

Ventajas del Markdown:

Un mejor Markup

Con el Markdown activo, tus mensajes tendrán la colocación adecuada de etiquetas H, etiquetas p y así sucesivamente. Por otro lado, con el formato por defecto puedes encontrar todas las líneas envueltas en etiquetas div, todos los saltos de línea creados por etiquetas <br /> (que pueden causar estragos en el espacio) y la inserción de etiquetas anticuadas como <b> en lugar de <strong>.

Fácil inserción de etiquetas H

Con el Markdown activo, puedes insertar fácilmente los títulos de nivel H colocando marcas #. Sin embargo, con el formato predeterminado sólo tienes la capacidad de insertar tamaños de fuente aumentados y no títulos reales. Con el formato predeterminado puedes introducir el código de etiqueta H como HTML, pero es probable que tus encabezados estén envueltos en etiquetas div.

Ventajas del formato predeterminado:

Formato de publicación WYSIWYG

Con el formato por defecto verás la aplicación de negrita, alineación y así sucesivamente mientras editas tu nota. Sin embargo, con el Markdown todavía no hay ninguna vista previa nativa o de plataforma cruzada para Evernote, por lo que no puedes ver cómo aparecerán tus publicaciones hasta que se publiquen.

Alineación fácil de texto e imagen

Con el formato predeterminado puedes seleccionar una imagen o un elemento de texto y alinearlo a la izquierda, derecha o centro. Markdown no tiene ninguna habilidad de alineación nativa por lo que requiere la adición de HTML en línea.

Es uno o el otro

Debes tener en cuenta que con el Markdown activo, el formato predeterminado de Evernote no funcionará y viceversa, por lo que por el momento tienes que elegir de acuerdo a qué conjunto de ventajas son las que más necesitas.

Mi recomendación personal es ir con Markdown porque de lo contrario podrías encontrar el código div y br generado por las herramientas de formato por defecto lo cual impide una separación adecuada entre tus párrafos.

Sugerencia: Si encuentras que tienes saltos de línea en tu publicación donde realmente deseas saltos de párrafo, selecciona todo el texto y luego haz doble clic en el botón de lista ordenada/desordenada dos veces. La adición y eliminación de una lista en tu contenido corregirá el formato del párrafo.

Incorporando Medias

Postach.io proporciona varios códigos de inserción que te permiten colocar cosas como videos de YouTube, fragmentos de código de Gist, Tweets, pistas de Soundcloud y así sucesivamente. A primera vista puede parecer un montón de diferentes códigos de inserción para tratar, pero el formato es exactamente el mismo para cada uno, lo cual es fácil de recordar:

[<nombre del servicio> url="<enlace de... >"]

Por lo tanto, para agregar un video de YouTube es:

[youtube url="http://www.youtube.com/watch?v=07ds8iv1XPM"]

...para añadir algo de Gist es:

[gist url="https://gist.github.com/postachio/9059890"]

...y así. Mira la lista completa de códigos de inserción en la documentación de Postac.io.

2. Creando un tema personalizado

Hay varias plantillas ya preparadas que puedes aplicar a tu tema mirando en la pestaña Explorador de Temas de tu panel Postach.io. Sin embargo, crear temas es relativamente sencillo, así que pasaremos por el proceso de crear un tema sencillo para tu blog Postach.io aquí.

Estaremos codificando este precioso diseño de Tomas Laurinavicius:

Cómo funcionan los temas de Postach.io

Lo que más me gusta de los temas de Postach.io es que están contenidos en un solo archivo de plantilla. Las comprobaciones condicionales se ejecutan para determinar qué tipo de contenido se debe mostrar al visitante y el código apropiado se escribe dentro de los límites de estas comprobaciones. Verás esto en acción en breve.

Esto hace que el sistema de temática sea muy conciso, limpio y ordenado. Todo el archivo de plantilla que vas a crear es de 170 líneas.

El lenguaje utilizado por los temas de Postach.io es Jinja2, el cual permite la colocación de etiquetas de plantilla, así como algunas de lógica básica.

Los temas personalizados se añaden a Postach.io copiando y pegando directamente tu código personalizado. No existe un zip de instalación del tema actual como se puede encontrar en otras plataformas. En su lugar, ve a la pestaña "Editor de código fuente" en tu panel de control y pega el código directamente:

A medida que avanzamos tendrás que pegar el HTML del tema, así que recomiendo crear un archivo en tu computador llamado "theme.html", trabajando en ese archivo, luego copia y pega de él cuando hayas completado cada etapa.

Antes de comenzar

Para los propósitos de este tutorial, ve a tu Panel de Control de Postach.io y bajo la pestaña Detalles, define el Título del sitio como "Un pequeño diario sobre el pensamiento creativo y el diseño" y la Descripción del sitio a "Cosas que normalmente no lees".

Hacemos esto ya que estos campos se utilizarán para rellenar el área del encabezado del sitio con la misma visualización de texto que tenemos en nuestro diseño PSD de blog.

Temas CSS, Imágenes y Alojamiento Dropbox

La desventaja de Postach.io es que el acercamiento para editar el código del tema directo es que no hay forma de cargar un archivo CSS independiente junto con tu tema. Esto significa que tienes dos opciones: 

  1. Escribir todos tus CSS directamente en la sección de la cabecera.
  2. Hospedar tu hoja de estilos en otro lugar y vincularlo.

Debido a que siempre prefiero usar un preprocesador CSS, necesito tener un archivo autónomo para compilar y recomiendo elegir la segunda opción. Como tal, necesitaremos un lugar para alojar nuestra hoja de estilos. En este caso usaremos Dropbox. También usaremos Dropbox para alojar la imagen del logotipo del tema.

El uso de Dropbox para alojar recursos estáticos es muy fácil. Simplemente crea la carpeta para tu proyecto dentro de tu carpeta Dropbox local y, a medida que guardes los cambios, se cargarán automáticamente en tu cuenta.

Para obtener una URL de cualquier recurso css o imagen, haz clic con el botón derecho en la carpeta de Dropbox y selecciona "Compartir enlace de Dropbox":

Esto agregará el enlace públicamente visible para tu archivo a tu caché.

Importante: Para convertir la URL en un formato que se pueda utilizar en el código de tu sitio, pega el vínculo y luego cambia el www a dl.

Configura la carpeta de tu proyecto

Para que la esfera se mueva, crea una carpeta de proyecto dentro de tu carpeta DropBox y luego crea un archivo llamado theme.html (según la información anterior).

Vamos a escribir nuestros estilos en LESS, después, crea dos subcarpetas dentro de tu carpeta de proyecto, una llamada css y la otra llamada LESS. Dentro de la carpeta LESS, crea un archivo llamado style.less. Todos los estilos de tu sitio serán escritos en este archivo, y posteriormente compilados en css > style.css.

Usaremos la aplicación gratuita Prepros para compilar. He cubierto los siguientes pasos que necesitarás tomar en un tutorial reciente, así que por favor ve y sigue las instrucciones en las secciones tituladas Autocompilación con Prepros e Incluir LESSHat y Normalize.less.

Después de completar esas dos secciones, deberías tener una estructura de archivos y carpetas para tu proyecto que se vea así:

Wrapper HTML básico y Header

Comenzaremos insertando una configuración básica de HTML5, así como nuestra sección head. Agrega lo siguiente a tu archivo theme.html y recuerda copiarlo y pegarlo en el "Editor de código fuente" de tu Panel de Control en Postach.io cuando hayas terminado:

Aquí hay un resumen rápido de lo que estás viendo arriba:

  • La salida del title (título) dependiendo de donde un usuario está en el sitio.
  • La etiqueta de la plantilla de {{header_meta}} para dar salida a Postach.io meta-etiquetas predeterminadas.
  • Las meta-etiquetas para asegurar el comportamiento correcto en dispositivos móviles.
  • Cargar las fuentes de Google utilizadas en el diseño; Bentham y PT Serif.
  • Cargar la hoja de estilos de FontAwesome (para los iconos fuente) de los recursos estáticos disponibles de Postach.io.
  • Cargar nuestra hoja de estilos personalizada de Dropbox.
    Importante: Tendrás que obtener la URL de tu propia hoja de estilos mediante el método descrito anteriormente.
  • Integrar Google Analytics, con datos extraídos del panel Postach.io.

Ahora agregaremos un código básico a la sección body. Agrega lo siguiente entre tus etiquetas de apertura y cierre del body:

Vamos a romper esto. En primer lugar, utilizamos la sintaxis de Jinja2 para ejecutar una comprobación condicional sobre si el visitante está en la pantalla de inicio de sesión de Postach.io o no. Si lo están, se les muestra el formulario de inicio de sesión y, si no, comenzamos la presentación del blog.

El área que contendrá nuestro código de visualización del blog se encapsula con los comentarios <!-- Iniciar la visualización del blog --> y <!-- Finalizar la visualización del blog -->. Comenzamos con un div que lleva la clase wrapper que usaremos para controlar el ancho de nuestro diseño, y luego colocamos el código header de nuestro sitio.

En la etiqueta de apertura del elemento header, verificamos si el usuario ha añadido una foto de portada del sitio con el código {% if site.cover_photo %}...{% endif %}. Si está presente una imagen de portada, usamos estilos en línea para colocarla como una imagen de fondo, usando la etiqueta de plantilla {{ site.cover_photo }} para mostrar su URL.

Dentro del elemento header (cabecera) colocamos el logotipo. Esto se hace mediante la exportación PSD de la imagen del logo del diseño del blog como un PNG transparente. A continuación, coloca la imagen en la carpeta del proyecto dentro de nuestra carpeta Dropbox local, y utiliza su URL pública en el código.

Nuevamente, debes agregar la dirección URL que obtienes de tu propia carpeta Dropbox utilizando el método descrito anteriormente.

Nota sobre el campo "Logo" del panel de Postach.io: Hay un espacio en el panel de control para cargar una imagen de logotipo personalizada, sin embargo, tiene la restricción que debe ser de al menos 256px por 256px. Esto parece ser porque también se duplica como imagen de avatar de tu blog, dado que para colocar esta imagen usas la etiqueta de plantilla {{ site.avatar }}. Además, este campo no puede manejar imágenes transparentes debido a que se agrega un fondo blanco durante el proceso de subida. Por estas razones, estamos almacenando la imagen del logotipo en Dropbox y la cargaremos desde allí.

Después de esto, pondremos el nombre del sitio con la etiqueta {{site.name}} y si está disponible la bio/descripción del sitio a través de la etiqueta {{site.bio}}.

Finalmente, después de que la verificación condicional se cierre con {% endif% }, Postach.io puede cargar sus scripts de pie de página requeridos con la etiqueta de plantilla {{ footer_meta }}.

Añadir estilos base del encabezado

Como has configurado Prepros para autocompilar tu archivo LESS y tienes que descargar automáticamente Dropbox para ti, deberías poder ver tus cambios de estilo aplicados a tu sitio en vivo un segundo o dos después de guardarlos.

Vamos a empezar por crear un estilo base para algunos elementos predeterminados, así como su wrapper. Añade este código a tu archivo style.less bajo las dos líneas importantes que has agregado anteriormente, así que terminarás con:

Vamos a echar un vistazo a lo que hemos hecho aquí.

En nuestro PSD tenemos un tamaño de fuente básico de 18px, sin embargo en nuestro código actual no queremos establecer ese tamaño 18px explícitamente por lo que no anulamos la capacidad de los usuarios o navegadores para determinar el mejor tamaño de fuente general. Puedes leer más sobre el razonamiento detrás de esto en mi artículo sobre "Legibilidad Primero".

En su lugar, establecemos el valor de 18 a cambio de la variable @base_font_size y luego lo ejecutamos a través de este cálculo:

El tamaño de fuente más común en el navegador es 16px, por lo que este cálculo establece la variable @base_font_size en un valor basado en em que equivaldrá a 18px en la mayoría de los dispositivos, en este caso 1.125em. Sin embargo, este valor seguirá siendo flexible si los dispositivos o los usuarios necesitan trabajar con un tamaño de fuente inferior a 16px.

Aplicamos este tamaño de fuente básico al elemento html con la línea: font-size: @base_font_size_ems;

La siguiente variable que verás se crea con este código:

Este cálculo cifra el valor rem que corresponde con el tamaño de un solo píxel, dependiendo del valor del tamaño de fuente base.

Podemos usar esta variable en cualquier lugar en el que normalmente usaríamos una unidad px simplemente multiplicándola por el número de tamaño de píxel que estamos apuntando, ejemplo: 50 * @ px en lugar de 50px. Podemos entonces pensar en pixeles, algo que hace que trabajar desde un PSD sea mucho más fácil, pero obtendremos una salida basada en rem en nuestro CSS garantizando que todos los elementos del diseño permanezcan completamente escalables y flexibles.

Las variables restantes se usaron para almacenar nuestros nombres de familia de fuentes regulares y de encabezado y los colores del PSD que usaremos en nuestro fondo de sitio, wrappers, encabezado y texto de encabezado.

El código restante aplica las variables creadas recientemente dentro de las declaraciones de estilo para determinar los colores de fondo, los colores de texto, los anchos y así sucesivamente. Ten en cuenta que utilizamos una técnica de establecer el atributo width (ancho) en el contenedor del sitio al 100%, por lo que el sitio se reducirá para ajustarse a pantallas más pequeñas y un atributo de max-width (ancho máximo) para establecer el ancho del sitio que aparecerá en pantallas más grandes.

También configuramos imágenes escalables y adaptables a través del estilo img, eliminamos los subrayados de los enlaces, aplicamos el estilo de texto utilizado en el diseño PSD al texto del encabezado y usamos display: table; y display: table-cell; vertical-align: middle; en los estilos .header_wrap y .site_header respectivamente para alinear verticalmente el contenido del encabezado.

Aún no hemos subido la imagen de la portada de nuestro sitio, así que después de aplicar todo lo anterior a tu blog, debería lucir así:

Añadir imagen de portada a tu sitio

Ahora debes exportar la imagen de portada del diseño PSD para tu sitio. Debes obtener una imagen de 1200px de ancho por 600px de alto. Mi propia exportación salió alrededor de 55Kb.

Para subirlo a tu blog, ve a tu panel de control en Postach.io y a la pestaña "Configuración". Allí verás una etiqueta citando "Cover Photo" y un botón para buscar un archivo en tu computador. Continúa y busca el archivo de tu foto de portada y luego súbela:

Haz clic en el botón Guardar configuración del sitio, vuelva a tu blog y deberías ver:

Pie de página y enlaces sociales

A continuación vamos a añadir el otro aspecto del sitio que será visible en todas las páginas, los enlaces sociales y el pie de página.

Agrega el siguiente código en tu archivo theme.html debajo del div .header_wrap y encima del div de cierre .wrapper y, a continuación, actualiza tu editor de código Postach.io:

Agrega estas tres variables a tu archivo style.less:

Y también añade estos nuevos estilos:

Hay algunas cosas relativamente básicas y algunas muy geniales pasando bajo este código.

En el lado básico, hemos añadido el ancho y los márgenes a la barra de vínculos sociales, hemos establecido los enlaces dentro de él para flotar a la izquierda, y hemos añadido algún código 'clearfix'. También hemos establecido los colores y anchos de los bordes para los elementos de enlaces sociales, así como los colores de fondo y de texto para los estados por defecto y 'hover'.

También hemos añadido estilos a la clase .site_footer, dándole un fondo gris con texto y dimensiones para que coincida con nuestro diseño PSD.

La parte más divertida es que estamos usando una solución CSS pura para que los anchos de los elementos de enlaces sociales cambien dependiendo de cuántos hayan.

Por lo tanto, si has ingresado solamente los detalles del enlace de Twitter en tu cuenta de Postach.io y es el único 'item' que muestras, vas a ver esto:

Pero si también has ingresado tu información de Facebook y Google+, verás lo siguiente:

Agradecemos a Lea Verou por esta técnica.

Agregar el área de publicaciones

Ahora estamos listos para entrar en la parte más importante del blog, el área de publicaciones.

Agrega este código en tu archivo theme.html y luego en tu editor de código Postach.io, entre el encabezado y los enlaces sociales:

Lo primero que sucede aquí dentro de nuestro elemento main (principal) es una comprobación condicional para ver si estamos en una lista de publicaciones, es decir, la página de inicio o una página de etiqueta o si estamos en una sola publicación. Esto se hace con el código:

Podemos agregar el código para cada uno de estos tipos de visualización entre estas etiquetas condicionales de verificación.

El código de la lista de publicaciones

En el código de la "Lista de publicaciones" se ejecuta otra verificación condicional para ver si estamos en una página de etiqueta y, si es así, se muestra un encabezado para esa página de etiqueta.

Luego verificamos la presencia de publicaciones con {% if posts%} ... {%endif%} y comienzamos a realizar un bucle a través de ellas con {% for post in posts%} ... {% endfor%}. Para cada publicación creamos un elemento article y mostramos el título de la publicación, la fecha de publicación, el contenido de la publicación y el enlace "Leer más".

También verificamos si la publicación es del tipo que Evernote anexa a un enlace fuente, es decir, cualquier nota que se originó desde web clipper con el condicional {% if post.type == 'link' %}...{% endif %} y muestra el enlace adjunto si lo está.

La última parte de la "Lista de publicaciones" es la colocación de la paginación, un enlace "Anterior" y "Siguiente". Ten en cuenta que la paginación sólo funciona en la página principal y no en las páginas de etiquetas. Si intentas utilizar la paginación en una página de etiqueta, obtendrás un error.

El código único de publicación

El código "único de publicación" es muy similar al de "la lista de publicaciones", con un par de diferencias.

En primer lugar, debido a que sólo hay una publicación para mostrar, no necesitamos comprobar la presencia de una publicación o iniciar un bucle, simplemente vayamos directamente a nuestro código article.

En segundo lugar, incluimos código para mostrar las etiquetas de la publicación al lado de la fecha de la publicación. Las etiquetas sólo se pueden mostrar en una sola publicación y no en una lista de publicaciones.

En tercer lugar, no incluimos un enlace "Leer más" por razones obvias, y en su lugar colocamos la etiqueta de plantilla {{theme.social.bar}} que mostrará una herramienta para compartir en redes sociales, así como Postach.io determina los enlaces "Me gusta" y "Seguir ".

Estilo del área de las publicaciones

Agrega las siguientes tres variables en tu archivo style.less:

A continuación, añade estos nuevos estilos:

¡Con todo el código de plantilla y estilo anterior en su lugar, está casi terminado!

Tu blog debería verse así ahora en la página principal:

Las páginas de etiquetas se verán iguales, pero con un encabezado de etiqueta adicional por encima de la lista de publicaciones.

Las publicaciones individuales deben tener este aspecto:

3. Ajustes adaptables

Una de las cosas finales que queremos hacer es asegurar que el contenido incrustado de iFrame, como los videos de YouTube, se comporten de manera adaptable, es decir, que se ajusten al ancho disponible y conserven su relación de aspecto.

Esto se logra mediante la adición de la siguiente secuencia de comandos en tu plantilla, justo antes del comentario <!--Finalizar la visualización del blog -->.

También tenemos que añadir algunas 'media queries' para garantizar que el diseño se ajuste de manera adecuada con la reducción en el tamaño de la ventana gráfica. Agrega lo siguiente al final de tu archivo style.less:

Con tu iframe script y media queries agregados, ahora deberías obtener algo como esto en una ventana de vista delgada:

4. Extras

Hay algunos aspectos adicionales para trabajar con los temas de Postach.io que no implementamos anteriormente, pero que tal vez te interese saber para que lo apliques.

Tipos de publicaciones

Las publicaciones de Evernote pueden ser una de cuatro tipos; post, page, link or food. Para mantener las cosas simples, hemos creado un tipo 'display' para todo, sin embargo, puede que recuerdes que hemos ejecutado una condicional {% if post.type == 'link' %} para ver si habría un vínculo para añadir a la publicación.

Utilizando los mismos métodos de comprobación también puedes crear una presentación totalmente diferente para cada tipo de publicación. Aquí hay información sobre cada uno de estos tipos de publicación y cómo pueden formar parte de tu blog.

Post

{% if post.type == 'post' %}

El regular, tipo de publicación predeterminado.

Page

{% if post.type == 'page' %}

Cualquier nota etiquetada con "página", útil para crear páginas estáticas como "Acerca de mí", por ejemplo. El elemento se sacará de la lista de publicaciones y si lo deseas, puedes añadir su título a un menú. El método para lograrlo se describirá en breve.

Link

{% if post.type == 'link' %}

Cualquier elemento que llegue a través de los recortes de algún otro sitio con web clipper que luego aparece en tu blog.

Food

{% if post.type == 'food' %}

No pude averiguar cómo hacer que una publicación surgiera como un tipo de publicación "Food". He intentado diferentes métodos a través de Evernote para Mac y Evernote Food para Android.

No podía parecer conseguir cualquier cosa agregada a la sección de la comida en Evernote para enviarla como una publicación, dado que no podría asociarla con el 'notebook' de mi blog. Intenté agregar la sección "Mi libro de recetas" a través de Web Clipper y vía Evernote Food en sí, y ambos intentos fueron categorizados como "Link". También intenté etiquetar publicaciones como "food" o "receta" y tampoco tuve suerte.

Estoy seguro de que algo impresionante está horneado para el tipo de publicación "food" (mira lo que hice ahí), pero por el momento sólo tendríamos que esperar para obtener más información antes de ver lo que es.

Menús

Si estás utilizando páginas en tu blog también puedes tener un menú generado. El siguiente código tomará el título de cada una de tus páginas publicadas y lo agregará a un elemento de navegación nav con una lista desordenada de enlaces del menú:

Comentarios en Disqus

También puedes equipar tu sitio para la conversación agregando el siguiente código debajo de tu código único de publicación existente:

Lo anterior funcionará con la información agregada a tu sitio de Postach.io a través de la pestaña Detalles de tu panel de control.

Terminando

Ahora tienes tu propio blog desarrollado en Postach.io/Evernote y la posibilidad de crear temas personalizados para él. También puedes descargar los archivos de temas completos a través del botón Descargar Adjunto situado en la parte superior de la barra lateral derecha de este sitio.

Postach.io ya es una plataforma muy interesante debido a que es aún más convincente cuando se considera que es bastante nuevo. Tengo mucha curiosidad por ver qué podría estar en obras para el sistema. Tal vez en el futuro veremos plugins de Evernote para mejorar el proceso de blogs, como las previsualizaciones de Markdown y similares.

Si eres un usuario de Evernote, e incluso si no lo eres, recomiendo encarecidamente darte una vuelta por Postachi.io para experimentar un nuevo tipo de blog.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.