Extended templates with Resource router

Resource Router

Rather than rely on Switchee or native conditionals for routing logic in your templates, Resource Router by @_rsan is a great way to organise routing in one place and keep templates simple and modular.

Let's say we wanted a url structure like this:

/articles

• Displays a paginated list of articles.

/articles/[entry url title]

• Displays a single article.

We just need a simple rule to route requests to article/[entry url title] to a hidden .article template:

'articles/(:url_title)' => function($router, $url_title) {
    if ($url_title->isValidUrlTitle()) {
        $router->setTemplate('articles/.article');
    } else {
        $router->set404();
    }
},

Now we can set up nice clean templates that are only concerned with the data they need to either capture or display:

EE templates

articles
   index.html (used to list articles)
   .article.html (used to display a single article)

Stash templates

views
   base.html
   article_list.html
   article_side.html

/templates/default_site/articles/index.html

Display a list of articles.

{stash:embed:views:base}

{!-- extend the main content block with a custom template --}
{exp:stash:extend name="main" with="article_list"}

{!-- set the page title --}
{exp:stash:pg_title type="snippet"}Latest articles{/exp:stash:pg_title}

{!-- capture a list of articles --}
{exp:stash:set_list name="articles" parse_tags="yes" parse_depth="2"}
	{exp:channel:entries 
		channel="articles"
		status="open"
		limit="10"
		paginate="bottom"
		disable="member_data|categories"
	}
		{!-- single value fields --}
		{stash:title}{title}{/stash:title}
		{stash:url_title}{url_title}{/stash:url_title}
		{stash:date}{entry_date}{/stash:date}
		{stash:date_machine}{entry_date format="%Y-%m-%d %H:%i:%s"}{/stash:date_machine}
		{stash:date_human}{entry_date format="%d %F %Y"}{/stash:date_human}
		{stash:summary}{article_summary}{/stash:summary}
		{stash:body}{article_body}{/stash:body}

		{!-- pagination --}
        {paginate}
            {exp:stash:set_list:pagination name="pagination"}

                {stash:current_page}{current_page}{/stash:current_page}
                {stash:total_pages}{total_pages}{/stash:total_pages}
                    
                {pagination_links}
                    {first_page}{stash:first_page}{pagination_url}{/stash:first_page}{/first_page}
                    {previous_page}{stash:previous_page}{pagination_url}{/stash:previous_page}{/previous_page}
                    {next_page}{stash:next_page}{pagination_url}{/stash:next_page}{/next_page}
                    {last_page}{stash:last_page}{pagination_url}{/stash:last_page}{/last_page}
                {/pagination_links}

            {/exp:stash:set_list:pagination}
        {/paginate}
	{/exp:channel:entries}
{/exp:stash:set_list}

/templates/default_site/articles/.article.html

Display a single article.

{stash:embed:views:base}

{!-- extend aside with a custom template --}
{exp:stash:extend name="aside" with="views/article_side"}

{!-- capture article data --}
{exp:channel:entries
    channel="articles"
    limit="1" 
    disable="member_data|pagination|categories"
    url_title="{segment_2}"
    dynamic="no"
    require_entry="yes"
}
	{!-- article fields --}
	{exp:stash:set type="snippet"}

	    {stash:pg_title}{title}{/stash:pg_title}
	    {stash:pg_summary}{article_summary}{/stash:pg_summary}
	    {stash:pg_body}{article_body}{/stash:pg_body}
	    {stash:pg_date_machine}{entry_date format="%Y-%m-%d %H:%i:%s"}{/stash:pg_date_machine}
	    {stash:pg_date_human}{entry_date format="%d %F %Y"}{/stash:pg_date_human}

	{/exp:stash:set}

	{!-- article authors (playa field) --}
   	{exp:stash:set_list name="authors" parse_tags="yes"}
	   	{exp:playa:children field="article_authors" var_prefix="rel" disable="member_data|pagination"}
			{stash:title}{rel:title}{/stash:title}
			{stash:url_title}{rel:url_title}{/stash:url_title}
			{stash:role}{categories show_group="2" limit="1"}{category_name}{/categories}{/stash:role}
	   	{/exp:playa:children}
   	{/exp:stash:set_list}

{/exp:channel:entries}

/stash_templates/views/base.html

Base wrapper layout. Defines blocks with default markup that we can optionally extend with partial templates.

<!DOCTYPE html>
<html>

<head>
    <title>{pg_title} : {site_name}</title>
</head>

<body>

    {!-- main navigation --}
    <nav role="navigation"> 

    </nav>

    {!-- banner --}
    <header role="banner"> 
        <h1>{site_name}</h1>
    </header>

    {!-- main content --} 
    <main role="main">
        {exp:stash:block name="main"}
             <article class="body">
                 {exp:stash:block:body name="body"}
                     <header>
                         {if pg_date_human}<time datetime="{pg_date_machine}">{pg_date_human}</time>{/if}
                         <h2>{pg_title}</h2>
                     </header>
                     {if pg_summary}<p>{pg_summary}</p>{/if}
                     {pg_body}
                 {/exp:stash:block:body}
             </article>
             <aside role="complementary">
                 {exp:stash:aside}
             </aside>
        {/exp:stash:block}
    </main>

    {!-- footer--}
    <footer role="contentinfo">

    </footer>

</body>
</html>

/stash_templates/views/article_list.html

Partial template for our list of articles.

<h2>{pg_title}</h2>
<ol>
    {exp:stash:get_list name="articles"}
    <li>
        <time datetime="{date_machine}">{date_human}</time>
        <h3><a href="/articles/{url_title}">{title}</a></h3>
        {if summary}    
        <p>
             {summary}
        </p>
        {/if}
    </li>
    {/exp:stash:get_list}
</ol>

{exp:stash:get_list name="pagination" limit="1"}
<ul class="pagination">
    <li class="pagination-page">Page {current_page} of {total_pages}</li>
    {if previous_page}<li class="pagination-prev"><a href="{previous_page}">Prev</a></li>{/if}
    {if next_page}<li class="pagination-next"><a href="{next_page}">Next</a></li>{/if}
</ul> 
{/exp:stash:get_list}

/stash_templates/views/article_side.html

Partial template for the sidebar of a single article.

{!-- authors --}
{if {exp:stash:list_count name="authors"} > 0}
<h3>Authors</h3>

<ul class="contacts">
	{exp:stash:get_list name="authors"}<li>
		<a href="/people/profile/{url_title}">
			<h3>{title}</h3>
			<p>{role}</p>
		</a>
	</li>{/exp:stash:get_list}
</ul>
{/if}