Share
Statamic es un moderno CMS de PHP que realmente hace un esfuerzo por ser fácil e intuitivo de usar. Desde su diseño de archivo plano hasta el uso de tecnologías como Markdown y YAML, puede realizar una gran cantidad de trabajo sin tener que escribir ningún código..
En este artículo analizaremos el proceso desde la instalación hasta la configuración de una cartera básica..
Con un diseño de archivo plano, la configuración es tan simple como extraer el archivo zip que se descarga desde el sitio web de Statamic. No hay una base de datos involucrada, todo el contenido y la configuración se almacenan localmente en una gran cantidad de archivos diferentes, lo que también significa que tiene copias de seguridad automáticas y versiones en todo su contenido si usa algo como Git.
Con el contenido extraído, echemos un vistazo a la estructura de Statamic..
Hay más o menos cinco carpetas diferentes con las que probablemente interactuarás, y son:
Además de estos, tienes las siguientes cuatro carpetas que probablemente no tocarás directamente:
El primer paso en cada sitio de Statamic es configurar sus opciones..
Todos los archivos de configuración están dentro de la carpeta _config como se describe anteriormente. El archivo principal que debe echar un vistazo es el settings.yaml.
Si eres nuevo en YAML, entonces todo lo que necesitas saber es que es un formato de datos similar a JSON, excepto que está destinado a ser un formato más legible para los humanos. Esto se logra al no requerir ningún carácter de separación, como punto y coma o comillas, sino que obtiene su estructura de la colocación y la sangría..
los settings.yaml El archivo está realmente bien documentado, por lo que no debería tener problemas para completarlo. Algunas de las opciones que probablemente querrá ver son las siguientes:
_license_key: Ingrese su clave de licencia _site_name: Mi cartera _site_url: http: // localhost: 7000 _theme: portfolio _taxonomy: - language _log_enabled: true _cookies.secret_key: Some Random Key
La mayoría de estos son bastante sencillos, como configurar la clave de licencia, el nombre de su sitio y la URL. los tema La opción establece qué carpeta de tema cargar. Nos ocuparemos de esto en un momento, pero un tema es esencialmente el lugar donde se especifica cómo funcionarán las diferentes páginas de su sitio. Crearemos nuestro propio tema para que puedas nombrarlo como quieras. Elegí 'cartera'.
La siguiente opción es una matriz llamada taxonomía. Si alguna vez has usado algo como WordPress, debes saber para qué sirve. Básicamente, le permite agregar una configuración o 'tipo' a cada publicación, y luego puede usar estas taxonomías para filtrar su contenido y crear páginas personalizadas para estas agrupaciones.
Sólo estoy agregando una taxonomía; La taxonomía del lenguaje, porque en nuestro portafolio de ejemplo vamos a especificar los lenguajes de programación de cada trabajo. No es necesario crear una taxonomía para cada propiedad personalizada. Vamos a querer otras cosas en nuestra cartera, como enlaces y descripciones. Una taxonomía es para los campos que tienen varias entradas en común y para los campos en los que es posible que desee crear una página personalizada para.
los log_enabled la configuración activa el registro, por lo que puede ver los problemas que surgen desde el panel de administración. Se almacenarán en el _logs carpeta que vimos anteriormente. Finalmente, la última opción que mencioné es la clave secreta utilizada para cifrar la cookie..
Este archivo ahora se puede guardar, pero antes de pasar al contenido, tomemos un momento para configurar la plantilla de cartera para que podamos ver lo que estamos haciendo..
Como la mayoría de los marcos modernos, cuando carga una página, puede construirla a partir de múltiples componentes reutilizables. Una página en statamic se compone de un diseño, una modelo, y un archivo de contenido. Tanto los archivos de diseño como las plantillas también pueden estar compuestos opcionalmente de más piezas denominadas parciales..
los diseño es la capa exterior en la que se colocará su plantilla. Por lo general, esto se usa para mantener el código HTML estándar como la sección de encabezado, así como el cuerpo básico que necesitarán todas las páginas que usen este diseño, como agregar bibliotecas comunes en la parte inferior de su archivo..
los modelo Es una vista específica para una sola página. Puede tener una plantilla de página de inicio, una plantilla de página de contacto, etc. No es necesario crear uno por página, pero recomendaría uno por tipo de pagina.
En estas plantillas, tiene la capacidad de usar variables almacenadas en los archivos de contenido reales. Por ejemplo, supongamos que necesita una página que muestre un índice de los libros que está leyendo y luego otra página para mostrar una lista de los programas que está viendo. En lugar de replicar la mayor parte del código de cada página, puede crear una plantilla para mostrar una lista de objetos y luego extraer los detalles de qué lista recuperar del archivo de contenido..
los archivo de contenido-como su nombre sugiere, es el recurso real que se muestra. Esto puede ir desde cosas como una página web única real hasta una única entrada de blog. Llegaremos a estos en más detalle en un momento..
Ahora, en lugar de crear manualmente todos estos diferentes componentes, Statamic proporciona una especie de plantilla de inicio, que le brinda una estructura básica para comenzar. Puedes descargar la carpeta de temas desde Github.
Simplemente coloque la carpeta completa en el _themes directorio y cambie el nombre de la carpeta a 'carpeta' (ya que ese es el nombre del tema que declaramos en el archivo de configuración). También necesitas renombrar kindling.js archivo de la carpeta js y la kindling.css archivo del directorio css, a portfolio.js y portfolio.css respectivamente, ya que hay una etiqueta especial para jalar estos automáticamente.
Esa es toda la configuración que necesitamos ahora, pero para tener una mejor idea de lo que estaba hablando con respecto al diseño y la plantilla, echemos un vistazo a esos archivos. Para empezar, abre el archivo llamado default.html desde el diseños carpeta. Esto corresponde al diseño predeterminado, como puede haber adivinado.
_nombre del sitio layout_content
Como mencioné anteriormente, el diseño es un buen lugar para colocar el código que se requiere en varias páginas (o plantillas más bien), por lo que el diseño predeterminado de este archivo solo contiene el esquema básico de un archivo HTML. Ahora realmente no hemos hablado de eso, pero Statamic viene con su propio motor de plantillas, que es bastante fácil de aprender. Básicamente, solo colocas una etiqueta donde quieres que se inserte algo, similar a los manillares si estás familiarizado con eso..
Este diseño contiene un par de etiquetas que pensé que atravesaría, la primera de las cuales es _nombre del sitio. Esta etiqueta en realidad se refiere a la propiedad que configuramos dentro de la settings.yaml expediente. Encontrará esta convención en todo Statamic. Puede configurar las opciones de YAML globalmente de esta forma, o incluso por archivo, y luego puede obtener estas opciones simplemente colocando una etiqueta con sus nombres en sus plantillas..
La siguiente etiqueta, que en realidad aparece dos veces, es la tema etiqueta. Los ayudantes en Statamic son más como módulos independientes, por lo que pueden tener múltiples funciones diferentes adjuntas al mismo nombre; accede a las funciones individuales con dos puntos y luego el nombre del comando que desea.
los tema La etiqueta tiene que ver con cargar recursos específicos de este tema. Se puede utilizar para extraer elementos como scripts y hojas de estilo, pero también como imágenes y parciales. Es una función auxiliar que, básicamente, le permite simplemente proporcionar el nombre del recurso que desea y completará la ruta al directorio de plantillas actual. Así, por ejemplo, si tuvieras que escribir:
theme: js src = "underscore.js"
Reemplazaría eso con un enlace a un archivo llamado underscore.js Dentro de la carpeta js del tema actual. De manera predeterminada, si no se establece ningún parámetro src para el comando js o css, se asumirá que se refiere a un archivo js o css con el nombre del tema actual, por lo que cambiamos el nombre de esos archivos para que coincidan; Es solo una cuestión de conveniencia, por lo que no necesitamos especificarlos y limpiar la fuente un poco..
La siguiente etiqueta que aparece es layout_content. Esto es similar a rendimiento en otros motores de plantillas, y básicamente significa donde se debe insertar la plantilla interna.
Lo último que quiero hacer en este archivo es eliminar el enlace a jQuery, porque no lo usaré (si lo desea, puede dejarlo)..
A continuación, pasemos al archivo de plantilla predeterminado (templates / default.html). Debe estar en blanco. Por el bien de la educación, agreguemos una etiqueta llamada contenido que solo inserta el contenido de la página actual que se está cargando..
Así que para resumir, cuando vaya a una página, primero cargará el archivo de diseño, y luego donde sea layout_content etiqueta se coloca esta plantilla se insertará. Esta plantilla solo generará lo que tenga la página actual dentro.
Una vez hecho esto, guarde estos archivos y pasemos al contenido.
El contenido en Statamic se especifica en los archivos Markdown de forma predeterminada, y el archivo predeterminado cargado se llama page.md. De la misma manera que un servidor web estándar cargará index.html si no se especifica ningún archivo, Statamic cargará page.md.
También vale la pena señalar que las rutas, o los enlaces URL en su sitio, serán definidos por la _contenido directorio. Por ejemplo, si creas una carpeta llamada manifestación en el _contenido directorio, y en él colocar un archivo llamado link.md, esto corresponderá a la URL / demo / link. Si colocas un page.md archivo interior, se cargará si navega a /manifestación/ ya que es el nombre de archivo predeterminado.
Statamic viene con algún contenido de demostración, pero puedes eliminar todo lo que esté dentro de la _contenido Directorio para este ejemplo (o moverlo a un lado por ahora).
Vamos a empezar con una página de inicio básica. En la raíz de la _contenido directorio, crea un archivo llamado page.md con lo siguiente:
--- title: Home --- # Bienvenido a la página title
Todos los archivos de contenido se dividen en dos secciones; La materia delantera del YAML y los contenidos. La parte superior (entre las líneas discontinuas) es donde puede colocar el YAML estándar específico para este archivo, y es una buena manera de establecer opciones para ajustar los archivos de plantilla. La segunda parte es el área de Markdown, donde se colocan los contenidos de la página real. Puede utilizar Markdown estándar y etiquetas de ayuda de Statamic..
Esta página se cargará con el diseño predeterminado y los archivos de plantilla que acabamos de configurar, pero si desea que use otros diferentes, puede especificarlos como opciones en la sección YAML en la parte superior usando _diseño y _modelo respectivamente.
Si creas un servidor en la raíz de tu directorio de Statamic:
php -S localhost: 7000
... y luego navega hasta http: // localhost: 7000 en su navegador debería ver la etiqueta H1 con nuestro mensaje de bienvenida.
Esto es todo lo que necesita saber para crear páginas en Statamic, y si está construyendo un sitio bastante estático, esto sería suficiente. Pero para muchos sitios necesitamos poder agregar datos dinámicos, que pueden tomar la forma de publicaciones de blog, artículos de la tienda o, en nuestro caso, trabajos de cartera..
No hay una base de datos en Statamic, por lo que este tipo de entradas se almacenan en archivos Markdown al igual que la página que acabamos de crear, aunque se hicieron un par de cosas para introducir sutilmente múltiples funciones para optimizar cosas y hacer que funcione en el administrador..
En primer lugar, puede asignar un nombre a los archivos con un formato de fecha especial para que puedan ordenarse y filtrarse por fecha. Para ello, pre-pendiente el título con un año mes dia modelo. Si quisieras crear una publicación llamada 'foobar', le pondrías un nombre como:
2013-09-15-foobar.md
Cualquier configuración que la publicación requiera ir dentro de la sección de la parte frontal en la parte superior, y luego el contenido se coloca debajo. Esto sigue el formato de páginas como se describe arriba.
Si bien esto es bastante bueno, es el equivalente a ingresar manualmente las publicaciones en una base de datos de un sistema tradicional. Hay otra opcion!
Statamic viene con un administrador realmente agradable que puede hacer todo esto por usted, pero para configurarlo necesitamos decirle qué campos se supone que debe tener este tipo de entrada. Esto se hace en un archivo apropiadamente nombrado fields.yaml.
Así que para nuestro ejemplo, vamos a crear una carpeta dentro del directorio de contenido llamado trabajos, y dentro de la trabajos carpeta vamos a crear un archivo llamado fields.yaml. Dentro de fields.yaml archivo, necesitamos especificar qué propiedades contendrán nuestras 'entradas' y los tipos individuales para cada una de estas configuraciones.
Puede especificar su fieldset (la lista de campos) en el _config / fieldsets / directorio y arrastre una definición, o simplemente puede ingresar la definición aquí (o puede hacer ambas cosas para extender una definición existente). Para nuestro ejemplo simple, solo voy a poner la definición aquí, ya que no la volveremos a usar en ninguna parte:
tipo: campos de fecha: idioma: tipo: visualización de etiquetas: lenguaje de programación requerido: descripción verdadera: tipo: visualización de texto: descripción requerida: enlace falso: tipo: visualización de texto: enlace requerido: contenido verdadero: tipo: oculto
La primera propiedad simplemente le dice a Statamic que queremos que estos archivos de entrada tengan una propiedad de fecha y que tengan un nombre apropiado. A continuación abrimos un objeto YAML llamado campos Contiene todas las propiedades de nuestras entradas..
El primero es el idioma campo, que si recuerda es la taxonomía que creamos en el settings.yaml. Dentro de cada propiedad, debemos especificar su tipo (o su valor predeterminado es un cuadro de texto), su texto de visualización (que de manera predeterminada será el nombre de la propiedad) y si es necesario. Puede configurar otras opciones, incluidas las instrucciones y el valor predeterminado. Puede ver más información sobre estas opciones en el sitio web de Statamic. Junto a esta configuración, diferentes tipos de campos pueden tener sus propias opciones personalizadas.
Para el idioma de entrada, lo configuro para usar el etiqueta tipo, que le permite establecer múltiples etiquetas para esta opción. Es solo un tipo diferente de entrada para ingresar su valor en el administrador. Puede ver todos los diferentes tipos de campo en la documentación de Statamic o en la hoja de trucos oficial de Statamic en 'Fieldtypes'.
los descripción y enlazar son casi lo mismo. Ambos serán cuadros de texto, excepto que se requerirá uno y el otro no. Además de los campos que especifique, todas las entradas incluirán un título y un campo de contenido. Realmente no queremos un campo de contenido, en nuestros trabajos serán más como enlaces, así que lo he configurado para oculto.
El último paso antes de ir al administrador es crear un page.md archivo dentro de la trabajos directorio. Esto no es necesario, pero el administrador intentará obtener el título de este tipo de entrada desde aquí, así que es una buena idea colocarlo. Para ello, crea un page.md archivo dentro de la trabajos carpeta con solo el título establecido en 'Works':
--- título: obras ---
Para entrar en el administrador necesitamos primero crear un usuario. Este es un simple archivo YAML dentro de la configuración carpeta. El nombre del archivo es el nombre de usuario que usará para iniciar sesión, y dentro del archivo usted configura los detalles y la contraseña del usuario.
Vamos a crear un nuevo usuario con un nombre de usuario de editor. Hacemos esto creando un archivo llamado editor.yaml dentro de la _config / users / carpeta. Inserte los siguientes datos (excepto con su información en lugar de la mía):
--- primer nombre: Gabriel último nombre: Manricks roles: [admin] correo electrónico: [email protected] contraseña: contraseña --- El Editor de este Portafolio
La mayoría de estas columnas son bastante sencillas y no creo que requieran ninguna explicación. El único campo que vale la pena mencionar es el roles ajuste. Actualmente administración es la única opción disponible, pero en el futuro será donde podrá ajustar los permisos de edición del usuario.
También vale la pena mencionar que la contraseña no se mantendrá en texto sin formato. Después del primer inicio de sesión, Statamic codificará la contraseña junto con un salt e incluirá aquellos aquí..
Todo después de las líneas discontinuas se almacenará como contenido para este usuario, y se puede utilizar como una especie de biografía para ellos..
Ahora guarde este archivo, y si su servidor web todavía se está ejecutando, vaya a /administración en tu navegador Esto abrirá la consola de inicio de sesión donde puede ingresar estas propiedades. La primera vez que inicie sesión tendrá que hacer esto dos veces, una para codificar la contraseña y la segunda vez para iniciar sesión.
Una vez que hayas iniciado sesión verás una lista de nuestras páginas. Se incluye nuestra página de inicio, así como el tipo de entrada "Obras". Echemos un vistazo a lo que nuestra declaración de campos hizo por nosotros. Haga clic en el Crear enlace dentro de la Trabajos bar.
Debería ver un bonito formulario que incluya todos los campos que especificamos y el título. Intenta agregar algunas publicaciones para probarlo.
Con algunos mensajes almacenados, hemos completado la primera ronda. Ahora sabe cómo crear páginas, temas, usuarios y entradas, es un excelente primer paso. Pero hay mucho más que Statamic tiene para ofrecer..
Es bueno tener algunos mensajes creados, pero lo mejor sería si pudiéramos mostrarlos en una página. Para ello necesitaremos editar la plantilla por defecto..
Esta será nuestra primera interacción real con el motor de plantillas incluido, pero no se preocupe, el diseño intuitivo de Statamic hace que sea fácil de aprender..
Para ver una lista completa de las etiquetas disponibles, puede consultar la documentación de Statamic. Todo lo que realmente necesitamos para este ejemplo es el entradas etiqueta, que se utiliza para extraer entradas de una carpeta específica en la _contenido directorio. Hay muchas propiedades opcionales que le permiten filtrar por fecha o por condiciones como taxonomías o incluso propiedades estándar. Vamos a mantenerlo simple y simplemente listar las propiedades por fecha (que es la predeterminada).
Aquí está la nueva plantilla predeterminada completa (templates / default.html):
portafolio
idioma | title - descripción |
En este código, estamos creando una tabla y repasando todas las publicaciones en el directorio 'works'. Este tipo de etiquetas de bloque, donde coloca más HTML dentro, asigna nuevos marcadores de posición. Además de proporcionar acceso a cosas como todos los atributos de la publicación, también obtiene variables de ayuda especiales que pueden indicarle cosas como el índice actual, o si esta es la primera o la última publicación. No utilizaremos ninguna de esas variables. Todo lo que necesitamos es mostrar el título, el idioma, la descripción y el enlace. Sin embargo, si carga la página en su navegador, probablemente se dará cuenta de que en lugar de mostrar el idioma simplemente dice "Array".
Esto se debe a que establecemos esta propiedad como una etiqueta de tipo, lo que significa que podría contener más de un idioma. Por lo tanto, aunque solo haya puesto un idioma, todavía se está almacenando en una matriz. Por suerte, Statamic viene con modificadores..
Para terminar esta guía, echemos un vistazo a algunos modificadores que nos permitirán mejorar esta página..
El primer y mayor problema es hacer que el lenguaje aparezca. Si echas un vistazo a la Hoja de trucos de Statamic, en la parte inferior izquierda, verás una sección llamada Listar atajos. Aunque técnicamente no son modificadores, Statamic le permite agregar estas palabras al final de una variable de lista, y en su lugar devolverá una representación de cadena. El que quiero usar en esta situación es el estándar. _lista ayudante. Lo que esto hará es separar los valores múltiples en la matriz con una coma y un espacio, y es lo que desearíamos en nuestra situación.
Para probarlo, sustituye el idioma etiqueta con language_list. Actualiza tu navegador y ahora debería estar mostrando los idiomas correctamente.
A continuación, agreguemos un modificador al título para hacerlo todo en mayúsculas. Si alguna vez has usado algo como el motor de plantillas Smarty, esto funciona de la misma manera. Usted agrega una tubería al final del nombre de la variable y luego agrega un modificador. En nuestro ejemplo, solo necesita reemplazar la llamada a title con title | upper y estos son susceptibles de ser modificados para que pueda seguir agregando tuberías indefinidamente.
Ahora solo agreguemos algo de CSS para darle estilo a todo. Recuerda, esto va en el css / portfolio.css expediente:
cuerpo fondo: # FAFAF5; h1 font: 800 64px 'Raleway', sans-serif; margen inferior: 28px; table font: 15px 'Coustard', serif; td relleno: 10px 10px 0 10px; p margen inferior: 15px; .lang p background: # CA9F53; color: #FFF; relleno: 3px 5px; text-align: right; .work text-align: left; .work a border-bottom: 1px solid # 000; texto-decoración: ninguno; .title font-weight: 600; color: # 000; .desc color: # 666;
Y estas dos fuentes son de Google Fonts, por lo que deberá agregar el siguiente enlace en la parte superior de su archivo de diseño predeterminado:
_nombre del sitio layout_content
Si todo funcionó, debería ver la siguiente página (excepto con los trabajos que agregó):
En este tutorial, lo he llevado a través de todo el proceso, desde la instalación del marco hasta la configuración de todo, la creación de un nuevo tipo de entrada y la creación de un tema personalizado. Es mucho lo que hay que hacer, y solo es posible debido a la facilidad con que Statamic hace las cosas.
Ya hemos visto mucha funcionalidad y ni siquiera hemos tocado crear sus propios módulos y extender Statamic con PHP, pero creo que lo más sorprendente hasta ahora es que no hemos tenido que escribir una sola línea de PHP en todo este tutorial! Eso es algo de lo que presumir.
Así que creo que la pregunta principal que la gente podría tener es: "¿Debo usarlo?" O "¿Qué debería reemplazar esto en mi repertorio actual?" Es importante evaluar para qué es la estadística. Si está creando un nuevo inicio y necesita la flexibilidad de un marco completo, estoy seguro de que podrá hacerlo funcionar en Statamic, pero sería una gran cantidad de código personalizado, lo que podría anular el propósito. Donde creo que prosperará es como una plataforma de blogs o CMS.
Viniendo de un fondo en WordPress, esto se siente como un sucesor directo. Sigue muchas de las mismas convenciones en teoría, pero todas se implementan de una manera mucho más inteligente. La comparación de la cantidad de código requerido en cada uno se convierte en una broma. Avanzando, Statamic tiene una API increíble para crear etiquetas personalizadas, ganchos, nuevos tipos de campo y más, y puedes imaginar que Statamic lo hace tan sencillo y simple de hacer como esperabas..
Espero que hayan disfrutado este artículo, si tiene alguna pregunta, no dude en preguntarme más abajo, en twitter @gabrielmanricks, o en el canal IRC Tuts + web dev en freenode (#nettuts).
Accentsconagua