Forum

Thread tagged as: Question

Can I add this blog style to a Perch Blog

I have read the docs and watched the video but I am having a hard time converting my html blog into a perch blog: The current blog is https://www.robertbroley.co.uk/blog.html

Post page is https://www.robertbroley.co.uk/what-is-responsive-design.html

I am having some difficulty getting the styling to work: https://www.robertbroley.co.uk/blog/

Any help step by step would be greatly appreciated.

Rob Broley

Rob Broley 0 points

  • 7 years ago

Hello Rob,

the first thing you need to do is edit the template for the list of posts.

The default file should be in perch/addons/apps/perch_blog/templates/blog/post_in_list.html, copy that file to perch/templates/blog.

What I usually do next is copy the html for an individual post below the template. You should then be able to copy the perch tags into the right places in your html. Once you’ve done that you delete the original content of the file (just leaving your html with the Perch tags in it).

As an example here is the post_in_list.html template for my blog:

<perch:before>
<ul class="hfeed listing">
</perch:before>

    <li class="hentry">
    <h2><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h2>
    <perch:if exists="image"><img src="<perch:blog id="image" type="image" width="50" height="50" crop="true" />" alt="<perch:blog id="postTitle" />" /></perch:if>
    <p class="entry-published date"><perch:blog id="postDateTime" format="%d %B %Y" /></p>
    <div class="description entry-summary">
        <perch:blog id="excerpt" type="textarea" textile="true" />
      <p>Comments: <perch:blog id="postCommentCount"/></p>
    </div>
    </li>

<perch:after>
</ul>
    <perch:if exists="paging">
        <div class="paging">
        Page <perch:blog id="current_page" /> of <perch:blog id="number_of_pages" />
            <perch:if exists="not_first_page">
            <a href="<perch:blog id="prev_url" encode="false" />">Previous</a>
            </perch:if>
            <perch:if exists="not_last_page">
            <a href="<perch:blog id="next_url" encode="false" />">Next</a>
            </perch:if>
        </div>
    </perch:if>
</perch:after>

You can do a similar thing with individual posts using the template post.html

Don’t touch the original template file you copied, only the one in perch/templates/blog.

Thanks for that Nick. I seem to have got it working now with a bit of editing.