icon: LiScreenShareModelado de vistas
Una vez vista la sección Modelado de contenidos y entendidos los conceptos básicos de Strapi para añadir elementos a cada Colección (Collection Type) a través del Content Manager, vamos a proceder a incluir estos en las diferentes secciones de nuestra web a través de cada Vista (single type), como ya hemos introducido previamente.
En la misma vista que usamos para añadir contenidos accederemos a las páginas.
Las modificaciones no se ven inmediatamente en el servidor de producción (es decir, con la página web ya desplegada). Normalmente tarda unas 24-48h en aparecer. Esto es configurable y si decidimos cambiarlo, lo podemos ajustar, pero por seguridad de momento he dejado esta configuración por defecto del servidor NextJS (frontend)
Vistas
Veremos cada vista individualmente para familiarizarnos.
Hay que recordar que para cada vista habrá que completar la versión en castellano e inglés, y asegurarnos de que hemos publicado el contenido. De lo contrario en el idioma correspondiente no se verá la información deseada:
Contact Page
Esta es la página de contacto, en ella tendremos por una parte un mapa de la ubicación de las oficinas de Calsens, información sobre la misma y un formulario.
De esta vista, la única parte configurable es la información sobre la ubicación de Calsens:
Si en Strapi accedemos a Content Manager > Single Types > Contact Page, veremos la siguiente vista:
Se puede apreciar el contenido escrito en el bloque de texto "sideText". Strapi usa un bloque de texto enriquecido que permite asignar encabezados, estilos básicos de texto y enlaces.
Para esta vista, hemos usado:
| Elemento | Caracteristicas |
|---|---|
| Titulos de seccion (location, contact) | Encabezado de tipo 2 |
| Direccion y teléfono | Texto básico |
| Correo electrónico | Enlace |
El formulario de esta sección está integrado en la propia vista del frontend, por lo que no se puede modificar. Tan solo recibiremos los mensajes que se envíen a través del mismo en la Colección (Collection Type) Mensajes.
🏠Home Page
Esta es la landing page de la página. La página principal.
En este esquema podemos ver la relación entre los campos del formulario y la vista:
Y a continuación, un pequeño ejemplo sobre la edición de esta página:
Header
En esta sección se puede configurar:
Header
Las rutas básicas y los nombres de cada sección de la web (el menú superior).
Esta sección solo será editable por el webmaster, ya que las rutas y los titulos están escritos en un archivo JSON que si se manipula de forma indebida provocará que las rutas no funcionen.
Footer
El footer de la página está dividido en 3 columnas (4, si contamos con el logo de Calsens)
- Columna 1 - Información de contacto
- Columna 2 - Redes sociales
- Columna 3 - Copyright y firma
Estos campos pueden ser modificados como se necesite. (Menos la columna 3, que es mi firma... 😉)
🛠️ Projects Page
Este es el Dossier general de proyectos de la página. En frontend, utiliza el mismo componente que podemos ver en la Home Page.
En este caso tenemos muchos más proyectos distribuidos en "grid". Podemos añadir, quitar y reordenar los proyectos que queremos que aparezcan en esta vista.
 |
 |
|---|
Por defecto el componente solo muestra 5 elementos de la selección total, para ver todos, hay que darle a "Load More" y aparecerá el scroll
🔎Vista detalle de proyecto
La vista detalle del proyecto ya la hemos tratado en la colección correspondiente al proyecto:
Modelado de contenidos > Project
🏷️Product Page
Dossier general de productos. Ahora mismo tenemos una vista general de los mismos, con una descripción y su datasheet.
Además de la lista de productos a añadir, en esta pagina tenemos también el título customizable, por si consideramos que es necesario añadirlo.
🔎Vista detalle de producto
La vista detalle del proyecto ya la hemos tratado en la colección correspondiente al proyecto:
Modelado de contenidos > Product
👩🔬👨🔬R&D Projects
Dossier general con los proyectos de investigación y desarrollo que se están llevando a cabo.
Tan solo hemos de ir añadiendo los proyectos R&D que queramos incluir en la vista.
Las versiones en inglés y castellano de cada página son completamente "separadas" en cuanto a contenidos. Si se añade algo en una vista, hay que añadir su contraparte en la versión correspondiente.
🔎Vista detalle de R&D project
La vista detalle del proyecto ya la hemos tratado en la colección correspondiente al proyecto:
Modelado de contenidos > R&D Project
🖥️Service Page
Sección con los servicios que ofrece Calsens.
Puesto que está planteado como una sección estática, en este caso tan solo hay tres partes:
Y para cada elemento restante (second, third) los mismos campos.
😊Team Page
En esta página veremos el componente "equipo" que usaremos para navegar por todos los miembros de Calsens.
El proceso es similar para esta página también. El campo "team_members" conecta automáticamente con el componente que dibuja el "slider" de miembros. 🔎Vista detalle de Team member
La vista detalle del proyecto ya la hemos tratado en la colección correspondiente al proyecto:
Modelado de contenidos > Team Member.
🔏Privacy policy
Campo todavía sin implementar, que se refiere a la política de cookies del sitio. se realizará una vista similar a las anteriores.