Orchard: personalizzare il Body Summary

3 set 2012 23:20

_DarkOrchard Prendendo spunto dall’articolo My Body Summary template for Orchard di Bertrand Le Roy, ho deciso di rendere l’aspetto dei post un po’ più attraente, considerando che la prima immagine che accompagna un post attira l’attenzione ancor prima del titolo e naturalmente della sinossi.

Riportando quanto detto da Bertrand, l’implementazione di default del modello che si occupa del rendering del corpo di un content in modalità sommario, Common.Body.Summary.cshtml, estrae i primi 200 caratteri e rimuove ogni markup.

Per personalizzare tale comportamento è sufficiente eseguire l’override del template creando il file Common.Body.Summary.cshtml nella cartella Views/Parts. Quello proposto da Le Roy permette di estrarre tutto il body fino al segnaposto <!---more->. In mancanza del commento verrà preso il primo paragrafo. In entrambi i casi non viene rimosso alcun markup. Ecco il codice:

@{
  Orchard.ContentManagement.ContentItem contentItem =
    Model.ContentPart.ContentItem;
  var bodyHtml = Model.Html.ToString();
  var more = bodyHtml.IndexOf("<!--more-->");
  if (more != -1) {
    bodyHtml = bodyHtml.Substring(0, more);
  }
  else {
    var firstP = bodyHtml.IndexOf("<p>");
    var firstSlashP = bodyHtml.IndexOf("</p>");
    if (firstP >=0 && firstSlashP > firstP) {
      bodyHtml = bodyHtml.Substring(firstP, firstSlashP + 4 - firstP);
    }
  }
  var body = new HtmlString(bodyHtml);
} 

<p>@body</p> 
<p>@Html.ItemDisplayLink(T("Read more...").ToString(), contentItem)</p> 

In Orchard, usando l’editor predefinito TinyMCE, bisogna inserire il segnaposto aprendo il sorgente HTML dell’elemento in modifica:

HtmlView

Personalmente ho preferito modificare il sorgente per includere il link “more” nel paragrafo estratto dal body e per evitare che vi siano doppi tag >p<:

@{ 
    Orchard.ContentManagement.ContentItem contentItem = 
        Model.ContentPart.ContentItem;

    var bodyHtml = Model.Html.ToString();
    var more = bodyHtml.IndexOf("<!--more-->");

    if (more != -1) {

        bodyHtml = bodyHtml.Substring(0, more).Trim();

        if (bodyHtml.StartsWith("<p>")) 
            { bodyHtml = bodyHtml.Substring(3); }
        if (bodyHtml.EndsWith("</p>")) 
            { bodyHtml = bodyHtml.Substring(0, bodyHtml.Length - 4); }

    }   
    else {

        var firstP = bodyHtml.IndexOf("<p>");
        var firstSlashP = bodyHtml.IndexOf("</p>");

        if (firstP >=0 && firstSlashP > firstP) 
        {
            bodyHtml = bodyHtml.Substring(firstP + 3, firstSlashP - firstP - 3);
        }    
    }

    var body = new HtmlString(bodyHtml); 
} 

<p>@body
<span class="more">@Html.ItemDisplayLink(T("More...").ToString(), contentItem)</span></p> 

In realtà, il tema che ho scelto per il mio spazio web ha già una personalizzazione simile, ma non visualizza le immagini all’interno del primo paragrafo. Infatti utilizza Html.Excerpt per depurare il codice html:

var body = new HtmlString(Html.Excerpt(bodyHtml, 2000).ToString().Replace(Environment.NewLine, "</p>" + Environment.NewLine + "<p>"));

Tag: Orchard