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

Presentamos a Stacey: la alternativa ligera de CMS

by
Difficulty:IntermediateLength:LongLanguages:

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

Hay más en el mundo de los sistemas de administración de contenido que Wordpress, Squarespace y Joomla. Voy a mostrarte una alternativa liviana y gratuita de base de datos, perfecta solo para blogs directos. Su nombre es Stacey ..


Quien es stacey

Stacey es un CMS ligero de php desarrollado por Anthony Kolber . A diferencia de la mayoría de los CMS, no hay ninguna base de datos involucrada, no hay una interfaz de administración, solo una pequeña colección de archivos php. Coloca la carpeta de la aplicación en un servidor php y listo.

Stacey almacena contenido en forma de directorios y archivos de texto. Para cada entrada (ya sea publicación de blog, portafolio, tutorial, lo que sea), agrega una carpeta, dentro de la cual coloca un archivo de texto que lo acompaña, además de cualquier otro elemento adicional que desee. Stacey rastrea las carpetas y genera un extremo frontal al igual que cualquier otro CMS.

No necesitas estar familiarizado con php para crear un tema tampoco. Stacey hace uso de un lenguaje de plantillas que le permite generar datos y realizar algunos trucos básicos, pero nada que haga que su cabeza gire. Si te sientes cómodo con HTML y CSS, estás en buenas manos.


¿Por qué incluso coquetear con la idea?

A veces, los paquetes de CMS que todos estamos acostumbrados a ver (piense en WordPress, Drupal) son demasiado poderosos. Se han convertido en plataformas enormemente capaces y versátiles, pero a menudo demasiado complejas si todo lo que quieres es escribir una publicación ocasional en el blog.

Stacey, sin embargo, está muy concentrada. También hay un elemento de seguridad adicional, ya que no tiene una base de datos para piratear (la seguridad es un factor que ha llevado a algunos enfoques de CMS sin base de datos; como Jekyll , que se ejecuta localmente y genera HTML estático para su implementación en su servidor web).

Podría pensar que trabajar con y organizar archivos de texto es una receta para el desastre, pero en realidad es bastante efectivo. Las plantillas de Stacey lo hacen manejable y sorprendentemente escalable.

Por último, siempre es divertido jugar con cosas diferentes ..

Basta de hablar, presentémonos para que pueda tomar su propia decisión.


Primera fecha

Para demostrar las características y el funcionamiento interno de Stacey, primero debemos diseñar un blog simple. No voy a entrar en toda la compilación de HTML / CSS, pero vamos a desglosar los archivos con los que estaré trabajando.

Nota: si no estás interesado en este bit, siéntete libre de saltar al final del tutorial donde comenzaremos a construir nuestro CMS ...

Entonces, para empezar, necesito pensar en las páginas (y, por lo tanto, en las plantillas) que necesitaré. Cosas del blog estándar; un index.html donde puedo listar publicaciones de blog recientes, una sola publicación, más una página para mostrar cosas como "Acerca de mí", "Contacto", etc. ¡Lo más genérico que puedas obtener!

Empecemos con una página HTML en blanco:

Todo claro hasta ahora. Necesitaremos un styles.css (junto con normalize.css en este caso) y también he incluido un par de favicons.

Notará que, además del shiv HTML5, no hay ninguna referencia a jQuery ni a ningún otro JavaScripts. Realmente no necesitamos ninguno, entonces ¿por qué molestarse en incluir los activos? Mantenga las cosas magras y malas. Nuestra estructura de archivos se ve un poco así en este momento:



Segunda base

Terminemos rápidamente esta página HTML estática, luego podemos concentrarnos en involucrar a Stacey. He incluido un <header>, con un logotipo y algunos enlaces de navegación principales: 

Debajo de eso, al menos en la página de inicio, hay una sección de héroe para atraer visitantes en:

Notarás que cada una de estas secciones hasta ahora contiene un envoltorio dentro de ellas. Esta envoltura determinará el ancho de nuestro contenido.

Aquí hay otra sección, nuestra área de contenido principal, comenzando con un  donde alojaremos nuestra navegación secundaria:

Además, nuestros artículos de prueba para guiar a las personas a las publicaciones del blog. Hay algunos de estos elementos  :

Después de todos nuestros artículos, cerraremos a todos los padres y agregaremos un pie de página simple que contiene un par de enlaces:

¡Uf, hemos terminado con el marcado! Ahora el CSS ...


Cerrar el acuerdo

Nuestro CSS es sencillo. No hay imágenes para incrustar, gradientes, valores de radio de borde u oscuros efectos CSS3. Comenzamos con algunos fundamentos:

Siempre los incluyo: clearfix es muy útil y * {box-sizing: border-box} permite una forma brillante intuitiva de manipular elementos.

El resto de la CSS es solo estilo. Presenta el increíble valor de color del tomate , del que estoy enamorado actualmente. El diseño sigue un primer enfoque móvil, con solo una consulta de medios a 700px para cambiar las cosas en columnas y aumentar el tamaño de fuente base.

Entonces, ¿el resultado final?


Las otras páginas siguen más o menos la misma estructura, lo que nos da una base decente para trabajar. ¡Adelante con el tutorial real!


Paso 1: Recogiendo Stacey

Este bit es fácil; diríjase al repositorio GitHub de Stacey y descargue los archivos fuente más recientes (3.0 al momento de escribir).

Esto es más o menos lo que habrás descargado.

Gran parte de lo que ha descargado es material de demostración, por lo que podemos eliminar gran parte del excedente. Necesitamos mantener:

  • La carpeta "app" y su contenido.
  • La carpeta "extensiones" y su contenido.
  • El archivo "htaccess".
  • El archivo "index.php".

También necesitamos las siguientes carpetas, pero se pueden vaciar completamente por ahora:

  • La carpeta de "contenido".
  • La carpeta "pública".
  • La carpeta de "plantillas".

Paso 2: Haz un conocido

Para que las cosas realmente se ejecuten, deberá tener sus archivos alojados en un servidor php5 +. Si lo hace en su máquina local o en un servidor web en vivo, depende de usted. En cualquier caso, una vez que tenga su proyecto en el lugar correcto, visite la URL de la raíz en un navegador y ...

Dangit

Justo lo suficiente, sacamos todo el contenido de la demostración, así que ahora agreguemos algunos archivos necesarios e integremos el tema de nuestro blog para que las cosas realmente funcionen.

En primer lugar, coloque el index.html que hemos incorporado en la carpeta de "plantillas" de nuestro proyecto Stacey. En segundo lugar, debemos establecer algunas variables globales, así que coloque un archivo en la carpeta "contenido", llámelo "_shared.yml" o "_shared.txt" y llénelo con lo siguiente:

Todo se aclarará en un momento ..

Por último, para hacer uso de nuestro index.html y mostrar una página, agregue una carpeta al "contenido" llamado "índice". En esa carpeta, agregue un archivo llamado "index.yml".


Ahora, si actualiza la página, verá que se está apuntando a nuestro index.html (a pesar de que todavía carece de estilos).


Paso 3: Cómo funciona la mente de Stacey

Es justo que explique lo que pasó allí. Al abrir una página, Stacey busca contenido en la carpeta de contenido. Siempre mirará primero el "_shared.yml", ahí es donde establecemos algunas variables globales, como el nombre del sitio, etc. Si no está familiarizado con YAML, considérelo como un marcado legible por humanos. También podríamos usar un archivo .txt aquí, de hecho, Stacey reconoce y analiza todo tipo de formatos de archivo.

A continuación, busca una carpeta que coincida con la url. Hemos abierto la raíz en el navegador, por lo que ha usado la carpeta "índice" para determinar el contenido. Una vez que se haya encontrado la carpeta de contenidos, buscará un archivo .txt o .yml dentro de esa carpeta. El nombre de ese archivo en particular es muy importante, ya que corresponde al nombre de la plantilla que luego tomará de la carpeta de "plantillas". Ella combinará todo el lote y mostrará el resultado en el navegador.


Cambiar el nombre de nuestro archivo .yml significaría usar un archivo de plantilla diferente:


Con eso aclarado, ahora hagamos que nuestro index.html se vea más presentable.


Paso 4: Vinculando recursos

Ya hemos preparado nuestros archivos CSS y nuestros favicons, pero nuestra plantilla index.html no puede encontrarlos en este momento. Pongámoslos en la carpeta "pública", luego asegurémonos de que todas las rutas estén apuntando en el lugar correcto.

La carpeta "pública" está disponible para nosotros, gracias a algunos recursos .htaccess, directamente en la raíz del proyecto. Eso significa que podemos apuntar a "/css/styles.css" en lugar de "/public/css/styles.css". Para hacer esto, primero debemos cambiar el nombre del archivo "htaccess" ".htaccess" y asegurarnos de que nuestro servidor permita Reescrituras (en la mayoría de los casos, su servidor tendrá esta función como predeterminada).

Stacey hace que algunas variables siempre estén disponibles para que las usemos. Por ejemplo, podemos generar {{page.root_path}} que nos dará la raíz de nuestro proyecto. Actualicemos nuestras rutas para asegurarnos de que el CSS y los favicons estén conectados:

Si ahora recargas la página, verás que index.html se muestra exactamente como lo hicimos nosotros. Excelente.


Paso 5: ¿De qué está hablando?

Ahora, ¿esas llaves que acabo de usar para generar una variable? Son parte del lenguaje de plantillas Twig que Stacey usa para comunicarse. No necesitas ser un genio desarrollador para usar Stacey, pero hay un par de formas de generar cosas de las que debes estar consciente.

Hay dos tipos de delimitadores: {% ...%} y {{...}}. El primero se usa para ejecutar sentencias como for-loops, el último imprime el resultado de una expresión en la plantilla. - Twig Documentación para Diseñadores.

Usemos el mismo valor nuevamente, para hacer que nuestro logotipo se vincule a la URL raíz:

Ahora veamos algunas otras variables; establecimos algunos en nuestro "_shared.yml", usando pares de valores clave, ¿recuerdas? Usemos esos valores en nuestros metatags.

Ahora veamos algunas otras variables; establecimos algunos en nuestro "_shared.yml", usando pares de valores clave, ¿recuerdas? Usemos esos valores en nuestros metatags.

De esta manera, podemos definir variables y hacer que se impriman en las plantillas HTML. Por ejemplo, coloquemos un par de valores clave para "page_title" dentro de "index.yml". Podemos tener esa salida dentro del metatag de título también:

Si ese valor no está disponible, no se emitirá, así de simple. Ahora podemos definir un título de página específico para cada página en nuestro proyecto (pero lo veremos en un momento). ¿Está todo empezando a unirse ahora?


Paso 6: Dividir

¡¿Ya?! No te asustes, estoy hablando de dividir nuestros archivos de plantillas. Si alguna vez ha creado un sitio web dinámico, habrá dividido los activos comunes en archivos propios. La cabeza de nuestro index.html, por ejemplo, se usará exactamente de la misma manera para todos nuestros archivos de plantilla, por lo que no tiene sentido tener múltiples copias de la misma. Vamos a dividirlo en su propio archivo:

Todo hasta el cierre  será común en todas las plantillas. Recórtelo, péguelo en un nuevo archivo y guárdelo como "head.html" dentro de una nueva carpeta "parciales" en el directorio de plantillas.


Ahora necesitamos incluir ese parcial en nuestra plantilla index.html. Donde lo recortó, agregue esta línea de código:

Actualice su página de inicio y todo debería aparecer exactamente como estaba, sin cambios. Puedes hacer esto para algunas áreas del index.html por supuesto; el pie de página (incluidas las etiquetas de cierre  y  ) debe ir en un "footer.html" parcial, los contenidos de los apartados, más los catadores de artículos en bucle.

Una vez que hayas terminado, deberías tener algunos fragmentos en tu carpeta de "parciales", y una plantilla index.html un poco más clara que se ve así:


Paso 7: Seriedad

Hasta ahora, lo que hemos producido se reduce a una versión demasiado complicada de una página html estática, no hay mucho que destacar. Ahora agreguemos algo de contenido real a nuestros directorios para que podamos ver cómo se genera dinámicamente.

Como mencioné anteriormente, Stacey toma el contenido de la carpeta "contenido". Ella accede al archivo "_shared.yml", luego verifica qué carpeta coincide con la url actual. Tenemos urls amigables habilitados (suponiendo que haya cambiado el nombre de su archivo .htaccess), por lo que si visitáramos "stacey-master / cheese-burger" buscaría un archivo YAML dentro de "content / cheese-burger".

En su defecto, buscaría "content / 1.cheese-burger" o "content / 2.cheese-burger" porque también podemos anteponer los nombres de nuestras carpetas con números. Hacer esto nos permite indexarlos si alguna vez necesitamos recorrer las carpetas (que veremos en un momento).

Más aclaraciones sobre cómo Stacey introduce el contenido en el navegador

Vamos a agregar algunas carpetas a nuestra carpeta de "contenido". Tenemos uno para "contacto" y otro para "sobre". Notará que están precedidos por un número, lo que significa que podemos indexarlos y recorrerlos para propósitos de navegación.

Luego tenemos "artículos" que no contienen un archivo .yml propio (para ayudarnos a evitar que aparezca en la lista junto con los otros dos) y una serie de carpetas numeradas dentro de él. Estos serán nuestros artículos, cuyos caminos serán:

  • {raíz} / artículos / cuero
  • {raíz} / artículos / queso rodante
  • {root} / articles / taxi-driver
  • {root} / articles / snake-skin


Paso 8: Contenido

Tenemos carpetas para darnos algo de contenido, así que ahora pongamos ese contenido dentro de las carpetas. Como hemos discutido anteriormente, necesitamos un archivo .yml o .txt en cada carpeta, para que Stacey sepa qué plantilla usar y qué contenido introducir en ella. Sin ese archivo, Stacey devolverá un error 404 (lo que me recuerda que debemos reunir un 404.html en algún momento también, no me dejes olvidar ...)

En cada una de nuestras subcarpetas de "artículos", coloque un archivo vacío: "post.yml". Esto apuntará a una plantilla "post.html", así que duplique la plantilla "index.html" y cámbiele el nombre como corresponda. Buen comienzo: visitar cualquiera de las URL del artículo ahora generará al menos una página, aunque sea un duplicado de nuestra página de inicio.

Dentro de nuestro post.yml podemos especificar una serie de variables que podemos usar para completar nuestra plantilla post.html. Cualesquiera que sean los valores que desee, siempre que sean pares de valores clave, así:

Los valores pueden contener sintaxis html o (incluso más útil) markdown. Añadiendo un "|" y un salto de línea después de que la clave renderizará automáticamente el contenido como reducción, envolviendo el contenido en etiquetas  una vez que se analiza. Por ejemplo, la carpeta "post.yml" para nuestros "artículos / 1.leather" se ve así:

Reconocerá el título de página como la variable que inyectamos en el título meta de la página anterior. Hemos especificado una cadena de fecha, un autor, un párrafo de introducción, más el contenido. Tanto la introducción como el contenido se analizarán como descuentos hacia abajo debido a la "|" y el salto de línea.


Paso 9: Poner fuera

Ahora vamos a generar estas variables en nuestra plantilla post.html. En primer lugar, eliminaremos todo el elemento  ; No lo necesitamos en ningún otro lugar que no sea la página de inicio. A continuación, eliminaremos la declaración {% include 'partials / list_articles.html'%} dentro de nuestro elemento tasters.

En el agujero que queda, vamos a pegar algo de HTML estático de nuevo, que podemos rellenar con contenido dinámico.

Ahora reemplace los valores con las variables que hemos establecido:

El recuento de comentarios, por el momento, tendrá que permanecer como datos estáticos, pero lo resolveremos más adelante. Con un poco de suerte, tendrás algo como esto:


¡Ahora, repita para todos los archivos "post.yml" dentro de su carpeta de artículos!


Paso 10: Condiciones

Bien, entonces hemos cubierto las variables de configuración y salida. Ahora echemos un vistazo a las declaraciones condicionales (si) de Stacey.

Vamos a agregar algunos enlaces al final de cada publicación, para navegar a las entradas siguientes y anteriores. Para empezar, debemos resolver si hay alguna entrada (carpetas de hermanos) con la cual enlazar. Afortunadamente, Stacey pone a nuestra disposición una amplia gama de variables en cualquier momento; Ya hemos visto y usado una serie de variables dentro de la "página". alcance. Mientras que dentro de una página también podemos usar page.siblings para realizar esta comprobación particular para nosotros:

Esto es lo que parece la declaración if de nuestro motor de plantillas, muy parecida a una instrucción if en cualquier lenguaje de scripting. Lo que estamos diciendo aquí es "si hay entradas de hermanos presentes, haz algo". Incluyamos algunos parciales si hay entradas para enlazar; una parcial para un enlace anterior , otra para un enlace siguiente :

Ahora tendremos que hacer los parciales que acabamos de instruir a Stacey para que incluyan (si no están allí, ella hará una rabieta). link_prev.html contendrá esto:

y link_next.html esto:

Recargue su página, debería obtener algo como esto:


Para que estos sean generados dinámicamente, muestre los títulos correctos y el enlace a las publicaciones correctas, necesitamos sumergirnos nuevamente en el alcance variable de Stacey. Usaremos un bucle for / endfor, mostrando cada valor presente en las variables page.previous_sibling y page.next_sibling . Solo puede haber uno de cada uno, por lo que generamos un enlace con los detalles correctos:

y

Como puede ver, Stacey ha preparado todos los valores que necesitamos, proporcionándonos todos los detalles de la página de las carpetas de hermanos de nuestra entrada actual. Brillante.



Paso 11: Navegación primaria

Nos estamos volviendo muy buenos en esto, ¿verdad? ¿Qué tal si recorramos algunos valores más y generamos algunos enlaces para nuestras páginas de nivel superior? Los colocaremos en la tira de encabezado en la parte superior de cada página. Esto es lo que tenemos en partials / head.html:

¿Cómo hacemos un bucle a través de las carpetas en nuestra raíz? ¿Cuáles son esas carpetas? Nos estamos enfocando en 1.about y 2.contact - estos son los dos que se enumerarán. Para poder realizar un bucle, deben estar numerados. También vamos a hacer que sea necesario que exista un archivo .yml. Entonces, estamos mirando a los niños desde la raíz, y así es como Stacey los ha preparado para nosotros también. Reemplace los elementos de la lista con este bucle:

Podrás averiguar qué está pasando a partir de lo que hemos hecho anteriormente con los bucles for / endfor. Hemos dicho que para cada niño presente en la raíz (carpeta de "contenido") si hay una variable de título de página presente para ese hijo, dé los detalles. Nuestra carpeta "3.articles" se ignora en este caso.

Lo que puede sorprenderlo es que las carpetas se repiten en orden numérico inverso. Esto es lógico cuando se considera que las entradas de blog más recientes tendrán los números más altos, el más temprano, por supuesto, con 1,2,3, etc. Las carpetas más recientes salen primero. Creo que cambiaré los números de las carpetas "acerca de" y "Contactar" para que se muestren más favorablemente.

Para que esto genere algo, tendremos que tener los archivos .yml necesarios en las carpetas 1.about y 2.contact, así que asegúrese de tenerlos. Una vez más, deberá nombrarlos "page.yml", o algo similar, asegurándose de que haya una plantilla con ese nombre presente en la carpeta de plantillas. ¡Todo esto viene naturalmente ahora!


Paso 12: Navegación secundaria

Estamos progresando bien, ahora necesitamos generar un conjunto similar de enlaces para nuestro subnav, así que generaremos las subcarpetas presentes. Coloca esto en el "nav_articles.html" parcial:

Decimos que para cada niño indexable ("1.about, 2.contact, 3.articles") si ese niño tiene sus propios hijos, produce un elemento <ul> . Para cada uno de esos hijos, genere un elemento de lista con el título y la URL.

Solo tenemos una carpeta con hijos, nuestra carpeta de "artículos", pero si tuviéramos más, tal vez una cartera, por ejemplo, también se publicaría. En esas situaciones, podría ser conveniente separar claramente los submenús, pero no es algo de lo que debamos preocuparnos en este caso.


Ahora debería tener un submenú de salida dinámica, que lo vincula a todos y cada uno de los artículos. ¡Más importante aún, casi tienes un sitio completamente funcional! Solo voy a limpiar la plantilla "page.html" eliminando los enlaces anterior y siguiente, además de todos los metadatos que no necesitamos. El cuerpo de la plantilla se ve así ahora:

Muy claro.


Paso 13: Contenido de la página de inicio

Las publicaciones en la página de inicio son más o menos las mismas que las de la navegación secundaria. Los generamos de la misma manera, agregando variables adicionales y bits de marcado según sea necesario. En partials / list_articles.html usamos lo mismo para / if / for la disposición:

Ahora agreguemos el marcado, junto con las variables correctas al bucle:

¡Hecho! Veamos algunos extras para mejorar el sitio.


Paso 14: Sin comentarios

La discusión y la comunidad a menudo están presentes en los blogs, pero como no estamos ejecutando una base de datos, es difícil para nosotros administrar nuestro propio sistema de comentarios. En su lugar, nos apoyaremos en un servicio de terceros y haremos que ellos hagan el trabajo duro por nosotros. Hay muchas opciones para elegir aquí, Facebook le permite usar la API de comentarios que le permite aprovechar todo el poder detrás de la red social más grande del mundo. Sin embargo, una advertencia al optar por su servicio es que técnicamente no posee el contenido producido a través de este método. Tus comentarios no son tuyos. ¿Quién puede decir qué sucederá en el futuro y qué tipo de derechos tendrá o querrá tener sobre el contenido?

En su lugar, hoy vamos por Disqus , que notará que también hemos implementado en Tuts + recientemente.

Continúa, regístrate para obtener una cuenta gratuita y podrás ingresar los detalles de tus dominios.


Una vez que haya completado todos los detalles necesarios, encontrará opciones para implementar Disqus en su sitio. Hay complementos para todo tipo de plataformas familiares, pero necesitaremos el fragmento de inserción universal:

Necesitamos insertar esto en nuestras páginas donde se necesitan comentarios. Depende de usted cómo lo haga: simplemente puede copiar y pegar donde irán los comentarios (en "post.html"), o puede dividir las cosas en un archivo js separado, lo que mantiene las cosas un poco más limpias. .

Necesitará el elemento donde se inyectan los comentarios para colocarlos en la plantilla "post.html":

Acabo de pegarlo debajo de los enlaces siguientes y anteriores. Ahora separe el javascript y colóquelo en un archivo en una nueva carpeta js dentro del directorio público:

He llamado a este archivo disqus.js y lo pondré en el pie de página parcial.

Nota: en algunas páginas, el script emitirá una pequeña advertencia (verifique el inspector web) si está buscando el #disqus_thread div y no puede encontrarlo. No es un problema masivo, pero si eres un genio js y quieres resolverlo, ¡siéntete libre!


¡Guay! Ahora tenemos comentarios en cada post! Disqus se ocupa de todo el lote por nosotros, registrando los comentarios contra la URL de cada publicación (por lo tanto, si modifica la URL por alguna razón, espere que sus comentarios desaparezcan). También es bueno que el marcado que se ha inyectado sea totalmente fluido (por lo que se adapta bien a nuestro diseño de fluis) y adopta algunos de los estilos simples que hemos establecido, como los colores de los enlaces, etc.

Deja algunos comentarios, los necesitaremos para probar el siguiente bit ..


Paso 15: Contando Comentarios

Habiendo hecho espacio para el recuento de comentarios de cada publicación entre los metadatos, ahora rellenémoslo con algunos datos reales. Disqus nos permite hacer eso con otro fragmento de código js (que encontrará en su panel de disqus.com). Nuevamente, puede pegarlo como está o simplemente tomar lo que necesitamos y agregarlo al archivo disqus.js:

Esto tira en el archivo count.js. Ahora necesitamos ver y cualquier enlace donde queremos que se muestre el número de comentarios con #disqus_thread. Por ejemplo, en nuestro post.html:

y en partials / list_article.html:

Los "Comentarios" se reemplazarán, una vez que se haya cargado todo, con el recuento de comentarios asociado con la URL:



Paso 16: 404

Gracias al archivo .htaccess, todos hemos configurado el uso de redirecciones 404 si alguien ingresa una URL rota. Ahora todo lo que tenemos que hacer es colocar un archivo 404.html en la carpeta pública. Como Stacey no analiza este archivo de ninguna manera, no podemos utilizar las variables ni el contenido que tenemos en otros lugares (vergüenza). Por esta razón, es mejor tener un archivo independiente, totalmente independiente, con todos sus estilos y contenido allí mismo en el html.

Esto es lo que se me ocurrió (rápidamente), observe los estilos incrustados en el encabezado del documento:

Anímate y crea este archivo. Tíralo en la carpeta pública, luego visita una URL sin sentido dentro de tu proyecto.



Paso 17: Amigos con Beneficios

Stacey ofrece mucho más, de inmediato, por lo que es una buena idea volver a los archivos originales y echar un vistazo a lo que se ofrece. Por ejemplo, hay una plantilla de RSS, a la que podemos vincular y que genera un feed de todo el contenido. Se parece a esto:

Agregaremos este "feed.atom" a nuestra carpeta de plantillas. También necesitamos algunos parciales, que encontrarás en la fuente, así que lanza toda esta carpeta de "fuentes" en el directorio de parciales:


Puede editar estos archivos atom en cualquier editor de texto o código, así que siéntase libre de modificar la forma en que se genera su feed. Por ejemplo, en "feed-entry.atom" puede cambiar el título de la página:

Eso suponiendo que haya cambiado la variable al principio del tutorial. Ahora necesitamos vincularnos a la fuente, para que la gente pueda agarrarla. Necesitamos un archivo .yml en la carpeta "contenido", entonces podemos señalarlo. Haga un contenido de archivo / feed / feed.yml y coloque esto dentro de él:

y ahora necesitamos actualizar el enlace en nuestros parials / footer.html:

¡Hecho! Una vez más, puede modificar la forma en que se muestra su fuente Atom, así que siéntase libre de jugar con las variables dentro de estos archivos.

Nota: es posible que también desee consultar la fuente json y el sitemap.xml que funcionan de manera muy similar.


Paso 18: Medios adicionales

El contenido de nuestro blog es bastante poco imaginativo en este momento, solo algunos fragmentos de texto ficticio. Por supuesto, podemos usar el margen de reducción, pero podemos mostrar incluso más que eso. Stacey nos proporciona algunas plantillas y funcionalidades adicionales que nos ayudan a generar imágenes, archivos y otros medios. Para empezar, necesitamos incluir los parciales que encontrará en la fuente:


Estos pertenecen en plantillas / partidas / activos. Cada uno maneja un tipo de archivo diferente (puede alterar con precisión cómo se produce el marcado) así que, ¿cómo los utiliza Stacey? Stacey una vez más rastrea el contenido de las carpetas de publicaciones, agregando cualquier archivo adicional que encuentre a su banco de información de la página.

Por ejemplo, pongamos algunas imágenes en nuestra carpeta de contenido / 3.articles / 1.leather.


Una vez hecho esto, Stacey encontrará los activos adicionales y los indexará. ¡Incluya el archivo media.html parcial en la plantilla post.html y listo!


Lo que hagas con las imágenes ahora depende de ti; podría incluir fácilmente un script de presentación de diapositivas js (en la carpeta pública) y hacer rotar estas imágenes. O mostrarlos de forma diferente con CSS. Depende de usted.

¿Qué pasa con otros tipos de medios? Podemos incrustar un video, pero ¿qué tal una inserción en YouTube? Eso se haría con un trozo extra de html. Toma tu código de inserción:

Péguelo en un nuevo archivo html dentro de la carpeta donde lo desea, luego deje que Stacey analice el contenido y genere la página.

Nota: La figura adicional que he envuelto alrededor del iframe es para darnos un video fluido. Con este CSS extra:

Obtenemos (casi) fluidez a prueba de bombas.



¿Café?

Bueno, hemos llegado al final de una agradable velada juntos y espero al menos haber abierto tus ojos al mundo de las alternativas a la CMS. Hay mucho más que puedes lograr con un sistema como este: tengo curiosidad por ver qué se te ocurre.

Stacey es simple, pero lo suficientemente potente como para gestionar las necesidades fundamentales de los blogs. Ella es flexible y abierta a las sugerencias. Tal vez hay un romance aquí esperando a florecer? Para cualquier pregunta o pensamiento, ocuparse en los comentarios. ¡Gracias por leer!


Recursos adicionales

  • Stacey en GitHub
  • Stacey en Twitter
  • Lenguaje de plantillas
  • Para configurar un servidor local MAMP en OS X, revise First Moments with MAMP de Chris Coyier , Developing WordPress de Ryan Olsen localmente con MAMP o Cómo configurar un entorno de prueba de WordPress Killer localmente en Nettuts +.
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.