Home Page

Simply - come with 7 Home page with different layout options

Defaultindex.hbs
Featuredgodo-template-featured.hbs
Mediumgodo-template-medium.hbs
Sidebargodo-template-sidebar.hbs
Gridgodo-template-grid.hbs
Personalgodo-template-personal.hbs
Archive Pagegodo-template-archive.hbs
Featured with Slidergodo-template-featured-slider.hbs
Medium with Sidebargodo-template-medium-sidebar.hbs
Photographergodo-template-photographer.hbs

First back up yourroutes.yaml in your ghost settings Dashboard -> Labs -> Routes -> Download current routes.yaml
Re-download the Route and editroutes.yaml linecollections -> 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 theindex.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 ourroutes.yaml in the following way.

## routes.yamlroutes:collections:  /:    permalink: /{slug}/    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'    limit: 12    template: godo-template-featuredtaxonomies:  tag: /tag/{slug}/  author: /author/{slug}/

Medium

The templategodo-template-medium.hbs has a similarity toMedium

Our route will need to change

## routes.yamlroutes:collections:  /:    permalink: /{slug}/    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'    template: godo-template-medium    limit: 14taxonomies:  tag: /tag/{slug}/  author: /author/{slug}/

Sidebar

This template comes with a sidebar with 3 featured articles

## routes.yamlroutes:collections:  /:    permalink: /{slug}/    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'    limit: 12    template: godo-template-sidebartaxonomies:  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.yamlroutes:collections:  /:    permalink: /{slug}/    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'    limit: 12    template: godo-template-gridtaxonomies:  tag: /tag/{slug}/  author: /author/{slug}/

Personal

The personal page has a big title and is centered. It has a small content using thetypewriter style.

Create a new page
Choose your favorite title
Use theURL ->home-personal

In anHTML block in your ghost editor add this code to display thetypewriter.

<div class="">    I’m a    <span id="typewriter" class="font-medium"></span></div>

In this block ofHTML 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.yamlroutes:  /:    template: godo-home-personal    data: page.home-personalcollections:  /:    permalink: /{slug}/    template: indextaxonomies:  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 filegodo-archive.hbs inside the theme.

?Archive Route

## routes.yamlroutes:  /archive/:    controller: channel    # filter: 'tag:-[hash-portfolio,hash-kusi-doc]'    limit: 50    template: godo-archivecollections:  /:    permalink: /{slug}/    template: indextaxonomies:  tag: /tag/{slug}/  author: /author/{slug}/

Featured with Slider

Here if it is necessary to change ourroutes.yaml in the following way.

## routes.yamlroutes:collections:  /:    permalink: /{slug}/    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'    limit: 12    template: godo-template-featured-slidertaxonomies:  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 theURL ->medium-with-sidebar

## routes.yamlroutes:collections:  /:    permalink: /{slug}/    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'    template: godo-template-medium-sidebar    data:      post: page.medium-with-sidebar    limit: 14taxonomies:  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.yamlroutes:collections:  /:    permalink: /{slug}/    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'    limit: 12    template: godo-template-photographertaxonomies:  tag: /tag/{slug}/  author: /author/{slug}/

Edit this page on GitHub

On this page

Movatterモバイル変換