Anatomy of a Ghost Blog Theme

This displays the blog logo.

<span><span><span><a</span> title<span>="{{@blog.title}}"</span> href<span>='{{@blog.url}}'</span>></span>{{{@blog.title}}}</span>

Displays the blog title as a link.

<span><span><span><h2</span> class<span>="h-description-style"</span>></span>{{@blog.description}}<span><span></h2</span>></span></span>

Displays the blog description.

footer.hbs

<span><span><span><div</span> class<span>="foot-box"</span>></span>
</span>    <span><span><span><div</span> class<span>="f-social"</span>></span>
</span>    <span><span><span><a</span> href<span>="http://www.facebook.com/sharer.php?u={{url absolute="</span>true"}}" target<span>="_blank"</span>></span>
</span>        <span><span><span><img</span> src<span>="/assets/images/facebook.png"</span>></span>
</span>    <span><span><span></a</span>></span>
</span>    <span><span><span><a</span> href<span>="https://plus.google.com/share?url={{url absolute="</span>true"}}" target<span>="_blank"</span>></span>
</span>        <span><span><span><img</span> src<span>="/assets/images/google_plus.png"</span>></span>
</span>    <span><span><span></a</span>></span>
</span>    <span><span><span><a</span> href<span>="http://twitter.com/share?text={{@blog.title}}&url={{url absolute="</span>true"}}" target<span>="_blank"</span>></span>
</span>        <span><span><span><img</span> src<span>="/assets/images/twitter.png"</span>></span>
</span>    <span><span><span></a</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="f-cp"</span>></span>
</span>    <span><span><span><p</span>></span>© {{date format='YYYY'}} <span><span><a</span> href<span>="{{@blog.url}}"</span>></span>{{@blog.title}}<span><span></a</span>></span><span><span></p</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="f-ghst"</span>></span>
</span>    <span><span><span><p</span>></span>Runs on  <span><span><a</span> href<span>="http://ghost.org"</span> target<span>="_blank"</span>></span>Ghost<span><span></a</span>></span><span><span></p</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Also found in the partials directory, this file loads from the {{> footer}} tag in default.hbs. No Handlebars tags you haven’t seen yet, this footer contains social media icons for sharing.

Styling the theme

As I mentioned, Ghost is very barebones. I was originally going to use Bootstrap to style pages but I decided to use a small grid system I built with Sass.

<span><span>@media screen and (max-width: 600px)</span> {
</span>    <span><span>.mbox .list-post .i-pic</span> {
</span>        <span>position: relative;
</span>        <span>min-height: 1px;
</span>        <span>padding-left: 0px;
</span>        <span>padding-right: 0px;
</span>        <span>float: left;
</span>        <span>width: 100%;
</span>        <span>background-color: #f2e7e7;
</span>        <span>border-bottom: 3px solid #090a0a;
</span>    <span>}
</span>    <span><span>.mbox .list-post .i-pic img</span> {
</span>        <span>width: 100%;
</span>        <span>height: 100%;
</span>    <span>}
</span><span>}
</span>
<span><span>@media screen and (min-width: 601px)</span> {
</span>    <span><span>.mbox .list-post .i-pic</span> {
</span>        <span>position: relative;
</span>        <span>min-height: 1px;
</span>        <span>padding-left: 0px;
</span>        <span>padding-right: 0px;
</span>        <span>float: left;
</span>        <span>width: 33.33333%;
</span>        <span>left: 33.33333%;
</span>        <span>background-color: #f2e7e7;
</span>        <span>border-bottom: 3px solid #090a0a;
</span>     <span>}
</span><span>}</span>

In this small snippet from my .css file, I only included two breakpoints for this article, but in a real world application we would include many more. As you can see, all of the columns scale to 100% once the screen shrinks to 600 pixels.

Conclusion

I’ve only scratched the surface of what can be done with Ghost. If you are looking to start a blog and have the resources, I would suggest you give Ghost a try. Remember it’s built for writers by writers!

Frequently Asked Questions about Ghost Blog Themes

What is a Ghost blog theme?

A Ghost blog theme is a pre-designed template that you can apply to your Ghost blog to give it a unique look and feel. These themes are built using Handlebars.js, a simple templating language, and they can be customized to suit your specific needs. They come with various features and layouts, such as responsive design, SEO optimization, and social sharing options, among others.

How do I install a Ghost blog theme?

Installing a Ghost blog theme is a straightforward process. First, you need to download the theme file, which is usually in a .zip format. Then, log in to your Ghost admin panel, navigate to the ‘Design’ section, and click on the ‘Upload a theme’ button. Select the downloaded .zip file and click ‘Upload’. Once the upload is complete, you can activate the theme by clicking on the ‘Activate now’ button.

Where can I find Ghost blog themes?

There are several places where you can find Ghost blog themes. The official Ghost website has a marketplace where you can find both free and premium themes. Other popular sources include ThemeForest, a digital marketplace that offers a wide variety of Ghost themes, and various independent developers who sell their themes on their own websites.

Can I customize my Ghost blog theme?

Yes, you can customize your Ghost blog theme. Ghost themes are built using Handlebars.js, which allows for a high degree of customization. You can change the layout, colors, fonts, and other design elements to suit your specific needs. However, keep in mind that customizing a theme requires some knowledge of HTML, CSS, and Handlebars.js.

Are Ghost blog themes responsive?

Most Ghost blog themes are designed to be responsive, meaning they automatically adjust their layout to fit different screen sizes. This ensures that your blog looks great on all devices, including desktop computers, laptops, tablets, and smartphones. However, it’s always a good idea to check the theme’s description or demo to make sure it’s responsive before you purchase or download it.

How do I update my Ghost blog theme?

Updating your Ghost blog theme is similar to installing a new one. First, you need to download the updated theme file. Then, go to your Ghost admin panel, navigate to the ‘Design’ section, and click on the ‘Upload a theme’ button. Select the updated .zip file and click ‘Upload’. Once the upload is complete, you can activate the updated theme.

What should I look for in a Ghost blog theme?

When choosing a Ghost blog theme, consider factors such as design, responsiveness, customization options, and SEO optimization. The theme should match the style and tone of your blog, be easy to navigate, and look good on all devices. It should also be easy to customize and optimized for search engines to help your blog rank higher in search results.

Can I use a Ghost blog theme on multiple blogs?

Yes, you can use a Ghost blog theme on multiple blogs. However, keep in mind that each blog will need its own Ghost installation. Also, if you purchased a premium theme, make sure to check the license agreement, as some theme developers may limit the number of sites where you can use their theme.

Do I need to know how to code to use a Ghost blog theme?

While you don’t need to know how to code to use a Ghost blog theme, having some knowledge of HTML, CSS, and Handlebars.js can be helpful, especially if you want to customize the theme. However, many themes come with extensive documentation and support to help you set up and customize your blog, even if you’re not a coder.

Are there any free Ghost blog themes?

Yes, there are many free Ghost blog themes available. The official Ghost website offers a selection of free themes, and there are also many independent developers who offer free themes. However, keep in mind that free themes may not come with the same level of support or customization options as premium themes.

The above is the detailed content of Anatomy of a Ghost Blog Theme. For more information, please follow other related articles on the PHP Chinese website!