A Ghost theme contains static HTML templates that make use of helpers to output data from your site, and custom CSS for styling.
/partials
directory allows you to use partial templates across your site to share blocks of HTML between multiple templates and reduce code duplication.
index.hbs
and post.hbs
. All other templates are optional.
It’s recommended using a default.hbs
file as a base layout for your theme. If you have significantly different layouts for different pages or content types, use the dynamic routing configuration layer, or use partials to encapsulate common parts of your theme.
Theme templates are hierarchical, so one template can extend another template. This prevents base HTML from being repeated. Here are some commonly used templates and their uses:
default.hbs
is a base template that contains the boring bits of HTML that exist on every page such as <html>
, <head>
or <body>
as well as the required {{ghost_head}}
and {{ghost_foot}}
and any HTML for the header and footer.
tag.hbs
, author.hbs
or index.hbs
template. The index.hbs
template usually extends default.hbs
and is passed a list of posts using the {{#foreach}}
helper.
/
.
default.hbs
and uses the {{#post}}
helper to output the post details. Custom templates for individual posts can be created using post-:slug.hbs
.
post.hbs
will be used. Custom templates for individual pages can be mapped to the page using page-:slug.hbs
.
index.hbs
template is used. Custom templates for individual tags can be created using tag-:slug
.
index.hbs
template is used. Custom templates for individual authors can be created using author{{slug}}
.
404
or 500
errors that are not otherwise handled by error- or class-specific templates. If one is not specified Ghost will use the default.
error-4xx.hbs
for 400
-level errors). A matching error class template is prioritized over both error.hbs
and the Ghost default template for rendering the error.
error-404.hbs
). A matching error code template is prioritized over all other error templates for rendering the error.
{{asset}}
, {{body_class}}
, {{post_class}}
, {{ghost_head}}
, {{ghost_foot}}
.
{{body_class}}
helper.
#themename-my-id
is preferrable to #my-id
.
hbs
file to be reflected, use the ghost restart
command.
Ghost will automatically check for fatal errors when you upload your theme into Ghost admin. For a full validation report during development, use the GScan tool.
package.json
file is required, and sets some information about your theme, so it’s important to keep it up to date with relevant information.
To reference a working example of a package.json
file, review the Casper file, and for further information about specific details of package.json
handling, read the npm docs.
package.json
file:
config.posts_per_page
— the default number of posts per page is 5config.image_sizes
— read more about using image sizes guide for more detailsconfig.card_assets
— configure the card CSS and JS that Ghost automatically includesconfig.custom
- add custom settings to your themedescription
— provides a short description about your theme and what makes it uniquedocs
- include a URL to docs about how to use the theme. The link to the docs will be available in Ghost Admin on the Design pagelicense
— use a valid licence string, we recommend MIT
😉package.json
require a restart using the ghost restart
command.