{{pagination}} is a template driven helper which outputs HTML for 'newer posts' and 'older posts' links if they are available and also says which page you are on.
You can override the HTML output by the pagination helper by placing a file called pagination.hbs inside of content/themes/your-theme/partials. Details of the default template are below.
The data used to output the {{pagination}} helper is generated based on the post list that is being output (index, tag posts, author posts etc) and always exists at the top level of the data structure.
The default template output by Ghost is shown below. You can override this by placing a file called pagination.hbs in the partials directory of your theme.
<nav class="pagination" role="navigation">
{{#if prev}}
<a class="newer-posts" href="{{page_url prev}}">← Newer Posts</a>
{{/if}}
<span class="page-number">Page {{page}} of {{pages}}</span>
{{#if next}}
<a class="older-posts" href="{{page_url next}}">Older Posts →</a>
{{/if}}
</nav>Usage: {{#prev_post}}{{title}}{{/prev_post}} - {{#next_post}}{{title}}{{/next_post}}
When in the scope of a post, you can call the next or previous post helper, which performs a query against the API to fetch the next or previous post in accordance with the chronological order of the site.
Inside of the opening and closing tags of the {{#next_post}}{{/next_post}} or {{#prev_post}}{{/prev-post}} helper, the normal helpers for outputting posts will work, but will output the details of the post that was fetched from the API, rather than the original post.
{{#post}}
{{#prev_post}}
<a href="{{url}}">{{title}}</a>
{{/prev_post}}
{{#next_post}}
<a href="{{url}}">{{title}}</a>
{{/next_post}}
{{/post}}You can also scope where to pull the previous and next posts from using the inparameter
{{#post}}
{{#prev_post in="primary_tag"}}
<a href="{{url}}">{{title}}</a>
{{/prev_post}}
{{#next_post in="primary_tag"}}
<a href="{{url}}">{{title}}</a>
{{/next_post}}
{{/post}}
Usage: {{plural value empty="" singular="" plural=""}}
{{plural}} is a formatting helper for outputting strings which change depending on whether a number is singular or plural.
The most common use case for the plural helper is outputting information about how many posts there are in total in a collection. For example, themes have access to pagination.total on the homepage, a tag page or an author page. You can override the default text.
{{plural pagination.total empty='No posts' singular='% post' plural='% posts'}}% is parsed by Ghost and will be replaced by the number of posts. This is a specific behaviour for the helper.
Usage: {{t}}
{{t}} is a helper to output text in your site language.
Ghost's front-end and themes are fully translatable by enabling a publication language in the setting in Ghost admin, and using the translate helper to wrap around any plain text in your theme.
Follow these steps to make your theme fully translatable:
locales folder and add language filesCreate a folder called locales. If using a theme that is already translatable, this may exist already.
Inside the locales folder, add target language files for each translatable language used on your site. For example locales/en.json for English and locales/es.json for Spanish. A valid language code must be used.
Translate the sentences used in your theme inside your new language files.
For example, in locales/en.json:
{
"Back": "Back",
"Newer Posts": "Newer Posts",
"Older Posts": "Older Posts",
"Page {page} of {pages}": "Page {page} of {pages}",
"Subscribe": "Subscribe",
"Subscribe to {blogtitle}": "Subscribe to {blogtitle}",
"Subscribed!": "Subscribed!",
"with the email address": "with the email address",
"Your email address": "Your email address",
"You've successfully subscribed to": "You've successfully subscribed to",
"A collection of posts": "A collection of posts",
"A collection of 1 post": "A collection of 1 post",
"A collection of % posts": "A collection of % posts",
"Get the latest posts delivered right to your inbox": "Get the latest posts delivered right to your inbox",
"Latest Posts": "Latest Posts",
"<a href='{url}'>More posts</a> by {name}": "<a href='{url}'>More posts</a> by {name}",
"No posts": "No posts",
" (Page %)": " (Page %)",
"Read More": "Read More",
"Read <a href='{url}'>more posts</a> by this author": "Read <a href='{url}'>more posts</a> by this author",
"See all % posts": "See all % posts",
"Share this": "Share this",
"Stay up to date! Get all the latest & greatest posts delivered straight to your inbox": "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox",
"This post was a collaboration between": "This post was a collaboration between",
"youremail@example.com": "youremail@example.com",
"1 post": "1 post",
"% posts": "% posts",
"1 min read": "1 min read",
"% min read": "% min read"
}And edited to translate into Spanish for locales/es.json:
{
"Back": "Volver",
"Newer Posts": "Artículos Siguientes",
"Older Posts": "Artículos Anteriores",
"Page {page} of {pages}": "Página {page} de {pages}",
"Subscribe": "Suscríbete",
"Subscribe to {blogtitle}": "Suscríbete a {blogtitle}",
"Subscribed!": "¡Suscrito!",
"with the email address": "con el correo electrónico",
"Your email address": "Tu correo electrónico",
"You've successfully subscribed to": "Te has suscrito con éxito a",
"A collection of posts": "Una colección de artículos",
"A collection of 1 post": "Una colección de 1 artículo",
"A collection of % posts": "Una colección de % artículos",
"Get the latest posts delivered right to your inbox": "Recibe los últimos artículos directamente en tu buzón",
"Latest Posts": "Últimos Artículos",
"<a href='{url}'>More posts</a> by {name}": "<a href='{url}'>Más artículos</a> de {name}",
"No posts": "No hay artículos",
" (Page %)": " (Página %)",
"Read More": "Lee Más",
"Read <a href='{url}'>more posts</a> by this author": "Lee <a href='{url}'>más artículos</a> de este autor",
"See all % posts": "Ver todos los % artículos",
"Share this": "Comparte",
"Stay up to date! Get all the latest & greatest posts delivered straight to your inbox": "¡Mantente al día! Recibe todos los últimos y mejores artículos directamente en tu buzón",
"This post was a collaboration between": "Este artículo fue una colaboración entre",
"youremail@example.com": "tucorreo@ejemplo.com",
"1 post": "1 artículo",
"% posts": "% artículos",
"1 min read": "1 min de lectura",
"% min read": "% min de lectura",
"< 1 min read": "< 1 min de lectura"
}It is possible to use any translation key on the left, but readable English is advised in order to take advantage of the fallback option inside the {{t}} translation helper when no translation is available.
Dates, with month names, are automatically translated. You don't need to include them in the translation files.
Use HTML entities instead of characters, for example < instead of <.
Verify that the .json translation file for your active theme is in place and then activate the language in the General settings of Ghost admin. Enter the correct language code into your settings menu and hit save.
To ensure that your theme is fully translatable, two core templates must exist in your theme. Check the following templates exist:
pagination.hbs - exists in content/themes/mytheme/partials, copy the template
navigation.hbs - exists in content/themes/mytheme/partials, copy the template
Any plain text in your theme must be wrapped in the {{t}} translation helper, with {{t to the left of the text and }} to the right.
Look for any plain text in all of your theme's .hbs template files and ensure the translation helper is present.
It's advisable to add the HTML lang attribute to the "<html>" tag at the start of the theme's default.hbs template, using Ghost's {{@site.lang}} helper: <html lang="{{@site.lang}}">. {{@site.lang}} will automatically be replaced on the site with the corresponding language locale tag set in Ghost admin.
To make the new changes effective, run restart ghost.
The translation helper can interact with many other handlebars expressions in order to implement more advanced translations within your theme.
Here are some of the most commonly used advanced translation features:
Placeholders are dynamic values that are replaced on runtime, and can be implemented using single braces. This is useful for translations if you need to insert dynamic data attributes to your translations.
For example, here is a placeholder in the theme translation file:
"Proudly published with {ghostlink}": "Publicado con {ghostlink}",Which is defined in the theme template default.hbs using:
{{{t "Proudly published with {ghostlink}" ghostlink="<a href=\"https://ghost.org\">Ghost</a>"}}}Placeholders with data attributes can also be used, for example:
{{t "Subscribe to {blogtitle}" blogtitle=@blog.title}}The concept of subexpressions allows you to invoke multiple helpers in one expression.
For example, a (t) subexpression (instead of normal {{t}} helper) can be used as a parameter inside another helper such as {{tags}}.
This can be used to translate the prefix or suffix attribute of the {{tags}} or {{authors}} helper.
{{plural}} is a formatting helper for outputting strings which change depending on whether a number is singular or plural.
This can be used in translations to output information such as number of posts:
"No posts": "No hay artículos",
"1 post": "1 artículo",
"% posts": "% artículos",In the theme template author.hbs, several (t) subexpressions instead of normal {{t}}helpers can be used as parameters inside
{{plural ../pagination.total empty=(t "No posts") singular=(t "1 post") plural=(t "% posts")}}The reading time helper can be used in translations to provide a reading time for your posts in the desired language.
For example, in es.json:
"1 min read": "1 min de lectura", "% min read": "% min de lectura", And in theme template post.hbs
And in the theme template post.hbs:
{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}The {{meta_title}} helper accepts a page parameter that can be used in conjunction with translations. By using the follow it's possible to translate the word "Page" shown in the title of paginated pages:
<title>{{meta_title page=(t "Page %")}}</title>
Usage: {{encode value}}
{{encode}} is a simple output helper which will encode a given string so that it can be used in a URL.
The most obvious example of where this is useful is shown in Casper's post.hbs, for outputting a twitter share link:
<a class="icon-twitter" href="https://twitter.com/share?text={{encode title}}&url={{url absolute='true'}}"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<span class="hidden">Twitter</span>
</a>
Without using the {{encode}} helper on the post's title, the spaces and other punctuation in the title will not be handled correctly.
Usage: {{log value}}
When running Ghost in development mode, you can use the {{log}} helper to output debug messages to the server console. In particular you can get handlebars to output the details of objects or the current context
For example, to output the full 'context' that handlebars currently has access to:
{{log this}}
Or, to log each post in the loop:
{{#foreach posts}}
{{log post}}
{{/foreach}}If you're developing a theme and running an install using Ghost-CLI, you must use NODE_ENV=development ghost run to make debug output visible in the console.
The @labs variable provides access to global data properties, which are available anywhere in your theme.
For each feature listed with a checkbox in the settings/labs/ section of a site, the @labs global will provide a boolean flag which tells the theme developer whether or not the feature is enabled.
As of Ghost 1.0.0, there are two features which can be detected:
{{@labs.publicAPI}} – true if the Public API feature is enabled (enabled by default){{@labs.subscribers}} – true if the Subscribers feature is enabled (disabled by default)Test if subscribers is enabled before outputting HTML elements to surround a subscribe form, or before adding a subscribe button.
{{#if @labs.subscribers}}
<div class="subscribe-form">
{{subscribe_form}}
</div>
{{/if}}It is also possible to test if the publicAPI is enabled before using the get helper:
{{#if @labs.publicAPI}}
<div class="latest-posts">
{{#get "posts" limit="3"}}...{{/get}}
</div>
{{/if}}Note: when these features are moved out of beta in future, there will be a point at which these properties are deprecated. Therefore it is very important to keep your theme up-to-date.
Usage: {{concat "a" "b" "c"}}
The {{concat}} helper is designed to concatenate and link multiple things together.
The {{concat}} helper will take all of the items passed to it, treat them as strings, and concatenate them together without any spaces. There can be an unlimited amount of items passed to the helper.
Strings, variables and other helpers can be passed into the {{concat}} helper.
{{concat "hello world" "!" }}
Outputs:
hello world!{{concat "my-class" slug }}
Outputs:
my-classmy-post{{concat}} is designed for strings. If an object is passed it will output [object Object]in true JavaScript™️ fashion. To make it error proof, if {{concat}} is passed an empty variable, the output will be an empty string.
By default, strings are concatenated together with nothing in between them. The separator="" attribute inserts the value provided between each string.
{{concat "hello" "world" separator=" "}}
Outputs:
hello world
Usage: {{link_class for="/about/"}}
The {{link_class}} helper adds dynamic classes depending on the currently viewed page. If the page slug (e.g. /about/) matches the value given to the for attribute the helper will output a nav-current class. A for value must be provided.
<li class="nav {{link_class for="/about/"}}">About</li>
When on the "/about/" URL it will output:
<li class="nav nav-current">About</li>
By default it will output:
<li class="nav ">About</li>activeClassBy default the active class outputted by {{link_class}} will be nav-current, this is consistent with our navigation helper. However it can be overwritten with the activeClass attribute:
<li class="nav {{link_class for="/about/" activeClass="active"}}">About</li>
Will output:
<li class="nav active">About</li>activeClass can also be given false value (activeClass=false), which will output an empty string. Effectively turning off the behaviour.
classOptionally {{link_class}} can have additional active classes. Using the class attribute will add whatever value has been provided when the link is the active URL, nav-current(the default active class value) will be added last:
<li class="nav {{link_class for="/about/" class="current-about"}}">About</li>
Will output:
<li class="nav current-about nav-current">About</li>Not only can {{link_class}} add active classes to current URLs, but it can also apply classes to parent URLs. If a user navigates to /tags/toast/ then {{link_class}} can provide an active class to /tags/ as well as /tags/toast/.
<li class="nav {{link_class for="/tags/"}}">Tags</li>
When on the "/tags/" URL it will output:
<li class="nav nav-current">Tags</li>
When on the "/tags/toast/" URL it will output:
<li class="nav nav-parent">Tags</li>此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。