Blog Post Read More

Question

I'm using SharePoint 2013. In our blog post we often use a lot of images and text so the current layout just doesn't work.

I'm looking for a way to display a link to a read more page.

Answer 1

How to customize SharePoint Blogs using client-side rendering (CSR)

Since the client side rendering (CSR) is the default rendering mode in SharePoint 2013, below is demonstrated how to override Body field in such a way that the link for the post will be displayed via CSR.

And the resulting page could look like this

Example: how to override Blog view

A. Create rendering template, lets name it Blogs.js

(function () {

    function blogBodyRenderer(ctx) {
       var item = ctx.CurrentItem;
       return '<a href="' + ctx.listUrlDir + '/Post.aspx?ID=' + item.ID + '" class="ms-accentText">Read more...</a>';  
    }


    function registerBlogsRenderer()
    {
      var blogContext = {};
      blogContext.Templates = {};
      blogContext.Templates.Fields = {
        "Body": {
            "View": blogBodyRenderer
        }
      };

      SPClientTemplates.TemplateManager.RegisterTemplateOverrides(blogContext);
    } 
    ExecuteOrDelayUntilScriptLoaded(registerBlogsRenderer, 'clienttemplates.js');

})();

Gist

B. Upload JavaScript file into Site Assets library

C. Open Blog home page in Edit mode (Edit page). Specify for Posts web part JS Link property:

~sitecollection/SiteAssets/Blogs.js