7 marzo 2010  4

Personalizzare al meglio la home page di un blog sviluppato con BlogEngine.NET

c# code behind

Il motore di blog authoring basato su BlogEngine.NET, consente di essere produttivi in pochissimi minuti. L’installazione di base, infatti, permette di creare un blog semplicemente copiando tutti i file del pacchetto nel proprio spazio di hosting, senza ricorrere (virtualmente) ad alcun tipo di configurazione successiva.

Naturalmente, nel caso in cui si voglia personalizzare il proprio sito, sarà necessario intervenire su uno dei temi in dotazione oppure installarne uno tra gli ormai svariati disponibili in rete o, meglio ancora, se se ne hanno le opportune capacità tecniche, crearne uno ex-novo.

Lo scopo di questo articolo non è quello di spiegare come creare un nuovo tema, quanto quello di fornire alcune piccole indicazioni su come poterlo personalizzare in maniera più avanzata.

Una delle cose che mi colpì maggiormente, quando ormai quasi tre anni fa, cominciai a seguire (e a collaborare per) lo sviluppo di BlogEngine.NET, fu l’apparente rigidità della struttura di presentazione dell’elenco degli articoli che, ai tempi, sembrava difficilmente personalizzabile.

Lo schema di presentazione dei post è descritto tramite la definizione del componente PostView.ascx presente nella cartella del tema utilizzato. Questo schema viene utilizzato per la visualizzazione dell’elenco degli articoli in ordine cronologico inverso accessibile dalla home page o tramite i filtri di ricerca applicabili per categorie, tag, data o autore. Lo stesso viene però utilizzato anche per la visualizzazione del singolo articolo.

Apparentemente, a meno di non ricorrere all’ausilio di una estensione dedicata, sembra impossibile creare degli schemi di presentazione differenti a seconda del contesto di visualizzazione.

Una prima soluzione potrebbe essere quella di creare una pagina ad hoc ed impostarla come home page. Al suo interno si potrebbero incorporare dei componenti realizzati ad hoc per visualizzare, ad esempio un preview in evidenza dell’ultimo articolo pubblicato, un elenco sintetico dei titoli degli articoli precedenti o una serie di box contenenti gli articoli più letti (e di conseguenza più interessanti) per ciascuna categoria.

Questa strada, sebbene virtualmente corretta, sarebbe legata anche alla creazione di contenuti (una pagina) e di componenti aggiuntivi, quindi sarebbe di più difficile “trasportabilità” all’interno di un tema.

La soluzione più semplice

In realtà è possibile implementare delle soluzioni di presentazione condizionale, inserendo dei controlli semplicissimi all’interno del codice del già citato PostView.ascx.

Prendiamo come esempio la nuova struttura di questo blog. In home page, l’ultimo articolo pubblicato è in evidenza, mentre quelli precedenti sono elencati in maniera più stringata e con un aspetto grafico più compatto. Al tempo stesso, ciascun articolo contiene delle sezioni, come ad esempio quella di voto o di segnalazione sui social network, che non vengono mostrate nella visualizzazione elenco.

A tal scopo è sufficiente inserire nel codice dei controlli condizionali di questo tipo:

<%
   1:  if (Post.Next == null) {
   2:    // Se la condizione è verificata allora è l'ultimo post pubblicato 
%>
<div class="featured-post">
    <!-- codice HTML di presentazione dell'articolo in evidenza -->
</div>
<%
   1:  } else { 
%>
< div class="simple-post">
    <!-- codice di presentazione degli altri articoli -->
</div>
<%
   1:  } 
%>

Verificando che l’oggetto Post correntemente esaminato sia il primo della pila (Post.next == null) è possibile applicare una formattazione differente ai dati da presentare sulla pagina web.

Allo stesso modo, con il semplice controllo:

<%
   1:  if (Request.RawUrl.ToLower().Contains("/post/")) { 
%>
<div class="post.single">
    <!-- Codice HTML da mostrare solo nella pagina specifica del post -->
</div>
<%
   1:  } else { 
%>
<div class="post-list">
    <!-- Codice HTML da mostrare solo in home page e negli elenchi -->
</div>
<%
   1:  } 
%>

è possibile decidere cosa visualizzare dell’articolo in home page e cosa invece visualizzare solo nella pagina specifica.

Voglio ricordare che per poter effettuare controlli sulle collection di sistema relative ai post o ai commenti è necessario includere la direttiva

<%@ Import Namespace="BlogEngine.Core" %>

nell’intestazione del codice di PostView.ascx.

I più smaliziati potrebbero anche sentire la necessità di creare del “code behind” ad hoc per il componente di cui sopra. Questo è certamente possibile: è sufficiente creare ex-novo la classe PostView.ascx.cs.

In tal caso è obbligatorio far ereditare la classe stessa dal componente BlogEngine.Core.Web.Controls.PostViewBase, tramite una definizione del tipo:

public partial class My_PostView : BlogEngine.Core.Web.Controls.PostViewBase
{
    // codice della classe
    protected void Page_Load(object sender, EventArgs e)
    {
        ...
    }
    ...
}

non trascurando gli opportuni riferimenti sempre nel codice dell’intestazione di PostView.ascx:

<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="false" 
        CodeFile="PostView.ascx.cs" Inherits="My_PostView" %>

Conclusioni

Come avrete potuto osservare, con pochi piccoli controlli diventa possibile controllare ogni aspetto della presentazione del componente postview.

Questo consente di creare dei temi più accattivanti e vari nella presentazione delle proprie sezioni, agendo unicamente sul codice di definizione del tema. Il tutto senza ricorrere all’ausilio di estensioni che non solo non riuscirebbero a garantire la flessibilità necessaria, ma sarebbero vincolate ad un esecuzione globale sull’intera applicazione.

Esprimi il tuo giudizio

Commenti (4) -

Chiara
Chiara
13 mar 2010 alle 19:28  01
Ciao, complimenti bel post. Ho seguito quanto scritto e sono riuscita a visualizzare i post in Home page in maniera differente. Ma non riesco assolutamente ad inserire una thumbnail di una immagine come hai fatto tu, vicino ai titoli dei post. Potresti darmi una dritta su come muovermi?

Grazie.

Chiara
Cristiano
Cristiano
13 mar 2010 alle 23:20  02
@ Chiara :
Basta leggere l'articolo precedente a questo, ovvero:
www.cristianofino.net/.../...odice-HTML-e-CSS.aspx
Chiara
Chiara
18 mar 2010 alle 10:24  03
@ Cristiano:

Ok, grazie mille ci sono riuscita. Ultima domanda, un pò off-topic.
Nel caso volessi usare come sorgente dati SQL Server, il database può risiedere su un elaboratore diverso rispetto al web-server?
Cristiano
Cristiano
19 mar 2010 alle 09:20  04
@ Chiara:
Certamente

Aggiungi Commento

biucitecode
  • Commento
  • Anteprima
Loading


| |   |  

Codice QR

Codice QR - cristianofino.net

Ultimi Commenti