By default, when Orchard displays a content item such as a blog post in a list, it uses a very basic summary template that removes all markup and then extracts the first 200 characters. Removing the markup has the unfortunate effect of removing all styles and images, in particular the image I like to add to the beginning of my posts. Fortunately, overriding templates in Orchard is a piece of cake. Here is the
Common.Body.Summary.cshtml file that I drop into the Views/Parts folder of pretty much all Orchard themes I build: @{
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>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
This template does not remove any tags, but instead looks for an HTML comment delimiting the end of the post’s intro:
<!--more-->
This is the same convention that is being used in WordPress, and it’s easy to add from the source view in TinyMCE or Live Writer.
If such a comment is not found, the template will extract the first paragraph (delimited by <p> and </p> tags) as the summary.
And if it finds neither, it will use the whole post.
The template also adds a localizable link to the full post.
