CULTURA

BlogEngine.Net: widget de zonas múltiples para temas de Razor

Hace poco tiempo, una empresa se puso en contacto conmigo para que apareciera un anuncio solo en la barra lateral de la página de inicio. Así que tuve que crear un widget personalizado para colocarlo solo en la página de inicio.

Así que empecé a hurgar en los meandros del Foro BlogEngine.Net para intentar encontrar algo que me permitiera crear múltiples zonas de widgets: widgets diferentes y diferentes entre la página de inicio y las publicaciones individuales.

Un artículo interesante es el de Cuartos de Ben que explica muy bien los widgets de zona múltiple para temas en BlogEngine.Net: Múltiples Widgetzone en BE.

El problema es que mi tema es un tema de la maquinilla de afeitar, por lo que el asunto se volvió tremendamente complicado, ya que estamos hablando de archivos con la extensión chstml y no aspx o ascx (el Razor fue creado por Microsoft con el objetivo de obtener un diseño compacto y expresivo). Traté de pedir ayuda al foro BE.Net, tratando de definir un solo widget con el anuncio requerido en la página de inicio para ocultarlo en las páginas y publicaciones.

Prácticamente todos los widgets tienen IDENTIFICACIÓN, al establecer la ID del widget en visible = true en la página de inicio y en visible = false en las otras secciones, podría haber resuelto el problema, pero para el tema de la maquinilla de afeitar no hay widgetContainer, así que tuve que crear un widget de zona múltiple personalizado para el home y para páginas y publicaciones.

Widget de múltiples zonas en BE.Net

Básicamente, así es como lo hice:

<!-- Begin #colRight -->
@if (Request.Url.ToString().ToLowerInvariant().Contains("/default.aspx"))  	
{                     	
if (Request.RawUrl.ToLowerInvariant().Contains("/category/") || Request.RawUrl.ToLowerInvariant().Contains("/author/") || Request.RawUrl.ToLowerInvariant().Contains("?tag=") || Request.QueryString["year"] != null || Request.QueryString["date"] != null || Request.QueryString["calendar"] != null)
	    {
	     <div id="sidebar-page">
@Html.Raw(Html.RenderWidgetZone("page-sidebar"))
</div>
}
else
{
	        @Html.Raw(Html.RenderWidgetZone("be_WIDGET_ZONE"))
	    }
}
else
{
	    <div id="sidebar-page">
@Html.Raw(Html.RenderWidgetZone("page-sidebar"))
</div>
}

He creado en el archivo principal de mi tema, en mi caso Site.Cshtml, una condición en la que le digo al sistema que si la página en la que estoy es diferente de la página de inicio, "page-sidebar" es la zona de widgets para utilizar como barra lateral; de lo contrario, puede utilizar de forma segura "be_WIDGET_ZONE".

Ayudándome con el CSS todo lo que hice fue usar la identificación "siderbar-page" para definir los colores, formas y fuentes de los nuevos widgets.

Además de la posibilidad de crear dos barras laterales diferentes con diferentes widgets para páginas, artículos, página de inicio, etc., también es posible crear zonas de widgets dentro de la barra lateral. Por ejemplo, si queremos diferentes zonas de widgets dentro de la barra lateral podemos crear un midWidget y un bottomWidget, ayudándonos siempre con CSS:

<!-- Begin #colRight -->
<div id="colRight">
<div id="topWidget">
@Html.Raw(Html.RenderWidgetZone("be_WIDGET_ZONE"))
</div>
@if (Request.Url.ToString().ToLowerInvariant().Contains("default.aspx") || Request.Url.ToString().ToLowerInvariant().Contains("blog.aspx"))
{
<div id="midWidget">
@Html.Raw(Html.RenderWidgetZone("be_WIDGET_MID"))
</div>
}
<div id="bottomWidget">
@Html.Raw(Html.RenderWidgetZone("be_WIDGET_BOTTOM"))
</div>
</div>
<!-- End #colRight -->

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Cerrar