Home Page

Simply - come with 7 Home page with different layout options

1. Default index.hbs
2. Featured godo-template-featured.hbs
3. Medium godo-template-medium.hbs
4. Sidebar godo-template-sidebar.hbs
5. Grid godo-template-grid.hbs
6. Personal godo-template-personal.hbs
7. Archive Page godo-template-archive.hbs
8. Featured with Slider godo-template-featured-slider.hbs
9. Medium with Sidebar godo-template-medium-sidebar.hbs
10. 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 line collections -> template
• After doing the changes, save the file and upload again.
• If do not observe changes restart ghost

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.

Featured

The last featured article will be called up and displayed throughout the length of the screen.

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

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

## 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.

## 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.

• 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.

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

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.

• 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.

## 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}/

Edit this page on GitHub