Tumblr es la red de blogs de más rápido crecimiento en la web hoy en día. Con la capacidad de reproducir rápidamente cualquiera de las publicaciones de sus seguidores, realmente revoluciona la forma en que interactuamos con una comunidad digital. Tumblr ha tomado la popular función de panel de control y la ha ampliado a un blog personal.
Entre las muchas características populares del servicio está la posibilidad de personalizar directamente la apariencia de su página. Cada blog tiene su propio tema que se utiliza para dar a su página su diseño y combinación de colores. Hay muchos temas gratuitos y de pago para elegir, pero crearlos es mucho más fácil y divertido.
En este breve tutorial repasaremos las piezas principales de cualquier tema de Tumblr. El motor funciona con código HTML / CSS directo junto con variables en el texto para elementos de bloque. HTML básico es todo lo que se necesita para comenzar realmente y crear tu propio tema.
Páginas de comprensión
Cualquier tema de Tumblr es simplemente una sola página de código HTML con variables de caso condicionales intermedias. Básicamente, esto significa que todas las vistas de página están separadas por variables de caso en un documento largo.
Así, por ejemplo, todas las publicaciones de su sitio se dividirán en categorías. Estos se basan en el contenido multimedia, como texto, imagen, video, enlace URL, etc. Todas estas son opciones diferentes o puntos de vista para tu blog Se pueden activar opciones separadas según el tipo de página que se solicite.
Ahora estos tipos de condicionales son conocidos como bloques. Estas son conocidas como variables de caso que muestran contenido único basado en ciertas condiciones. Las variables de página son contenedores individuales que contienen valores dinámicos. Por ejemplo, un título de página o una fuente RSS cambiará con cada blog, por lo que estos valores se pueden agregar a través de variables ({Título} y {RSS} respectivamente).
Construyendo el encabezado
El encabezado es la primera pieza de cualquier tema Tumblr. Contiene todos los detalles importantes acerca de tu blog y las opciones de metacasa establecidas. A continuación se muestra un poco de código de ejemplo para usar en su encabezado para comenzar.
El documento no se ve muy diferente a una página HTML estándar. Comienza con una declaración DOCTYPE seguida de sus etiquetas html y head. Dentro de usted puede notar dos líneas de código que delinean un elemento de bloque. La apertura {bloque: IndexPage} está creando un bloque de código para mostrar solo en la página de índice.
Dentro tenemos un título y una meta descripción que muestran el {título} Variable de tu blog. Todas las demás páginas tienen un título que contiene un resumen de contenido de la etiqueta etiquetado {postSummary}. Encontrará estas variables desordenadas en temas como {Favicon} y {RSS} para colocaciones de cabecera.
Un último bit a notar es cómo todos los estilos CSS de mi tema están en documentos externos. Esto proporciona una forma mucho más rápida de acceder a los datos y procesar las acciones DOM. Además, dado que Tumblr tiene que cargar sus propios archivos antes de cargar su tema, los estilos externos agilizarán todo el proceso.
Publicaciones de blog
Pase algún tiempo examinando el cuerpo de su documento y construyendo la estructura de su página. Con el tiempo debes llegar a tu área de contenido principal. Dentro de aquí es donde se enumeran todas sus publicaciones de blog y comentarios. Esto está marcado por una {bloque: Mensajes} y contiene muchas sub-variables.
Dentro del bloque de Publicaciones estamos revisando los diferentes tipos de medios. Hay mucho que repasar y todos son relativamente sencillos. He añadido una lista de tipos de bloque de publicación a continuación:
{bloque: texto}{bloque: Foto}{bloque: Photoset}{bloque: cita}{bloque: Enlace}{bloque: chat}{bloque: audio}{bloque: Video}{bloque: respuesta}* para pedir mensajes
Esto puede parecer un poco difícil de asimilar al principio. Sinceramente, la mejor manera de entender es practicando y construyendo nuevos temas de Tumblr. Si desea obtener información más detallada en cada publicación, consulte los documentos de temas oficiales.
Paginación funcional
Tumblr no planea mantener todas tus publicaciones cargadas en una sola página, lo que podría volverse muy intrusivo. La paginación está integrada en el motor de tematización de Tumblr y admite enlaces siguientes / anteriores para sus páginas de archivo.
El primer estilo de paginación guía al usuario entre sus páginas más antiguas. Cada página generalmente almacena entre 7 y 10 publicaciones, pero puede modificarse para que contenga más. Este tipo de condicional funcionará en cualquier página y puede mostrar enlaces siempre que haya más páginas para recorrer. A continuación se muestra un ejemplo de este estilo:
Este es un ejemplo muy rudimentario, aunque ilustra claramente el punto. Esto podría colocarse en cualquier parte de su código para generar un bloque de paginación de enlaces.
La segunda opción es ofrecer enlaces entre publicaciones. Estos se mostrarán solo en páginas de publicaciones individuales donde un visitante puede ver su contenido y sus respuestas en la lista. Siempre que haya una publicación antes o después en los archivos, puede mostrar los enlaces de navegación.
El código se ve exactamente igual al anterior, excepto con nombres de variables ligeramente diferentes. El bloque inicial comprueba {bloque: PermalinkPagination} en lugar de solo paginación También todas las instancias de Página son reemplazados por Enviar como se describe a continuación.
{block: PreviousPost} {/ block: PreviousPost}{block: NextPost} {/ block: NextPost}{Publicación anterior}{SiguientePost}
JumpPage Nav
También hay una tercera opción para los enlaces de navegación llamados páginas de salto. Estos ofrecen a los visitantes una lista de enlaces numéricos que apuntan a cada página en los archivos de su blog.La estructura es similar a otras formas de paginación, aunque con sus propios cambios leves.
He incluido otro ejemplo a continuación para la paginación de salto. El contenido es un poco más confuso de digerir, así que tómese el tiempo para revisar el código. No hay conceptos nuevos aquí ya que todos los temas de Tumblr son HTML directo y variables básicas.
El atributo length =? 5 "a través del primer elemento cuenta la cantidad de enlaces a mostrar. Esto significa que nuestra lista de bloqueo siempre contendrá 5 enlaces orientados hacia un eje central.
Para ampliar aún más esta teoría, las únicas veces que verá la página actual hacia un punto final es al principio o al final de las páginas de navegación. El sistema funciona configurando la página actual directamente en el centro de todas las páginas de salto. Así, por ejemplo, en la página 7 de nuestros archivos de blogs, deberíamos ver los enlaces de las páginas 5 a 9.
Lecturas adicionales
Estas son algunas de las piezas de introducción más básicas para desarrollarse en Tumblr. Los temas son una excelente manera de personalizar tu blog y agregar tu propia pizca de creatividad. Se recomienda consultar la documentación del tema oficial de Tumblr para obtener ejemplos y recursos detallados.
Algunas páginas en las que podría estar interesado en la lectura incluyen "Me gusta", el siguiente recuento, las consultas de búsqueda y la publicación de notas. Por cada cuenta de Tumblr se le otorga un tema gratuito de forma predeterminada. Dedique un tiempo a analizar su código oficial para comprender mejor cómo funciona el sistema de Tumblr y cómo manipular sus propias personalizaciones.
Temas Tumblr
Tumblr es una plataforma de blogs gratuita, rápida y popular. Esta serie contiene consejos para usar Tumblr y colecciones de hermosos temas de Tumblr para ayudarlo a crear un sitio web único e interesante.