Aprenda cómo puede utilizar un enfoque MVC para aplicar una plantilla bootstrap a su sitio web de Sitefinity en este tutorial paso a paso.

¿Alguna vez le han dado una plantilla que alguien más codificó para crear un sitio de Sitefinity? En caso afirmativo, este artículo es para ti. Exploraremos cómo aplicar Timer, una plantilla de arranque personal de varias páginas receptivas gratuita a un proyecto de Sitefinity utilizando un enfoque MVC con un paquete Bootstrap.

Es muy fácil aplicar una plantilla Bootstrap descargada de Internet a un proyecto de Sitefinity cuando se utiliza MVC. Primero configuramos el proyecto y combinamos los recursos CSS y JS y los referimos en el archivo de plantilla. El segundo paso es configurar la plantilla en Sitefinity y en el paso tres creamos las páginas y los módulos dinámicos que utilizan. En general, cada página tiene varios widgets de cuadrícula que son marcadores de posición con etiquetas HTML y clases CSS y widgets de contenido que se colocan en los widgets de cuadrícula. Los widgets de contenido pueden ser bloques de contenido, que son básicamente HTML gratuito, o widgets utilizados para mostrar los elementos de contenido de los módulos de contenido.

Por otro lado, trabajar con MVC siempre es súper divertido. Está desarrollado para los usuarios frontend de Sitefinity y ha adoptado las últimas tendencias de frontend para administrar los activos de frontend. Además, tiene control total sobre el marcado que generan los widgets. Comencemos con la configuración.

Configuración de proyectos y paquetes

1. Cree un proyecto de Sitefinity.

2. Copie los activos frontend de la plantilla Timer a <root>/ResourcePackages/Bootstrap/assets/project.

Importe los archivos CSS en <root>/ResourcePackages/Bootstrap/assets/project/sass/main.scss.

En <root>/ResourcePackages/Bootstrap/jsfiles.json, enumere los archivos JS de <root>/ResourcePackages/Bootstrap/assets/project/js.

Después de eso, abra una consola de línea de comandos en <root>/ResourcePackages/Bootstrap, instale el paquete con npm install, ejecute la tarea grunt iconfont para copiar los archivos de fuente en <root>/ResourcePackages/Bootstrap/assets/dist y grunt para compilar los archivos CSS y JS en la carpeta <root>/ResourcePackages/Bootstrap/assets/dist.

3. Después de eso, abra default.cshtml (<root>/ResourcePackages/Bootstrap/Mvc/Views/Layouts/) y agregue referencias a los archivos *.css y *.js. Luego agregue marcadores de posición para el encabezado, el cuerpo y el pie de página de la página y las respectivas etiquetas HTML a su alrededor.

4. Coloque el archivo favicon.ico en la raíz del proyecto (en <root>)y después del reinicio de la aplicación, el sitio comenzará a usarlo.

Echa un vistazo a este video para obtener más información sobre la configuración del proyecto:

Configuración de plantillas de página

5. default.cshtml es la base de la plantilla de página predeterminada en Sitefinity en Diseño > plantillas de página.

Agregue las partes reutilizables de la plantilla Temporizador a la plantilla de página predeterminada en Sitefinity en Diseño > plantillas de página para que las usen todas las páginas.

Abra la plantilla de página predeterminada (Sitefinity en Diseño > plantillas de página)y agregue el widget de cuadrícula de contenedor a los marcadores de posición de encabezado y pie de página.

El pie de página consta de columnas bootstrap, así que coloque el widget de cuadrícula grid-8 + 4 en él. El resto del pie de página es código HTML, que se puede colocar en widgets de bloque de contenido (es más fácil colocar el HTML directamente en la vista HTML del widget de bloque de contenido).

6. Lo siguiente que debe hacer es elegir qué plantilla de navegación usar. El más adecuado resulta ser NavigationView.Horizontal.cshtml (del paquete Bootstrap).

En <root>/ResourcePackages/Bootstrap/MVC/Views haga una copia de NavigationView.Horizontal.cshtml y asígnele el nombre NavigationView.TimerHorizontal.cshtml. Después de eso, cambie el marcado de la plantilla para que sea como el marcado de la navegación del temporizador. Consejo: Asegúrese de eliminar la referencia jQuery de la plantilla de navegación, ya que ya está cargada en el archivo Diseño.

7. A continuación tenemos que crear dos widgets de cuadrícula que se utilizan comúnmente para envolver diferentes partes de las páginas.

Todas las páginas contienen elementos de sección (<sección>). Cree un widget de cuadrícula "Section.html" y colóquelo en <root>/ResourcePackages/Bootstrap/GridSystem/. En algunos casos, se utiliza una etiqueta <div>HTML con fila de clase CSS para envolver una sección. Cree un widget de cuadrícula denominado fila (<root>/ResourcePackages/Bootstrap/GridSystem/row.html).
Consejo: Es importante poner la clase "sf_colsIn" en la etiqueta <div>html para crear un marcador de posición en la interfaz de usuario de Sitefinity.

8. La mayoría de las secciones de la plantilla Timer tienen IDENTIFICADOR asignados. Estos ID se utilizan en el CSS para definir selectores CSS. Se utilizan varias instancias del mismo widget de cuadrícula en la misma página, por lo que no puede haber atributos de ID únicos para cada widget de cuadrícula arrastrado. Por lo tanto, los ID de la plantilla Timer deben reemplazarse con clases CSS. Abra <root>/ResourcePackages/Bootstrap/assets/project/css/main.css y cambie los selectores de id a selectores de clase con el prefijo "sf-" para que puedan distinguirse de los estilos CSS de la plantilla nativa timer. Después de eso, estas clases se pueden aplicar fácilmente a ciertos widgets de cuadrícula arrastrados en la página a través de la interfaz de usuario de Sitefinity para alterar su apariencia. Por ejemplo, si la plantilla Timer contiene un elemento de sección con id="hero-area" (<section id="hero-area">), el ID se reemplazará por la clase CSS "sf-hero-area" (<section class="sf-hero-area">).

9. Hay elementos de sección repetidos entre las páginas. Las secciones repetidas deben colocarse en las plantillas para que puedan ser utilizadas por todas las páginas.

Todas las páginas tienen una sección de "llamada a la acción", por lo que se agrega una sección de " llamada a laacción" a la plantilla de página predeterminada en Sitefinity en Diseño > Plantillas de página.

Siete páginas tienen una sección "global-page-header", por lo tanto, se crea otra plantilla basada en la predeterminada. Se llama default-with-global-header y la sección "global-page-header" se coloca en él.
El "global-page-header" consiste en un envoltorio <div>con clase CSS, un <h2>heading y una miga de pan. Arrastre un widget de cuadrícula grid-12 y establezca la clase CSS necesaria en el diseñador de widgets en su propiedad Classes. Para el encabezado, coloque un widget de bloque de contenido en el widget de cuadrícula grid-12 y hágalo editable en las páginas desde su menú de acciones. En la plantilla se especifica el marcado común y en cada página se edita el bloque de contenido en particular para escribir el nombre de página en particular.

Para la miga de pan, use una miga de pan MVC con una plantilla diferente como se hizo para otros widgets anteriormente.

Ahora que todos los elementos comunes están configurados, procedamos con páginas individuales.

Echa un vistazo a este video para obtener más información sobre las plantillas de página:

Creación y configuración de páginas

10. Inicio

a) La página de inicio contiene un encabezado con información sobre el diseñador. Para crear este encabezado, use un widget de bloque de contenido y pegue el HTML requerido en él.

b) A continuación viene la información "Acerca de mí", que consiste en un texto y una imagen. Para lograr esta parte del diseño, coloque un widget de cuadrícula de sección y en el diseñador de widgets establezca sf-about en la propiedad de sección. Después de eso, coloque un widget de cuadrícula de contenedor y luego coloque otro widget de cuadrícula de cuadrícula-6 + 6 en él. Las dos columnas del widget de cuadrícula grid-6+6 tienen clases CSS col-sm-6, así que haga clic en Editar y agréguelas a las propiedades Columna 1 y Columna 2. El diseño está listo, así que suelte dos widgets de bloques de contenido en cada columna. El primer widget de bloque de contenido contiene texto y marcado simple con clases. El de la segunda columna contiene una imagen y algo de marcado. Agregue la imagen desde la herramienta Insertar imagen del widget Bloque de contenido.

SUGERENCIA: El widget Imagen no se utiliza en este caso particular, porque se necesita un marcado adicional alrededor de la imagen y la forma más fácil de agregarlo es directamente en el widget de bloque de contenido.

c) Para la siguiente sección, agregue un widget de cuadrícula de sección y establezca la clase CSS necesaria como se hizo en el paso anterior. Después de eso, arrastre un widget de cuadrícula de contenedor en el widget de cuadrícula de sección. Esta sección consta de obras de arte con información de título, imagen y detalles. Para añadir nuevos elementos y modificar los existentes fácilmente, cree un módulo dinámico llamado Artwork,con elementos de contenido"works"y con los siguientes campos:

- Título - Tipo: Texto corto

- Información - Tipo: Texto largo

- Descripción - Tipo: Texto corto

- Imagen - Medios relacionados (imágenes, videos, archivos)

Después de crear el módulo, cree algunos elementos de módulo en Sitefinity en Content > Artwork. A continuación, modifique las plantillas Lista y Detalles del módulo, para adaptarse al diseño. Para cada módulo personalizado, las plantillas de widgets List y Detail se crean en Sitefinity en Diseño > Plantillas de widgets. El nombre de las plantillas se List.work (Lista.[ name-of-content-item]) y Detail.work (Detail.[ nombre-de-contenido-elemento]). Para modificar la vista Lista o Detalle predeterminada o para crear otras nuevas, cree una carpeta con el nombre del elemento de contenido (¡no el tipo de contenido!) en <root>/ResourcePackages/Bootstrap/Mvc/Views/ y dentro de <root>/ResourcePackages/Bootstrap/Mvc/Views/work agregue las plantillas siguiendo la convención de nomenclatura.

Para modificar la vista Lista, agregue un archivo cshtml List.work.cshtml (porque el nombre de los elementos de contenido es work)en <root>/ResourcePackages/Bootstrap/Mvc/Views/work. Para crear otra lista o plantilla de detalle, cree un archivo .cshtml y siga la convención de nomenclatura "Lista." o "Detalle." + [nombre-de-la-plantilla] + ".cshtml". [nombre-de-la-plantilla] se mostrará en la interfaz de usuario.

Cree List.WorkList.cshtml en <root>/ResourcePackages/Bootstrap/Mvc/Views/work y modifique su marcado. Después de eso, suelte un widget de obras en la página, abra su diseñador, elija la plantilla de lista WorkList y configúrela para abrir elementos individuales en la página de detalles de Ilustraciones.

d) Para la última sección, agregue un widget de cuadrícula de sección y un widget de cuadrícula de contenedor y configure las clases CSS. Esta sección consta de dos filas con tres elementos de columna en cada fila. Los elementos tienen clases col-md-4 col-lg-4 col-xs-12 asignadas a ellos. Una vez más, use los widgets de cuadrícula predeterminados que vienen con las clases "-md" y agregue manualmente las otras clases de resolución a través del diseñador de widgets de cuadrícula. El resto se logra con widgets de bloque de contenido en cada elemento de columna.

Detalles de la obra

11. Cree la página y arrastre un widget de trabajo. Cree una nueva plantilla de detalle como se hace para la vista Lista y configure el widget de obras para usarla.

Echa un vistazo a este video para ver más en las páginas de detalles de la casa y las obras de arte:

12. Acerca de

a) Edite el widget de bloque de contenido en la sección "global-page-header" para escribir el título de la página.

b) Configure la siguiente sección con un widget de cuadrícula de sección y otro widget de cuadrícula de contenedor y configúrelos según sea necesario. La sección tiene dos columnas, así que arrastre un widget de cuadrícula de cuadrícula-6 + 6 en el widget de cuadrícula de contenedor. La primera columna contiene una imagen. Utilice el widget Imagen para cargar la imagen en las bibliotecas de Sitefinity y agregarla a la página. La imagen tiene una clase img-responsive. Agregue la clase a través del diseñador de widgets De imagen.

Consejo: Todo el contenido estático (por ejemplo, texto, que no debería formar parte de ningún módulo) se puede colocar directamente en un widget de bloque de contenido.

c) Configure la siguiente sección con un widget de cuadrícula de sección y establezca las clases CSS necesarias(about-feature clearfix). Después de eso, suelte un widget de bloque de contenido y agregue el HTML para esta sección a través de la vista HTML del editor de widgets de bloque de contenido.

d) Configure la siguiente sección con un widget de cuadrícula de sección y otro widget de cuadrícula de contenedor y configúrelos según sea necesario. La sección "Conoce al equipo" se puede manejar con un módulo dinámico. Crear un módulo Equipo con elementos de contenido "miembros del equipo" y campos:

- Título (Nombre) - Tipo: Texto corto

- JobTitle (Título del trabajo) - Tipo: Texto corto

- ShortInfo (Información corta) - Tipo: Texto largo

- Facebook - Tipo: Texto corto

- Twitter - Tipo: Texto corto

- LinkedIn - Tipo: Texto corto

- Google (Google+) - Tipo: Texto corto

Una vez creado el módulo, cree una plantilla de lista, cambie su marcado y configúrelo como se hizo para el módulo Ilustraciones.

13. Servicio

a) Las secciones "Lo que nos encanta" y "Nuestros clientes satisfechos" son similares a las secciones que ya se han configurado en otras páginas.

b) Hay otra lista con obras de arte en esta página. Esta lista contiene sólo obras destacadas. Vaya a Contenido de Sitefinity > Ilustraciones y marque todas las obras destacadas con la etiqueta Destacado. Suelte un widget de trabajo en la página y limite los elementos que se mostrarán a los etiquetados con Destacado. En la ficha Configuración de lista, establezca cuatro elementos que se mostrarán y configure la plantilla de lista. En la pestaña Configuración de un solo elemento, configure los elementos individuales que se abrirán en la página de detalles de Arwork.

14. Galería

a) Esta página contiene una galería de imágenes con obras de arte. Así que cree una plantilla de galería personalizada List.WorksGallery.cshtml en <root>/ResourcePackages/Bootstrap/Mvc/Views/ImageGallery y modifique su marcado.

Cree un nuevo álbum de ilustraciones en Sitefinity Content > Images y configure el widget Galería de imágenes para que muestre solo imágenes de esta galería seleccionada.

15. Blog Completo

En el módulo Entradas de blog, agregue un campo personalizado desde el tipo Imágenes relacionadas en Campos personalizados para publicaciones. Este campo se utilizará para la imagen de encabezado. Algunas publicaciones de blog pueden tener ilustraciones relacionadas, por lo tanto, cree otro campo personalizado ArtWork a partir del tipo Datos relacionados y trabajos de tipo de datos. Los metadatos del negocio y las personas serán etiquetas.

a) Cree la página completa del blog y arrastre un widget de publicaciones de blog.

b) Crear una plantilla de Lista bajo <root>/ResourcePackages/Bootstrap/Mvc/Views/BlogPost/ y modificar su marcado.

c) Configure el widget Entradas de blog para usar la plantilla BlogPostList y para abrir elementos individuales en la página de detalles del blog.

16. Detalles del blog

a) Arrastre un widget de publicaciones de blog.

b) Cree una plantilla detallada del widget De publicaciones de blog en <root>/ResourcePackages/Bootstrap/Mvc/Views/BlogPost/ y agregue una plantilla para las ilustraciones relacionadas en ella.

Vaya a Contenido de Sitefinity > ilustraciones > páginas donde se publican elementos como este y mueva la página de detalles de ilustraciones en la parte superior. Después de eso, las obras de arte relacionadas de una publicación de blog se abrirán en la página de detalles de la obra de arte.

c) Cada plantilla de detalle de publicación de blog contiene una opción de compartir en redes sociales. El widget de uso compartido de MVC Social se puede habilitar a través del diseñador del widget. Para ello, abra Edit > Advanced > Modal y establezca EnableSocialShare en True.
CONSEJOS: Para habilitar más opciones de uso compartido en redes sociales, vaya a Administración de Sitefinity > Configuración > Uso compartido en redes sociales y verifique las que necesita.

d) Para habilitar los comentarios para blogs, vaya a Administración > ComentariosMódulo > Tipos comentables. A continuación, cree plantillas de comentarios personalizadas en <root>/ResourcePackages/Bootstrap/Mvc/Views/Comments.
Consejo: Al modificar la plantilla, asegúrese de mantener las adiciones de Sitefinity, como la clasificación y el recuento de comentarios. Además, puede habilitar Captcha desde Administración > CommentsModule > UseSpamProtectionImage.

17. Barra lateral izquierda del blog

Las secciones específicas para esta página son la sección de búsqueda, la sección de categorías y la sección de publicaciones recientes.

a) Para la sección de búsqueda, utilice un widget de cuadro de búsqueda y cree un nuevo índice de búsqueda para las entradas de blog en Administración de Sitefinity > Índices de búsqueda.
Cree una nueva plantilla de widget de cuadro de búsqueda en <root>/ResourcePackages/Bootstrap/Mvc/Views/SearchBox y cambie el marcado según sea necesario.
Configure el widget del cuadro de búsqueda para usar el índice de búsqueda creado y la plantilla de widget SearchBox, así como para mostrar los resultados en la página de búsqueda izquierda del blog.

b) Para la sección de categorías, use un widget Categorías y cree una plantilla personalizada CategoriesSidebarList (como se hizo con otros widgets anteriormente)

c) Para la sección de entradas de blog recientes, use un widget de publicaciones de blog y cree una nueva plantilla BlogPostSimple. Configure el widget para que muestre solo tres elementos en total, para ordenar las publicaciones de modo que las últimas publicadas estén en la parte superior y para abrir un solo elemento en la página de detalles del blog.

d) Arrastre un widget de entradas de blog y configúrelo para abrir elementos individuales en la página de detalles del blog como se hace para la página completa del blog.

18. Resultados de búsqueda a la izquierda del blog

a) Cree esta página como un duplicado de la barra lateral izquierda del blog, pero cambie el widget De publicaciones del blog con un widget de resultados de búsqueda.

b) Vaya a Contenido de Sitefinity > blogs y haga clic en Acciones > título y propiedades del elemento Blog. Establezca la propiedad Página predeterminada en Blog > Detalles del blog. Después de eso, las publicaciones de blog del widget de resultados de búsqueda se abrirán en la página de detalles del blog como en los otros casos.

19. Contactos

La sección interesante de esta página es el formulario de contacto. Las otras secciones se realizan con widgets de cuadrícula de sección + contenedor y widgets de bloque de contenido.

a) Crear un formulario Contacto conmigo ContactWithMe en Sitefinity Contenido > Formularios.

b) Cambiar el marcado de los campos en las carpetas ParagraphTextField, TextField y SubmitButton en <root>/ResourcePackages/Bootstrap/Mvc/Views/.

c) Personalice el mensaje que se muestra después de enviar el formulario en el diseñador de widgets de formulario en la pestaña Configuración.

Conclusión

¡Esperamos que este tutorial paso a paso te haya sido útil! Puede obtener más información sobre Sitefinity aquí,y no dude en consultar el código fuente de todo lo anterior en este repositorio de Github.

¿Necesita un repaso o una guía paso a paso sobre cómo aprovechar todo el poder de Sitefinity? Hemos diseñado un curso gratuito para ayudar a los desarrolladores a ponerse al día con la última versión de Sitefinity. Regístrate aquí,.