Home Page
Simply - come with 7 Home page with different layout options
- Default
index.hbs
- Featured
godo-template-featured.hbs
- Medium
godo-template-medium.hbs
- Sidebar
godo-template-sidebar.hbs
- Grid
godo-template-grid.hbs
- Personal
godo-template-personal.hbs
- Archive Page
godo-template-archive.hbs
- Featured with Slider
godo-template-featured-slider.hbs
- Medium with Sidebar
godo-template-medium-sidebar.hbs
- Photographer
godo-template-photographer.hbs
- First back up your
routes.yaml
in your ghost settings Dashboard -> Labs -> Routes -> Download current routes.yaml
- Re-download the Route and edit
routes.yaml
linecollections -> template
- After doing the changes, save the file and upload again.
- If do not observe changes restart ghost
![Route on Ghost](https://user-images.githubusercontent.com/10253167/104209353-9b2b3c80-53ff-11eb-8028-42254c65839c.jpg)
The filter option is optional. If you have activated the portfolio and documentation. I think if it is necessary to add the filter.
Default
Default uses the index.hbs
template, the stories are arranged in a grid pattern. If you want to use this template you don't need to make any changes.
![Simply theme for Ghost - default page](https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-default_BhYhMQxGx.jpg?tr=w-300 300w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-default_BhYhMQxGx.jpg?tr=w-600 600w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-default_BhYhMQxGx.jpg?tr=w-1000 1000w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-default_BhYhMQxGx.jpg?tr=w-1100 1100w)
Featured
The last featured article will be called up and displayed throughout the length of the screen.
![Simply theme for Ghost - featured page](https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-featured_H7aPTMFj_.jpg?tr=w-300 300w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-featured_H7aPTMFj_.jpg?tr=w-600 600w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-featured_H7aPTMFj_.jpg?tr=w-1000 1000w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-featured_H7aPTMFj_.jpg?tr=w-1100 1100w)
Here if it is necessary to change our routes.yaml
in the following way.
## routes.yaml
routes:
collections:
/:
permalink: /{slug}/
## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
limit: 12
template: godo-template-featured
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
Medium
The template godo-template-medium.hbs
has a similarity to Medium
![Simply theme for Ghost - Medium page](https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-medium_LDi6v3Ulko.jpg?tr=w-300 300w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-medium_LDi6v3Ulko.jpg?tr=w-600 600w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-medium_LDi6v3Ulko.jpg?tr=w-1000 1000w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-medium_LDi6v3Ulko.jpg?tr=w-1100 1100w)
Our route will need to change
## routes.yaml
routes:
collections:
/:
permalink: /{slug}/
## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
template: godo-template-medium
limit: 14
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
Sidebar
This template comes with a sidebar with 3 featured articles
![Simply theme for Ghost - sidebar home page](https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-sidebar_wg5S5a9tI.jpg?tr=w-300 300w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-sidebar_wg5S5a9tI.jpg?tr=w-600 600w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-sidebar_wg5S5a9tI.jpg?tr=w-1000 1000w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-sidebar_wg5S5a9tI.jpg?tr=w-1100 1100w)
## routes.yaml
routes:
collections:
/:
permalink: /{slug}/
## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
limit: 12
template: godo-template-sidebar
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
Grid
One large featured article will be shown, the rest of the articles will be shown in columns of 3.
![Simply theme for Ghost - grid page](https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-grid_BGuYwNsnh.jpg?tr=w-300 300w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-grid_BGuYwNsnh.jpg?tr=w-600 600w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-grid_BGuYwNsnh.jpg?tr=w-1000 1000w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-grid_BGuYwNsnh.jpg?tr=w-1100 1100w)
## routes.yaml
routes:
collections:
/:
permalink: /{slug}/
## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
limit: 12
template: godo-template-grid
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
Personal
The personal page has a big title and is centered. It has a small content using the typewriter style.
![Simply theme for Ghost - personal home page](https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-personal_bh2-IqKtt.jpg?tr=w-300 300w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-personal_bh2-IqKtt.jpg?tr=w-600 600w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-personal_bh2-IqKtt.jpg?tr=w-1000 1000w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-personal_bh2-IqKtt.jpg?tr=w-1100 1100w)
- Create a new page
- Choose your favorite title
- Use the
URL
->home-personal
In an HTML
block in your ghost editor add this code to display the typewriter.
<div class="">
I’m a
<span id="typewriter" class="font-medium"></span>
</div>
In this block of HTML
add the icons, the icons will be displayed on the right side of the page.
<div class="absolute right-0 bottom-0 mr-8 mb-8 text-white leading-none z-2 flex-col hidden md:flex">
<a
class="p-2 inline-block hover:text-facebook"
title="Facebook ghost"
aria-label="Facebook ghost"
href="https://www.facebook.com/ghost"
target="_blank"
rel="noopener noreferrer">
<svg class="icon icon--facebook">
<use xlink:href="#icon-facebook"></use>
</svg>
</a>
<a
class="p-2 inline-block hover:text-twitter"
title="Twitter @ghost"
aria-label="Twitter @ghost"
href="https://twitter.com/ghost"
target="_blank"
rel="noopener noreferrer">
<svg class="icon icon--twitter">
<use xlink:href="#icon-twitter"></use>
</svg>
</a>
<a
href="https://youtube.com"
title="Youtube"
class="hover:text-youtube p-2 inline-block"
target="_blank"
rel="noopener noreferrer">
<svg class="icon icon--youtube">
<use xlink:href="#icon-youtube"></use>
</svg>
</a>
<a
href="https://instagram.com"
title="Instagram"
class="hover:text-instagram p-2 inline-block"
target="_blank"
rel="noopener noreferrer">
<svg class="icon icon--instagram">
<use xlink:href="#icon-instagram"></use>
</svg>
</a>
<a
href="https://github.com/godofredoninja/simply"
title="GitHub"
class="hover:text-github p-2 inline-block"
target="_blank"
rel="noopener noreferrer">
<svg class="icon icon--github">
<use xlink:href="#icon-github"></use>
</svg>
</a>
<a
href="https://linkeding.com"
title="Linkedin"
class="hover:text-linkedin p-2 inline-block"
target="_blank"
rel="noopener noreferrer">
<svg class="icon icon--linkedin">
<use xlink:href="#icon-linkedin"></use>
</svg>
</a>
</div>
To finish, add the typewriter script
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<script>
var app = document.getElementById('typewriter');
var typewriter = new Typewriter(app, {
strings: ['Designer', 'Freelancer', 'Developer'],
loop: true,
delay: 90,
autoStart: true,
});
</script>
Our route will be like this.
## routes.yaml
routes:
/:
template: godo-home-personal
data: page.home-personal
collections:
/:
permalink: /{slug}/
template: index
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
Archive Page
Simply has a beautiful template for listing articles in a single file.
![Simply theme for Ghost - archive page](https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-archive_KYvxpIU9T.jpg?tr=w-300 300w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-archive_KYvxpIU9T.jpg?tr=w-600 600w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-archive_KYvxpIU9T.jpg?tr=w-1000 1000w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-archive_KYvxpIU9T.jpg?tr=w-1100 1100w)
If you want to change the title that says. The full archive, just edit the file godo-archive.hbs
inside the theme.
? Archive Route
## routes.yaml
routes:
/archive/:
controller: channel
# filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
limit: 50
template: godo-archive
collections:
/:
permalink: /{slug}/
template: index
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
Featured with Slider
![Simply theme for Ghost - Featured with Slider](https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-featured-slider_C1Aquu0Nr.jpg?tr=w-300 300w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-featured-slider_C1Aquu0Nr.jpg?tr=w-600 600w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-featured-slider_C1Aquu0Nr.jpg?tr=w-1000 1000w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-featured-slider_C1Aquu0Nr.jpg?tr=w-1100 1100w)
Here if it is necessary to change our routes.yaml
in the following way.
## routes.yaml
routes:
collections:
/:
permalink: /{slug}/
## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
limit: 12
template: godo-template-featured-slider
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
Medium with Sidebar
The template is inspired by the medium home page, you will have the facility to add a title, description and a featured image on the right side.
![Simply theme for Ghost - Medium with Sidebar](https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/medium-sidebar_mF0vpXF4P.jpg?tr=w-300 300w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/medium-sidebar_mF0vpXF4P.jpg?tr=w-600 600w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/medium-sidebar_mF0vpXF4P.jpg?tr=w-1000 1000w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/medium-sidebar_mF0vpXF4P.jpg?tr=w-1100 1100w)
- Create a new page
- Choose your favorite title
- Use the
URL
->medium-with-sidebar
## routes.yaml
routes:
collections:
/:
permalink: /{slug}/
## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
template: godo-template-medium-sidebar
data:
post: page.medium-with-sidebar
limit: 14
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
Photographer
If you are a photographer this template is exclusively for you. It has a slider of the last 3 featured articles, the articles will be ordered in columns of 3.
![Simply theme for Ghost - Photographer](https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-photographer_3b8U-4qtdi.jpg?tr=w-300 300w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-photographer_3b8U-4qtdi.jpg?tr=w-600 600w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-photographer_3b8U-4qtdi.jpg?tr=w-1000 1000w,
https://ik.imagekit.io/godofredoninja/ghost-blog/simply-doc/home/home-photographer_3b8U-4qtdi.jpg?tr=w-1100 1100w)
## routes.yaml
routes:
collections:
/:
permalink: /{slug}/
## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
limit: 12
template: godo-template-photographer
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/