{"_id":"5937b2398e8d9b002f1df2a1","category":{"_id":"5937b2388e8d9b002f1df274","version":"5937b2378e8d9b002f1df26e","project":"542fe92a5eceb608003fddc8","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-11-04T19:48:37.185Z","from_sync":false,"order":5,"slug":"cookbook","title":"Cookbook"},"user":"542c5cfcddd3190e00228849","parentDoc":null,"project":"542fe92a5eceb608003fddc8","version":{"_id":"5937b2378e8d9b002f1df26e","project":"542fe92a5eceb608003fddc8","__v":1,"createdAt":"2017-06-07T07:58:47.936Z","releaseDate":"2017-06-07T07:58:47.936Z","categories":["5937b2388e8d9b002f1df26f","5937b2388e8d9b002f1df270","5937b2388e8d9b002f1df271","5937b2388e8d9b002f1df272","5937b2388e8d9b002f1df273","5937b2388e8d9b002f1df274"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-11-04T20:00:59.427Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"A common pattern seen in blogs is to treat the very first post on a page differently to the rest of the posts. This recipe shows you how to combine the [{{#if}}](doc:if)  and the [{#is}}](doc:is) block helpers to make this work only on the front page of your blog, and not the subsequent pages.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Setting up a post loop\"\n}\n[/block]\nTo start with, we need a pretty normal post loop, the same as you might find in [Casper](https://github.com/TryGhost/Casper).\n\nThis might live in your `index.hbs` template, or alternatively inside a `loop.hbs` partial which gets included from several templates.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{#foreach posts}}\\n<article class=\\\"{{post_class}}\\\">\\n  <header class=\\\"post-header\\\">\\n    <h2 class=\\\"post-title\\\"><a href=\\\"{{url}}\\\">{{{title}}}</a></h2>\\n  </header>\\n  <section class=\\\"post-excerpt\\\">\\n    <p>{{excerpt words=\\\"30\\\"}} <a class=\\\"read-more\\\" href=\\\"{{url}}\\\">&raquo;</a></p>\\n  </section>\\n</article>\\n{{/foreach}}\",\n      \"language\": \"handlebars\",\n      \"name\": \"index.hbs\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2. Detecting `:::at:::first` with the `{{#if}}` helper\"\n}\n[/block]\nThe [foreach](doc:foreach) helper provides access to several pieces of data that you can use to determine where you are in the loop, such as [email protected]`, [email protected]`, [email protected]` & [email protected]`.\n\nTo highlight the first post separately, we need to check if this is the [email protected]` iteration, using the `{{#if}}` helper. \n\nThere are a couple of different ways we can use this to change how our post is displayed. We could use it to output an extra class, by adding `{{#if @first}} first-post{{/if}}` to the class of the article:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{#foreach posts}}\\n<article class=\\\"{{post_class}}{{#if @first}} first-post{{/if}}\\\">\\n  <header class=\\\"post-header\\\">\\n    <h2 class=\\\"post-title\\\"><a href=\\\"{{url}}\\\">{{title}}</a></h2>\\n  </header>\\n  <section class=\\\"post-excerpt\\\">\\n    <p>{{excerpt words=\\\"30\\\"}} <a class=\\\"read-more\\\" href=\\\"{{url}}\\\">&raquo;</a></p>\\n  </section>\\n</article>\\n{{/foreach}}\",\n      \"language\": \"handlebars\",\n      \"name\": \"index.hbs\"\n    }\n  ]\n}\n[/block]\nAlternatively, we could use this `if` along with an `else`, to output two completely different blocks of HTML:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{#foreach posts}}\\n  {{#if @first}}\\n  <article class=\\\"{{post_class}} first-post\\\">\\n    <header class=\\\"post-header\\\">\\n      <h2 class=\\\"post-title\\\"><a href=\\\"{{url}}\\\">{{title}}</a></h2>\\n    </header>\\n    <section class=\\\"post-excerpt\\\">\\n      <p>{{excerpt words=\\\"30\\\"}} <a class=\\\"read-more\\\" href=\\\"{{url}}\\\">&raquo;</a></p>\\n    </section>\\n  </article>\\n  {{else}}\\n  <article class=\\\"{{post_class}}\\\">\\n    <header class=\\\"post-header\\\">\\n      <h3 class=\\\"post-title\\\"><a href=\\\"{{url}}\\\">{{title}}</a></h3>\\n    </header>\\n  </article>\\n  {{/if}}\\n{{/foreach}}\",\n      \"language\": \"handlebars\",\n      \"name\": \"index.hbs\"\n    }\n  ]\n}\n[/block]\n`{{#if}}` can be used with or without an `{{else}}`, meaning you can choose whether you need two different bits of HTML, or whether you just want to add something different to your first post. \n\nYou can choose to only add code to the posts which are not the first post, by negating the `if`. This is done by using the `^` symbol instead of the `#` symbol: `{{^if @first}}{{/if}}`.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3. Looking for a context with the `{{#is}}` helper\"\n}\n[/block]\nThe code we have so far will output different classes or HTML for the first post on the page, but this will affect every page of posts on your blog, including page 2, 3... etc of the main blog, and also all of the tag and author pages.\n\nThe `{{#is}}` helper allows you to choose which contexts you want to modify.\n\nIf you only ever want to affect the home page of your blog, you can use `{{#is \"home\"}}` which refers only to the first page of posts. So, we could add a class which is only output for the very first post on only the home page:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{#foreach posts}}\\n<article class=\\\"{{post_class}}{{#is \\\"home\\\"}}{{#if @first}} first-post{{/if}}{{/is}}\\\">\\n  <header class=\\\"post-header\\\">\\n    <h2 class=\\\"post-title\\\"><a href=\\\"{{url}}\\\">{{title}}</a></h2>\\n  </header>\\n  <section class=\\\"post-excerpt\\\">\\n    <p>{{excerpt words=\\\"30\\\"}} <a class=\\\"read-more\\\" href=\\\"{{url}}\\\">&raquo;</a></p>\\n  </section>\\n</article>\\n{{/foreach}}\",\n      \"language\": \"handlebars\",\n      \"name\": \"index.hbs\"\n    }\n  ]\n}\n[/block]\nIt doesn't really matter which way around you put the `if` and the `is` helpers but the closing tags must go in the reverse order, the same as in regular HTML.\n\nNesting `if` and `is`, or multiples of those helpers allows you to build up more complicated 'and' logic - in this case \"If this is the home page and this is the first post\". However, figuring out how to the `else` part can get tricky.\n\nIn this case, we need two `{{else}}` blocks, to make sure we cover every possible case. This could result in big blocks of duplicated code, but we're going to solve that by using partials:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{#foreach posts}}\\n<article class=\\\"{{post_class}}\\\">\\n  {{#is \\\"home\\\"}}\\n    {{#if @first}}\\n      {{> \\\"first-header\\\"}}\\n    {{else}} \\n      {{> \\\"header\\\"}}\\n    {{/if}}\\n  {{else}}\\n    {{> \\\"header\\\"}}\\n  {{/is}}\\n  <section class=\\\"post-excerpt\\\">\\n    <p>{{excerpt words=\\\"30\\\"}} <a class=\\\"read-more\\\" href=\\\"{{url}}\\\">&raquo;</a></p>\\n  </section>\\n </article>\\n{{/foreach}}\",\n      \"language\": \"handlebars\",\n      \"name\": \"index.hbs\"\n    },\n    {\n      \"code\": \"<header class=\\\"post-header first-post-header\\\">\\n  <h2 class=\\\"post-title\\\"><a href=\\\"{{url}}\\\">{{title}}</a></h2>\\n  <a href=\\\"{{url}}\\\"><img src=\\\"{{image}}\\\" class=\\\"post-image\\\" /></a>\\n</header>\",\n      \"language\": \"handlebars\",\n      \"name\": \"partials/first-header.hbs\"\n    },\n    {\n      \"code\": \"<header class=\\\"post-header\\\">\\n  <h2 class=\\\"post-title\\\"><a href=\\\"{{url}}\\\">{{title}}</a></h2>\\n</header>\",\n      \"language\": \"handlebars\",\n      \"name\": \"partials/header.hbs\"\n    }\n  ]\n}\n[/block]\nAlternatively, you might choose to highlight the first post on all of the major 'channels' of content, e.g. the home page, tag pages and author pages, but not their subsequent pages.\n\nTo do this, rather than using `{{#is \"home\"}}` you can use negation and the \"paged\" context: `{{^is \"paged\"}}`. There is more documentation on the available contexts in the [Context Overview](doc:context-overview) and the [{{is}} helper](doc:is) documentation shows how to check for multiple contexts.\n\nHopefully this demonstrates some interesting ways in which helpers can be combined to create more complex logic.","excerpt":"Creating a special treatment for the first post on the home page without affecting subsequent pages","slug":"highlight-first-post-on-home","type":"basic","title":"Highlight 1st post on the home page"}

Highlight 1st post on the home page

Creating a special treatment for the first post on the home page without affecting subsequent pages

A common pattern seen in blogs is to treat the very first post on a page differently to the rest of the posts. This recipe shows you how to combine the [{{#if}}](doc:if) and the [{#is}}](doc:is) block helpers to make this work only on the front page of your blog, and not the subsequent pages. [block:api-header] { "type": "basic", "title": "1. Setting up a post loop" } [/block] To start with, we need a pretty normal post loop, the same as you might find in [Casper](https://github.com/TryGhost/Casper). This might live in your `index.hbs` template, or alternatively inside a `loop.hbs` partial which gets included from several templates. [block:code] { "codes": [ { "code": "{{#foreach posts}}\n<article class=\"{{post_class}}\">\n <header class=\"post-header\">\n <h2 class=\"post-title\"><a href=\"{{url}}\">{{{title}}}</a></h2>\n </header>\n <section class=\"post-excerpt\">\n <p>{{excerpt words=\"30\"}} <a class=\"read-more\" href=\"{{url}}\">&raquo;</a></p>\n </section>\n</article>\n{{/foreach}}", "language": "handlebars", "name": "index.hbs" } ] } [/block] [block:api-header] { "type": "basic", "title": "2. Detecting [email protected]` with the `{{#if}}` helper" } [/block] The [foreach](doc:foreach) helper provides access to several pieces of data that you can use to determine where you are in the loop, such as [email protected]`, [email protected]`, [email protected]` & [email protected]`. To highlight the first post separately, we need to check if this is the [email protected]` iteration, using the `{{#if}}` helper. There are a couple of different ways we can use this to change how our post is displayed. We could use it to output an extra class, by adding `{{#if @first}} first-post{{/if}}` to the class of the article: [block:code] { "codes": [ { "code": "{{#foreach posts}}\n<article class=\"{{post_class}}{{#if @first}} first-post{{/if}}\">\n <header class=\"post-header\">\n <h2 class=\"post-title\"><a href=\"{{url}}\">{{title}}</a></h2>\n </header>\n <section class=\"post-excerpt\">\n <p>{{excerpt words=\"30\"}} <a class=\"read-more\" href=\"{{url}}\">&raquo;</a></p>\n </section>\n</article>\n{{/foreach}}", "language": "handlebars", "name": "index.hbs" } ] } [/block] Alternatively, we could use this `if` along with an `else`, to output two completely different blocks of HTML: [block:code] { "codes": [ { "code": "{{#foreach posts}}\n {{#if @first}}\n <article class=\"{{post_class}} first-post\">\n <header class=\"post-header\">\n <h2 class=\"post-title\"><a href=\"{{url}}\">{{title}}</a></h2>\n </header>\n <section class=\"post-excerpt\">\n <p>{{excerpt words=\"30\"}} <a class=\"read-more\" href=\"{{url}}\">&raquo;</a></p>\n </section>\n </article>\n {{else}}\n <article class=\"{{post_class}}\">\n <header class=\"post-header\">\n <h3 class=\"post-title\"><a href=\"{{url}}\">{{title}}</a></h3>\n </header>\n </article>\n {{/if}}\n{{/foreach}}", "language": "handlebars", "name": "index.hbs" } ] } [/block] `{{#if}}` can be used with or without an `{{else}}`, meaning you can choose whether you need two different bits of HTML, or whether you just want to add something different to your first post. You can choose to only add code to the posts which are not the first post, by negating the `if`. This is done by using the `^` symbol instead of the `#` symbol: `{{^if @first}}{{/if}}`. [block:api-header] { "type": "basic", "title": "3. Looking for a context with the `{{#is}}` helper" } [/block] The code we have so far will output different classes or HTML for the first post on the page, but this will affect every page of posts on your blog, including page 2, 3... etc of the main blog, and also all of the tag and author pages. The `{{#is}}` helper allows you to choose which contexts you want to modify. If you only ever want to affect the home page of your blog, you can use `{{#is "home"}}` which refers only to the first page of posts. So, we could add a class which is only output for the very first post on only the home page: [block:code] { "codes": [ { "code": "{{#foreach posts}}\n<article class=\"{{post_class}}{{#is \"home\"}}{{#if @first}} first-post{{/if}}{{/is}}\">\n <header class=\"post-header\">\n <h2 class=\"post-title\"><a href=\"{{url}}\">{{title}}</a></h2>\n </header>\n <section class=\"post-excerpt\">\n <p>{{excerpt words=\"30\"}} <a class=\"read-more\" href=\"{{url}}\">&raquo;</a></p>\n </section>\n</article>\n{{/foreach}}", "language": "handlebars", "name": "index.hbs" } ] } [/block] It doesn't really matter which way around you put the `if` and the `is` helpers but the closing tags must go in the reverse order, the same as in regular HTML. Nesting `if` and `is`, or multiples of those helpers allows you to build up more complicated 'and' logic - in this case "If this is the home page and this is the first post". However, figuring out how to the `else` part can get tricky. In this case, we need two `{{else}}` blocks, to make sure we cover every possible case. This could result in big blocks of duplicated code, but we're going to solve that by using partials: [block:code] { "codes": [ { "code": "{{#foreach posts}}\n<article class=\"{{post_class}}\">\n {{#is \"home\"}}\n {{#if @first}}\n {{> \"first-header\"}}\n {{else}} \n {{> \"header\"}}\n {{/if}}\n {{else}}\n {{> \"header\"}}\n {{/is}}\n <section class=\"post-excerpt\">\n <p>{{excerpt words=\"30\"}} <a class=\"read-more\" href=\"{{url}}\">&raquo;</a></p>\n </section>\n </article>\n{{/foreach}}", "language": "handlebars", "name": "index.hbs" }, { "code": "<header class=\"post-header first-post-header\">\n <h2 class=\"post-title\"><a href=\"{{url}}\">{{title}}</a></h2>\n <a href=\"{{url}}\"><img src=\"{{image}}\" class=\"post-image\" /></a>\n</header>", "language": "handlebars", "name": "partials/first-header.hbs" }, { "code": "<header class=\"post-header\">\n <h2 class=\"post-title\"><a href=\"{{url}}\">{{title}}</a></h2>\n</header>", "language": "handlebars", "name": "partials/header.hbs" } ] } [/block] Alternatively, you might choose to highlight the first post on all of the major 'channels' of content, e.g. the home page, tag pages and author pages, but not their subsequent pages. To do this, rather than using `{{#is "home"}}` you can use negation and the "paged" context: `{{^is "paged"}}`. There is more documentation on the available contexts in the [Context Overview](doc:context-overview) and the [{{is}} helper](doc:is) documentation shows how to check for multiple contexts. Hopefully this demonstrates some interesting ways in which helpers can be combined to create more complex logic.