Mapache free theme for Ghost

Minimalist Material Design and Elegant theme.

Hi. I created this theme for ghost especially for you. It is available for free so you can use on your site. It is strictly forbidden to use it for commercial use. If you have any suggestions to improve the theme, you can send me a tweet @GodoFredoNinja

🙏 Please, help me with a small donation on Paypal. It'll help motivate me to update the theme with many improvements

Demo

You can see mapache in action on my Page Demo

Featured

Support for different languages (en - es - de - ko - fr)
Responsive layout
Magazine style home page or personal blog style
404 error page (emoticons — last 6 articles)
Page subscribe
Pagination Infinite Scroll
Instagram Feed in footer of Post
Optional menu at the footer of the page
AMP Template (Accelerated Mobile Pages)
Follow on Social Media
Related Articles (6 articles)
Template - home Layout Masonry
Template - home Layout Personal Blog
Template - Page Newsletter (Mailchimp)
Template - Page Podcast
Template - Page Tag
Template - Post single
Template - Post full header
Template - Video post format
Template - Image post format
Template - Image single post format
Template - not image post => featured image is not displayed
5 featured articles in the sidebar (home - tag - author)
5 lates articles in the sidebar (post)
Tag Cloud in the sidebar
Previous and next articles buttons
Support for comments (Facebook or Disqus)
Support for counter comments (Facebook or Disqus)
Buttons to share the article (Facebook - Twitter - Reddit - Linkedin - Pinterest - Whatsapp)
Sticky content in the sidebar
YouTube, Vimeo, kickstarter, Facebook, dailymotion => Responsive
Lazy image loading for better performance only in backgrounds
Code syntax Prismjs Supported all syntax.

Web Browser Support for mapache

mapache supports the following web browsers

Ghost Settings

Enable the following checkboxes on the Labs page in the Ghost admin panel.

Mapache Settings

You don't have to add all the Mapache configurations. only the ones you need

1. Social Media

Facebook and Twitter is not necessary because I use them from the ghost settings

Add the Social Links only for the services you want to appear in the header section of your website. Pay attention as enabling too many services will cause menu problems.

2. Footer Menu

You can add an additional menu bar at the footer of the page

3. YouTube Subscribe Button

Subscription Button of YouTube in Video Post Format. Add the Channel ID which can be found here YouTube Advanced Settings

4. Instagram

I get the last 10 images then show 6 randomly It will only be shown in the footer of the Post

First, you will need to get your account userName and userId and accessToken from the following URLs:

userId: codeofaninja.com/tools/find-instagram-user-id
accessToken: instagram.pixelunion.net

5. Comments

Mapache supports Disqus comments and Facebook comments as well as comment counting

Disqus Comments — First, you will need to get your account disqusShortName

Facebook Comments — Changing the Language (en_US - es_ES - es_LA) more information link below language

6. Search

The default search engine will only search the titles of the post

The search engine that includes Mapache is very powerful, supports almost all languages and you can customize to your liking.

Read more about the search engine Read More

➡️ Copy the below script to Settings -> Code Injection -> Blog Footer

<script>
/*====================================================
  MAPACHE SETTINGS & GLOBAL VARIABLES
====================================================*/

/* 01. Social Media */
var followSocialMedia = {
  'youtube': 'https://...',
  'instagram': 'https://...',
  'snapchat': 'https://...',
  'dribbble': 'https://...',
  'github': 'https://...',
  'linkedin':'https://...',
  'spotify':'https://...',
  'codepen':'https://...',
  'behance':'https://...',
  'flickr':'https://...',
  'pinterest':'https://...',
  'telegram':'https://...',
  'vimeo':'https://...',
  'twitch':'https://...',
  'vk':'https://...',
  'slack':'https://...',
  'tumblr':'https://...',
  'discord':'https://...',
  'rss':'https://...',
};

/* 02. Footer Menu */
var footerLinks = {
  'menu 1': 'https://...',
  'menu 2': 'https://...',
  'menu 3': 'https://...',
};

/* 03. YouTube Subscribe Button */
var youtubeChannelID = 'YOUR_CHANNEL_ID';

/* 04. Instagram */
var instagramFeed  = {
  token: 'Token_app_instagram',
  userId: 'User_ID',
  userName: 'User_Name',
};

/* 05. Comments */

/* Disqus Comments or Facebook Comments - choose only one */
var disqusShortName = 'YOUR_DISQUS_SHORTCUT_HERE';
var facebookLocaleComments = 'en_US';

/* 06. Search Settings */
var searchSettings = {
  options: {
    keys: [
      'title',
    ],
    limit: 10,
    threshold: -3500,
    allowTypo: false,
  },
  api: {
    resource: 'posts',
    parameters: {
      limit: 'all',
      fields: ['title', 'slug'],
      filter: '',
      include: '',
      order: '',
      formats: '',
    },
  },
};

/* 07. Twitter Widget in the sidebar */
var twitterFeed = {
  name: 'YOUR_TWITTER_USER_NAME',
  number: 2,
};
</script>

Theme Translation

Mapache supports:

en — English default language
es — Spanish
de — German - By Frederik Niedernolte
ko — Korean - By SHGroup
fr — French - By Letroll
pl — Polish - By kacperduras

if you want to have in another language you just have to copy locales>en.json and rename the file then translate to your favorite language:

Just enter the language/locale tag of the files to use (e.g.: fr.json for French, zh.json for Chinese, ja.json for Japanese)

AMP

— Mapache has a nice page for AMP

Navigation
links to followers in social media
Tags
Related Articles (6 articles)
Buttons to share the article (Facebook - Twitter - Whatsapp)

To customize the AMP page read here

Home Page

Mapache - come with 2 Home page with different layout options

Masonry (Default)
Personal Blog

Rename or delete the file home.hbs
Edit the file package.json and change the number of post per page to 10.

"config": {
  "posts_per_page": 10
}

— Adding additional configuration for personal blog Settings -> Code Injection -> Blog Footer

<script>
  /* 01. Title for home - optional */
  var homeTitle = 'Hola este es mi Titulo';

  /* 02. Home BTN <SUBSCRIBE> - optional */
  var homeBtn = {
      title: 'Add_TITLE',
      url: 'Add_URL',
  };
</script>

Post Format

Mapache has different templates for post formats. I will mention some of them.

Post Full Header — It will have the full title of the post and will include the sidebar.
Post Image — This template will have a very large featured image and the header background will also be transparent and include the sidebar. optional you can add the internal tag #image in your post so that you can see the image icon in the instories.
Post Image Single — It's similar to post image. The difference is that you won't have a sidebar.
Post Video — the first video found will move to the top of the page. you can add the internal tag #video in your post so that you can see the image icon in the instories and filter related video to show below the video at the top of the page.
- vimeo
- Dailymotion
- Youtube
- Vid
- kickstarter

Add video where convenient. When you change the theme you will not have problems and not have Problem in your AMP Template

Tags Page

A page will be displayed with all tags sorted from highest to lowest number of articles.

To create the tags page you just have to create a new story
Choose your favorite url and title
Click the Turn this post into a static page checkbox
Select the Archive Tags template from the Template dropdown
Publish the page
To add the page to the navigation

Newsletter Page

To create the Newsletter page you just have to create a new story
Choose your favorite url and title
Click the Turn this post into a static page checkbox
Select the Archive Newsletter template from the Template dropdown
Write the list as normal in your content
To have the Mailchimp form copy the code and add an HTML section in Ghost then change the form action url.

Example: <form action="https://ninja.us10.list-manage.com/subscribe/post?u=5c52d5a541f6ab2e8d6020e82&id=f5f6d462c4">

<!-- <godo-nesletter> Mailchimp -->
<div class="godo-ne">
  <!-- Replace => Action -->
  <form id="godo-form" class="godo-ne-form" action="YOUR_URL_OF_LIST_Mailchimp" method="get">
      <label for="fieldEmail">Email Address</label>
      <div class="godo-ne-form-group">
        <input id="fieldEmail" class="godo-ne-input" name="EMAIL" type="email" placeholder="[email protected]" required="">
        <button class="godo-ne-button button" type="submit">Subscribe</button>
      </div>
      <small>No marketing campaigns. No jibber jabber. Unsubscribe anytime.</small>
  </form>
  <div class="godo-ne-success u-hide">
    <h3>✉️ Nice! Please check your email</h3>
    <p>Click on the link in your inbox to confirm your subscription</p>
  </div>
</div>

Testimonies Copy the code and paste into an HTML section in Ghost

<div class="godo-n-q">

  <div class="godo-n-q-i">
    <img src="https://blog.ghost.org/content/images/2018/04/tim.jpeg">
    <h3>Tim Cook</h3>
    <div class="godo-n-q-d">CEO, Apple</div>
    <blockquote>"This is a pretty fantastic newsletter tbh, I definitely recommend it"</blockquote>
  </div>

  <div class="godo-n-q-i u-hide-before-md">
    <img src="https://blog.ghost.org/content/images/2018/04/satya.jpg">
    <h3>Satya Nadella</h3>
    <div class="godo-n-q-d">CEO, Microsoft</div>
    <blockquote>"Finally, this newsletter is something we can really agree on"</blockquote>
  </div>

  <div class="godo-n-q-i u-hide-before-md">
    <img src="https://blog.ghost.org/content/images/2018/04/gravatar-j8.jpg">
    <h3>John O'Nolan</h3>
    <div class="godo-n-q-d">CEO, Ghost</div>
    <blockquote>"I should really get around to organising some quotes one of these days"</blockquote>
  </div>

</div>

Publish the page
To add the page to the navigation

Podcast Page

To create the Podcast Page you just have to create a new story
Choose your favorite title
Use the url podcast
Click the Turn this post into a static page checkbox
In your articles use the internal tags #podcast
First back up your routes in your ghost settings Labs -> Routes -> Download current routes.yml
Re-download the Route and edit routes.yml line routes

routes:
  /podcast/:
    controller: channel
    filter: tag:[hash-podcast]
    data:
      post: page.podcast
    limit: 10
    template: godo-podcast

In an HTML block in your ghost editor add this code for your content.

<p class="spc-h-e">The Podcast</p>

<p class="spc-des">Updates and behind the scenes stories about the world of Ghost. Hosted by Ghost founders <em>John O'Nolan</em> &amp; <em>Hannah Wolfe</em>.</p>

<div class="spc-buttons">

    <a href="https://itunes.apple.com/">
    <img src="/assets/images/icon-itunes.png" alt="iTunes Logo" rel="presentation"/>
    <span>iTunes</span>
  </a>

  <a href="https://www.pocketcasts.com/">
    <img src="/assets/images/icon-pocketcasts.png" alt="Pocket Casts Logo" rel="presentation"/>
    <span>Pocket Casts</span>
  </a>

  <a href="https://anchor.fm/">
    <img src="/assets/images/icon-rss.png" style="height:15px" alt="RSS Icon" rel="presentation"/>
    <span>RSS</span>
  </a>

</div>

Ads

Mapache has sections to add your ads.

You have to enter the following directory partials/ad and add in each file your ad blocks.

./partials/ad
├── ad-post-footer.hbs
├── ad-post-header.hbs
├── ad-sidebar-medium.hbs
├── ad-author-tag-footer.hbs
├── ad-author-tag.hbs
├── ad-home-top.hbs
└── ad-home-footer.hbs

— It is important to add the following style in your ghost settings. in the section Code injection -> Blog Header

<style>.mapache-ad-author-tag-top,.mapache-ad-home-top,.mapache-ad-post-footer{margin-bottom:30px}.mapache-ad-author-tag-footer,.mapache-ad-home-footer,.mapache-ad-post-header{margin-top:30px}</style>

Change Theme Color

It is very easy to customize with your favorite colors.

To change the color of the Mapache theme select one of the theme styles below and copy it into the:

Setting -> Code Injection -> Blog Header

<!-- 1.- Theme Mapache Deep Orange -->
<style>:root{--primary-color:#d25704;--header-color:#ffc79e;--header-color-hover:#fff4de;--story-cover-category-color:#ff7b22;--footer-color-link:#d25704;--media-type-color:rgba(243,137,59,0.86);--composite-color:#007d85;--podcast-button-color:#f06e17;--newsletter-color:#d25704;--newsletter-bg-color:rgba(210,87,4,0.6)}.button--primary{border-color:#d25704;color:#d25704}.u-accentColor--iconNormal{color:#d25704;fill:#d25704}.button--dark:hover{background:#d25704;border-color:#d25704}mark{background-image:linear-gradient(180deg,#ffe1c2,#ffe1c2)}</style>

<!-- 2.-Theme Mapache Blue Dark -->
<style>:root{--primary-color:#1e3757;--header-color:#c1cbdb;--header-color-hover:#fcffff;--story-cover-category-color:#7aa9f3;--footer-color-link:#c1cbdb;--composite-color:#007d85;--newsletter-color:#1e3757;--newsletter-bg-color:rgba(30,55,87,0.6)}.button--primary{border-color:#1e3757;color:#1e3757}.u-accentColor--iconNormal{color:#1e3757;fill:#1e3757}.button--dark:hover{background:#1e3757;border-color:#1e3757}mark{background-image:linear-gradient(180deg,#dff6f8,#dff6f8)}</style>

<!-- 3.-Theme Mapache Red -->
<style>:root{--primary-color:#c43235;--header-color:#ffbbb4;--header-color-hover:#fff0ec;--story-cover-category-color:#ff9699;--footer-color-link:#ff5b5e;--composite-color:#ff5b5e;--podcast-button-color:#c43235;--newsletter-color:#c43235;--newsletter-bg-color:rgba(196,50,53,0.6)}.button--primary{border-color:#c43235;color:#c43235}.u-accentColor--iconNormal{color:#c43235;fill:#c43235}.button--dark:hover{background:#c43235;border-color:#c43235}mark{background-image:linear-gradient(180deg,#ffdcd6,#ffdcd6)!important}</style>

<!-- 4.-Theme Mapache Blue -->
<style>:root{--primary-color:#0273d4;--header-color:#ddecfa;--header-color-hover:#fff;--story-cover-category-color:#c9e6ff;--footer-color-link:rgba(164,209,248,0.8);--composite-color:#ff5b5e;--podcast-button-color:#2ecc71;--newsletter-color:#0273d4;--newsletter-bg-color:rgba(2,115,212,0.6)}.button--primary{border-color:#0273d4;color:#0273d4}.u-accentColor--iconNormal{color:#0273d4;fill:#0273d4}.button--dark:hover{background:#0273d4;border-color:#0273d4}mark{background-image:linear-gradient(180deg,#e1f5fe,#e1f5fe)}</style>

<!-- 5.-Theme Mapache Bluen Semi Dark -->
<style>:root{--primary-color:#01579b;--header-color:#ddecfa;--header-color-hover:#fff;--story-cover-category-color:#c9e6ff;--footer-color-link:rgba(164,209,248,0.8);--composite-color:#ff5b5e;--podcast-button-color:#2ecc71;--newsletter-color:#01579b;--newsletter-bg-color:rgba(2,115,212,0.6)}.button--primary{border-color:#01579b;color:#01579b}.u-accentColor--iconNormal{color:#01579b;fill:#01579b}.button--dark:hover{background:#01579b;border-color:#01579b}mark{background-image:linear-gradient(180deg,#e1f5fe,#e1f5fe)}</style>

<!-- 6.-Theme Mapache Black -->
<style>:root{--primary-color:#000;--header-color:hsla(0,0%,100%,0.9);--header-color-hover:#fff;--story-cover-category-color:#ccc;--footer-color-link:hsla(0,0%,100%,0.8);--composite-color:rgba(0,0,0,0.54);--podcast-button-color:#2ecc71;--newsletter-color:rgba(0,0,0,0.84);--newsletter-bg-color:#b1aeae}.button--primary{border-color:#000;color:#000}.u-accentColor--iconNormal{color:#000;fill:#000}.button--dark:hover{background:#000;border-color:#000}.u-oblique{background:#2ecc71;color:rgba(0,0,0,.84)}mark{background-image:linear-gradient(180deg,#efefef,#efefef)!important}</style>

➡ If you don't like the colors above, then play with your favorite colors. Just change the colors in the following code

<style>
:root {
  --primary-color: rgba(210, 87, 4, 1);
  --header-color: #FFC79E;
  --header-color-hover: #FFF4DE;
  --story-cover-category-color: rgb(255, 123, 34);
  --footer-color-link: rgba(210, 87, 4, 1);
  --media-type-color: rgba(243, 137, 59, 0.86);
  --composite-color: #007D85;
  --podcast-button-color: rgba(240, 110, 23, 1);
  --newsletter-color: rgba(210, 87, 4, 1);
  --newsletter-bg-color: rgba(210, 87, 4, .6);
}

.button--primary {
  border-color: rgba(210, 87, 4, 1);
  color: rgba(210, 87, 4, 1);
}

.u-accentColor--iconNormal {
  color: rgba(210, 87, 4, 1);
  fill: rgba(210, 87, 4, 1);
}

.button--dark:hover {
  background: rgba(210, 87, 4, 1);
  border-color: rgba(210, 87, 4, 1);
}

mark { background-image: linear-gradient(to bottom, rgba(255, 225, 194, 1), rgba(255, 225, 194, 1)) }

</style>

Tracking Google Tag Mananger

Mapache keeps track of the user's actions on the page, for example:

Header
- Click Menu Name
- Click Social Media
- Click Newsletter Modal
- Click Search
Footer
- Click Social Media
- Click Nesletter Modal
Sidebar
- Click Sidebar post
- Click Name of the sidebar Tag Cloud
Article
- Click Author Name
- Click Author Facebook
- Click Author Twitter
- Click Share
- Click Next Post
- Click Prev Post
- Click Related Post
- Click Name of Tag
- Click Comments Button

Settings Google Tag Mananger

With Google Tag Manager, there are a million different ways to make your tagging setup leaner and more flexible.

I'll use an easy way to reduce redundancy here. It's the generic event tag 😊 you guessed it!

— What are you waiting? 🖐 hands in action.

First we'll create triggers

Click Triggers
New
Name of the Trigger
Select Custom Event
Name of the Event

— If you do not understand. look at the image

Second we'll create Tag

Click tags
New
Name of the Tag
Select Google Analytics
Track Type Event
{{Event Category}}
{{Event Action}}
{{Event Label}}
{{Event Value}}
Non-Interaction Hit true
Here you have to add your Google Analytics code. I have my Google Analytics code in a Global variable. I select my global variable
Triggering — Select the trigger we created first

— If you do not understand. look at the image

Third Insert code

🤔 You can improve the code. I'll leave that to your imagination.

➡️ Copy the below script to Settings -> Code Injection -> Blog Footer

<script>
  /* Tracking With Google Tag Mananger*/
   $('.godo-tracking').bind('click', function (e) {
    var $this = $(this);
    var godoCategory = $this.attr('data-event-category');
    var godoAction = $this.attr('data-event-action');
    var godoLabel = $this.attr('data-event-label');
    var godoValue = $this.attr('data-event-non-interaction');

    dataLayer.push({
      'event' : 'godoGhostEvent',
      'eventCategory' : godoCategory,
      'eventAction' : godoAction,
      'eventLabel' : godoLabel,
      'eventValue' : godoValue,
    });
  });
</script>

Warning - Note - Success

It is very important to add in the block of Markdown or HTML

Add some more styling options to your articles text with these three styles.

<p class="warning"> ... your text warning ... </p>

<p class="note"> ... your text note ... </p>

<p class="success"> ... your text success ... </p>

PrismJS code syntax

It is very important to add your code in the block of Markdown

Make your code stand out. WIth the PrismJS code highlighter. PrismJS allows you to select which languge you embeded and performs code highlighting according to the language. Neat!

Take a look at the Prismjs Supported Language List to find your coding language.

Name		Name	Last commit message	Last commit date
Latest commit History 255 Commits
assets		assets
documentation		documentation
locales		locales
partials		partials
.editorconfig		.editorconfig
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
amp.hbs		amp.hbs
author.hbs		author.hbs
custom-archive-newsletter.hbs		custom-archive-newsletter.hbs
custom-archive-tags.hbs		custom-archive-tags.hbs
custom-post-full-header.hbs		custom-post-full-header.hbs
custom-post-image-single.hbs		custom-post-image-single.hbs
custom-post-image.hbs		custom-post-image.hbs
custom-post-not-image.hbs		custom-post-not-image.hbs
custom-post-single.hbs		custom-post-single.hbs
custom-post-video.hbs		custom-post-video.hbs
default.hbs		default.hbs
donate.gif		donate.gif
error.hbs		error.hbs
godo-podcast.hbs		godo-podcast.hbs
home.hbs		home.hbs
index.hbs		index.hbs
package.json		package.json
page.hbs		page.hbs
post.hbs		post.hbs
screenshot.jpg		screenshot.jpg
subscribe.hbs		subscribe.hbs
tag.hbs		tag.hbs
theme.md		theme.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Mapache free theme for Ghost

🙏 Please, help me with a small donation on Paypal. It'll help motivate me to update the theme with many improvements

Demo

Featured

Table of Contents

Web Browser Support for mapache

Ghost Settings

Mapache Settings

1. Social Media

2. Footer Menu

3. YouTube Subscribe Button

4. Instagram

5. Comments

6. Search

Theme Translation

AMP

Home Page

Post Format

Tags Page

Newsletter Page

Podcast Page

Ads

Change Theme Color

Tracking Google Tag Mananger

Settings Google Tag Mananger

First we'll create triggers

Second we'll create Tag

Third Insert code

Warning - Note - Success

PrismJS code syntax

Credits

Copyright & License

About

Releases

Packages

Languages

License

ErikXXon/Mapache

Folders and files

Latest commit

History

Repository files navigation

Mapache free theme for Ghost

🙏 Please, help me with a small donation on Paypal. It'll help motivate me to update the theme with many improvements

Demo

Featured

Table of Contents

Web Browser Support for mapache

Ghost Settings

Mapache Settings

1. Social Media

2. Footer Menu

3. YouTube Subscribe Button

4. Instagram

5. Comments

6. Search

Theme Translation

AMP

Home Page

Post Format

Tags Page

Newsletter Page

Podcast Page

Ads

Change Theme Color

Tracking Google Tag Mananger

Settings Google Tag Mananger

First we'll create triggers

Second we'll create Tag

Third Insert code

Warning - Note - Success

PrismJS code syntax

Credits

Copyright & License

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages