devLog: 2020-02-04

In previous devLog posts, I have chronicled some of my design decisions while building out nightCasper. Today's devLog continues that theme and focuses on a question posed by a user in the Ghost forums, which I was glad to be able to help him with:


This is a companion discussion topic for the original entry at https://engineerworkshop.com/devlog/devlog-2020-02-04/

Add

<div id="bottomHeader">
     <progress class="reading-progress-bar" data-reading-progress max={{reading_time minute="%" minutes="%"}}></progress>
</div>

to the place you placed in the partials/site-header.hbs.
and found that reading_time cannot get the true reading time .

If place it in the post.hbs such that
{{#post}}

<main id="site-main" class="site-main outer">
    //here 
    <div class="inner">

I can get the correct reading time .
So how can i get the reading time in the partials/site-header.hbs?

side notes:
Once place the progress in the post.hbs, the progress update script cannot fucntion,i should put it after the bottomHeader. and then show the progress bar.
but when scroll ,nothing update and the progress bar disappear.

Hi Baul,

Thanks for reading. I suspect that the problem you’re running into with the reading_time helper is that it requires a {{post}} block, which you aren’t in when you drop it into the partials/site-header Handlebars template.

If you really want it in your partials/site-header.hbs, you could try something like this:

{{#is "post"}}
	{{#post}}
		{{reading_time}}
	{{/post}}
{{/is}}

I’m not sure I would recommend it though. You could see a performance hit from hitting the database twice (once for the header now and once for the post body itself), but it might be okay. Just be sure to monitor it in Chrome developer tools and watch out for any load time warnings in Google Search Console.

-TorqueWrench

Oh,Thanks, will try.