Ghost CMS is a powerful and popular content management system known for its simplicity and focus on blogging. It gives you a flexible platform for managing and publishing your creations. One of the best features of Ghost cms is the ability to create custom pages in ghost blog . This lets you go beyond the typical blog style and build unique sections on your website. In this blog post, we'll talk about how to make custom pages in Ghost CMS themes.
Importance of Custom Pages in Ghost CMS
Before we go into the technical details, let's define ghost custom pages and why you might want to use custom pages in ghost cms. Custom pages are additional sections or pages on your website that are separate from your regular blog posts. They can be used for different things, like an, about page, a contact form, a showcase, or a landing page for a specific campaign. Custom pages allow you to offer content that does not suit the structure of your blog entries.
1.) Easy Way to Create New Pages in Ghost
If want to create a new default page in ghost cms it is very simple to do this. You do not need any coding knowledge to create a default page in ghost cms. To create a new page in Ghost CMS, follow these simple steps properly:
1.) Log in to your Ghost Admin Panel: Access your Ghost website's admin panel by visiting the login URL and entering your credentials.
2.) Navigate to Pages: Once logged in, locate and click on the "Pages" option in the admin menu. This will take you to the pages management section.
3.) Add a New Page: In the Pages section, you'll find a "New Page" button. Click on it to start creating your custom page.
4.) Enter Title and Content: Provide a suitable title for your page in the designated field. Below the title, you'll see an editor where you can input the content for your page. Use the editor to format and structure the text as desired, and include any media or visual elements.
5.) Configure Page Settings: After entering the title and content, you can further configure the settings for your page. This includes options such as the URL slug, meta information, and featured image. Adjust these settings according to your preferences and requirements.
6.) Publish the Page: Once you're satisfied with the page's content and settings, click on the "Publish" button to make it live on your website. Your page will be rendered using the default page.hbs template, or the post.hbs template if page.hbs is not available.
Custom Page Layouts in Ghost CMS
If you want to go beyond the default template and want to create custom pages in ghost, Ghost CMS offers three main methods:
-
Using the routes.yaml file
-
Using page templates
-
Using custom templates
By using these customization methods, you can create visually appealing and highly tailored ghost custom pages in your blog that align with your website's branding and purpose.
2.) Custom page with routes.yaml
The routes.yaml file in Ghost CMS plays a crucial role in defining the URL structure and configuring content collections. When creating a custom page, such as an contact page, you can utilize the routes.yaml file to set it up correctly. In your routes.yaml file, include the following section for the custom contact page:
routes:
/about/:
template: contact
data: page.contact
In the above code, we define the route /about/ (URL) based on the about.hbs template. The data property specifies that the page content should be fetched from the page with the slug "contact".
While the data property is not mandatory, it offers convenient control over meta properties directly from the Ghost Admin area. You can also utilize other elements from the page, such as the featured image or content if required.
To access the page content within the contact.hbs file, you need to be in the page context. For instance, to display the title and content, use the following code:
{{#page}}
<h1>{{title}}</h1>
<div>{{content}}</div>
{{/page}}
This structure allows you to output the title and content of the contact page accordingly. Similarly, you can create other custom pages like a contact page or a customized homepage using a similar approach.
3.) Custom page with page template
If you need to modify the layout of a specific page or customize the default page.hbs template for another page, you can follow this quick method without having to make changes to your website's routing.
To begin, create the desired page in the Admin area and publish it. For instance, let's consider the contact page, which now has the slug "contact".
Next, in your theme directory, create a new file named page-contact.hbs. Inside this file, you have the flexibility to incorporate your preferred layout. You can either design a completely unique markup or begin with the default page.hbs file and make modifications according to your requirements.
4.) Custom page with custom templates
Custom templates offer great convenience when you need to create a layout that can be applied to multiple pages or posts. In order to create a custom template, it should be named in a specific format:
custom-{{template-name}}.hbs
Each custom template file must begin with "custom-" followed by a relevant name for that particular template. When using Ghost Admin, you can find custom templates in the Post/Page Settings section, under the Template option. For instance, let's say I have created the following custom templates:
-
custom-wide-post.hbs
-
custom-with-sidebar.hbs
To illustrate this with an example of the contact page, you could potentially create a custom template named custom-contact.hbs, which reflects the desired layout. Then, in the Admin section, navigate to the settings for your contact page. Under the Template option, choose "Contact" (or any other name you assigned to the template).
To Sum Up
Finally, creating custom pages in Ghost CMS themes is a very simple process. You may simply create new pages, modify their content, and configure other settings in the Ghost Admin Panel by following a few simple steps. With this freedom, you can easily create and manage unique pages within your Ghost CMS theme.
