惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园_首页
J
Java Code Geeks
博客园 - 聂微东
量子位
C
Check Point Blog
T
The Blog of Author Tim Ferriss
T
Tailwind CSS Blog
G
Google Developers Blog
Google DeepMind News
Google DeepMind News
B
Blog
罗磊的独立博客
腾讯CDC
GbyAI
GbyAI
博客园 - 【当耐特】
A
About on SuperTechFans
M
MIT News - Artificial intelligence
U
Unit 42
D
Docker
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Y
Y Combinator Blog
大猫的无限游戏
大猫的无限游戏
小众软件
小众软件
S
SegmentFault 最新的问题
有赞技术团队
有赞技术团队

Example blog

Ghost routing explained with routes.yaml examples — routes, collections & taxonomies Ghost redirects explained with practical redirects.yaml examples How to Serve JSON or XML Data in Ghost How to Change Your Default Post Template in Ghost Ghost Custom Theme Settings How to add Google Fonts to Ghost Themes How to Configure Ghost with Mailgun Ghost Theme Structure & Organization How to Make Custom Templates in Ghost Themes How to Install Ghost CMS via Ghost-CLI How to Add Syntax Highlighting to Ghost The best Ghost CMS hosting platforms Ghost 6.0 — Social Web and Native Ghost Analytics Ghost CMS Social web beta, email 2FA and more author social links How to keep custom design settings when updating your Ghost theme How to use the public preview card in Ghost How to add members-specific sections in Ghost How to customize the default content CTA in Ghost How to build a custom homepage in Ghost An overview of Ghost editor cards and and how they work Ghost CMS News: One-time payments & collecting sales tax How to customize the private site access template in Ghost How to add custom fonts in Ghost themes Ghost CMS News: Additional payment methods & internal linking How to use Code Injection in Ghost How to set meta data of your custom routes & collections in Ghost Ghost CMS News: TK reminders, ActivityPub and improvements How to format dates and use the date helper in Ghost Ghost CMS internationalization, custom fonts & spam protection Understanding and optimizing post and page settings in Ghost CMS
How to Add Reading Time to Ghost Blog Posts
Bright Themes · 2023-02-01 · via Example blog

When you get a visitor to your site, most probably you want them to stay on your website as long as possible and nowadays visitors often want to get as much information as possible by just skimming through a page.

One piece of information that can help to increase the time visitors spend on your site is reading time. The idea behind this is: a visitor will know how much time is needed for obtaining the information by reading a topic of interest.

The logic of reading time is quite simple. Let’s assume that adults average reading speed is 275 words per minute and the article has 1400 words. So the reading time of the article is, total number of words in the article (1400) divided by average reading speed (275), which gives 4 minutes.

In Ghost the logic has a bit more to it, so let's take a look how it is and how this can be used in any Ghost Theme.

Reading time in Ghost

There is a specific helper implemented for this which makes it really easy to add to any theme.

{{reading_time}}

This helper counts the words in the post and calculates an average reading time of 275 words per minute. Ghost also takes into consideration images: for the first image present, 12s is added, for the second 11s is added, for the third 10, and so on. From the tenth image onwards every image adds 3s.

One important information is that the reading_time helper can be used only within the #post context, example:

{{#post}}
  {{reading_time}}
{{/post}}

Advanced reading time settings

The default values the reading_time helper renders:

  • x min read for estimated reading time longer than one minute
  • 1 min read for estimated reading time shorter than or equal to one minute

But you can actually overwrite that, this is how you can do it:

{{reading_time minute='1 min read' minutes='% mins read'}}

The reading_time helper accepts two parameters:

  • minute - you can specify the text that will be rendered when reading time is 1 minute
  • minutes - specify the text that will be rendered when reading time is more than 1 minute

With custom texts for your reading time, you might need to have translation for them as well.

Reading time translation

To use translatable text in the reading time helper you can use the {{t }} helper, but in this case we are within another helper so for this to work we have to use the nested helper syntax:

{{reading_time minute=(t '1 min read') minutes=(t '% mins read')}}

Next step is to create the translation file, for this you need a folder called locales in the root folder of your theme. Within the locales folder you can create translations for any language. For example to translate these texts in Italian we need a file called it.json with the following content:

{
  "1 min read": "1 min lettura",
  "% mins read": "% min lettura"
}

Now after restarting Ghost the correct translations should appear.