Desarrollo de temas de Ghost: cómo personalizar tu publicación en Ghost

1. Introducción: Hola y bienvenidos a Desarrollo de Tema Fantasma: Cómo Personalizar Tu Publicación Fantasma. Soy Christopher Dodd, soy desarrollador web freelance y maestro superior aquí en SkillShare.com, cubriendo todas las cosas desarrollo web y freelancing online. En la clase de hoy, vamos a aprender los fundamentos del desarrollo del tema Ghost con el fin de darte el control total del aspecto y la sensación de tu publicación Ghost. Para aquellos de ustedes que no están familiarizados con Ghost, simplemente lo describiría como la alternativa moderna, más eficiente a WordPress. Es súper rápido y viene sin la hinchazón extendida de WordPress, lo que es una plataforma ideal para albergar un blog u otra publicación en línea. Es precisamente por eso que decidí mover mi propio sitio web personal a Ghost en 2021, y vi unas mejoras masivas de velocidad en comparación con WordPress. Entonces si estás listo para aprender a desarrollar y personalizar temas de Ghost, click en el siguiente video y te veré por dentro. 2. Por qué usar Ghost: Antes de mostrarte cómo instalar Ghost en tu computadora, quiero hablar rápidamente de por qué recomiendo Ghost, ya que estoy seguro que muchos de ustedes viendo no han escuchado mucho de esta plataforma antes. Ghost se fundó en abril de 2013, aproximadamente 10 años después de WordPress, después de una muy exitosa campaña Kickstarter para crear una nueva plataforma enfocada únicamente en la publicación profesional. Las palabras clave ahí están enfocadas únicamente a la publicación profesional. Esto es importante porque muestra que Ghost está especializado en hacer una cosa muy bien. Personalmente, desde que cambié de WordPress a Ghost en 2021, puedo decir cómodamente que Ghost es una plataforma mucho mejor para la publicación en línea. Uno de los mayores beneficios para Ghost es lo rápido que es, 1900 por ciento más rápido que WordPress de hecho, según estudios independientes. ¿ Por qué? Porque Ghost, a diferencia de WordPress, está construido sobre una pila de tecnología moderna. Cuando trasladé mi sitio web de WordPress a Ghost, mi grado de velocidad según GT Metrix mejoró drásticamente de una F y unos Bs a todos As. Lo mismo se puede decir por interactuar dentro del lado admin de Ghost también. El administrador es una aplicación web de una sola página, lo que significa que la interactividad es más suave y rápida. no hablar, la interfaz es limpia y sencilla. A diferencia de WordPress, con todos sus diversos menús. El administrador de Ghost no cambia dependiendo del tema o integración que agregues a tu sitio web, lo que significa que la experiencia es mucho más consistente que en una plataforma como WordPress. El compromiso, sin embargo, es que las modificaciones a su sitio web son más difíciles de hacer sin conocimiento de codificación. Por suerte para ti, eso no será un tema después de tomar esta clase. Para concluir, no era probable que encontraras Ghost llegando a la notabilidad dominante, dado que es tal desarrollar una plataforma de enfoque, pero para aquellos de ustedes que saben cómo aprovechar el poder de Ghost, deben encontrar la experiencia tanto para usted como para el usuario es notablemente más satisfactorio. 3. Herramientas y conocimientos necesarios: En esta clase, nos enfocaremos en los detalles que conforman los temas de Ghost. Por supuesto, el desarrollo del tema Ghost incluye los tres lenguajes de la web front-end, incluyendo HTML, CSS, y JavaScript. Pero esta no es una clase enfocada a ninguno de esos temas. Se espera, antes de tomar esta clase, que tengas una sólida comprensión de HTML y CSS. En cuanto a herramientas requeridas, como de costumbre, necesitarás un navegador web, se recomienda Google Chrome; y un editor de código, que en esta clase, usaré Visual Studio Code. En el siguiente video, te mostraré cómo descargar e instalar Ghost localmente para que puedas empezar a trabajar en el desarrollo de temas de Ghost. Pero una vez que se construya nuestro tema, tendremos que subirlo a un anfitrión en línea. Se discutirán los detalles de todo esto a lo largo de la clase. 4. Cómo instalar Ghost: Como se mencionó en el video anterior, vamos a querer instalar Ghost localmente. A nivel local, lo que significa que vamos a estar ejecutándolo en nuestra propia computadora. esto hay dos partes, la primera parte es instalar la interfaz de línea de comandos, por lo que Ghost CLI, y la segunda parte es que vamos a instalar una instancia de Ghost en nuestra máquina local. Podremos ejecutar un pequeño servidor aquí y operar con Ghost como lo haríamos en un sitio en vivo, excepto que todo será solo local y tenemos fácil acceso al código para el que desarrollar nuestro tema Ghost. Como se mencionó aquí, no es adecuado para uso de producción. Esto es algo que usamos para desarrollar los temas y luego cuando estemos listos para publicar, entonces empujaremos ese código a nuestro sitio en vivo. Pero por ahora, lo que vamos a hacer es comenzar con la instalación de Ghost CLI y para eso necesitamos asegurarnos de que tengamos instalada una versión de soporte de Node y npm. Este primer requisito aquí bajo prerrequisitos, eso va a cubrir 99.9 por ciento de las personas que ven esto. Yo estaría muy sorprendido si tuvieras un sistema operativo distinto a esos tres, por lo que deberías estar bien para eso. Node.js es un entorno de tiempo de ejecución que es muy común en el desarrollo web moderno. Si has estado haciendo otro desarrollo web, deberías tener ese instalado. De lo contrario, el enlace está ahí, NodeJs.org, y puedes seguir las instrucciones de instalación allí. De lo contrario, si tienes instalado Node, entonces asegúrate de tener npm instalado y luego estás listo para seguir. Si no estás seguro de si tienes esos dos instalados, abramos ahora mismo una ventana de terminal. Simplemente despejaré todas estas advertencias. Utilizo uno llamado iTerm, por lo que podría verse un poco diferente a tu aplicación terminal. Usará terminal en un Mac o símbolo del sistema de línea de comandos en un Windows de forma predeterminada. Pero aquí en mi aplicación terminal, lo que puedo hacer para comprobar si tengo instalado Node y npm es solo ejecutar el comando para comprobar la versión. Puedo revisar mi versión de Node y puedes ver que es 16.9.1 y luego puedo ir npm-v y eso me dirá mi versión npm. Yo solo acercaré aquí para que ustedes puedan verlo con más claridad. Como puedes ver cuando ejecutamos estos comandos, tenemos números de versión que vienen y así eso significa que tenemos instalado Node y npm. Lo siguiente que vamos a hacer es que vamos a instalar el Ghost CLI con este comando aquí mismo ahora que sabemos que tenemos instalado Node y npm. Voy a copiar y pegar ese comando en nuestra terminal y esto instalará la última versión de la CLI Ghost. Después de unos 20 segundos que deberían instalarse y ahora podemos empezar a encontrar un directorio para instalar nuestro sitio web de Ghost. Lo que voy a hacer es claro que, luego voy a navegar a un directorio que tengo en mi computadora, code/habilidad/compartir. Aquí es donde guardo todos mis proyectos de Skillshare y aquí dentro voy a hacer un nuevo directorio usando el comando mkdir, y voy a llamar a este sitio de un fantasma. Entonces después de haber creado eso, voy a navegar a ese directorio vacío y ahora estoy dentro del sitio Ghost. Ahora ejecutemos el comando para instalar Ghost, ghost install local, y veamos si funciona. Recibimos un error bastante temprano, no estoy seguro si vas a tener el mismo error, pero este es un error bastante común, por lo que sería importante que muchos de ustedes vean cómo trabajar a través de esto. Es el error que dice que la versión de Node.js que usas no es compatible. Como puedes ver aquí, estas son la lista de versiones de Node compatibles y si recuerdas antes, vimos que estábamos ejecutando 16.9.1. Obviamente, esto va a ser diferente dependiendo de qué versión tengas, pero como puedes ver, ahí hay una discrepancia y por eso tenemos el error. Desafortunadamente para los desarrolladores, esto no es tan raro de un error. Hay muchos paquetes de Node diferentes por ahí que solo se ejecutan en versiones específicas de Node. Pensarías que todos se ejecutarían en la última versión de Node, pero supongo que Node cambia tan rápido que necesitas una solución para cambiar entre diferentes versiones de Node y para eso, hay un paquete llamado nvm. Simplemente te mostraré que si no lo tienes ya, debería aparecer como primer resultado cuando escribas nvm en Google, y aquí puedes ver Node Version Manager. Si nos desplazamos hacia abajo, podemos ver el comando para instalarlo. Ya lo tengo instalado, pero este es el comando que ejecutarías si no lo tuvieras instalado ya. Podemos bajar aquí, como se puede ver en mi computadora particular, dice que nvm ya está instalado y solo va a intentar actualizar. Para ti, podría estar haciendo una nueva instalación, solo asegúrate de tener instalado Node Version Manager y de esa manera podemos seleccionar una versión específica de Node para poder ejecutar Ghost. Un poco frustrante, pero desafortunadamente, esto viene con el territorio de ser desarrollador. A veces necesitas elegir y cambiar entre tus versiones de Node. Ahora pensarías que podrás cambiar a la versión Node simplemente ejecutando nvm use node. Este es el comando que usas para cambiar tu versión de Node y creo que fue, hasta me olvidé de lo que decía. Déjame simplemente ejecutar ghost install local de nuevo. Tenemos de nuevo esos números de versión, aquí vamos, 14.15.0. Pensarías que podrías usar el comando nvm use node, que es el comando para cambiar una versión. Voy a ir nvm use node 14.15.0 y ahora puedes ver que ahora hemos cambiado a esa versión. Pensarías que eso funcionaría entonces para ejecutar ghost install local. Pero desafortunadamente, para mí, dice que no es compatible con la versión actual de Node. Es raro me sale este error diferente el cual no tiene los números soportados, pero al mismo tiempo, todavía no soy capaz de instalar una instancia de Ghost. No puedo explicar por qué este es el caso, pero esta versión aún no es compatible con Ghost. Lo que haría es buscar versiones de nodo compatibles con Ghost y comprobar en los últimos foros. Esta de aquí es una grabación de pantalla anterior de un post del foro que encontré llamado error de descarga con Ghost CLI, encontré una respuesta de Kevin en el staff que la versión mínima soportada es 14.16.1. Si instala eso usando nvm y luego ejecuta nvm use node y lo establece en esa versión, entonces debería funcionar para esta versión en particular de Ghost CLI. Sé que esa no es la respuesta más limpia, pero desafortunadamente, algo que Ghost no ha dejado claro en su sitio web o dentro del mensaje de error. Ahora vamos a ejecutar ghost install local. Como pueden ver, nuestra instalación está adelante ahora. Yo sólo voy a saltar adelante aquí para que no tengamos que esperar a que se vaya todo. Como puedes ver, casi estamos ahí, estamos iniciando Ghost ahora y aquí puedes ver que Ghost se instaló con éxito, para completar la configuración de tu publicación visita esta dirección la cual te va a permitir configurar tu administrador de Ghost. Abramos eso. Voy a mantener presionada Command y luego dar clic en ese enlace para que yo pueda acceder a él y ahora puedes ver que puedo correr por la instalación de Ghost. Voy a dar clic en “Crear cuenta”. Voy a llamar a este Skillshare, mi nombre es Christopher Dodd, y voy a poner algunos detalles aquí que he guardado previamente y luego aquí me saltaré esto para invitar a los usuarios del personal. Ahora, estoy dentro de una nueva instalación de Ghost y aquí puedes ver al administrador de Ghost, que hablaremos en tan solo un segundo. Si queríamos ver el sitio, podemos hacer clic en este enlace aquí y eso nos llevará a nuestro sitio Ghost el cual ha sido prepoblado con algunos blogs de ejemplo y está usando el tema en Casper. Si quieres revisar el tema que estás usando actualmente, haces click en esto para entrar en configuración. Tenga en cuenta que esta interfaz está sujeta a cambios, pero actualmente así es como se ve y entrando en Ajustes, luego podemos entrar en Theme y luego se puede ver que Casper está instalado por defecto. En un momento, vamos a salir este tema y vamos a reemplazarlo por nuestro propio tema. Pero por ahora, estamos trabajando con este tema existente y estamos sacando entradas de blog desde dentro del admin aquí. Como puedes ver, tenemos algunas entradas de blog que vienen estándar con Ghost. Si queremos deshacernos de ellos, sólo los eliminamos todos, y también tenemos algunas páginas que han sido proporcionadas por Ghost. Creo que tenemos una etiqueta aquí y debajo de Staff, nos tenemos a mí, y al usuario Ghost. El usuario de Ghost es al que se han atribuido todas estas entradas y páginas de blog y si estamos buscando de dónde viene esta navegación, podemos volver a entrar en Configuración, golpear Navegación, y puedes ver aquí es donde nuestro viene de la navegación. Esto es lo que obtienes de Ghost listo para usar, pero claro, en esta clase vamos a aprender a personalizar esto, construir nuestro propio tema. Pero todos vamos a estar usando los mismos datos de Ghost. Vamos a estar usando etiquetas, autores, páginas, y publicaciones. Pero ahora que tenemos instalado Ghost, voy a esperar hasta el siguiente video para mostrarte más sobre Ghost y vamos a cubrir algunos de los conceptos básicos de cómo funciona todo esto. 5. Conceptos básicos para Ghost: Bienvenidos de nuevo, a todos. En esta lección, vamos a estar cubriendo algunos de los conceptos básicos de los sitios Ghost y el desarrollo de temas Ghost. Como pueden ver, estoy ejecutando una instancia de Ghost aquí y la dirección para el administrador es la siguiente. Si miro en mi navegador aquí, se puede ver la dirección para simplemente echar un vistazo al sitio tal como es, es el mismo menos el fantasma slash. Slash ghost es lo que usamos para acceder al admin. Lo que voy a hacer es poner en slash ghost, y eso nos llevará de vuelta al admin. Yo quiero llamar su atención otros dos documentos aquí que nos van a guiar a lo largo de la clase. Aquí está la documentación oficial. He pasado de la instalación de Ghost a la visión general de temas. Dentro de la documentación del desarrollador, esto es por supuesto sujeto a cambios, pero al momento de la grabación, está abajo aquí en este menú de temas, tienes todos los detalles relativos a los temas. Acabo de hacer clic en resumen para llegar a esta página. Te animo a leer la documentación. Pero lo que he hecho encima de eso se crea mi propia guía de Desarrollo de Theme Fantasma. Esto será publicado para cuando estés viendo esta clase, y la URL será fantasma-tema-desarrollo-guía. Pero debería ser la última publicación en mi blog para un futuro previsible. Debe ser bastante fácil de encontrar yendo a crystalfreelancer.com/blog o crystalfreelancer.com, seguido de la babosa específica aquí. En esta guía, lo que hago es pasar por los conceptos básicos que estamos cubriendo ahora, y divido todo el artículo en cuatro categorías; plantillas, rutas, contexto, y ayudantes. A medida que nos adentramos más en los videos posteriores, una vez que empecemos a construir plantillas que coincidan con las rutas, si me desplazo aquí abajo, puedes ver que he creado un pequeño diagrama aquí. Creo que para cosas como la estructura, tener un diagrama realmente ayuda a conceptualizar lo que está pasando, y en este diagrama lo que tenemos está a la izquierda tenemos las diferentes rutas. Si estás en la ruta de la página principal, vas a estar viendo index.hbs a menos que haya una plantilla home.hbs. Esto es lo que todo esto significa. No te preocupes, entraremos en esto más adelante en el video. Pero toda la base de Ghost Theme Development son rutas y plantillas. Al acceder a estas diferentes rutas, la plantilla que vas a obtener depende de qué plantillas realmente tengas en tu tema y del nombre también, porque la convención de nomenclatura es muy importante. Pero a un nivel fundamental, tienes aquí estas dos plantillas que forman la columna vertebral de todos los temas de Ghost, que son index y post. Porque si subimos aquí a lo básico aquí, un blog en su forma más básica es una colección de entradas de blog. Volvamos a nuestro admin aquí y vamos a explicarlo en el contexto del administrador de Ghost. El elemento de menú más prominente aquí son tus posts. Tienes este pequeño desplegable aquí. Podrás mirar publicaciones en cuanto a borradores programados o publicados. Ahora bien, esto tiene sentido porque Ghost es una plataforma editorial. Es una plataforma de blogueo. Es puro. Hace esta forma de sitios web muy bien, razón por la cual recomiendo a aquellos de ustedes que van por específicamente un blog para usar fantasma. No hace absolutamente todo bien, pero lo que hace es enfocarse en la funcionalidad central de un blog, que es una colección de posts. Si entramos aquí, puedes ver aquí están nuestra lista de publicaciones. Como vimos en el último video, esto ya ha sido poblado. Pero si entramos aquí y hacemos clic en “New Post”, solo llamemos a esta Publicación de ejemplo, y aquí podemos insertar todas las cosas como una imagen, rebaja HTML, o simplemente podemos empezar a escribir. Todo esto ahorra súper rápido. El editor es súper rápido. También podemos agregar una imagen de función a nuestra publicación de blog también. Entonces por aquí lo que podemos hacer es actualizar la URL de la publicación, cambiar la fecha de publicación, agregar etiquetas, agregar un extracto, cambiar al autor, y cambiar la plantilla, si se hubieran establecido otras tabletas en el tema, que actualmente no lo han hecho. Eso es mucho detalle pero esencialmente con la excepción de las páginas, todos los demás tipos de datos que veremos en ese pequeño menú están relacionados con la organización de nuestros posts. En un sistema como digamos WordPress o Shopify, en WordPress tienes algo llamado categoría, y luego tienes etiquetas, en Shopify tienes algo llamado colección, y luego tienes etiquetas. En Ghost, no hay concepto de categoría. Lo que tienes en su lugar es algo llamado etiqueta primaria. Para este post, la primera etiqueta que pongo en esta caja es la etiqueta principal. Lo que voy a hacer es simplemente crear una nueva etiqueta ahora llamada Ejemplo Tag y luego la etiquetaré con empezar también. Va a tener dos etiquetas, pero esta primera etiqueta se conoce como la etiqueta principal. Si quisieras crear categorías mutuamente excluyentes, así es como lo harías. Pondrías la categoría o la etiqueta por la que quieres categorizar la publicación principalmente como la primera etiqueta. Aquí abajo, el autor se establece automáticamente porque actualmente estoy conectado como Christopher Dodd, pero podría fácilmente cambiar esto a Ghost y luego tener este artículo atribuido a otro usuario. Voy a mantener esto atribuido a mí mismo. Eso es básicamente todo para ajustes de post. Echemos un vistazo a cómo se ve eso. Esto sólo va a ser un borrador. Yo no haría esto en un sitio normal, pero porque estamos trabajando en desarrollo, solo puedo publicar esto y publicará al instante. Volvamos a las publicaciones y veamos los otros tipos de contenido. Como mencioné antes, las etiquetas son la forma en que organizas tu contenido en Ghost. Si hago clic en etiquetas aquí, puedes ver que tenemos las diferentes etiquetas y el número de publicaciones atribuidas con cada una. Quiero llamar su atención sobre las etiquetas un poco más en este video porque son un poco diferentes a lo que están las etiquetas en muchos otros sistemas. Como puedes ver, dentro de una etiqueta tenemos muchas opciones de personalización. Podemos agregar una imagen de etiqueta, podemos agregar un color, podemos darle un nombre más fácil de usar. Incluso podemos darle una descripción y personalizar sus metadatos. Ahora bien, esto es muy diferente a muchos otros sistemas, que una etiqueta es sólo una cadena de caracteres. Eso es todo. No tiene todos estos otros datos adscritos a ella. Pero el punto que estoy haciendo aquí es que no tenemos categorías en Ghost. Las etiquetas son básicamente tus categorías también. Etiquetas de sistema muy flexibles funcionan bien para darte mucha flexibilidad en cuanto a cómo organizar el contenido de tu sitio web y con el uso de la etiqueta primaria que acabamos de discutir, eso nos da todos los beneficios de esa flexibilidad sin el compromiso de tener estas categorías mutuamente excluyentes. Si quieres categorizar tus publicaciones por grupos mutuamente excluyentes, puedes usar la etiqueta principal. Entonces con el fin de personalizar el personal o los autores, podemos bajar aquí al menú de cosas aquí, y aquí podemos agregar datos al usuario. Si entro a mi nombre aquí, puedo cambiar mi Slug. Puedo darme una imagen de portada y una foto de perfil. Puedo darme un sitio web de ubicación, y todos estos datos están disponibles para que los utilicemos dentro de Ghost Theme Development. Por supuesto, tienes integraciones aquí y tienes miembros si estás ejecutando un sitio de membresía de pago. En esta clase, realmente no vamos a estar hablando de Ghost como una forma de hacer un sitio de membresía, solo vamos a estar hablando de Ghost en términos de blogueo, pero esta también es una opción aquí. He oído que Ghost es muy poderoso para eso también. El último cosita aquí sobre el que quiero llamar su atención son las páginas. Las páginas son más o menos exactamente como las publicaciones, es solo que no están organizadas en nuestro índice de colecciones aquí. Simplemente están solos. Tenemos que vincularlos en algún lugar. No hay bucle con todas nuestras páginas. Son solo post que se sientan fuera de los puestos y no pertenecen a la colección central de tu sitio web Ghost. Como puedes ver algunos de los ejemplos aquí son cosas como esa tu página Acerca de, tu página de contacto, tu página de privacidad. Estos no son realmente blogposts. Van a lucir y sentir lo mismo quizá, pero son entradas de blog en el sentido de que no les vamos a dar etiquetas y la fecha en que fueron publicadas podría no necesariamente ser tan importante. Esto es más o menos lo mismo en cualquier plataforma de blogs que tienes tus posts y tus páginas. Básicamente, la única diferencia es que las publicaciones forman una colección y tienen fechas sobre ellas. Páginas que puedes mostrar la fecha publicada también en Ghost Theme Development, pero eso no es tan común. La diferencia es con los posts, queremos poder recorrer recorridos por ellos, y cuando lleguen nuevos posts disponibles, podemos publicarlos en feeds RSS, cosas así. Si has tenido alguna experiencia con el blogueo antes, eso debería ser bastante claro para ti. Lo último que solo quiero reiterar aquí es que tu navegación se sienta en tu configuración aquí, para que puedas entrar a la configuración luego hacer clic en navegación, y aquí es donde configuras tus datos de navegación. Vimos, si vuelvo a nuestro sitio haciendo clic en este enlace, se puede ver nuestra navegación aquí arriba. Si yo fuera a quitar algunos artículos aquí, sólo eliminemos todo excepto sobre y golpeemos Guardar. Creo que en realidad tengo que hacer clic en Papelera aquí. Vamos a reintentar set por aquí. Podrás ver nuestra navegación se encoge y nuestra nueva entrada de blog que publicamos está ahí también. Entonces lo que voy a hacer ya que no queremos un post sin imagen, solo voy a añadir aquí una imagen destacada. Sólo puedo encontrar uno al azar de Unsplash. Simplemente insertemos uno ahí. Haga clic en “Actualizar”. Vuelve a nuestro tema, oops. Déjame volver a Inicio, y aquí puedes ver que tenemos nuestra publicación de ejemplo debajo de Etiqueta de ejemplo y aquí debajo de Introducción, todas nuestras otras publicaciones. Ahora bien, si te estás preguntando de dónde viene este Getting Started, esa es la etiqueta principal. Muy importante lo que pones como tu primera etiqueta. Por supuesto, en tu tema Ghost mientras lo estás desarrollando, puedes optar por incluir la etiqueta principal o tratarla como una etiqueta normal. Depende de ti. Pero en cuanto a crear estas categorías aquí, utilizarías la etiqueta principal. Yo sólo quiero dejar eso claro porque eso es algo que es diferente en Ghost en comparación con otras plataformas de blogueo. Ahora que hemos echado un vistazo al interior del administrador de Ghost y deberías estar un poco familiarizado con él, te acostumbrarás más a ella a medida que pasa el tiempo, salgamos nuestro tema y empecemos a reconstruirlo para que podamos aprender cómo funciona todo . El tema que estamos usando, si entro en Ajustes y entro en Theme aquí, es Casper. Si tuviera otro tema listo para salir, podría subirlo y cambiar a ese tema. Pero para los propósitos de nosotros, ya que estamos desarrollando un tema completamente nuevo, y queremos ver todos nuestros cambios ocurriendo en cuanto sucedan, voy a mantener las cosas fáciles para nosotros y sólo vamos a sacar nuestro Tema Casper aquí. Cuando eso esté listo, podemos empaquetar eso, y luego subirlo a nuestro sitio en vivo una vez que lo creemos. Para eso lo que voy a hacer es abrir nuestro proyecto en mi editor de código. Como se mencionó anteriormente, el editor de código que estoy usando para esta clase es Visual Studio Code. Voy a abrir una nueva Ventana en ese programa. Aquí puedes ver todas estas diferentes advertencias. Voy a cerrar eso. Déjame ampliar esto y luego lo que voy a hacer es dar clic en “Abrir” aquí. Desde aquí, entra en mi carpeta Código, entra en mi carpeta Skillshare y abre el sitio Ghost. Al cerrar ese menú de bienvenida aquí, se puede ver que tenemos tres carpetas: Contenido, Actual, y Versiones. Entrémonos en Contenido y vayamos a Temas, y aquí está nuestro código temático para Casper. Tenemos un montón de código diferente dentro de varios archivos. En esta clase, en lugar de cambiar las cosas que ya existen, quiero empezar de abajo hacia arriba para que ustedes tengan una comprensión fundamental. Lo que voy a hacer es literalmente empezar a eliminar algunos de estos archivos. Voy a eliminar todas las plantillas excepto las obligatorias. Si volvemos a la entrada del blog o a la documentación, solo hay dos plantillas que se requieren en el tema Ghost, y esas son index.hbs y post.hbs. Como se mencionó antes, eso tiene sentido porque un blog en su forma más básica es simplemente una colección de posts. Si no tienes un lugar donde la gente pueda ver todas tus publicaciones y entonces no tienes una plantilla para mostrar una publicación, entonces básicamente no puedes tener un sitio web. No hay demasiados archivos requeridos, solo necesitas asegurarte de tener un index.hbs y un post.hbs. Vamos a destripar todas nuestras plantillas aparte de esas, que podamos aprender a reconstruir. Me desharé de todas estas plantillas aquí. Yo también me voy a deshacer de todo lo que hay en la carpeta de activos. Vamos a estar poniendo nuestros propios bienes, y luego dentro de nuestros parciales aquí, nos vamos a librar de todo lo que hay dentro también. Lo que voy a hacer es bajar esto a un nivel muy básico. Vamos a quitar todo eso y sólo voy a tener una página 1 que diga Índice, y luego en post, voy a desglosar esto y tener una plantilla que solo diga Post. Debido a que hemos hecho cambios en nuestros archivos hbs, hemos eliminado algunos archivos hbs, es una buena idea reiniciar nuestra instancia de Ghost. Voy a volver a la terminal aquí, y voy a ejecutar el comando Ghost restart, que como podrían sospechar, que como podrían sospechar, detendremos nuestra instancia de Ghost y luego volveremos a iniciarla. A nivel local, esto no debería tardar demasiado en hacerlo. Ahí lo tienes. Se reinicia. Volvamos ahora a nuestro sitio web de Ghost y veamos cómo se ve. Ahí se puede ver en el directorio raíz, estoy mirando la plantilla de índice. Obviamente, no hay nada ahí excepto h1 pero eso es lo que esperamos porque acabamos de destripar eso. Entonces si voy a un post específico, entonces, ¿cuál fue uno de los posts que teníamos? Si vuelvo a mi administrador de Ghost aquí, y voy a pasar a mensajes de ejemplo, así que al hacer clic en View Post, verás que sólo tenemos post. No hay datos dinámicos, pero se puede ver claramente que hemos destripado la plantilla de índice que estaba sirviendo en la página de inicio y hemos destripado la plantilla de post. Eso es lo que quiero que veas es que ahora somos capaces golpear esas dos plantillas con nuestras dos rutas centrales. Las rutas, por supuesto, son una de las cuatro categorías de las que hablo en esta guía. Hablamos de plantillas y hablamos de rutas. Entramos en mucho detalle sobre las rutas porque las rutas son algo que es muy importante en el desarrollo del tema Ghost. En realidad, el archivo que cambias tus rutas no está en realidad en tu tema. Antes de empezar a cambiar nuestras rutas y actualizar nuestras plantillas, solo quiero llamar su atención sobre ese archivo. Es el archivo routes.yaml y el lugar para buscarlo está dentro de tu directorio de configuración, dentro de tu directorio de contenido. Solo voy a hacer clic en esto, y echar un vistazo al archivo routes.yaml. Esta es la configuración predeterminada para las rutas como hablamos en la entrada del blog aquí, este es el predeterminado. Entraremos en más detalle sobre cómo funciona esto y la sintaxis detrás de YAML en el próximo video. Pero esencialmente a lo que quiero llamar su atención, es que aquí tenemos nuestras rutas definidas, y aquí tenemos una sola ruta de recolección, que está cargando nuestro índice, y se está sirviendo en la ruta raíz. Esto es lo que determina que estamos ejecutando nuestro índice de publicaciones de blog en la ruta raíz. Entonces este enlace permanente aquí nos dice que estamos corriendo la babosa de nuestra publicación de blog justo después de la primera tajada. Por supuesto, podría tener sentido que la página de inicio sea un índice de publicaciones y si entramos aquí y escribimos posts de ejemplo que mostrará una publicación. Pero todo esto es personalizable dentro de Ghost también. Podemos actualizar estas rutas, lo cual haremos en un video futuro. De hecho, creo que es el siguiente video. Esperemos que esa no sea demasiada información. Yo lo voy a dejar ahí y vamos a profundizar en rutas y plantillas en el siguiente video. Pero lo que quería demostrar en este video fue cómo funciona el administrador. Es bastante simple una vez que te pones la cabeza alrededor de él. Solo estamos ejecutando una colección de publicaciones. Tenemos algunas páginas a un lado, y categorizamos nuestras publicaciones por etiquetas y autores. Podemos agregar datos a las etiquetas y podemos agregar datos a los autores, y podemos exhibirlo en nuestro tema Ghost también. Por último, podemos personalizar nuestras rutas utilizando el archivo routes.yaml, cual aprenderemos en el siguiente video. Te veré en el siguiente. 6. Estructura del tema y la plantilla por defecto: En esta lección, vamos a profundizar en la estructura temática y hablar de las diversas plantillas que componen tu tema Ghost. Vamos a adentrarnos en este diagrama aquí, y si tenemos algo de tiempo, vamos a adentrarnos más en el enrutamiento avanzado. Pero ahí hay mucho detalle. Así que empecemos aquí mismo con estructura temática. Ahora para explicar este diagrama, lo que tengo a la izquierda son las rutas. Entonces, dondequiera que estés accediendo a la página de inicio o a una página de blog , o a una página o post , terminarás por defecto, si vamos, aquí mismo, al archivo index.hbs o al archivo post.hbs. Quiero que ignores por el momento todas estas plantillas grises y entiendas que si todo lo que tienes en tu tema Ghost es un index.hbs y un post.hbs, y por supuesto, un hbs predeterminado opcional, que cubriremos en tan solo un segundo. No importa a qué ruta vayas, siempre terminarás incluso en una de estas plantillas. Ahora, estas plantillas entre el nombre de la ruta y estas plantillas predeterminadas son todas plantillas opcionales. Y estas plantillas opcionales permiten personalizar lo que aparece en rutas más específicas. Entonces, por ejemplo, si no quisiéramos nuestra página de índice en la página de inicio y una de las páginas específicas que va en la ruta de la ruta, no podemos establecer eso usando home.hbs. Este es probablemente el ejemplo más sencillo de todo el diagrama. Si vamos a la página de inicio y no tenemos un home.hbs, entonces vamos por defecto a indexar. Si hacemos eso, tenemos que actualizar también nuestras rutas. Te lo mostraré en tan solo un segundo. Pero moviéndonos más abajo, si entramos en el siguiente ejemplo, en la siguiente ruta, si miramos una ruta de índice, básicamente como mirar el blog en general o una vista filtrada de la colección general. Digamos que, por ejemplo, estamos viendo todas esas entradas de blog filtradas por un autor en particular. Si hay una plantilla llamada autor-de esa oferta.hbs, entonces esa plantilla se cargará por delante de estas plantillas. Por defecto, si vamos a una página de índice donde estemos filtrando por autor o etiqueta, irá a index.hbs. Pero si, por ejemplo, estamos filtrando por cierto autor y tenemos un archivo autor.hbs, entonces se servirá el código de ese archivo author.hbs. Pero si digamos, por ejemplo, estamos mirando al usuario Christopher, que es uno de mis usuarios en mi sitio Ghost en este momento, esa es la babosa para mi usuario. Si tengo una plantilla llamada author-christopher.hbs, eso se cargará por delante del archivo author.hbs y por delante del archivo index.hbs. Entonces esperemos que este diagrama comience a tener un poco más de sentido aquí, pero entraré en mostrarte cómo funciona esto realmente dentro del tema Ghost en tan solo un segundo. Entonces siguiendo esa misma lógica, aquí puedes ver si filtramos por una determinada etiqueta, por defecto obtendremos la plantilla index.hbs a menos que tengamos nuestra plantilla tag.hbs. Y si estamos filtrando por una determinada etiqueta y hemos establecido una plantilla personalizada para esa etiqueta específica, entonces servirá esa plantilla específica. Dirigiéndose a estas rutas para publicaciones y páginas individuales, si estamos accediendo a una página y no hay page.hbs, no se establece ninguna plantilla personalizada en la página, y no hay plantillas personalizadas específicamente para esa página, entonces lo haremos post de carga, pero sólo si ninguno de estos tres existe. Aquí hay muchas opciones para la página, podemos tener una plantilla page.hbs, podemos tener una plantilla personalizada pero que puede aplicarse tanto a publicaciones como a páginas, y te mostraré cómo haces eso en tan solo un segundo. O podemos tener una plantilla de página que se relacione con una página muy específica y que se cargará por delante de todos estos. Entonces esa es una comprensión paso a paso de lo que significan estas filas y columnas. Vamos en realidad a poner esto en práctica dentro de nuestro tema Fantasma. Entonces, en primer lugar, lo que quiero hacer es establecer un archivo default.hbs. Y lo que esto hace es sostener algún código de envoltura que va por ahí cualquier plantilla que se sirva aquí. Por eso lo tengo sentado en la parte superior. Esto significa que default.hbs se envolverá alrededor de cualquier plantilla que se esté sirviendo. Y esto es útil para cosas como encabezados y pies de página, que serán los mismos en cada página. Regresando a nuestro código, lo que voy a hacer es crear un archivo default.hbs. En nuestro archivo default.hbs, vamos a cargar aquí algún contenido HTML repetitivo. Voy a ponerlo en la etiqueta doctype. Inicia la etiqueta HTML, va a configurar Lang, y este es nuestro primer pedacito de código de manillar, profundizará en el manillar y cómo usar todos los ayudantes en un video posterior. Pero por ahora, ojalá, esto no requiera demasiada explicación. Yo sólo voy a tirar eso, y luego voy a poner en marcha mi etiqueta de cabeza, vamos a necesitar un título para nuestro documento, y voy a establecer un valor dinámico para esto también. Sea cual sea el meta título de la página, pondremos ahí, pondremos los juegos de caracteres ahí, utf-8, establecemos aquí el campo Meta de la ventanilla gráfica. Nuevamente, esto es todo contenido calderado por lo que estas son las cosas que harías en cualquier sitio web. Por lo que no voy a ir demasiado a fondo en este momento. Entonces voy a poner en es una etiqueta especial para insertar parte del código de cabeza que viene directamente del administrador de Ghost, que es solo cabeza de Ghost. Debajo de aquí, lo que voy a hacer es crear un encabezado y luego empezaremos a ver que ese encabezado aparezca en cada página. Entonces, en primer lugar, llegué a abrir una etiqueta de cuerpo y luego crear un encabezado con la clase de encabezado. Deshazte de esos. Entonces voy a traer aquí alguna estructura y CSS que ya he creado. Voy a traer algunas clases HTML o CSS que ya he determinado. Esta no es una clase CSS, así que estaré copiando y pegando algo de CSS sobre, solo para que se vea bien. Siempre es mejor cuando tu sitio web se ve bien. Entonces voy a agregar aquí el logotipo de cabecera, que si hay un conjunto de imágenes, así que si logo del sitio, poniendo otro ahí, si hay un logotipo del sitio, entonces vamos a cargar ese ahí. Para aquellos de ustedes preguntándose el símbolo at indica que ese es un objeto global. Pero de nuevo, aprenderemos más sobre el manillar en un video posterior. Si no hay ningún logotipo del sitio incluido en el sitio web, lo que vamos a hacer es emitir el título del sitio. Entonces debajo de eso, vamos a crear una navegación de encabezado, es poner un ayudante realmente práctico de Ghost que es sólo la etiqueta de navegación que va a dar salida a nuestra navegación con alguna estructura HTML predeterminada. Y luego después del encabezado, lo que voy a hacer es traer el contenido principal a través de esta etiqueta principal aquí y usar esta etiqueta especial aquí con tres llaves a cada lado y poner la palabra clave cuerpo ahí dentro. Ahora lo que esto va a hacer por cada plantilla que incluya el default.hbs va a cargar el contenido de esa plantilla dentro de esta etiqueta de cuerpo aquí. Hay un paso más que debemos hacer para que esto se cargue tanto en post como en index y es poner en una etiqueta especial en la parte superior de estas plantillas que se vea así. Se ve un poco como una etiqueta parcial la cual te verá en un segundo pero tiene ese signo de exclamación. Por lo que es una etiqueta especial que le dice a Ghost cargue en nuestra plantilla predeterminada alrededor de esta plantilla. Como mencioné antes, solo voy a copiar y pegar el CSS porque no quiero pasar demasiado tiempo en esta clase creando CSS cuando no estamos aquí para aprender eso. Entonces lo que voy a hacer es que tengo aquí una carpeta de CSS, voy a entrar en mis activos y pegar eso en. Y como puedes ver, estoy usando Bootstrap, que es un framework CSS, lo puedes encontrar en getbootstrap.com. Estoy usando la versión 5.1.1 y luego tengo un archivo CSS personalizado por delante de eso también. Entonces no vamos a hablar de CSS en esta clase pero tener ese CSS ahí al menos hará que nuestro proyecto se vea mucho más bonito. Lo que vamos a necesitar hacer ahora para poder ver estos cambios es porque hemos agregado una nueva plantilla, necesitamos reiniciar nuestra instancia de Ghost. Entonces voy a ir a hacer eso ahora mismo. Ejecuta Ghost, reinicia de nuevo , y luego una vez hecho eso, podemos volver a nuestro navegador aquí, cargar post de ejemplo, y deberíamos esperar ver el envoltorio de código predeterminado. Creo que he hecho un erratico aquí, creo que eso necesita ser un espacio ahí. Disculpas por eso, volvamos a refrescar a Ghost. Y luego volviendo a ese post, puedes ver que ahora tenemos nuestra navegación y el título de nuestro sitio apareciendo. Y eso va a ser lo mismo si pasamos a nuestra plantilla de índice. Aquí hay otro paso que me olvidé para traer ese CSS. Y eso es entrar en nuestro default.hbs y agregar en una etiqueta de enlace para traer ese CSS a nuestro proyecto. Y vamos a ir link rel style href igual. Y aquí lo que vamos a hacer es usar un ayudante. Vamos a utilizar el ayudante de activos, que va a tirar del CSS de ambos Bootstrap. Entonces dale un nombre de archivo aquí. Este ayudante buscará dentro de la carpeta de activos para este archivo en particular. Entonces, si tu CSS está anidado en una carpeta CSS, solo necesitas incluirlo allí, pero de lo contrario, alcance a la carpeta de activos. Solo voy a copiar y pegar eso para ahorrar tiempo y luego cambiar esto a main.css. Refresca por aquí, y puedes ver que nuestro encabezado está más bien formateado ahora. Entonces si voy a Inicio, obtenemos nuestra plantilla de índice. Si voy a la publicación de ejemplo, todavía obtenemos el encabezado, todavía obtenemos todo ese código pero en el contenido principal, tenemos un título diferente entrando. Entonces si inspecciono esto en nuestro Chrome DevTools, verás que estamos cargando post, que es el contenido dentro de la plantilla de post, dentro de la etiqueta principal. Si me voy a casa, se puede ver lo mismo otra vez, estamos corriendo índice dentro de main y eso es consistente con lo que tenemos aquí mismo. Entonces todo por encima de principal, tenemos el encabezado, tenemos nuestra cabeza HTML aquí arriba y eso se va a cargar en cada página porque estamos usando default.hbs. Se siente como si hubiéramos pasado una cantidad justa de tiempo en este archivo default.hbs. Entonces lo que podría hacer es llamarlo ahí para este video, y en la siguiente lección, comenzaremos a construir en más de estas plantillas que vemos aquí en nuestro diagrama. Crearemos un archivo home.hbs y algunas de estas otras plantillas también. 7. Plantillas opcionales y enrutamiento básico: En el último video, agregamos un archivo default.hbs a nuestro tema Ghost y luego lo incluimos en nuestra publicación en plantilla de índice. En esta lección, vamos a ver las plantillas opcionales adicionales que podemos usar para anular el contenido en index.hbs y post.hbs para ciertas rutas. El más obvio es la página de inicio, y ese es el que vamos a hacer primero. En realidad sí requiere que hagamos un cambio a nuestro archivo de rutas, pero un cambio muy menor. En realidad hay una parte de la documentación de Ghost que te muestra cómo hacer esto como parte de otros ejemplos dentro del enrutamiento. Puedes entrar en Temas, Enrutamiento, y aquí tenemos nuestra configuración base. Si nos desplazamos hacia abajo, tenemos bajo el encabezado usando una página de inicio personalizada, podemos cambiar nuestra configuración a esta. Podemos mover nuestra colección de índices fuera de nuestra ruta raíz y moverla al blog. Podemos anidar nuestras publicaciones de blog babosas dentro del blog y por lo tanto podemos configurar nuestro archivo home.hbs para que se ejecute en la ruta raíz. Vamos a hacer eso ahora mismo. Entrémonos en nuestras rutas en primer lugar y cambiemos esto por blog, babosa, y después por blog. Asegúrate de tener la varilla en ambos lados y luego aquí vamos a establecer una ruta específica para la ruta raíz y vamos a cargar la plantilla de inicio. Ahora, vamos a necesitar realmente hacer esa plantilla de inicio, así que dentro voy a escribir home.hbs y al igual que he hecho con estas otras plantillas, no vamos a pasar mucho tiempo codificándolas en esta lección, llegaremos a que en un video posterior. Pero solo quiero mostrarte cómo funcionan las rutas y las diferentes plantillas que se atienden en diferentes rutas. Solo voy a hacer lo mismo que antes y poner el h1 ahí y también voy a meter ahí la etiqueta predeterminada, así que carga el encabezado. Ahora, que hemos creado la nueva plantilla, necesitamos reiniciar nuestra instancia de Ghost, así que voy a ir aquí y volver a ejecutar Ghost restart. Esto es algo que tendremos que hacer cada vez que creemos o eliminemos un archivo en nuestro tema Ghost. Ahora, si volvemos a nuestra página web y vamos al directorio raíz, pulsa Enter verás que ahora estamos en la plantilla de inicio. Si voy al blog abajo y puedes ver que estamos ejecutando la plantilla de índice y si voy blog post ejemplo, ya verás que estamos ejecutando la plantilla de post. Ahora, al igual que vemos en el diagrama, si no tenemos una plantilla de inicio vamos a estar ejecutando index.hbs en la ruta de la página principal, pero si hacemos eso anulará la plantilla index.hbs. Bajando a la siguiente ruta, vamos a estar cargando la plantilla de índice por defecto en la ruta del blog. Nuevamente, como vimos, lo movíamos en nuestras rutas. Archivo YAML para ser blog en lugar de la ruta raíz, pero aquí si filtramos por cierta taxonomía o no vamos a conseguir la misma ruta. Como podemos ver en nuestro archivo de rutas, si vuelvo a él aquí, aquí tenemos estas taxonomías y esto nos permite filtrar índice vía etiquetas y autores. De nuevo, así que recuerda que creamos esa etiqueta de ejemplo antes. Si entro aquí y hago etiqueta, etiqueta ejemplo, verás que obtenemos la misma plantilla, obtenemos la plantilla de índice. Si entro aquí y uso una taxonomía diferente y voy, Autor Christopher que dejar claro es mi babosa aquí en mi usuario así que aquí puedes ver Autor Christopher, esa es la URL a la que irías, para filtrar los posts por autor. Ya veremos eso cuando pasemos por el bucle de índice cuando hablemos de contextos y nos ayudemos más adelante en la clase. Pero el punto que estoy haciendo aquí es porque no tenemos configurada ninguna plantilla de autor o etiqueta, siempre vamos a por defecto a la plantilla de índice. Siempre va a servir la plantilla de índice si no tenemos ninguna de estas configuraciones. Configuremos algunas de estas plantillas ahora y veamos esto sucediendo en tiempo real. Lo que voy a hacer es volver a nuestro Editor de Código y dentro de nuestra carpeta temática Casper y voy a crear un tag.hbs y crear un archivo author.hbs. En nuestro tag.hbs voy a copiar el mismo formato que todas estas otras plantillas y solo voy a poner etiqueta aquí para que sepamos que estamos en la plantilla de etiquetas y la plantilla de autor aquí. Reinicia nuestra instancia Ghost ya que hemos agregado nuevos archivos y luego si vuelvo a nuestra página web aquí y estamos en la ruta Author Christopher aquí, Si golpeo Enter en eso verás que la palabra aquí cambia a autor, lo que significa que estamos ahora ejecutando ahora la plantilla author.hbs en lugar de la plantilla index.hbs. Esto, por supuesto, no lo anula para la ruta del blog. Todavía tenemos la plantilla de índice estándar para esa, pero si estamos filtrando por autor vamos a ver la plantilla de autor y si estamos filtrando por una determinada etiqueta como etiqueta de ejemplo vamos a estar cargando la plantilla de etiquetas. Eso ya debería estar bastante claro. También podemos crear una plantilla para un autor muy específico o una etiqueta muy específica. Voy a hacer eso ahora mismo. Tenemos una etiqueta aquí que se llama “empezar”. Tan solo quiero mostrarte esto para poder mostrarte que hay una diferencia. En este momento, ambas etiquetas van a estar cargando esa plantilla de etiquetas. Pero, ¿y si queremos ejecutar código diferente basado en una etiqueta específica o en un autor específico? Bueno, lo que podemos hacer en ese caso es crear una plantilla de autor personalizada para esa específica. Creo que he hecho clic en nuevo archivo en el equivocado ahí. Tienes que hacerlo dentro de nuestra carpeta temática Casper y lo que voy a hacer es hacer una plantilla con guión de autor seguido de la babosa del autor, así que para mí va a ser Christopher, hbs y aquí voy a copiar ese código, ve por aquí y voy a decir simplemente Christopher autor plantilla. Entonces voy a hacer lo mismo para tag, voy a ir New File, tag dash seguido de la babosa de la etiqueta, que es etiqueta de ejemplo, seguido de dot hbs y hacer lo mismo que antes aquí , plantilla de etiqueta de ejemplo. Ahora, de nuevo, porque hemos creado nuevas plantillas, voy a reiniciar y luego me voy a ir aquí a empezar porque no hemos anulado esa plantilla, todavía va a usar la plantilla de etiquetas. Pero si vamos aquí a ejemplo de etiqueta, verás que ahora estamos ejecutando una plantilla diferente a la plantilla de etiquetas estándar. Si voy aquí a Author Christopher, verás que estamos ejecutando la plantilla de autor Christopher mientras que si vamos al autor fantasma, que está ejecutando la plantilla de autor estándar. Aquí lo que estás viendo es la estructura temática en acción. Sé que aquí no pasa mucho porque no hay contenido. Llegaremos a eso en un video posterior. Pero esto debería empezar a reforzar lo que está sucediendo aquí en este diagrama. Tenemos nuestros archivos core en index.hbs y nuestro post.hbs y luego tenemos todas estas plantillas adicionales que podemos usar para personalizar ciertas rutas. Voy a avanzar más abajo en el diagrama ahora y mirar las plantillas adicionales que se sientan en la parte superior del post.hbs. Como vemos aquí para la página, si no establecemos ninguna plantilla específica para la página, sólo va a por defecto publicar, que va a ser la misma plantilla que una publicación. Pero si establecemos un archivo page.hbs, eso anulará lo que se muestra en las publicaciones. Lo que voy a hacer es que voy a correr por esto ahora. Voy a volver a entrar en nuestro tema, vamos a cerrar algunos de estos archivos, y voy a añadir en una página.hbs. Nuevamente, lo que voy a hacer es reemplazar eso por 'Esto es una página' y luego reiniciemos instancia de Ghost. Regresando a nuestra página web ahora, si estamos en una publicación específica, que recuerdan cambiamos la ruta a blog y luego le sigue el post slug. Vamos a estar en un post, pero si vamos a una página, va a decir: 'Esto es una página'. El siguiente plantilla que anulará esta plantilla de página y la plantilla de publicación es una plantilla personalizada. Regresando al diagrama, creamos una plantilla personalizada escribiendo guión personalizado seguido de un nombre arbitrario que decidimos. El modo en que establecemos eso en cualquier publicación o página en particular es en el admin. Te lo mostraré ahora mismo. Volvamos a nuestro tema aquí. Vamos a crear una costumbre. Lo que voy a hacer, lo verás más adelante en la clase, es tener un diseño alternativo para páginas y publicaciones que tenga un encabezado de imagen. Voy a llamar a este custom-header.hbs. Por ahora, como no nos estamos metiendo en el código, sólo nos estamos metiendo en los conceptos de rutas y plantillas, voy a llamar a este Conjunto de Plantillas Personalizadas en Ghost Admin. De nuevo, creamos un nuevo archivo, así que vamos a necesitar reiniciar nuestro servidor de nuevo. De nuevo, esto no debería tomar demasiado tiempo si lo estamos ejecutando localmente, lo cual somos, y luego voy a entrar a nuestro admin aquí y digamos solo éste antes de publicación del ejemplo. Voy a dar click en eso. Voy a dirigirme a los ajustes de post por aquí. Desplázate hacia abajo, y creo que necesito refrescarme por aquí. Vamos otra vez, desplázate hacia abajo. Se puede ver que ahora tenemos un campo extra aquí llamado plantilla, y tenemos este menú desplegable. Podemos elegir la plantilla predeterminada o ésta, cuyo nombre va a ser igual a lo que ponemos después del guión personalizado en el nombre de la plantilla. Nosotros lo llamábamos custom-header. Voy a dar clic en esta plantilla aquí para cabecera, “Actualizar”, y luego cuando veamos esta publicación, verás que dice, Plantilla personalizada, Set in Ghost Admin. Esto va a ser diferente a las otras publicaciones como example-post, eso sigue usando la plantilla de post, y lo bueno de esta plantilla es que podemos poner esto en una página también. Todo lo que tenemos que hacer es entrar en nuestra página. Digamos que es contribuir, dirígete a nuestra configuración de página, y también podemos establecer esto en una plantilla alternativa. Estamos casi a través del diagrama aquí. Simplemente tenemos page-slug, post-slug, y al igual que lo hicimos aquí arriba para autor-escoria y tag-escoria, podemos usar una plantilla personalizada para una página muy específica o una plantilla personalizada para una publicación muy específica. Sólo por el bien de la integridad, vamos a correr por eso también, pesar de que es exactamente el mismo concepto que los otros. Voy a entrar aquí y crear, hagámoslo por la página sobre. El sobre page-slug es sobre, así que simplemente hacemos page-about, y luego esta es la plantilla específicamente para el about-page. Entonces hagámoslo para post también. Hagamos ejemplo post. Haremos una plantilla específica para un postejemplo-post. Esta es la plantilla específicamente para ejemplo-post. Nuevamente, reiniciando nuestro servidor Ghost porque creamos algunos archivos nuevos. No tendremos que hacer esto tanto en los videos posteriores, por cierto, porque ahora solo estamos creando todos nuestros archivos. Pero entonces una vez que empecemos a trabajar en construir algún código aquí, los archivos ya habrán sido creados, y por lo tanto, no tendremos que reiniciar nuestro servidor cada vez solo para que lo sepas. Si te estás cansando de reiniciar. De vuelta a nuestro sitio web de Ghost ahora, si nos dirigimos a la página sobre, puedes ver que ahora estamos ejecutando la plantilla específicamente para la página sobre. Si voy a la publicación de ejemplo del blog, puedes ver que estamos ejecutando la plantilla específicamente por ejemplo post. Para diferenciar eso de todo lo demás, si vamos al blog bienvenido, vas a ver que estamos ejecutando la plantilla personalizada, y si vamos a, digamos, otro blog que no tiene plantilla personalizada él o tiene una plantilla específica de post en él. Sólo vamos a este, diseño. puede ver que utiliza la plantilla de post estándar. Simplemente predeterminará post.hbs si no está usando una de las otras plantillas opcionales que se sientan encima de post.hbs. Eso cubre aquí todo el diagrama. Hay algunas otras rutas y plantillas, pero estas son las principales rutas y plantillas. Si quieres conocer más sobre las otras rutas, puedes dirigirte a la documentación. No es demasiado complicado. Si nos dirigimos a la estructura, verás que aquí también tenemos algunos otros, como private.hbs y error.hbs. no hablar, tenemos los amp.hbs también. Todas estas son plantillas adicionales que no son esenciales para entender en cuanto a la estructura. tanto que nuestra guía por aquí, estas son las que son importantes de entender porque se sientan encima de tus plantillas de núcleo, que son index.hbs y post.hbs. Creo que este fue otro largo y aún no hemos llegado a rutas, así que vamos a meternos en rutas en el siguiente video. Pero esto debería perforar en lo que significa este diagrama y cómo podemos empezar a personalizar diferentes rutas sobre nuestro tema Ghost usando diferentes plantillas. 8. Enrutamiento personalizado: En este video, vamos a profundizar un poco en el enrutamiento. En el último video, miramos nuestro archivo routes.yaml, que está en nuestra carpeta de configuración aquí, e hicimos un cambio. Nos movimos nuestra plantilla de índice o nuestro blog, se podría decir, fuera de nuestra ruta de ruta y la reemplazamos por nuestra plantilla de inicio. Pero hay mucho más que podemos hacer dentro de las rutas. No entraremos absolutamente en todos los escenarios de rutas en este video, ya que no creo que sea particularmente práctico. Pero para que empecemos, echemos un vistazo a la documentación. Si alguna vez te quedas atascado en qué hacer con las rutas, puedes ver la documentación aquí o si prefieres una explicación por mi parte, puedes consultar mi artículo donde voy más profundo en configurar y actualizar rutas. Entramos en rutas básicas, rutas básicas con datos dinámicos, rutas básicas con formato personalizado, colecciones, filtrado de colecciones, la lista continúa. He organizado mi guía de una manera que siento que tiene más sentido desde un entendimiento de abajo hacia arriba. Entonces creo que estos chicos se hacen en la documentación, pero diferentes trazos para diferentes personas, lo que te ayude a entenderlo mejor. Pero en este video, lo que vamos a hacer es que les voy a mostrar algunos ejemplos de algunas de las cosas de las que aquí hablan. Eso te va a ayudar a configurar prácticamente cualquier tipo de ruta que te gustaría en tu sitio Ghost. Si nos desplazamos hacia abajo, podemos ver la configuración base, que es lo que teníamos antes, que es un solo índice se sirve en la ruta de ruta y nuestras rutas individuales se sirven en esa ruta de ruta también a través de su particular babosa. Entonces tienes las taxonomías también. Si desea filtrar por una determinada etiqueta, puede utilizar esta estructura aquí o esta estructura. Vimos todo eso en el último video. Pero si nos desplazamos por aquí, podemos usar algunas rutas más dinámicas y algo llamado rutas personalizadas. Aquí vamos. Ruteo básico. Lo que podemos hacer es literalmente configurar nuestra propia ruta y luego establecer una plantilla que se mostrará cuando vayamos a esa ruta. Hagámoslo ahora mismo. Déjame cambiar a mi editor de códigos. Déjame simplemente crear algo llamado página especial. Vayamos aquí, y lo llamaré página especial. Este nombre de archivo no está siguiendo ninguna de nuestras convenciones desde antes, por lo que no se va a cargar automáticamente en ciertas situaciones. Solo estamos usando esto para poblar una ruta. De nuevo, ni siquiera me molestaré con la etiqueta predeterminada esta vez, solo llamaré a esta página especial. De hecho, podríamos querer crear una plantilla donde no tengamos ese envoltorio predeterminado que va alrededor. A lo mejor esta es esa página especial. Entonces en mi archivo de rutas, lo que voy a hacer es simplemente agregar eso a nuestras rutas aquí arriba con una tira a cada lado. Simplemente voy a crear una ruta, página especial, y luego después voy a poner el nombre de la plantilla sin el.hbs. Voy a pegarle a Save. Debido a que hemos hecho cambios en nuestro archivo de rutas, reinicia nuestro servidor Ghost. Ahora si vuelvo aquí a mi página web, pasémoslo a allá, y vayamos a estas rutas especiales de página. Se puede ver que estamos en esta plantilla de página especial, que no tiene ninguno de nuestro código de calderilla. No el ejemplo más práctico, sino que solo va a mostrar que podemos crear nuestras propias plantillas personalizadas y cargarlas en rutas personalizadas. Una extensión de esto son los canales personalizados, a los que llegaré en tan solo un segundo porque son un poco más complicados. Lo que quiero hacer en cambio es mostrarte cómo puedes dividir tu colección de post core en diferentes “colecciones” aquí porque creo que la redacción aquí de Ghost puede ser un poco confusa. En realidad no hay colecciones múltiples desde la perspectiva de tu administrador. A lo que me refiero con eso es que si entramos en el admin poniendo fantasma tras el nombre de nuestro sitio, se puede ver que sólo hay una colección de publicaciones aquí. No hay colecciones múltiples. Pero lo que podemos hacer es simular diferentes colecciones a través de nuestro enrutamiento y podemos dividirlas a través de etiquetas. Echemos un vistazo en la documentación, lo que quiero decir con eso, si nos desplazamos hacia abajo a colecciones, tenemos la colección predeterminada que teníamos antes, tenemos usando una página de inicio personalizada la cual configuramos en el último video, y luego también podemos crear dos “colecciones” diferentes para algo como tal vez teníamos un blog y un podcast alojados en este mismo sitio web, entonces podríamos dividirlas usando esta sintaxis aquí. Adelante y hagámoslo ahora mismo sólo con fines de demostración. Vamos a entrar en nuestras publicaciones aquí y digamos que estamos empezando un podcast. Voy a crear un nuevo episodio, Podcast Episodio 1, y luego aquí dentro, le voy a dar la etiqueta principal de podcasts. Por supuesto, para que esto funcione, vamos a tener que pasar por todas estas otras publicaciones publicadas y cambiar la etiqueta primaria a blog. Voy a mover eso al frente para que sea la etiqueta primaria. Hit Update sobre eso. Sólo voy a acelerar rápidamente por aquí y hacer eso en cada puesto. No te aburriré dejando que me veas hacerlo en tiempo real. A menos que me haya perdido una, deberíamos tener todas nuestras entradas de blog con Blog como etiqueta principal. Creo que podemos ver aquí en el resumen que es cierto. Este Podcast Episodio 1 es podcast. Digamos que no queremos mostrar el podcast en el mismo feed que los blogs, y no queremos mostrar los blogs en el mismo campo que los podcasts. Tiene sentido, ¿verdad? Lo que podemos hacer es crear o simular estas diferentes colecciones. Si entro en mi archivo routes.yaml, lo que puedo hacer aquí es agregar en un filtro para que solo muestre las publicaciones que han sido etiquetadas con blog. Si volvemos a la documentación aquí, tenemos el ejemplo aquí mismo. Esto es todo lo que necesitamos agregar. Como muestra el ejemplo, si tuviéramos una plantilla personalizada solo para el blog y una plantilla personalizada solo para el podcast, ahí es donde la pondríamos aquí también, pero podemos usar la misma plantilla de índice para ambos. Eso no es un problema. Lo que voy a hacer es copiar la estructura para nuestro podcast y luego reemplazar todas las instancias de blog por podcasts. Ahora estamos simulando dos colecciones diferentes en nuestra página web y lo estamos haciendo a través de la etiqueta primaria. Reiniciemos nuestra instancia de Ghost para que podamos ver estos cambios en nuestra página web. regresar a nuestra página web aquí, página especial sigue funcionando. Eso es genial. Si vamos al Blog ahora, ya veremos, y esto es algo para lo que realmente tenemos que tener un post loop para. Voy a saltar un poco adelante, sólo para que puedas ver esto realmente funcionando. Iba a esperar hasta que escribamos algún código, pero sólo voy a tener que escribir un poco de código para que ustedes vean qué está pasando aquí. Solo voy a crear para cada bucle poder mostrarte qué publicaciones se están devolviendo en esta plantilla. Yo sólo voy a escribir título y vamos a formatear eso como una lista. Todo lo que está haciendo este código es bucear a través de todos los títulos postales que se están sirviendo en esa ruta en particular. Si vuelvo aquí, refresca. Ya verás en la plantilla de blog, podemos ver todos los títulos de las publicaciones que tienen la etiqueta principal de blog. Pero si vamos ahora a podcasts, ya verás que tenemos justo el título del episodio del podcast. Como puedes ver aquí, seguimos usando la misma plantilla, el índice de palabras se está mostrando en ambos, pero lo que estamos haciendo es simular dos colecciones diferentes a través de nuestro archivo routes.yaml. Sólo para que quede claro, si entramos a nuestro admin, todos estos vivirán en la misma zona. Aquí solo hay una colección, a diferencia de otras plataformas editoriales. Eso es algo importante a tener en cuenta. Por eso me gusta usar la palabra simular colecciones diferentes porque en el back-end, solo hay una colección y solo estamos simulando diferentes basadas en la etiqueta primaria. Taxonomías, creo que son bastante fáciles entender y no hay muchas opciones para cambiarlas. Podemos deshacernos de las taxonomías por completo o podemos cambiar estas palabras aquí. Pero aparte de eso, no hay mucho que puedas cambiar con taxonomías. El tercer tipo de ruta que repasaré en este video antes de seguir adelante son los canales. Canales, como dice en la documentación, si nos desplazamos hacia abajo, pasando taxonomías, es una corriente personalizada de contenido paginado que coincide con un filtro específico. El mejor modo de pensarlo es como un conjunto de resultados de búsqueda permanentes. Podemos llevar un filtro hacia abajo parte de nuestra colección y crear una ruta para ver esa porción filtrada de contenido. Aquí en la documentación, se puede ver que es justo lo mismo que una ruta personalizada, excepto que vamos a poner el canal controlador debajo, y luego vamos a establecer el filtro. Vayamos a hacer eso ahora mismo. Recuerda que antes creamos nuestra propia etiqueta y nuestro propio autor, vamos a crear un canal personalizado. Sólo voy a llamarlo canal personalizado. Pero puedes hacer esta ruta lo que quieras, obviamente. Entonces voy a escribir canal de controlador. Eso le va a decir a Ghost que este es un canal y no una ruta personalizada normal. Entonces lo que voy a hacer es añadir en el filtro. Va a ser etiqueta, necesita ser etiqueta de ejemplo, y luego agregamos en el plus aquí para agregar en otra condición con el autor primario, que es igual que etiqueta primaria de Christopher. También podemos personalizar esto si queremos. Podríamos agregar en otra plantilla. Podríamos hacer una plantilla de índice secundaria si no quisiéramos que por defecto la plantilla de índice normal aquí. Pero creo que eso debería estar bien. Entonces si me refresco aquí porque necesitamos refrescar cada vez que cambiamos el archivo routes.yaml, y vamos a esas rutas en nuestro sitio web, canal personalizado. Ahora puedes ver solo tenemos post de ejemplo porque ese es el único post que ha sido etiquetado con etiqueta de ejemplo y es por el autor principal de Christopher. En realidad, sólo hay un post que es del autor de Christopher y ha sido etiquetado etiqueta de ejemplo. Pero se obtiene el punto. Se está filtrando todas nuestras publicaciones y creando una ruta específica para ese conjunto filtrado de contenido. Esto es realmente importante porque si tienes una publicación grande y estás poniendo mucho contenido aquí, vas a querer mostrarlo de diferentes maneras. De las formas en que organizas tu contenido, obviamente a través de etiquetas predominantemente, también puedes filtrar vía autor también, pero las etiquetas forman la base de tu organización. A través de rutas, lo que podemos hacer es usar esas etiquetas, usar esos autores, para crear canales personalizados y colecciones personalizadas. Hay algunos ejemplos más por los que podría pasar por los que hablo aquí, pero creo que sería mejor sólo leer estos. Muchos de estos no se van a aplicar a tu circunstancia específica, sino los principios básicos aquí, rutas personalizadas, canales personalizados, que es esencialmente una ruta personalizada con canal controlador y filtro, y luego dividiendo tu colección en diferentes colecciones, que me gusta llamar simulando, y usando una etiqueta en particular u otra calidad definitoria para dividir la colección en estas diferentes colecciones. Siento que eso es lo más importante que debes saber en términos de enrutamiento en Ghost. Como mencioné antes, creo que el enrutamiento y la estructura de plantillas personalizadas en Ghost es algo que es bastante único en esta plataforma y te da mucha flexibilidad en cuanto a SEO o cómo quieres organizar tu contenido. Se trata de un sistema realmente inteligente que una vez que tienes la cabeza alrededor, es muy potente y puedes empezar a personalizar de un número infinito de maneras. Nuevamente, si la documentación en la página oficial no tiene sentido particularmente para usted, puede referirse a mi guía, que lo explica de una manera que tiene más sentido para mí. Pero en términos de aprendizaje, algunas personas les gusta aprender a través de la documentación, a algunas personas les gusta aprender visualmente, otras les gusta aprender a través de guías como esta, entonces lo que sea que te ayude a entender los conceptos. Como siempre, si no entiendes nada, siempre puedes hacer una pregunta a continuación. Pero entre estos dos recursos, debería ser capaz de entender el enrutamiento personalizado. Simplemente lo vamos a dejar ahí y pasar a escribir realmente algún código ahora. Te veré en el siguiente video. 9. Programar dentro del contexto de la publicación: En las tres lecciones anteriores, configuramos nuestro tema fantasma con un montón de plantillas personalizadas, como se puede ver aquí. Y actualizamos nuestro archivo rutes.yaml para crear nuestras propias rutas personalizadas. En este video, en realidad vamos a empezar a codificar nuestras plantillas porque obviamente acabamos de poner el mínimo desnudo aquí sólo para ilustrar el punto de rutas y plantillas. Obviamente, no queremos que este contenido sea el único contenido que se muestra en la página sobre. Es hora de empezar realmente a traer parte del contenido dinámico de nuestro administrador fantasma y mostrarlo dentro de nuestro tema. De lo contrario, ¿cuál es el punto? Lo que voy a hacer es dirigirme a la documentación y tengo la página en contexto ya abierta. contexto es la siguiente sección de mi guía también. Recuerda las cuatro secciones de plantillas, rutas, contextos, y ayudantes. El contexto es básicamente como el alcance en el desarrollo del tema fantasma. Lo que necesitamos saber es qué datos tenemos a nuestra disposición en qué plantillas. Según afirma en la documentación oficial de fantasmas, hay seis contextos diferentes, y entro en cada uno de ellos con más detalle en mi guía aquí. Si desea ver la lista completa de atributos en cada contexto, puede ir a la documentación. Pero vamos a quedarnos atrapados y empezar a codificar nuestras plantillas. Con el tiempo creceremos una comprensión más profunda de lo que realmente significan estos contextos. Si me dirijo a mi editor de códigos aquí, voy a cerrar todas mis ventanas abiertas aquí, o abrir pestañas más bien. Voy a entrar en la plantilla index.hbs. Ahora antes, como lo vimos para que yo demostrara canales, tenía que poner en nuestro primer bucle Foreach. Pero no entré en mucho detalle sobre cómo funciona esto. Obviamente, en plantillas como índice o cualquier otra plantilla de índice personalizada, vamos a correr por un bucle de publicaciones. El primer tag que vamos a ver es el tag para Foreach. Ahora lo que hace esto es que recorre cada post que se mostrará en la ruta en particular que está viendo esta plantilla. Después tendremos acceso dentro de este bloque a todos los atributos sobre el contexto particular de lo que estamos recorriendo. En temas fantasmas, la única vez que realmente estamos usando un bucle Foreach es recorrer los diferentes posts de nuestra colección general. Entonces dentro de cada iteración del bucle, tenemos acceso a todos los atributos del contexto post. De acuerdo, entonces volvamos a la teoría aquí y veamos los contextos. Podemos bajar al contexto post aquí. Si nos desplazamos hacia abajo, podemos ver la lista de atributos de objeto. Como puedes ver, utilicé Tidal en este bucle en particular, pero tenemos acceso a la URL, la imagen destacada. Tenemos acceso a todos estos datos dentro de cada iteración del post loop. Ahora, por supuesto, tenemos acceso a esta información en una plantilla de post también para una publicación individual, te mostraré cómo abrir ese contexto muy pronto. Pero por ahora, entiende que dentro de este bucle Foreach para cada iteración de este bucle. Por lo que el contenido dentro de este bloque, tenemos acceso a los contextos post. Eso nos dará la capacidad de sacar datos de cada publicación contenida dentro de nuestro sitio web fantasma. Lo que voy a hacer es que voy a construir esto a algo mejor que sólo una lista. Aquí arriba, tecleemos en el blog. Aquí puedes ver nuestra lista de entradas de blog, pero ninguna de ellas está enlazada. Entonces esto es bastante inútil. Esto no nos resulta muy útil en este momento. Una cosa que quiero hacer antes de continuar, solo pensé esto, es deshacerme de este episodio del podcast y eliminar todas las etiquetas del blog también porque no vamos a estar ejecutando un blog y un podcast sobre este particular sitio web. Eso fue sólo con fines de demostración. Así que ten paciencia conmigo mientras hago esto, voy a adelantar rápido y me reuniré contigo después quitar las etiquetas del blog de todas nuestras publicaciones. Eso es hecho. El motivo principal por el que quería limpiar eso es porque vamos a estar dando salida a la lista de etiquetas en cada publicación individual. No quería tener blog sobre ellos. Ahora que he refrescado la página, puedes ver que hemos perdido todas nuestras entradas de blog aquí. Solo necesito volver a mi archivo routes.yaml y volver a ponerlo en lo que era antes. Voy a quitarle el filtro y quitarle este podcast efectos de colección. Te llevaré algunas de estas otras rutas aquí porque no necesitamos usarlas. Eso fue sólo una prueba de concepto. Me desharé de página especial aquí. Elimina esa. Eso es todo lo que necesitamos para nuestro tema de fantasmas en particular. Voy a, por supuesto, reiniciar nuestra instancia fantasma porque hemos hecho cambios en el archivo de rutas y eliminado un archivo de manillar. Si refresco por aquí puedes ver la lista completa de todos los mensajes que tenemos en nuestro sitio. Empecemos a construir esos fuera. Si cierro el archivo routes.yaml. Lo que voy a hacer es empezar a usar algunos de los atributos que tenemos en el objeto del puesto avanzado y construir una bonita postal que luego podemos usar para hacer click en para entrar en la página de listado de un solo post. Aquí están los chicos de referencia. Si alguna vez te pierdes de qué información puedes obtener de una publicación en particular, todo está listado aquí en la documentación de fantasmas. Pero por ahora, voy a empezar a redactar estos posts. En lugar de una lista aquí, lo que voy a hacer es, primer lugar, un poco de formateo. Voy a poner todo esto en un contenedor de ancho de página para que no se extienda el ancho completo de la página. A menos que estemos en un tamaño de pantalla más pequeño, claro. Lo que voy a poner aquí, son todos los posts. Entonces voy a añadir un poco de descripción. Aquí encontrarás todos los mensajes. De acuerdo, entonces voy a crear un contenedor para estos posts. Estos nombres de clase se relacionan con clases que ya he configurado en un archivo CSS. Si te preguntas de dónde viene mi toma de decisiones sobre esto, por eso. Pero para ti va a ser diferente dependiendo qué estilos y estructura quieras para tu propio tema fantasma. Pero para mí teniendo un interior en div con la clase de posts, soy capaz de formatear en línea. Entonces lo que voy a hacer dentro de cada iteración de este bucle es abrir una postal y luego darle la clase adicional de tarjeta, que es una clase bootstrap. Le daremos un poco de formato agradable. Entonces voy a abrir una etiqueta if. Esto nos permite comprobar primero si el atributo está realmente establecido. Si hay una imagen destacada, vamos a ejecutar el código dentro de este bloque aquí mismo. Y si no, voy a poner, declaración L, vamos a ejecutar el código dentro de este bloque. Todavía quiero marcador de posición la imagen para mostrar si no hay una imagen destacada. Yo sólo voy a poner en imagen SRC. Digamos que esta es nuestra imagen de marcadores de posición. Este sitio web via.placeholder.com nos permite poner en una imagen de marcador de posición de las dimensiones que queramos. Entonces sólo voy a poner en esta dimensión porque coincide con las fotos que ya tenemos, en nuestro sitio fantasma. Entonces para nuestra, si verdadera afirmación, voy a poner en, generalmente me gustaría optimizar estas imágenes en base a ciertos tamaños de pantalla. Pero por ahora, sólo voy a darle un solo SRC y voy a usar la ayuda en URL de imagen. Todavía no hemos entrado en ayudarnos, pero hay pequeñas palabras clave que nos ayudan a hacer algo dentro del desarrollo del tema fantasma. Entonces voy a tomar la imagen destacada. Voy a pedir la talla mediana. También, voy a sumar en otro condicional aquí para el alt si hay un alt. Voy a ir a abrir otro si aquí. Si se ha establecido una alt imagen destacada para este post en particular, entonces lo que quiero ver es la etiqueta alt. Dentro de la etiqueta alt, quiero poner en el valor de la imagen destacada alt. También le voy a dar una clase para formatear. Voy a darle imagen postal, que es una clase que definí, y luego la clase bootstrap de imagen de tarjeta top. Si queremos, podemos ahorrar eso y echar un vistazo a lo que tenemos hasta ahora. Podemos volver a aquí y se puede ver que nada está pasando por el momento. Tenemos nuestras postales y parece que podríamos haber cometido un error aquí en nuestro SRC. Mi error fue decir imagen destacada. Ese nombre tendría más sentido para mí, pero en Ghost, es sólo una imagen característica. Voy a guardar eso, vuelve atrás, y ahora puedes ver que las imágenes están apareciendo para cada post. Sigamos construyendo aquí nuestra tarjeta. Después de la imagen destacada, lo que voy a hacer es abrir un div con la clase de cuerpo de tarjeta. Lo que voy a hacer es simplemente seguir la estructura del componente de tarjeta como está presente en Bootstrap Versión 4 Creo, no 5.1.1. Si tienes la misma versión de Bootstrap, obtendrás el mismo resultado. Voy a hacer esto bastante rápido aquí porque esta es una clase HTML y CSS. Yo solo quiero demostrarles cómo realmente traemos algunos de estos datos dinámicos de Ghost. Tenemos un h5 con una tarjeta clase de título de tarjeta. Voy a anidar un enlace ahí para nuestra URL y luego, por supuesto, poner un título ahí dentro. Entonces debajo de esa, voy a añadir una etiqueta p con la clase de texto de tarjeta y poner ahí el extracto del post. Ahora si guardamos y actualizamos nuestra página en nuestro navegador, puedes ver que tenemos estas tarjetas aquí con la imagen, el título, y un extracto de la publicación. Si hago clic en el título aquí, me llevará a la plantilla de esa publicación, que en realidad no hemos creado el código por ahora. Vamos a construir encima de esto en futuros videos. Pero por ahora, en realidad codificemos nuestra plantilla de post porque eso es importante que nos acertemos. Tenemos esta plantilla alternativa funcionando por el momento. Como puedes ver en el título que configuramos antes, dice que la configuración de plantillas personalizadas va a admin. Si nos fijamos en el post de ejemplo, dice que esta plantilla es específicamente por ejemplo post. Voy a navegar a la tercera, que como pueden ver es solo usar la plantilla de post estándar. Empecemos a codificar esa también. Si entro al archivo post.hbs, recordando chicos, que a nivel básico, todo lo que nuestro sitio web necesita es un index.hps y un post.hbs. Si sabes codificar ambos de estos, teóricamente puedes hacer todo el sitio web. Lo que voy a hacer es hacer como hicimos similar con el índice, abrir un contenedor de página y luego aquí es donde en lugar de crear un bucle, que nos dará acceso al contexto de una nueva publicación dentro de cada iteración del bucle, lo que estamos haciendo es que estamos accediendo a una sola publicación aquí. Lo que tenemos que hacer para acceder al contexto de la publicación, pesar de que estamos en una sola publicación, es abrir una etiqueta que se vea así, hash post. Es uno muy sencillo. Después cerramos con poste de slash. Lo que esto hace es que nos permita acceder al contexto de post igual que teníamos aquí para cada post individual. Ahora podemos acceder a todos los mismos atributos dentro de una sola publicación. Volveré aquí y lo que haré es añadir algún código de calderería. Voy a tener un encabezado de post. Perdón, regresaré y le daré a eso una clase de encabezado de poste, traeré de vuelta esa h1. Pero ahora se va a decir, en realidad voy a darle a ese una clase de título de puesto. En el interior, vamos a poner el título del puesto real. En lugar de poner un título estático, un título codificado duro, obviamente vamos a dejar que pase el título del propio post. Entonces debajo, porque es una entrada de blog, vamos a poner en la fecha en que fue publicada. Voy a poner eso en un lapso y usamos el ayudante aquí de fecha para formatear nuestro publicado en la fecha. Tenemos el atributo de publicado en y usando el ayudante de fecha con este atributo aquí de formato, podemos entonces establecer nuestro formato para la fecha. Simplemente voy a ponerlo en cuádruple M, doble D, y cuádruple Y. Vamos a pasar más allá de esa sección de encabezado y luego crear una sección con la clase de contenido post. Entonces aquí, lo que voy a hacer es insertar el contenido del post y eso se hace para el atributo de contenido. Voy a golpear guardar en eso, refrescar la página por aquí y voila, tenemos el título del post. Tenemos la fecha en que se publicó la publicación y tenemos todo el contenido que se llena automáticamente dentro de nuestra etiqueta aquí, post content. Puedes, por supuesto, verificar eso usando tus DevTools. Por supuesto te recomiendo Google Chrome, pero lo que prefieras usar. Aquí puedes ver todo el código que configuramos en la plantilla, pero con los valores dinámicos entrando dentro de ese marcado. Si vuelvo al blog y luego hago clic en la siguiente entrada, verás que es la misma plantilla pero con contenido diferente. Hay un poco de limpieza que tiene que pasar aquí con los diferentes enlaces y esas cosas. Pero tú entiendes el concepto, estamos poniendo a través del contenido en esta plantilla. Estamos poniendo a través del título y la fecha de publicación, y así ahora tenemos algo de un sitio web en funcionamiento. Para terminar este video porque se siente como si ya fuera bastante largo. Lo que voy a hacer es poner algún código para la página Acerca. Ahora, lo curioso de la página Acerca es que el contexto de la página es prácticamente idéntico al contexto de la publicación. Es por eso que si volvemos a nuestro diagrama aquí, que podemos cargar una página en la plantilla de post porque estamos usando el mismo contexto independientemente de si se trata de una página o de una publicación. Veamos eso en acción ahora mismo. Desplazaré hacia abajo al contexto, vuelta a lo que teníamos antes, que era el contexto de la página. El contexto de la página, como está escrito aquí, es virtualmente idéntico al contexto de la publicación y se accede usando la misma expresión de bloque. Lo que voy a hacer es simplemente seguir adelante y copiar el código de post.hbs a page.hbs. Lo que voy a hacer porque la gran diferencia entre un post y una página es principalmente la fecha. Simplemente voy a quitar la fecha de esa plantilla en particular, hit save on eso. Ahora, si volvemos a nuestra página Acerca de, verás que no estamos obteniendo el resultado que estamos buscando porque en realidad estamos usando una plantilla específica para Acerca de la página. Pero vayamos a una página diferente, creo que había una sobre privacidad. Perdón, escribía mal eso ahí. Si vamos a la página Privacidad, aquí puedes ver que tenemos el mismo formato. Estamos dentro de nuestro contenedor, tenemos nuestro título y tenemos nuestro contenido para la página. Entonces, en realidad, la única diferencia entre páginas y publicaciones es que no podemos recorrer un listado de páginas, pero sí podemos recorrer la lista de publicaciones. Tenemos acceso a los contextos post dentro de aquí. Tenemos acceso al contexto de post dentro de una publicación individual, y tenemos acceso al mismo cuando se trabaja con páginas también. El contexto de la publicación es en realidad idéntico al contexto de la página. Se podría argumentar que no hay contexto de página, es solo el contexto de post utilizado para las páginas también. Yo lo voy a envolver ahí arriba para este video porque tenemos nuestro bloque de construcción central ordenado. Tenemos nuestra página de blog donde podemos ver todas nuestras diferentes publicaciones y ahora podemos hacer click y ver una entrada individual. Donde aún no hemos cubierto están todas estas plantillas opcionales adicionales. ¿ Cómo trabajamos dentro del contexto del autor o trabajamos dentro del contexto de la etiqueta? ¿ Qué debemos hacer con estas plantillas personalizadas específicas que resultan para ciertos autores, ciertas etiquetas, ciertas páginas, y ciertas publicaciones? Todo eso cubriremos en el siguiente video. 10. Programar dentro de los contextos de autor y etiqueta: En el último video, empezamos a codificar nuestras plantillas index.hbs, post.hbs, y page.hbs y trabajamos con el contexto post. El contexto de la publicación se aplica a las tres plantillas ya sea que estemos en un bucle o que estemos en una sola publicación o página. En este video, vamos a hablar de los otros contextos, autor y etiqueta, y si tenemos tiempo, vamos a construir nuestro tema usando estas plantillas adicionales que creamos para publicaciones, páginas y autores específicos. Lo que voy a hacer es volver a mi página web aquí y voy a navegar a una de nuestras rutas de autor. Si vamos a la ruta Christopher author, puedes ver que tenemos una plantilla específica. Yo quiero ir a la plantilla de autor regular, que creo que si escribimos en Ghost, deberíamos poder llegar a. Ahí vas. Voy a empezar a trabajar en la plantilla autor.hbs siguiente y el contexto en el que voy a estar trabajando es el contexto de autor. Entremos a la documentación. Haga clic sobre Contextos, desplácese hacia abajo y podrá ver la lista aquí. Tenemos índice, que en realidad no parece tener una página en esta documentación. Tenemos página que es esencialmente la misma que post. Post, obviamente. Entonces tenemos autor y etiqueta. También tenemos error, pero no vamos a estar aprendiendo sobre el error en esta clase. Esta es una muy sencilla. Ni siquiera tenemos que entrar a los contextos usando la etiqueta que vimos en el video anterior. Podemos simplemente generar estas etiquetas dentro de cualquier plantilla de error en la que estamos trabajando. Eso es sólo un detalle menor en el que no vamos a adentrarnos en esta clase. Pero lo que vamos a cubrir es el contexto de autor y etiqueta. Si hago clic en el contexto del autor, como dice aquí, “Los autores en Ghost cada uno obtienen su propia página, lo que genera una lista de publicaciones que fueron publicadas por ese autor”. Esencialmente en la plantilla de autor, tenemos acceso a este contexto de autor, pero también tenemos acceso a los contextos de post a través de un bucle de 4h. Si me desplazo aquí abajo, aquí están algunos de los atributos del objeto autor. Lo que voy a hacer es crear una página de listado para nuestro autor. Solo para empezar, vamos a copiar a través del código aquí en nuestro index.hbs. Voy a cancelar estos dos y abramos autor.hbs. Paguemos ese código aquí. En lugar de todos los mensajes, voy a decir, “Todos los mensajes por”, y, aquí encontrarás todos los mensajes por. Guardemos eso. Vamos a refrescarnos por aquí. Puedes ver aquí todos los mensajes del autor Fantasma. Todavía no hemos traído esos valores dinámicos pero se puede ver en el bucle, está excluyendo todos los posts que fueron escritos por autores distintos a Ghost, y eso es esencialmente sólo una publicación. Todas las publicaciones anteriores a esa publicación aparecen ahora en esta página. Lo que tenemos que hacer es llenar estos valores dinámicos. Te voy a mostrar dos maneras de hacer esto. Sin abrir un bloque, podemos simplemente ampliar los contextos de autor ejecutando author y luego el atributo, creo que es nombre, y luego podemos simplemente copiar eso aquí abajo. Golpea “Guardar” en eso, refresca la página y ves todos los mensajes de Ghost. Aquí encontrarás todas las publicaciones de Ghost. Si hubiera otro autor que usara la misma plantilla, dirías el nombre de ese autor en lugar de Ghost pero ojalá, obtienes el punto. Este es un valor dinámico. Lo que voy a hacer es que voy a hacer esto un poco más realista. Voy a también, en lugar de tener que poner autor. frente al nombre cada vez, lo que voy a hacer es abrir el contexto de autor. Hago exactamente de la misma manera que abrí los contextos de post en el video anterior poniendo aquí una etiqueta, empezando por hash y luego poniendo autor. Entonces lo voy a cerrar aquí. Lo que esto debe hacer es darnos el mismo resultado. Voy a sangrar este código, refrescar y ya ves que tenemos el mismo resultado. Lo que voy a hacer es que voy a rechazar esta página y traer también la foto del autor. Lo que voy a hacer es que el contenedor aquí arriba va a ser un encabezado, y luego voy a tener dos columnas. Voy a tener una columna para el usuario y dar una tarjeta para el autor. Entonces voy a tener este contenido movido hacia un costado en una segunda columna. Lo que voy a hacer es en lugar de tener todos los posts por nombre, lo que voy a hacer, arrastrar esto fuera de nuestra pequeña expresión de bloque de autor aquí. Crear un div con la clase de encabezado de página. Pon eso ahí dentro. Todavía va a tener todos los mensajes del autor y poner eso ahí de nuevo. Entonces lo que voy a hacer es crear un contenedor con la clase de página con barra lateral. Entonces aquí, después de abrir un div, la primera columna, voy a sacar algún contenido del autor. Pon eso ahí dentro. Entonces la segunda columna, voy a poner el resto de este código aquí. Cada div está representando una columna en este caso. Yo sólo puedo sangrar eso adecuadamente ahí, borrar algo de este amplio espacio, y aquí dentro de nuestra pequeña barra lateral, puedo poner en una tarjeta de autor. Nuevamente, voy a usar la clase de tarjeta y eso me va a dar acceso al estilo dentro de Bootstrap. Abre una tarjeta. El primero que voy a querer hacer es crear una imagen con la clase de tarjeta img top y el SRC para eso va a estar viniendo del autor. Voy a utilizar la imagen URL Ayudante y luego acceder al atributo en el contexto de autor de la imagen de perfil. Entonces para el ALT sólo se va a decir, “foto de nombre”, que va a ser el nombre del autor. Entonces igual que antes, configuraré el cuerpo de la tarjeta con un h5 con la clase de título de la tarjeta, dentro, volveré a poner el nombre del autor. Si el autor tiene una bio, quiero mostrarla. Voy a emitir un elemento HTML con la clase de texto de tarjeta dentro de aquí. Sólo necesito poner “bio”. Ese HTML sólo mostrará si hay un valor establecido en bio. Por último, voy a poner aquí un área meta de autor y voy a poner algún código que podría parecer un poco funky aquí. Básicamente estoy usando el ayudante plural aquí para mostrar un número con la pluralización correcta. Se va a llevar el título de paginación de lo que estamos viendo actualmente. Si está vacío, va a decir, no hay publicaciones. Después definiendo para singular, queremos el número seguido de post y para plural, va a decir el número de puestos con posts. Como puedes ver este ayudante plural aquí, se necesita un cierto número y si es cero, no generará publicaciones. Si es singular, va a decir un post y si es plural va a decir ese número posts, por lo que este ayudante nos ayuda a producir plurales. Vamos a darle a “Guardar” en eso, y vamos a refrescarnos. Parece que nos hemos perdido algo aquí, déjame volver. Simplemente vamos a mover esto un poco para que podamos ver más de la pantalla por aquí. Aquí estamos, puedo ver que hemos escrito mal singular. Si guardo, refresca por aquí verás que tenemos nuestra tarjeta aquí. El formato no es en punto solo dale a esto un ancho máximo de 18, REM refresca por aquí. Conseguir unos resultados funky, no he conseguido el div correcto configurado. Creo que es éste de aquí, y ahora estamos obteniendo el resultado que esperaríamos. Como puedes ver aquí, lo que tenemos está en la primera columna, tenemos al usuario. Es Ghost con su pequeña imagen aquí, esta es su bio, cual es puesta por los propios Fantasmas y esta es la cantidad de posts que ha escrito este usuario. Entonces por supuesto, tienes la lista de publicaciones que se generan por el bucle for-each y esto se limitará a las publicaciones del usuario de Ghost. Vamos ya a hacer eso para la plantilla de etiqueta, cosa muy similar. Voy a copiar a través de autor y en lugar de nombre del autor, vamos a cambiarlo a nombre de etiqueta. En lugar de todos los posts por, vamos a decir todos los posts con la etiqueta de. Aquí encontrarás todas las publicaciones con la etiqueta de asegurarte de que el cambio de autor de la etiqueta. Ahora aquí dentro, en lugar de entrar en el contexto del autor, vamos a entrar en el contexto de la etiqueta. Nuevamente, simplemente cambiando la palabra clave author a tag, y ahora sustituyendo algunos de estos valores. En lugar de imagen de perfil, que es lo que tenemos disponible en el contexto del autor, tenemos imagen característica en su lugar y luego en lugar de pitcher de nombre, diremos pitcher para nombre de etiqueta. Lo que voy a hacer también es comprobar para asegurarme de que tenemos un conjunto de imágenes destacado. Déjame hacer eso, es justo como lo hicimos antes. Si imagen característica y luego esto y luego terminar a eso si bloque, como tal. Está bien. Enfriar en lugar de bio, vamos a hacer descripción y luego por supuesto vamos a deshacernos de este meta de autor. Va a golpear “Save” en eso. Vamos a ir a una etiqueta que no sea etiqueta de ejemplo porque recuerda que tenemos una configuración especial de plantilla para eso, por lo que la única otra opción es empezar. Aquí puedes ver todos los posts con la etiqueta de empezar. Aquí encontrarás todos los posts con la etiqueta de empezar. Bastante autoexplicativo, ¿verdad? Aquí puedes ver que tenemos ahí nuestro nombre de nuestra etiqueta. Si quisiéramos agregar una imagen, ahora mismo se detecta que no hay conjunto de imágenes porque ponemos ahí nuestra declaración if. Pero si quisiéramos, podríamos entrar a nuestro admin, entrar en nuestras etiquetas, empezar. Simplemente subiré uno de Unsplash. Solo busquemos para empezar, veamos qué sale. Eso se ve bien. Vamos a darle a “Guardar” en eso. Volvamos aquí. Ahora puedes ver tenemos una imagen poblando en esa zona superior de imagen de tarjeta. Así es esencialmente como se trabaja con la etiqueta y el contexto del autor. Si estás en la plantilla de autor o en la plantilla de etiqueta, o en una plantilla de etiqueta específica como podemos ver aquí. O una plantilla de autor específica como podemos ver aquí. Después tienes acceso al contexto de autor o etiqueta. Ahora antes de seguir adelante y hablar de consultas personalizadas y parciales, solo quiero construir el resto de este tema. Creo que no hemos pasado demasiado tiempo en esta lección, así que tenemos tiempo para simplemente llenar rápidamente las otras plantillas adicionales que están dentro de nuestro tema en la actualidad. Noto que no hemos hecho nada con la página de inicio. Digamos que bienvenido a y luego pondremos título del sitio. Usando ese objeto de sitio global, poniendo en título, sólo va a dar clic a aquí. Ahí vas. Dice bienvenido a Skillshare. Se puede ver que hay un poco de tema ahí. Creo que tenemos un poco de error en nuestro hbs por defecto. Accidentalmente puse el logo de cabecera dash en AH ref. Disculpas si te diste cuenta de eso desde el inicio y estaba gritando. Pero si me refresco por aquí, ahora verás que para dar click en cualquier otro lugar y luego dar click ahí, nos llevará de vuelta a la página de inicio. Entonces también en esa página de inicio, que agregará una consulta personalizada a en el siguiente video. Pero por ahora, solo pongamos eso todo en un contenedor de ancho de página. Guardar, y ahora está en el contenedor de ancho de página. Muy bien, entonces cuáles son las otras plantillas que aún no hemos personalizado. Si voy a la página sobre, por ejemplo, tenemos esta página/about.hbs. Creo que en este caso, quiero que la página-sobre.hbs se vea exactamente igual. Podría simplemente borrar ese por completo, refrescar mi instancia fantasma. Ahora si vuelvo y voy a la página sobre, acabamos de tener una plantilla de página normal corriendo para la página sobre. También, quiero agregar una navegación para blog ahora. Hagamos blog y luego sumamos en esa ruta ahí. Golpea “Save” en esa cabeza aquí atrás. Ahora si hacemos click en “Blog”, puedes ver que tenemos todas nuestras publicaciones. No tenemos forma de navegar a autores específicos y no tenemos forma de navegar a etiquetas específicas. Lo que podría hacer en realidad es que podría hacer una pausa ahí y luego lo haremos en el siguiente video. Vamos a añadir las etiquetas y el autor a estos posts. Entonces vamos a personalizar esas plantillas especiales que teníamos. Por ejemplo, nuestra plantilla de encabezado personalizada, que tenemos aquí, que aún no has personalizado, y voy a ejemplo de plantilla de post también. Tenemos a estos otros funcionando bien. Pero esos otros dos necesitamos personalizar también. Este video se está haciendo largo, así que podría cortarlo ahí, chicos, y eso haremos en el siguiente video. 11. Consultas personalizadas y parciales: El tiempo me sacó lo mejor en el último video, pero eso está bien. Simplemente vamos a tomar un video extra para cubrir consultas personalizadas en parciales y luego usaremos el video después de eso para terminar nuestro tema fantasma, llenar esas plantillas extra, y luego tendremos un tema fantasma sencillo pero completado. Donde quieras llevarlo después de eso en términos de estilismo e imágenes extra y plantillas personalizadas depende de ti, pero para cuando terminemos, deberías tener una comprensión bastante sólida de cómo funcionan los temas fantasmas. Lo que quiero hacer es saltar adelante a consultas personalizadas y parciales en este momento, y luego llegaremos a personalizar esas plantillas específicas en el siguiente video. primero es que te habrías dado cuenta de que tenemos alguna copia y código pegado para postal de búho. La postal siempre va a ser exactamente la misma sin importar si estamos en la plantilla de autor, en la plantilla etiqueta, o en la plantilla de índice. Eso significa que es un candidato perfecto para algo llamado parcial. Partiales como puedes ver, tenemos nuestra carpeta configurada aquí para nuestros diferentes parciales. Para lo que usamos parciales es seccionar pequeños trozos de códigos que luego podemos reutilizar en nuestro proyecto. En lugar de escribir este código y copiarlo y pegarlo en múltiples plantillas, lo que voy a hacer es poner eso en su propio parcial. Voy a llamar a esto post-tard.hbs. Voy a tomar nuestra tarjeta HTML y código de manillar allá, cortar eso, y ponerlo aquí. Arreglemos toda la sangría, guarde eso. El modo en que llamamos un parcial, ahora que lo hemos movido hacia ahí es mediante el uso de este signo mayor que mayor. Ponemos el mayor que iniciar sesión, abrimos una cuerda, y aquí dentro ponemos el nombre de la postal parcial. Ahora si vamos al índice que es nuestra página de blog, dice postal parcial no se puede encontrar. Creo que eso es porque no hemos actualizado nuestro servidor. Recuerda agregamos un nuevo archivo, por lo que necesitamos refrescar nuestra instancia fantasma. Buen pequeño recordatorio ahí. Refrescar. Ahora puedes ver que tenemos exactamente el mismo look en esa plantilla de índice. Lo que voy a hacer ahora es reemplazar el código duplicado por sólo este pequeño código al parcial. Eso va a hacer que nuestra base de código sea mucho más limpia. La otra cosa que podemos hacer, que te mostraré en el siguiente video, es crear parciales personalizados para la navegación y para la paginación, que si los usamos en fantasma sin esos parciales, saldrá código por defecto que don ni siquiera tener que ponernos a nosotros mismos. Son como parciales especiales del sistema. Estoy hablando, por ejemplo, cuándo vamos a default.hbs y aquí tenemos esta etiqueta de navegación. Esto es casi como una versión especial de un parcial, pero sin tener que configurarlo en nuestra carpeta parcial. Si sí quisiéramos personalizar nuestra navegación, podemos establecer un parcial ahí dentro para esta navegación y también para paginación, que cubriremos en el siguiente video. Mantente atentos para eso. En esencia, sin embargo, esa es la base de los parciales, sacar el código que estás copiando y pegando en múltiples lugares, ponerlo en la única ubicación y simplemente llamarlo donde lo necesites. El segundo concepto del que quiero hablar en este video son las consultas personalizadas. Las consultas personalizadas nos permiten dibujar datos del sitio Argos y ponerlos en cualquier plantilla. Creo que una aplicación práctica de esto es para una página de inicio. A veces cuando estás en una página de inicio de un blog, quieres ver la publicación más reciente. Usando una consulta personalizada, en realidad podemos hacer esto. Voy a entrar en la documentación para consultas personalizadas, que creo que podemos encontrar ya sea en contexto o ayudantes piensan tal vez en ayudarnos aquí. Aquí vamos. Dentro de ayudantes funcionales, podemos hacer una consulta personalizada con esto, obtener ayuda. Voy a dar click en eso. Podemos leer sobre cómo podemos obtener cierta información de nuestro back-end y enviarla donde queramos. De adentro hacia afuera va tema. Aquí vamos. Ejemplos simples aquí mismo podemos conseguir nuestros posts y eso nos permite crear un post loop. Aquí no están codificados que voy a navegar hacia nuestra plantilla home.hps. Lo que voy a hacer es construir un poco esto. Voy a agregar un div con una clase de cabecera de casa. Entonces después de la H1, podría hacer una descripción del sitio. Toma la descripción, atributo fuera del objeto global del sitio, y pon eso ahí dentro. Entonces después de este encabezado, voy a abrir el get helper. Voy a solicitar los posts y voy a asegurarme de que incluya etiquetas y autores. Estaremos usando esos datos en el próximo video. Voy a cerrar esa cuadra conseguir ahí. Entonces voy a poner en H2 y decir últimos posts. Entonces aquí podemos crear un bucle for-each y tener acceso a las publicaciones aunque no estemos en una plantilla de índice. Puedo ir por cada poste, cerrar la cuadra ahí. También voy a poner eso dentro de un div con la clase de posts en línea. Nuevamente, todas estas clases, solo para formatear y estructura. Se relaciona con el CSS que tengo en mi archivo principal. No te confundas por eso. Eso sólo soy yo dando algo de formateo a esto. En este bucle, puedo dar salida al parcial que creamos postcard. Aquí hay otras dos cosas que quiero hacer. Yo quiero limitar esto a sólo tres resultados. El último tres, y asegúrate de que esté ordenado por publicado más recientemente. Publicado en descendente. Guarda eso. Vuelve a nuestra página de inicio. Se puede ver, bienvenido a Skillshare pensamientos, historias e ideas, que es la descripción predeterminada de un sitio web fantasma. Obviamente podemos entrar en la configuración de nuestro sitio web y cambiar eso. Vamos detalles generales de publicación, título, y descripción. Digamos que en lugar de Skillshare, es sitio fantasma y digamos que este es un sitio fantasma de ejemplo, guarde esos ajustes, regrese, y verá que actualiza la página de inicio. Actualiza el logotipo, actualiza todo. Este es un ejemplo de sitio fantasma. Pero lo más importante, lo que tenemos aquí es una lista de las tres últimas entradas en el sitio web, para que los usuarios puedan ver una vista previa de las publicaciones en el sitio web sin tener que navegar a la página del blog. Este es un poco corto o más corto en comparación con los otros. Pero en el siguiente video, vamos a cubrir lo que no logramos rematar en el último video, que estaba construyendo estas plantillas personalizadas. Los específicamente para el ejemplo publican específicamente para plantillas personalizadas establecidas en el administrador fantasma. Agrega la capacidad de navegar a diferentes autores y etiquetas desde las propias postales. En el siguiente video, cubriremos eso. Después terminaremos nuestro proyecto y empezaremos a ponernos de nuestro lado en vivo. 12. Completar el tema: En esta lección final, antes de empezar a mirar el hosting y hacer nuestro sitio en vivo, voy a agregar algunos enlaces a autor y etiquetas aquí para cada post y luego también necesitamos actualizar estas plantillas personalizadas. Después de hacer eso, deberíamos tener un tema fantasma que funcione bastante bien. Obviamente, hay mucho más que podríamos hacer aquí, pero esto completará un proyecto básico para nosotros. Lo primero que quiero hacer es para que podamos navegar a los autores individuales y a la página individual de etiquetas, lo que quiero hacer es agregar la etiqueta y el autor a nuestras postales. Voy a ir al blog aquí para que podamos ver todas las postales. Voy a entrar a mi editor de códigos, una vez pase a postal y voy a empezar a añadir algún código bajo el extracto. El primero que voy a hacer es un enlace con el autor. Voy a formatear como un botón Bootstrap. Voy a darle a esto la clase de btn btn-primaria. Esos son los campos href, clase. Entonces voy a establecer la href, que va a ser la URL principal del autor. Simplemente mostrará al autor primario, que es un concepto similar a la etiqueta primaria, si acaso hay múltiples autores ahí. Puede cerrar eso y luego voy a decir por autor.nombre primario.nombre. Ahora antes de dejar eso ahí, hay una consideración que hacer y es que no queremos tener un enlace con el autor principal cuando actualmente estamos viendo esa postal en la página de autor. Si estamos en el contexto del autor, realidad no queremos ver un enlace con el autor porque eso sería sólo un enlace circular. Lo que podemos hacer es comprobar si estamos en el contexto de autor mediante el uso de este ayudante especial es. Pero en este caso queremos comprobar que no estamos en ese contexto de autor. Podemos poner aquí a este pequeño personaje para buscar lo contrario. Este código aquí mismo se va a ejecutar si no tenemos acceso al contexto de autor. Voy a cerrar el está ahí y luego ahora por las etiquetas. Voy a ir card-tags y luego aquí todo lo que tenemos que hacer es solo poner las etiquetas de palabra clave y simplemente escribir etiquetas así, como verás en la documentación, se dará salida a una lista separada por comas de etiquetas, y cada etiqueta se ser un enlace a esa etiqueta. Si me refresco por aquí, ahora puedes ver tenemos un botón para ir ver al autor y tenemos nuestras diferentes etiquetas que se han establecido en ese post. Si hago clic en el botón comprar fantasma” aquí, verás que tenemos nuestra plantilla que configuramos antes. Si hago click en “Empezar”, y puedes ver que tenemos nuestra plantilla para empezar que vimos antes. Pero recuerda que configuramos una plantilla diferente para Christopher Dodd. Mi ruta de autor tiene una plantilla diferente y tenemos una plantilla diferente por ejemplo etiqueta. Yo quería poner esos ahí primero para que podamos navegar fácilmente a esos. Regresando al blog aquí, necesitamos personalizar esas plantillas. También necesitamos personalizar la publicación de ejemplo. Hemos establecido una plantilla específicamente por ejemplo post y necesitamos cambiar esta plantilla personalizada que establecemos también en el administrador fantasma. Tenemos cuatro plantillas que necesitamos arreglar aquí. Vamos al código y arreglemos el, ¿qué debemos hacer primero? Hagamos la plantilla de autor Christopher. Vamos a entrar en Author-Christopher.HBS. Porque sé que vamos a estar corriendo a través de un índice, voy a copiar y pegar algún código de nuestro índice aquí y ponerlo aquí. En lugar de tener un encabezado aquí arriba, he creado una clase en nuestro CSS para encabezado de autor. Voy a ir por encima de este ancho de página para crear un encabezado de ancho completo. Voy a entrar al contexto del autor, luego cerrarlo para que no nos olvidemos. Dentro de aquí, voy a crear un div con la clase de encabezado de autor y dentro de eso voy a tener un h1. Voy a meter un pequeño aquí también. Dentro de lo pequeño, voy a decir posts por y luego después de la pequeña salida, el nombre del autor, que dada esta plantilla sólo se aplica a la plantilla de autor para Christopher, en realidad no necesitamos valores dinámicos. Podríamos codificar estos en. Pero creo que es un poco más limpio tener los valores dinámicos en caso de que queramos cambiar esto o copiar y pegar este código a través. Otra cosa que quiero hacer es tener la imagen del autor, así que tenemos color de fondo. Esto es algo que necesitaremos ser dinámicos porque siempre podríamos entrar y cambiar la imagen de portada del autor. Voy a usar nuevamente el ayudante de URL de imagen y luego poner en imagen de portada, que es un atributo en el objeto autor. Golpeando a “Save” en eso, regresando a aquí. Ya puedes ver que tenemos este encabezado. Dice posts by y que tiene el nombre del autor, y luego tiene la lista de posts. No lo puedes ver ahora mismo, pero se supone que es una imagen de fondo ahí. Entraré a mi Configuración aquí, entraré en Staff, entraré en Christopher Dodd, y cambiemos la portada. Subiremos una imagen. Tenemos una carpeta aquí con algunos ejemplos. Digamos que esa es mi imagen de portada. Ahora si voy por aquí, no está apareciendo y eso es porque erróneamente puse color de fondo aquí, no imagen de fondo, refrescante por aquí y ya puedes ver ahora tengo esta pancarta aquí. Si vamos a nuestra página de autor de Ghost, puedes ver que tenemos la plantilla estándar que está teniendo la tarjeta de autor en esta columna de la izquierda aquí. Pero si voy específicamente a Christopher Dodd, su lugar tengo este diseño. Eso nos permite personalizar ciertos diseños. A lo mejor este autor es particularmente especial y necesita una plantilla personalizada. Bueno, en ese caso, podemos personalizarlo utilizando nuestro conocimiento de la estructura temática que establecimos anteriormente en esta clase. Hagamos lo mismo por nuestra etiqueta ahora. Tag-ejemplo-tag, voy a cerrar de nuevo estos archivos abiertos. En tag-example-tag, sólo vamos a copiar el mismo formato que teníamos en Author-Christopher. Voy a pasar esto. En lugar de autor aquí queremos poner etiqueta porque estamos entrando en los contextos de etiqueta ahora y en lugar de imagen de portada, necesitamos usar la imagen apropiada para una etiqueta que es imagen característica la cual vimos antes. Entonces no vamos a tener posts por, sólo vamos a tener el nombre de la etiqueta. Esto es un poco inapropiado aquí porque estamos copiando a través de un encabezado que configuramos para el autor. En realidad podemos ir a nuestro archivo CSS y simplemente arreglarlo ahora mismo, encabezado de autor, si quería ser un poco más limpio aquí. Digamos sólo cabecera de imagen. Voy a arreglar eso para ustedes ahora mismo. Vamos a usar el encabezado de imagen de clase en su lugar. Ya que estamos usando esto en más que solo la plantilla de autor. Golpear “Save” y pasar a aquí. Aquí hay un enlace a las diferentes plantillas de etiquetas. Podemos ir a la plantilla Etiqueta Estándar, que se está ejecutando para todo lo que no sea etiqueta de ejemplo. Pero si quisiéramos ver ese especial, podemos dar click en “Ejemplo de etiqueta” y ya puedes ver que tenemos nuestro encabezado ahora. El formateo no se ha encontrado, lo cual es probable por el intenso almacenamiento en caché de fantasmas. Solo voy a abrir DevTools, permitiéndome vaciar caché y recargar duro. Después de vaciar su caché y recargas duras, debes empezar a ver que esos cambios CSS surten efecto. Ahí vamos. Ahora tenemos nuestro bonito pequeño encabezado aquí con el nombre de la etiqueta y la imagen de la etiqueta en el fondo. Ahora acabamos de obtener nuestras plantillas específicamente para la publicación de ejemplo, y luego tenemos nuestra plantilla de encabezado personalizada que configuramos en el administrador fantasma. Voy a empezar con este porque va a ser del mismo formato. Voy a ir al encabezado personalizado. De nuevo, voy a copiar desde aquí. Me desharé de esto aquí mismo porque no estamos haciendo un bucle a través de una lista de publicaciones. Voy a cambiar esto para publicar para que podamos tener acceso al contexto post. Voy a mover esto a los extremos porque vamos a necesitar acceso a los contextos post a lo largo. Voy a mantener este encabezado de imagen y en lugar de imagen de portada, la imagen característica es el atributo en el contexto de la publicación. Nuevamente, no post por. Simplemente vamos a tener el título de la entrada del blog, y luego vamos a copiar frente a la plantilla de post aquí, este bit de código. Vamos a guardar eso, volver atrás. Aquí, se puede ver que tenemos el título en dos lugares, así que sólo voy a quitar el título aquí. Guarda y aquí, puedes ver tenemos nuestra plantilla alterna, que pone la imagen destacada detrás del título y luego tiene el título superpuesto en él. Todavía tiene la fecha, todavía tiene el contenido, pero entonces también tenemos esto. Ahora vamos a hacer la plantilla final. Vamos al blog, vamos a la publicación de ejemplo. Para la publicación de ejemplo, lo que vamos a hacer es volver a entrar en el código. Digamos que la plantilla, por ejemplo, publicación será la misma que la publicación, pero solo tendremos una lista de artículos relacionados hacia abajo. Sólo haremos eso para esta plantilla específica. De lo que vamos a hacer, volveré a cerrar todo esto, y vamos a publicar post de ejemplo y vamos copiar el contenido de la plantilla de post estándar. Yo haré eso. Dirígete a aquí, pega eso, y ahora obtendremos exactamente el mismo look que antes. Pero esta vez lo que quiero hacer es añadir, y esta es otra consulta personalizada de la que aprendimos en el video anterior, lo que voy a hacer es que voy a escribir un post get debajo de aquí. Lo que haré antes de eso es crear un artículo con una clase de, este será un valor dinámico, el post_class, y luego envolveré nuestro artículo en eso. De esa forma lo vamos a diferenciar de lo que estamos a punto de hacer abajo, que es abrir una consulta personalizada. Vayamos por los puestos. Incluyamos las etiquetas y autores porque queremos tener ahí esos atributos para poder acceder a ellos y tener esos enlaces que creamos al inicio de esta lección, entonces voy a filtrar por la etiqueta primaria. Si la etiqueta principal es igual a la etiqueta principal de esta publicación, entonces quiero volver a mostrar esas publicaciones similares. Terminemos con eso. Obtener featured-posts es la clase. Entonces sólo voy a añadir en el título aquí, artículos similares. Entonces crea un contenedor para estas publicaciones y vamos a configurar el bucle. Lo vamos a tener igual que lo hicimos en la página de inicio. Voy a agarrar este bucle aquí mismo y mostrar los últimos tres que tenemos que comparten la etiqueta primaria del post que estamos viendo. Voy a golpear guardar en eso, refrescar por aquí y se puede ver que trae a través de la publicación de ejemplo original. Basta con quitar el post de ejemplo. Voy a agregar otro filtro aquí que diga ID no es post.id Guardamos eso, no vamos a conseguir artículos similares, así que lo que podría hacer es hacer lo contrario y poner esto en la plantilla de post estándar y este otro puede ser una versión limpia . Simplemente envolver esto con una etiqueta de artículo, clase, post_class, y luego debajo de aquí, lo publicaré en. Agarra este código, ponlo dentro del artículo, arregla un poco de anidación aquí. Entonces si golpeo “Guardar” en eso, verás, por ejemplo, posts, solo tenemos el post sin publicaciones similares, pero si voy a mi blog y voy a alguno de nuestros artículos de bienvenida, este por supuesto está en un así que tengo que agregar ese mismo código exacto a nuestro encabezado personalizado también. Creo que necesitamos deshacernos del espacio en blanco aquí, no parece gustarle eso. Ahí vamos. Tenemos a nuestro autor de vuelta ahora y nuestras etiquetas aquí. Tenemos artículos similares aquí. Si pasamos a nuestra plantilla personalizada por aquí, no tenemos el mismo resultado. Creo que eso es porque todavía estamos en el contexto post. Yo sólo voy a mover eso aquí arriba ya que no lo necesitamos aquí abajo. Ahorra, refresca por aquí, y ahora puedes ver que tenemos nuestros artículos similares viniendo a través. Están viniendo a través de la plantilla de encabezado personalizada, están llegando a través de la plantilla de publicación estándar, pero no están llegando a través en la publicación de ejemplo. Por supuesto, eso es sólo un ejemplo de cómo podríamos tener diferentes entradas de blog que muestran diferentes plantillas. Yo quiero sumar algunas cosas más aquí. Sé que este video va a ser particularmente largo, pero quiero mostrarles algunas cosas que van a hacer aún más completo este sitio. Una de las cosas que quiero hacer, aquí, acabo de notar que tenemos de nuevo ese mismo tema. Déjame volver a la página de inicio aquí. Asegúrate de que no haya espacio entre las etiquetas y los autores. Ahí vamos, eso lo arregló. Lo que voy a hacer es algo que he notado es cuando hacemos clic en una publicación, no hay navegación que vuelva al blog. Por supuesto, podemos hacer click arriba aquí en el encabezado, pero creo que algunas migas de pan estarían bien aquí. Entonces sólo voy a añadir algunas migas de pan también. Voy a usar el formato estándar dentro de bootstrap. Voy a entrar, digamos solo post primero. En realidad voy a usar esto en todas las plantillas de posts, así que podría simplemente ir directamente a hacer un parcial. Yo llamo a esto pan rallado.hbs. Entonces voy a empezar a escribir algún código de bootstrap estándar. Voy a avanzar rápidamente a través de esto porque la estructura es solo componentes de bootstrap estándar. Después me chequearé con ustedes al final para explicarles. Muy sencillo. El único valor dinámico que hay ahí es el título del puesto actual. De lo contrario, sólo vamos a tener una barra y un enlace de vuelta al blog. Ahora podemos incluir eso aquí en nuestro post. Voy a ponerlo justo encima del encabezado del post aquí. El sintaxis para incluir un parcial, como vimos antes, abre ese signo mayor que el y luego pone en el nombre de tu parcial entre comillas. Vamos a comprobar que eso funcionó. Ahí puedes ver que tenemos un bonito poco de pan rallado formateado ahí y vamos a añadir eso a todas nuestras plantillas de post personalizadas. Aquí vamos, ejemplo post. Entonces para nuestro encabezado personalizado, recuerda que también podemos usar este encabezado personalizado en las páginas. Quiero poner aquí un cheque extra para asegurarme cuando no esté en una página. Voy a hacer si no es página, entonces vamos a poner el parcial para las migas de pan en. No queremos que las migas de pan muestren si estamos en una página. Por supuesto, esta es una preferencia personal. Todavía puedes tener las migas de pan, pero simplemente no tendría sentido con el enlace de vuelta al blog. Si entrara en mi página sobre, por ejemplo, y cambiara esto a nuestra plantilla de encabezado personalizada, no vería esas migas de pan. tanto que si entro a la publicación aquí donde sé que estamos ejecutando esa plantilla personalizada, puedo ver que aparecen las migas de pan. Una cosa más diminuta y luego terminaremos es que creo que vamos a necesitar alguna paginación aquí. Como vimos antes con la etiqueta de navegación, si solo agregamos una etiqueta con la palabra paginación aquí abajo, funcionará, pero no se verá tan bien como esperábamos. Lo que voy a hacer es agregar en alguna paginación y luego la voy a personalizar creando un parcial separado. En primer lugar, para promulgar realmente la paginación, porque en este momento sólo hay una página, voy a limitar los puestos a seis puestos por página. El modo en que hacemos eso es en nuestro archivo package.json, desplácese hacia abajo hacia el final, debería haber este objeto config, si no, simplemente crearlo. Aquí puedes ver las publicaciones por página. Voy a poner eso a seis. Creo que necesitaremos reiniciar nuestro servidor Ghost después de cambiar eso así que se va a ejecutar, Ghost reiniciar. Ahora si me dirijo a nuestra página de blog, puedes ver que sólo estamos viendo las seis últimas entradas. Vamos a necesitar alguna paginación para poder navegar a los otros puestos. Entraré a nuestro archivo index.hbs y después de este bucle, añadiré en la etiqueta simple, paginación. Refrescante por aquí, echemos un vistazo a cómo se ve eso. Aquí puedes ver que estamos en la Página 1 de 2, y podemos buscar publicaciones más antiguas, y aquí sale automáticamente publicaciones más nuevas. Simplemente voy a hacer que eso se vea un poco más bonito usando clases de Bootstrap. Para eso, lo que necesitamos hacer es configurar un parcial con el fin de personalizar la paginación. Voy a hacer pagination.hbs y para este, para ahorrar tiempo, voy a copiar y pegar algún código en, y luego te lo explicaré. Esta es solo la estructura estándar de Bootstrap para la paginación. Lo que estamos haciendo aquí en cuanto al código del manillar es que si hay un elemento anterior, queremos tener un enlace a él aquí mismo. El texto a ese enlace va a ser anterior y utilizamos el ayudante de URL de página para poner ahí el enlace a la página anterior. Entonces vamos a tener la página actual como punto punto y luego si hay una página siguiente, vamos a hacer lo contrario de lo que hicimos aquí arriba y tener un enlace a la siguiente página. Por supuesto, acabamos de crear un nuevo archivo, así que vamos a necesitar refrescar nuestro servidor. Después dirigiéndonos a nuestra página de índice aquí, pueden ver que ahora tenemos una paginación con formato Bootstrap más agradable. Ahí vas. Funciona perfectamente y te muestra en qué página estás actualmente. Como dije al inicio de esta lección, hay mucha más personalización y características que podemos dar a nuestro sitio Ghost, pero esto cubre esencialmente todos los puntos principales, todos los fundamentos para tus necesidades de desarrollo del tema Ghost. Para recapitular, hemos construido las plantillas más importantes como la plantilla de post. Hemos construido la plantilla de índice. Hemos creado una plantilla de inicio en la que se enumeran los tres últimos posts. Tenemos una plantilla de página estándar que muestra nuestra página sobre, y luego tenemos plantillas para los autores usando el contexto de autor. Tenemos una plantilla alternativa para el autor, específicamente por la babosa de Christopher. Tenemos una plantilla para filtrar por una determinada etiqueta y luego, de nuevo, tenemos una plantilla alternativa para filtrar por una etiqueta específica. Entonces, por último, tenemos dos plantillas de post alternativas. Tenemos éste con el encabezado personalizado y luego tenemos éste, que es esencialmente lo mismo que una plantilla de post normal, pero sin los artículos similares. Quiero señalar aquí que sí usé bastante sintaxis que no necesariamente se explicaba. Quería saltar aquí y hacer esto lo más práctico posible y mostrarte cómo construimos nuestro tema Ghost. Pero si alguna vez te confundes con algunos de los ayudantes que utilicé aquí o con la sintaxis, el mejor lugar para buscar es la documentación. Algo en lo que no nos metimos en esta clase fue la lista de diferentes ayudantes pero como puedes ver aquí, tenemos tanto aquí en cuanto a comprobar el contexto de la ruta actual. Vimos eso un poco en esta clase, obviamente probando condicionales muy simples con sentencias if usando get to create custom query, pero también tienes otras cosas como los objetos del sitio, que sí usamos un bit, navegación. Tenemos todo tipo de datos diferentes a los que podemos acceder y estos ayudantes de utilidad aquí, que vimos. Cosas como agregar en código de Ghost automáticamente en la cabeza, poner en clases CSS dinámicas, incluso podemos renderizar el tiempo de lectura estimado para una publicación. Estas son todas opciones dentro de Ghost, y si quieres buscarlas, están aquí en ayudantes. También hablo de ello en mi artículo así que si te interesa leer más, puedes aprender sobre los diferentes contextos y cómo se codifican los temas de Ghost usando manillares aquí. manillar viene con su propia sintaxis, pero también se ha extendido en temas Ghost. La teoría detrás de todo eso, te animo a leer en esta guía, será publicada para cuando estés viendo este video, pero no quiero quedarme demasiado empantanada en hacer de este curso altamente teórico. El feedback de algunos de estos cursos que he hecho antes es que la gente quiere ver puesta en práctica esta teoría. No me he centrado demasiado en la sintaxis de codificar temas de Ghost, pero creo que lo que es muy importante tener en cuenta es entender si me desplazo hacia arriba este diagrama aquí mismo, y enrutamiento, porque eso forma la estructura de tu tema Ghost. Si no entiendes estos fundamentos entonces puedes quedarte realmente atrapado y preguntándote qué se supone que debes hacer para crear diferentes plantillas para diferentes rutas. Esto es muy poderoso y se sienta en el núcleo de Ghost. El otro tipo de cosas como qué sintaxis específica usar para comprobar si hay cosas, puedes buscar fácilmente y hemos visto algunos ejemplos con la codificación de nuestro propio pequeño tema Ghost aquí. Te animo, como entraremos en el proyecto de clase, a crear tu propia versión de esto pero en la siguiente lección, vamos a aprender a publicar realmente esto vivo a un sitio web en Internet para que nosotros en realidad puede mostrar nuestro tema Ghost al mundo y ojalá usarlo en un entorno de producción. Te veré en el siguiente video. 13. Cómo publicar tu tema en vivo: En esta lección, vamos a hablar de sacar tema Ghost en un entorno de producción, es decir, tomar nuestro sitio web Ghost en vivo y publicarlo en Internet. Tengo unas cuantas pestañas abiertas sido que nos van a ayudar con este objetivo. Tengo el artículo aquí de Ghost sobre cómo instalar Ghost. Aquí puedes ver hicimos una de las opciones aquí, que es instalación local. Pero si te desplazas hacia abajo para Cloud hosting, en realidad hay tres opciones de las que hablaremos en tan solo un segundo. Entonces también lo que vamos a hacer es mirar la integración de GitHub Ghost y eso nos permite hacer una sencilla integración continua del tema Ghost, desplegando directamente en nuestro sitio web de Ghost. Básicamente, lo que tenemos que hacer cuando hacemos cambios a nuestro código de tema Ghost localmente es empujar ese código a nuestro repositorio y GitHub Actions lo construirá para nosotros y actualizará automáticamente nuestro sitio web Live Ghost. Esta es una integración muy poderosa en cuanto a actualizar tu sitio a lo largo del tiempo. Una vez que te vayas a vivir, quizá quieras hacer modificaciones aquí y allá. Volverás a hacer eso localmente y luego si solo empujas esos cambios a GitHub con esta integración, entonces irá directamente a tu sitio Ghost. Ahora, volviendo al primer artículo aquí, cómo instalar Ghost. La primera línea, como dice, la forma más rápida de empezar a configurar un sitio en Ghost es en Ghost Pro. Desplazándose aquí abajo hasta las opciones de Cloud otra vez, Digitalocean es lo que uso y uso Digitalocean porque es más barato que Ghost Pro. Pero claro, es un poco más difícil de configurar y no es algo en lo que vamos a estar entrando en esta clase. Solían ser un servicio que Ghost proporcionaba cable Ghost Valet y ellos se encargarían de toda la instalación por ti por una tarifa única. Eso ya no parece estar disponible. Entonces el segundo sitio web que configuré en Digitalocean, tuve que ir por los pasos yo mismo y fue un proceso un poco complicado para alguien que no está demasiado familiarizado con las configuraciones de servidor. Para esta clase, lo que voy a recomendar y lo que voy a caminar con ustedes chicos es usar Ghost Pro, que va a ser la forma más sencilla de poner en marcha tu sitio web y es esencialmente el uso de los mismos Ghost para gestionar el hosting para ti. Como dice aquí, hosting administrado oficial, voy a dar clic en esa opción y como pueden ver, hay un costo a esto. Desafortunadamente, cualquier alojamiento de sitios web, va a haber algún costo. Si nos desplazamos por aquí, vamos a necesitar como mínimo, el plan creador porque estamos usando temas personalizados. Si le quitamos el descuento anual va a ser de 31 dólares al mes. Con descuento anual, van a ser mínimo $25 al mes. Pero la buena noticia es, y para nuestros propósitos con aprender a hacer esto, podemos probarlo iniciando un juicio de 14 días. Voy a dar click en esa y ustedes pueden seguir tan bien siempre no hayan hecho el juicio ante él y vamos a crear una cuenta. Voy a llamar a este chrisskillshare y luego usemos un, solo usaré la contraseña sugerida y copiaré eso en algún lugar para que no pierda eso. Se va a pedir los detalles de tu tarjeta porque después la prueba de 14 días va a cobrar automáticamente tu tarjeta, si no quieres que esto suceda, obviamente, asegúrate de cancelar antes de los 14 días. A mí me parece que a mucha gente no le gusta esto, pero si acabas de configurar un recordatorio en tu teléfono o computadora para asegurarte de que canceles antes de que terminen los 14 días, entonces nunca te cobrarán y nunca me han cobrado algo por lo que no quería que me cobraran, simplemente porque siempre recuerdo poner un recordatorio. Para aquellos de ustedes que se han preocupado particularmente por conseguir que se le cobre su tarjeta, asegúrese de poner ese recordatorio. Tengo los detalles de mi tarjeta guardados aquí. Sólo voy a poner eso, detalles confirmados, y luego voy a golpear continuar. Aquí puedes elegir qué tipo de personalidad eres. Voy a pegarle a Desarrollador porque eso es lo que soy. Ahora hit continue y luego ahora podemos darle un nombre a nuestro sitio. Yo sólo lo voy a llamar Sitio Fantasma. Entonces voy a dar click. Hagámoslo. Algo anda mal con Stripe, parece. Vamos a intentarlo de nuevo. Parece que funcionó la segunda vez. Ahora está girando hacia arriba en este momento, completando nuestra instalación y finalizando nuestra configuración. Entonces al igual que teníamos en nuestra computadora local, tenemos una nueva instalación. Si entro en posts aquí, puedes ver que tenemos todas las mismas publicaciones por defecto que teníamos antes, las mismas páginas por defecto, y por supuesto, el miembro del personal de Ghost y nuestro usuario aquí arriba que establecimos cuando iniciamos sesión por primera vez. Esto es lo genial de Ghost Pro. Para llegar a este punto utilizando Digitalocean o Linode da unos pasos extra. tanto que usar Ghost Pro nos permite poner un sitio web de Ghost en funcionamiento súper rápido. Como se puede ver aquí, podemos acceder a nuestro sitio, ghost-site.ghost.io. Es bastante genial que el sitio fantasma estuviera disponible en realidad como nombre de sitio web. Pero para cuando estés viendo esta clase, este sitio probablemente debería estar abajo de todos modos. Tenemos el mismo punto de partida que teníamos antes cuando instalamos localmente. Ahora lo que vamos a hacer es empaquetar nuestro tema y subirlo a este sitio de Ghost en vivo. Recuerda que entramos en escenarios aquí para mirar temas y dentro de tema aquí tenemos a Casper. Ahora una de las cosas que no hice cuando entramos en el tema Casper originalmente fue que no cambié los detalles en el archivo package.json, así que ahora voy a cambiar al editor de código. Cerremos todo excepto el archivo package.json. Si me desplaza hacia arriba, se puede ver que nuestro tema todavía se llama Casper. Voy a empezar a cambiar el nombre de esto, digamos custom-ghost-theme, y vamos a cambiar algunos de estos otros detalles también. Tema Fantasmas personalizado por Chris Dodd. No es necesario poner allí una demo. Digamos que es la Versión 1.0. Deshazte de estas capturas de pantalla. En lugar de autor, vamos a poner nuestro nombre real, correo electrónico, deshacerse de la URL allí. Probablemente podamos dejar aquí todo el resto de estos. Repositorio, vamos a deshacernos de eso. Estos enlaces son específicamente para el tema Casper, así que me voy a deshacer de esos también. Simplemente quitando todo lo que es específico de Casper y sobre todo cambiando algo como el nombre. Ahora lo que vamos a hacer es abrir una Ventana del Buscador. Un segundo mientras reorganizo aquí mi Ventana y luego vamos a ir a nuestro sitio Ghost aquí. Una vez que estemos dentro de nuestra carpeta del sitio Ghost, podemos hacer clic en temas de contenido actual para llegar a nuestra carpeta de temas. Aquí puedes ver nuestra carpeta temática Casper aquí, pero claro, hemos modificado fuertemente el código dentro de nuestra carpeta Casper aquí, así que lo que voy a hacer es, en primer lugar, lo voy a comprimir, y luego voy a cambiar el nombre del tema , tema personalizado. Ahora tenemos nuestro tema empaquetado en una carpeta zip. Ya podemos subirlo a nuestro sitio de Ghost en vivo. Voy a dirigirme a nuestro sitio Ghost, la versión de producción. Asegúrate de estar en la versión de producción, no en la versión local, ya que realmente no necesitamos subir un tema a nuestra versión local. Ya lo tenemos aquí mismo en nuestra computadora. Lo que voy a hacer es hacer clic en este botón verde para subir un tema. Agarra esta versión zip del tema y luego me va a preguntar si quiero activarlo y voy a dar clic en sí para activar. Ahora puedo hacer clic en este botón por aquí y ahora podemos ver nuestro sitio Ghost ahora cargando en nuestro tema. Algo a tener en cuenta aquí, sin embargo, es que la navegación es diferente, como se puede ver aquí arriba, y así lo que haré es replicar nuestra navegación aquí en nuestro sitio en vivo a lo que habíamos construido en nuestro sitio local. Haga clic en Configuración aquí, vaya a la navegación, y eliminemos estos enlaces. Creo que teníamos casa, sobre, y blog. Blog aquí, hit save. Ahora si volvemos a nuestro sitio, puedes ver, vamos a refrescarnos una vez más. Ahora puedes ver que tenemos la misma o similar navegación a la que teníamos en nuestra instalación local. Pero hay una cosa más que necesitamos cambiar aquí y que es subir nuestro archivo de rutas actualizado. Si entramos en Configuración aquí y luego nos desplazamos hacia abajo a los laboratorios, no estoy seguro de por qué está en los laboratorios, porque es algo bastante importante que tendríamos que hacer. Pero aquí bajo características Beta, vamos a bajar a rutas y vamos a subir nuestro propio archivo.yaml de rutas. Aquí puedes ver dentro la configuración de contenido es nuestro archivo de rutas, subiremos eso. Eso ahora está subido. Entonces lo que eso significa es que si nos dirigimos a la página de inicio de nuestra página web, veremos la página de inicio. Pero ahora nuestro índice se moverá a la ruta del blog, igual que teníamos localmente y ahora nuestro sitio debería ser exactamente el mismo que el que teníamos localmente. Para refrescar lo que hemos hecho en este video, hemos conseguido nuestro archivo package.json listo aquí mismo. Actualizado todos los detalles para que ya no sea específico de Casper. Creamos un zip de la carpeta temática. Cambiamos el nombre de esa carpeta a nuestro nombre de tema personalizado, en este caso, tema personalizado y luego subimos nuestro tema al administrador de Ghost. Si entro aquí, entro en temas, podemos ver que tenemos ahí nuestro tema fantasma del cliente. Después actualizamos nuestra navegación, por supuesto. Pero entonces finalmente, realmente importante, entramos en laboratorios y actualizamos nuestro archivo de rutas también. Recuerda que las rutas están muy relacionadas con el tema, pero en realidad no está en la carpeta del tema, lo que eso necesita subirse por separado. Eso es lo que se requiere si estás ejecutando un Ghost Pro, sí te recomiendo Ghost Pro si puedes pagarlo por la sencilla razón de que es tan fácil de instalar, decir, es creado por Ghost. Por lo que hacen súper fácil ponerse en marcha con Ghost site. El mismo proceso en otro host, como vimos antes, como Digitalocean o Linode tarda un poco más y así no voy a pasar por eso en esta clase. Lo que uso personalmente es Digitalocean y me permite pagar tan poco como $5 al mes para ejecutar mi sitio web en lugar del mínimo que creo que vimos fue, si voy a la página de precios de Ghost Pro aquí, 25, así que pago cinco veces menos por configurándolo en DigitaLocean. Pero la diferencia es que tuve que pasar como una tarde o una mañana pasando tratando de averiguar cómo realmente configurarlo en Digitalocean. Es un poco más de trabajo configurarlo en DigitaLocean o Linode. Si puedes pagarlo y quieres hacerlo, por todos los medios, usa Ghost Pro. Pero para mí, estaba dispuesto a pasar por la molestia de averiguar cómo hacer que funcionara en DigitalOcean con el fin de pagar menos a largo plazo. Esas son tus opciones ahí. Voy a dejarlo ahí para esta lección y en la siguiente lección, hablaremos de la integración de GitHub. En la siguiente lección, de lo que hablaremos es de crear un flujo de trabajo de GitHub donde podamos simplemente crear ediciones a nuestro tema local, empujarlas a GitHub, y luego actualizará automáticamente nuestro sitio Ghost sin que tengamos para entrar aquí y subir manualmente un archivo zip cada vez. Si quieres aprender a hacer eso, te atraparé en el próximo video bonus. 14. Extra: configuración de la integración de Github: Como se prometió en esta lección extra, vamos a ver cómo podemos usar la integración de GitHub para publicar cambios en nuestros temas de Ghost a través de un solo Git, commit, y push. Git es algo que recomiendo a todos a usar. Muchos de ustedes chicos, estoy seguro que ya lo están usando, pero es una buena manera de rastrear los cambios a su proyecto. GitHub es el sitio web premier que te permite alojar repositorios remotos. Para poder hacer esto, necesitarás una cuenta de GitHub. No voy a pasar por cómo configuras una, pero necesitarás una cuenta de GitHub. Si quieres pausar el video ahora mismo e ir a hacer eso, te esperaré del otro lado. De lo contrario, si tienes una cuenta de GitHub, empecemos a configurar esta integración de GitHub. Basta con seguir esta guía aquí en la página web de ghost.org. Está bajo integraciones/GitHub, y vamos a pasar y seguir este documento. El primer paso va a ser crear la integración personalizada en nuestro sitio Live Ghost. Cómo funciona esto es que vamos a editar el código en nuestra computadora local, vamos a hacer un commit de Git y empujarlo a GitHub. Entonces una vez que llegue a GitHub, va a entonces afectar nuestro sitio en vivo. Para que afecte a nuestro sitio en vivo, vamos a tener que configurar una integración personalizada para que tengamos esos permisos con el fin de afectar a nuestro sitio en vivo. Como dice aquí en Ghost Admin, vamos a navegar a integraciones y crear una nueva integración personalizada llamada Acciones GitHub. Voy a tratar de ejecutar estos de lado a lado. Podría ser un poco apretado, pero sería bueno tener estos uno al lado del otro. Parece que va a estar muy apretado. Aquí vamos. Vamos a entrar en más aquí, haga clic en “Integraciones”, y luego queremos desplazarnos hacia abajo hasta Agregar integración personalizada. Vamos a llamar a la integración, como dice en el documento, Github Actions. Crea esa. Desplázate hacia arriba, y luego a continuación vamos a copiar y pegar los detalles de integración en nuestras variables de entorno de repositorios de GitHub. En realidad necesitamos crear un repositorio de GitHub para que esto funcione. Lo que vamos a hacer es volver a expandir esta ventana, entrar a mi cuenta de GitHub, iniciar sesión, y tengo autenticación de dos factores, así que voy a necesitar autorizar con mi aplicación Authenticator. Ahora vamos a crear un nuevo repositorio usando este símbolo plus aquí arriba, y llamemos a este tema ghost-custom-theme, y luego Tema personalizado creado en mi clase Skillshare Ghost Theme Development. Voy a dejar esto para público para ustedes chicos para que en realidad puedan mirar el código. Sé que algunos de ustedes lo solicitan de vez en cuando, así que publicaré este código a este repositorio. Si quieres ir a esta dirección, esta va a ser una dirección pública después de esto, por lo que puedes ir y hacer eso. Nos vamos a ir y no voy a seguir estas instrucciones palabra por palabra, no me gusta crear una rama principal, me gusta usar la rama maestra. Pasé por esta primera parte aquí, pero lo que voy a hacer es entrar, abramos nuevamente nuestra terminal, tal vez creemos una nueva pestaña aquí, y luego navega a nuestra carpeta donde tenemos el código del tema. Código Cd/ skillshare/ghost-site, y luego desde aquí, creo su contenido, y luego temas, y luego dentro de los temas, sólo echemos un vistazo, casper. Vamos a cd en casper aquí. Entonces vamos a inicializar nuestro repositorio Git. Pero antes de eso, solo voy a hacer esto un poco más grande, y luego ejecutar git init para crear un nuevo repositorio de Git, git agregarle todo y luego hacer nuestro compromiso inicial. Ahora podemos agregar esa dirección aquí mismo, sea lo que sea para ti, agrega eso, y luego podemos hacer git push -u origin master. Ahí vamos. Eso debería ser empujado ahora a nuestro repositorio de GitHub, y si actualizamos, ahora deberíamos tener ese tema aquí arriba. Es copia de la misma lectura de Casper, así que podría hacer algo de limpieza después de esto. Pero aparte de eso, tenemos nuestro tema personalizado Ghost arriba. Vamos a hacer ese siguiente paso que decía en la documentación, por lo que arrastrando esto a través, dijo que después entrara en nuestra Configuración y luego entrara en Secretos. Estamos un poco cansados aquí, pero está dentro de este menú. Entro en Configuración, busco secretos, y luego si me desplaza hacia abajo, puedo crear un nuevo secreto de repositorio, y sigamos exactamente lo que dice aquí. Voy a crear un secreto llamado GHOST_ADMIN_API_URL, y voy a copiar a través de los detalles desde nuestra integración. Voy a tomar la URL de la API, hacer clic en “Agregar secreto”, y luego vamos a agregar una más para el ADMIN_API_KEY, así que copiando esto exactamente, y luego tomando aquí nuestra clave ADMIN_API_KEY y ponerla en ese campo de valor. Eso debería ser suficiente para dar a GitHub permisos suficientes para que realmente afecte a nuestro sitio de Ghost en vivo. Ahora pasemos al siguiente paso, que es instalar la acción de despliegue del tema Fantasma. Vamos a entrar en nuestro tema aquí. Asegúrate de que estamos en la carpeta del tema, y vamos a crear ese nuevo archivo, que era.github/workflows/main.yml. Veamos si podemos hacer esto desde dentro del código VS. Ahí vamos. Ha hecho el camino para nosotros y para todo, por lo que entonces sólo podemos copiar todo esto, pegarlo en nuestro archivo aquí. Eso es todo lo que tenemos que hacer ahí excepto que no tenemos una sucursal principal, así que me voy a deshacer de eso, y eso debería ser. Lo que voy a hacer es abrir de nuevo nuestra terminal, y voy a agregar el cambio, y luego comprometerme eso, agregar código para Acciones GitHub, y luego asegurarme de git push. Eso subirá ese archivo específico a nuestro repositorio de Git. Voy a hacer esto más grande otra vez. Vuelve a nuestro código aquí, y ahora puedes ver que tenemos una carpeta.github con nuestros flujos de trabajo en ella, y tenemos este código para la Acción GitHub. Eso debería ser suficiente para que ahora empujemos cambios aquí y eso para integrarnos en nuestro sitio Ghost. Voy a dirigirme aquí a Temas, y como pueden ver aquí, ya hemos empujado ese tema a nuestro administrador. Como se puede ver aquí entre paréntesis, es un poco confuso porque hay algunos del mismo nombre. Pero ahora tenemos este tema de los fantasmas a la medida. Hagamos un cambio bastante obvio ahora y veamos cómo afecta a nuestro lado vivo cuando usamos la integración de GitHub. Digamos que en lugar de este estilo de encabezado, cambiemos eso a, digamos que vamos a hacer un color de fondo de blanco, solo invertimos los colores básicamente, para que podamos hacerlo. Eso no va a funcionar para la navegación, vamos a necesitar asegurarnos de que el nav también sea de ese color, y así eso debería ordenarlo. Vamos a replicar eso en nuestro archivo CSS. Era cabecera y cabecera A. Esto es solo con fines de demostración, puedes hacer cualquier cambio que quieras a medida que avanza sobre tu proyecto. Esto es sólo para demostrar que el cambio se encontrará cuando publiquemos en nuestro repositorio de GitHub. Voy a hacer esto interruptores blancos, fff. Ahora que hemos hecho un cambio, se puede ver aquí, hemos hecho un cambio allá. Vamos a entrar de nuevo a nuestra terminal, Git agrega a escenificar todos esos cambios, que es solo uno, y luego comprometer actualizaciones encabezado. Entonces vamos a git push, y nuestra acción GitHub debería funcionar entonces. En realidad podemos ver el estado de nuestra Acción GitHub. Cierro esta cabeza hacia aquí, refresco, click en “Acciones”, y puedes ver aquí tenemos un flujo de trabajo funcionando ahora mismo. Dice que empezó hace 15 segundos y ahora está hecho, así que debería tener una garrapata verde junto a ella, y luego si entramos a nuestro sitio Ghost y actualizamos, estoy bastante seguro de que es este segundo aquí. Ahora puedes ver que tenemos nuestro encabezado actualizado Style ahora en vivo en nuestro sitio. Es así como podemos usar GitHub para publicar cambios en nuestro sitio web. Una vez que tengamos esto activo, cualquier cambio que empujemos a este tema estará en vivo en nuestra página web. Podría ser buena idea tener algunas sucursales, una para puesta en escena y otra para vivir. De lo contrario, si mantengo activado este tema y hago cambios localmente que luego empujé a GitHub, entonces esto se cambiará también en nuestro sitio web de Ghost, y eso nos permite hacer cambios continuamente a lo largo del tiempo. Eso es todo por esta lección de bonificación de finace. En el siguiente video, vamos a terminar la clase con nuestra conclusión, y les voy a contar sobre su proyecto de clase. Te veré en el siguiente video. 15. Conclusión y proyecto de clase: Esto concluye esta clase sobre cómo personalizar tu publicación fantasma. Para tu proyecto de clase, te animo a crear tu propio tema fantasma utilizando los conocimientos que adquiriste en esta clase. Si estás atascado en cualquier momento, puedes referirte a la documentación oficial o mi última guía para el desarrollo de fantasmas publicada en mi página web. Por supuesto, si eso aún no ayuda, puedes dejar un comentario en el recuadro de discusión de abajo, y haré todo lo posible para señalarte en la dirección correcta. Como siempre, gracias por ver y espero volver a verte en algunas de mis otras clases.