The problem I have run into is the header does not display only on the custom home page. I copied page.hbs to home.hbs, changed #post to #page and zipped things up, uploaded, and activated the “new” theme.
I created a page, modified routes.yaml just like the above link says to do, and that appears to work fine. Visiting / does display the proper page, and visiting /blog/ shows the right content.
The only issue is the header does not display on the custom home page.
I reproduced the error in Chrome, Firefox and mobile Safari.
Any ideas what I could be doing wrong or what I am missing?
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header">
<div class="outer site-nav-main">
<div class="inner">
{{> "site-nav"}}
</div>
</div>
</header>
{{!-- Everything inside the #post tags pulls data from the post --}}
{{#page}}
<main id="site-main" class="site-main outer">
<div class="inner">
<article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
<header class="post-full-header">
<h1 class="post-full-title">{{title}}</h1>
</header>
{{#if feature_image}}
<figure class="post-full-image">
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 800px) 400px,
(max-width: 1170px) 1170px,
2000px"
src="{{img_url feature_image size="xl"}}"
alt="{{title}}"
/>
</figure>
{{/if}}
<section class="post-full-content">
<div class="post-content">
{{content}}
</div>
</section>
</article>
</div>
</main>
{{/page}}
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
$(function() {
var $postContent = $(".post-full-content");
$postContent.fitVids();
});
</script>
{{/contentFor}}
Just to ensure I did not screw anything up, here is my routes.yaml:
routes:
/:
data: page.home
template: home
collections:
/blog/:
permalink: /blog/{slug}/
template: index
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
Just to reiterate, the content from Home displays but the header does not. Although interestingly I do see the header HTML if I view-source.
Out of curiosity I wanted to see if the same issue would occur with a theme other than the default Casper, so I tested the above logic using Liebling.
Interestingly it worked correctly with Liebling - of course copying page.hbs to home.hbs and modifying {{#post}} to {{#page}} - with the proper custom home page displaying on / and the blog on /blog/ as expected.
I’m also facing the same issue when using Casper Theme on my website (vamsithota.me). I have tried using page template and created a copy of page template, renamed it as page-home. In either cases the Site Navigation is missing from the home page. Unable to figure out why it isn’t working. @DavidDarnes Would you be able to help with this?
@scottie I think this is down to the custom sticker header that comes with Casper, you can see it in action on the demo. The home page of Casper comes with some JavaScript that makes the header stick to the top of the screen. However when you change the home page to a static page you also change the code.
Making the header come back can be done with a little bit of code added to the code injection area of that page:
This is what I meant by the above comment. By changing the home page template you’re creating your own custom theme, which will in turn affect the existing code in the theme. The JavaScript code for the sticky header is here in the index.hbs file within Casper:
You’ll need to copy this code into your home page if you want the header to stick
