Mapache free theme for Ghost

Minimalist 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. If you have any suggestions to improve the theme, you can send me a tweet @GodoFredoNinja

If you have a ❤️ heart and value my work. 🙏 Please, help me with a small donation Here or PayPal. It'll help motivate me to update the theme with many improvements

➡️ If you still don't have a Hosting for your Ghost. Use Digital Ocean using my referral link and you will get free a $100 in credit over 60 days to use in Digital Ocean. This way you will also be helping me.

Featured

Support for different languages (en - es - de - ko - fr - pt)
Light Mode / Dark Mode
First navigation menu for the header of the page
Second navigation menu for the footer of the page
404 error page
Pagination Infinite Scroll
Instagram Feed in footer of Post
Optional menu in the footer
AMP Template (Accelerated Mobile Pages)
Social Media
Members / Subscription
Very fast search engine
Related Articles (6 articles)
Different templates for the Home Page
Different templates for publishing posts
Page for (About Us - Podcast - Tag - Authors - Newsletter)
5 lates articles in the sidebar (post)
Tag Cloud in the sidebar
Previous and next articles buttons
Support for comments (Disqus)
Support for counter comments (Disqus)
Buttons to share the article (Facebook - Twitter - Reddit - Linkedin - Pinterest)
Beautiful gallery viewer
Sticky content in the sidebar
YouTube, Vimeo, kickstarter, 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 checkbox 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.

➡️ Dashboard -> Code injection -> Site Footer

<script>
var followSocialMedia = {
  'youtube': ['YOUR_URL','YOUR_TITLE'],
  'instagram': ['YOUR_URL','YOUR_TITLE'],
  'github': ['YOUR_URL','YOUR_TITLE'],
  'pinterest': ['YOUR_URL','YOUR_TITLE'],
  'linkedin': ['YOUR_URL','YOUR_TITLE'],
  'rss': ['YOUR_URL','YOUR_TITLE'],

  /*
  'snapchat': ['YOUR_URL','YOUR_TITLE'],
  'dribbble': ['YOUR_URL','YOUR_TITLE'],
  'spotify': ['YOUR_URL','YOUR_TITLE'],
  'codepen': ['YOUR_URL','YOUR_TITLE'],
  'behance': ['YOUR_URL','YOUR_TITLE'],
  'flickr': ['YOUR_URL','YOUR_TITLE'],
  'telegram': ['YOUR_URL','YOUR_TITLE'],
  'vimeo': ['YOUR_URL','YOUR_TITLE'],
  'twitch': ['YOUR_URL','YOUR_TITLE'],
  'vk': ['YOUR_URL','YOUR_TITLE'],
  'slack': ['YOUR_URL','YOUR_TITLE'],
  'tumblr': ['YOUR_URL','YOUR_TITLE'],
  'discord': ['YOUR_URL','YOUR_TITLE'],
  */
};
</script>

👉 For those who are commented it is necessary to add those icons through SVG

It is not necessary to add all the icons. Only the icons you need.

➡️ Dashboard -> Code injection -> Site Footer

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <!-- discord -->
        <symbol id="icon-discord" viewBox="0 0 24 24">
        <title>discord</title>
        <path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475v21.525l-2.677-2.273-1.47-1.338-1.604-1.398 0.67 2.205h-14.038c-1.402 0-2.54-1.065-2.54-2.476v-16.24c0-1.338 1.14-2.477 2.545-2.477l16.507-0.003zM14.104 5.683h-0.030l-0.202 0.2c2.073 0.6 3.076 1.537 3.076 1.537-1.336-0.668-2.54-1.002-3.744-1.137-0.87-0.135-1.74-0.064-2.475 0h-0.2c-0.47 0-1.47 0.2-2.81 0.735-0.467 0.203-0.735 0.336-0.735 0.336s1.002-1.002 3.21-1.537l-0.135-0.135s-1.672-0.064-3.477 1.27c0 0-1.805 3.144-1.805 7.020 0 0 1 1.74 3.743 1.806 0 0 0.4-0.533 0.805-1.002-1.54-0.468-2.14-1.404-2.14-1.404s0.134 0.066 0.335 0.2h0.060c0.030 0 0.044 0.015 0.060 0.030v0.006c0.016 0.016 0.030 0.030 0.060 0.030 0.33 0.136 0.66 0.27 0.93 0.4 0.466 0.202 1.065 0.403 1.8 0.536 0.93 0.135 1.996 0.2 3.21 0 0.6-0.135 1.2-0.267 1.8-0.535 0.39-0.2 0.87-0.4 1.397-0.737 0 0-0.6 0.936-2.205 1.404 0.33 0.466 0.795 1 0.795 1 2.744-0.060 3.81-1.8 3.87-1.726 0-3.87-1.815-7.020-1.815-7.020-1.635-1.214-3.165-1.26-3.435-1.26l0.056-0.020zM14.272 10.096c0.703 0 1.27 0.6 1.27 1.335 0 0.74-0.57 1.34-1.27 1.34s-1.27-0.6-1.27-1.334c0.002-0.74 0.573-1.338 1.27-1.338zM9.729 10.096c0.7 0 1.266 0.6 1.266 1.335 0 0.74-0.57 1.34-1.27 1.34s-1.27-0.6-1.27-1.334c0-0.74 0.57-1.338 1.27-1.338z"></path>
        </symbol>
        <!-- flickr -->
        <symbol id="icon-flickr" viewBox="0 0 21 24">
        <title>flickr</title>
        <path d="M16.714 1.714c2.129 0 3.857 1.728 3.857 3.857v12.857c0 2.129-1.728 3.857-3.857 3.857h-12.857c-2.129 0-3.857-1.728-3.857-3.857v-12.857c0-2.129 1.728-3.857 3.857-3.857h12.857zM9.348 12c0-1.567-1.272-2.839-2.839-2.839s-2.839 1.272-2.839 2.839 1.272 2.839 2.839 2.839 2.839-1.272 2.839-2.839zM16.902 12c0-1.567-1.272-2.839-2.839-2.839s-2.839 1.272-2.839 2.839 1.272 2.839 2.839 2.839 2.839-1.272 2.839-2.839z"></path>
        </symbol>
        <!-- tumblr -->
        <symbol id="icon-tumblr" viewBox="0 0 15 24">
        <title>tumblr</title>
        <path d="M12.643 17.799l1.071 3.174c-0.402 0.603-2.223 1.286-3.857 1.313-4.862 0.080-6.696-3.455-6.696-5.946v-7.286h-2.25v-2.879c3.375-1.219 4.192-4.272 4.379-6.013 0.013-0.107 0.107-0.161 0.161-0.161h3.268v5.679h4.46v3.375h-4.473v6.938c0 0.938 0.348 2.237 2.143 2.196 0.589-0.013 1.379-0.188 1.795-0.388z"></path>
        </symbol>
        <!-- dribbble -->
        <symbol id="icon-dribbble" viewBox="0 0 21 24">
        <title>dribbble</title>
        <path d="M13.714 20.089c-0.134-0.777-0.643-3.455-1.875-6.67-0.013 0-0.040 0.013-0.054 0.013 0 0-5.21 1.821-6.897 5.491-0.080-0.067-0.201-0.147-0.201-0.147 1.527 1.246 3.469 2.009 5.598 2.009 1.219 0 2.371-0.254 3.429-0.696zM11.237 11.96c-0.214-0.496-0.455-0.991-0.71-1.487-4.527 1.353-8.866 1.246-9.013 1.246-0.013 0.094-0.013 0.188-0.013 0.281 0 2.25 0.857 4.313 2.25 5.866v0c2.397-4.272 7.138-5.799 7.138-5.799 0.121-0.040 0.241-0.067 0.348-0.107zM9.804 9.121c-1.527-2.705-3.147-4.902-3.268-5.063-2.451 1.152-4.272 3.415-4.848 6.134 0.228 0 3.897 0.040 8.116-1.071zM18.964 13.393c-0.188-0.054-2.638-0.83-5.478-0.388 1.152 3.174 1.621 5.759 1.714 6.281 1.969-1.326 3.362-3.442 3.763-5.893zM8.183 3.469c-0.013 0-0.013 0-0.027 0.013 0 0 0.013-0.013 0.027-0.013zM16.085 5.411c-1.54-1.366-3.576-2.196-5.799-2.196-0.71 0-1.406 0.094-2.076 0.254 0.134 0.174 1.795 2.357 3.295 5.116 3.308-1.232 4.554-3.134 4.58-3.174zM19.071 11.906c-0.027-2.076-0.763-3.991-1.996-5.491-0.027 0.027-1.433 2.063-4.902 3.482 0.201 0.415 0.402 0.844 0.589 1.272 0.067 0.147 0.121 0.308 0.188 0.455 3.027-0.388 6.013 0.268 6.121 0.281zM20.571 12c0 5.679-4.607 10.286-10.286 10.286s-10.286-4.607-10.286-10.286 4.607-10.286 10.286-10.286 10.286 4.607 10.286 10.286z"></path>
        </symbol>
        <!-- vk -->
        <symbol id="icon-vk" viewBox="0 0 26 24">
        <title>vk</title>
        <path d="M25.674 6.964c0.201 0.549-0.429 1.835-2.009 3.938-2.598 3.455-2.879 3.134-0.737 5.129 2.062 1.915 2.491 2.839 2.558 2.96 0 0 0.857 1.5-0.951 1.513l-3.429 0.054c-0.737 0.147-1.714-0.522-1.714-0.522-1.286-0.884-2.491-3.174-3.429-2.879 0 0-0.964 0.308-0.938 2.371 0.013 0.442-0.201 0.683-0.201 0.683s-0.241 0.254-0.71 0.295h-1.54c-3.388 0.214-6.375-2.906-6.375-2.906s-3.268-3.375-6.134-10.112c-0.188-0.442 0.013-0.656 0.013-0.656s0.201-0.254 0.763-0.254l3.67-0.027c0.348 0.054 0.589 0.241 0.589 0.241s0.214 0.147 0.321 0.429c0.603 1.5 1.379 2.866 1.379 2.866 1.339 2.759 2.25 3.228 2.772 2.946 0 0 0.683-0.415 0.536-3.75-0.054-1.205-0.388-1.754-0.388-1.754-0.308-0.415-0.884-0.536-1.138-0.576-0.201-0.027 0.134-0.509 0.576-0.723 0.656-0.321 1.821-0.335 3.201-0.321 1.085 0.013 1.393 0.080 1.808 0.174 1.272 0.308 0.844 1.487 0.844 4.326 0 0.911-0.174 2.183 0.482 2.598 0.281 0.188 0.978 0.027 2.692-2.893 0 0 0.804-1.393 1.433-3.013 0.107-0.295 0.335-0.415 0.335-0.415s0.214-0.121 0.509-0.080l3.857-0.027c1.165-0.147 1.353 0.388 1.353 0.388z"></path>
        </symbol>
        <!-- slack -->
        <symbol id="icon-slack" viewBox="0 0 22 24">
        <title>slack</title>
        <path d="M20.344 10.393c1.098 0 1.942 0.804 1.942 1.902 0 0.857-0.442 1.46-1.246 1.741l-2.304 0.79 0.75 2.237c0.067 0.201 0.094 0.415 0.094 0.629 0 1.058-0.857 1.942-1.915 1.942-0.844 0-1.594-0.522-1.862-1.326l-0.737-2.21-4.152 1.42 0.737 2.196c0.067 0.201 0.107 0.415 0.107 0.629 0 1.045-0.857 1.942-1.929 1.942-0.844 0-1.58-0.522-1.848-1.326l-0.737-2.183-2.049 0.71c-0.214 0.067-0.442 0.121-0.67 0.121-1.085 0-1.902-0.804-1.902-1.888 0-0.83 0.536-1.58 1.326-1.848l2.089-0.71-1.406-4.192-2.089 0.723c-0.214 0.067-0.429 0.107-0.643 0.107-1.071 0-1.902-0.817-1.902-1.888 0-0.83 0.536-1.58 1.326-1.848l2.103-0.71-0.71-2.129c-0.067-0.201-0.107-0.415-0.107-0.629 0-1.058 0.857-1.942 1.929-1.942 0.844 0 1.58 0.522 1.848 1.326l0.723 2.143 4.152-1.406-0.723-2.143c-0.067-0.201-0.107-0.415-0.107-0.629 0-1.058 0.871-1.942 1.929-1.942 0.844 0 1.594 0.536 1.862 1.326l0.71 2.156 2.17-0.737c0.188-0.054 0.375-0.080 0.576-0.080 1.045 0 1.942 0.777 1.942 1.848 0 0.83-0.643 1.527-1.393 1.781l-2.103 0.723 1.406 4.232 2.196-0.75c0.201-0.067 0.415-0.107 0.616-0.107zM9.71 13.902l4.152-1.406-1.406-4.219-4.152 1.433z"></path>
        </symbol>
        <!-- behance -->
        <symbol id="icon-behance" viewBox="0 0 21 24">
        <title>behance</title>
        <path d="M16.714 1.714c2.129 0 3.857 1.728 3.857 3.857v12.857c0 2.129-1.728 3.857-3.857 3.857h-12.857c-2.129 0-3.857-1.728-3.857-3.857v-12.857c0-2.129 1.728-3.857 3.857-3.857h12.857zM6.683 6.629h-4.969v10.54h5.116c1.915 0 3.71-0.911 3.71-3.054 0-1.326-0.629-2.304-1.915-2.679 0.938-0.455 1.433-1.138 1.433-2.196 0-2.103-1.567-2.612-3.375-2.612zM6.388 10.888h-2.357v-2.464h2.183c0.83 0 1.594 0.228 1.594 1.205 0 0.897-0.589 1.259-1.42 1.259zM6.509 15.375h-2.478v-2.906h2.531c1.018 0 1.661 0.442 1.661 1.513s-0.763 1.393-1.714 1.393zM15.214 15.804c-1.232 0-1.875-0.723-1.875-1.942h5.504c0.013-0.134 0.013-0.268 0.013-0.402 0-2.25-1.326-4.138-3.723-4.138-2.317 0-3.911 1.754-3.911 4.045 0 2.384 1.5 4.004 3.911 4.004 1.835 0 3.013-0.817 3.576-2.558h-1.848c-0.201 0.643-1.018 0.991-1.647 0.991zM15.080 10.902c1.045 0 1.567 0.629 1.661 1.634h-3.402c0.067-1.004 0.737-1.634 1.741-1.634zM12.911 7.339h4.272v1.031h-4.272v-1.031z"></path>
        </symbol>
        <!-- spotify -->
        <symbol id="icon-spotify" viewBox="0 0 21 24">
        <title>spotify</title>
        <path d="M15.094 16.205c0-0.375-0.147-0.522-0.402-0.683-1.728-1.031-3.737-1.54-5.987-1.54-1.313 0-2.571 0.174-3.844 0.455-0.308 0.067-0.563 0.268-0.563 0.696 0 0.335 0.254 0.656 0.656 0.656 0.121 0 0.335-0.067 0.496-0.107 1.045-0.214 2.143-0.362 3.254-0.362 1.969 0 3.83 0.482 5.317 1.379 0.161 0.094 0.268 0.147 0.442 0.147 0.335 0 0.629-0.268 0.629-0.643zM16.379 13.326c0-0.362-0.134-0.616-0.469-0.817-2.049-1.219-4.647-1.888-7.339-1.888-1.728 0-2.906 0.241-4.058 0.563-0.429 0.121-0.643 0.415-0.643 0.857s0.362 0.804 0.804 0.804c0.188 0 0.295-0.054 0.496-0.107 0.938-0.254 2.063-0.442 3.362-0.442 2.545 0 4.862 0.67 6.536 1.661 0.147 0.080 0.295 0.174 0.509 0.174 0.455 0 0.804-0.362 0.804-0.804zM17.826 10.004c0-0.496-0.214-0.75-0.536-0.938-2.317-1.353-5.491-1.982-8.518-1.982-1.781 0-3.415 0.201-4.875 0.629-0.375 0.107-0.723 0.429-0.723 0.991 0 0.549 0.415 0.978 0.964 0.978 0.201 0 0.388-0.067 0.536-0.107 1.299-0.362 2.705-0.496 4.112-0.496 2.786 0 5.679 0.616 7.54 1.728 0.188 0.107 0.321 0.161 0.536 0.161 0.509 0 0.964-0.402 0.964-0.964zM20.571 12c0 5.679-4.607 10.286-10.286 10.286s-10.286-4.607-10.286-10.286 4.607-10.286 10.286-10.286 10.286 4.607 10.286 10.286z"></path>
        </symbol>
        <!-- codepen -->
        <symbol id="icon-codepen" viewBox="0 0 24 24">
        <title>codepen</title>
        <path d="M2.893 15.656l8.076 5.384v-4.808l-4.473-2.987zM2.063 13.728l2.585-1.728-2.585-1.728v3.455zM13.031 21.040l8.076-5.384-3.603-2.411-4.473 2.987v4.808zM12 14.438l3.643-2.438-3.643-2.438-3.643 2.438zM6.496 10.754l4.473-2.987v-4.808l-8.076 5.384zM19.353 12l2.585 1.728v-3.455zM17.504 10.754l3.603-2.411-8.076-5.384v4.808zM24 8.344v7.313c0 0.335-0.174 0.67-0.455 0.857l-10.969 7.313c-0.174 0.107-0.375 0.174-0.576 0.174s-0.402-0.067-0.576-0.174l-10.969-7.313c-0.281-0.188-0.455-0.522-0.455-0.857v-7.313c0-0.335 0.174-0.67 0.455-0.857l10.969-7.313c0.174-0.107 0.375-0.174 0.576-0.174s0.402 0.067 0.576 0.174l10.969 7.313c0.281 0.188 0.455 0.522 0.455 0.857z"></path>
        </symbol>
        <!-- twitch -->
        <symbol id="icon-twitch" viewBox="0 0 24 24">
        <title>twitch</title>
        <path d="M12 5.813v5.813h-1.942v-5.813h1.942zM17.33 5.813v5.813h-1.942v-5.813h1.942zM17.33 15.991l3.388-3.402v-10.647h-15.991v14.049h4.366v2.906l2.906-2.906h5.33zM22.661 0v13.567l-5.813 5.813h-4.366l-2.906 2.906h-2.906v-2.906h-5.33v-15.509l1.46-3.871h19.862z"></path>
        </symbol>
        <!-- vimeo -->
        <symbol id="icon-vimeo" viewBox="0 0 24 24">
        <title>vimeo</title>
        <path d="M22.888 6.938c-0.094 2.116-1.58 5.022-4.446 8.719-2.973 3.844-5.464 5.772-7.527 5.772-1.272 0-2.344-1.179-3.214-3.522-0.589-2.143-1.179-4.299-1.768-6.455-0.643-2.344-1.353-3.509-2.103-3.509-0.161 0-0.723 0.335-1.701 1.018l-1.031-1.313c1.071-0.951 2.129-1.915 3.188-2.839 1.42-1.259 2.504-1.888 3.228-1.955 1.701-0.161 2.732 0.991 3.134 3.469 0.415 2.679 0.723 4.353 0.884 4.996 0.496 2.223 1.018 3.335 1.607 3.335 0.455 0 1.138-0.71 2.063-2.156 0.911-1.446 1.393-2.545 1.46-3.295 0.121-1.246-0.362-1.862-1.46-1.862-0.522 0-1.058 0.121-1.621 0.348 1.071-3.509 3.121-5.21 6.147-5.116 2.237 0.067 3.295 1.527 3.161 4.366z"></path>
        </symbol>
        <!-- snapchat -->
        <symbol id="icon-snapchat" viewBox="0 0 22 24">
        <title>snapchat</title>
        <path d="M11.357 1.714c2.411-0.027 4.406 1.326 5.411 3.496 0.308 0.656 0.362 1.674 0.362 2.397 0 0.857-0.067 1.701-0.121 2.558 0.107 0.054 0.254 0.094 0.375 0.094 0.482 0 0.884-0.362 1.366-0.362 0.455 0 1.112 0.321 1.112 0.857 0 1.286-2.692 1.045-2.692 2.17 0 0.201 0.080 0.388 0.161 0.576 0.643 1.406 1.862 2.759 3.308 3.362 0.348 0.147 0.696 0.228 1.071 0.308 0.241 0.054 0.375 0.228 0.375 0.469 0 0.911-2.317 1.286-2.933 1.379-0.268 0.415-0.067 1.393-0.777 1.393-0.549 0-1.098-0.174-1.688-0.174-0.281 0-0.563 0.013-0.83 0.067-1.594 0.268-2.129 1.982-4.741 1.982-2.518 0-3.121-1.714-4.674-1.982-0.281-0.054-0.563-0.067-0.844-0.067-0.603 0-1.179 0.201-1.661 0.201-0.75 0-0.522-0.991-0.804-1.42-0.616-0.094-2.933-0.469-2.933-1.379 0-0.241 0.134-0.415 0.375-0.469 0.375-0.080 0.723-0.161 1.071-0.308 1.433-0.589 2.679-1.955 3.308-3.362 0.080-0.188 0.161-0.375 0.161-0.576 0-1.125-2.705-0.911-2.705-2.156 0-0.522 0.616-0.857 1.085-0.857 0.415 0 0.83 0.348 1.353 0.348 0.147 0 0.295-0.027 0.429-0.094-0.054-0.844-0.121-1.688-0.121-2.545 0-0.723 0.054-1.754 0.362-2.411 1.179-2.545 3.174-3.469 5.839-3.496z"></path>
        </symbol>
        <!-- telegram -->
        <symbol id="icon-telegram" viewBox="0 0 24 24">
        <title>telegram</title>
        <path d="M15.924 17.504l1.969-9.281c0.174-0.817-0.295-1.138-0.83-0.938l-11.571 4.46c-0.79 0.308-0.777 0.75-0.134 0.951l2.96 0.924 6.871-4.326c0.321-0.214 0.616-0.094 0.375 0.121l-5.558 5.022-0.214 3.054c0.308 0 0.442-0.134 0.603-0.295l1.446-1.393 3 2.21c0.549 0.308 0.938 0.147 1.085-0.509zM24 12c0 6.629-5.371 12-12 12s-12-5.371-12-12 5.371-12 12-12 12 5.371 12 12z"></path>
        </symbol>
    </defs>
</svg>

2. Footer Menu

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

➡️ Dashboard -> Design -> Secondary Navigation

3. 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:

User ID: codeofaninja.com/tools/find-instagram-user-id
Access Token: instagram.pixelunion.net

➡️ Dashboard -> Code injection -> Site Footer

<script>
var instagramFeed  = {
  token: 'Token_app_instagram',
  userId: 'User_ID',
  userName: 'User_Name',
};
</script>

4. Comments

Mapache supports Disqus comments as well as comment counting

— First, you will need to get your account disqusShortName

➡️ Dashboard -> Code injection -> Site Footer

<script>
var disqusShortName = 'YOUR_DISQUS_SHORTCUT_HERE';
</script>

5. Search

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

Setup a Custom integration

Go in your Ghost's dashboard -> Integrations -> Add custom integration
Set a name: GodoFredo Themes Search
Get the Content API Key and replace the demo key with this one
Get the admin domain. This will be different in some cases

➡️ Dashboard -> Code injection -> Site Footer

<script>
  var searchSettings = {
    key: 'ADD_YOUR_API_KEY',
    url: 'https://demo.ghost.io',
  };
</script>

OR - Adding parameters to the search

<script>
var searchSettings = {
  key: 'ADD_YOUR_API_KEY',
  url: 'https://demo.ghost.io',
  /* This is optional */
  options: {
    keys: [
        'title',
    ],
    limit: 10,
  },
  /* This is optional to perform filtering of the ghost api */
  api: {
    resource: 'posts',
    parameters: {
      limit: 'all',
      fields: ['title', 'slug'],
      filter: '',
      include: '',
      order: '',
      formats: '',
    },
  },
}
</script>

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

6. Twitter widget in the sidebar

<script>
var twitterFeed = 'YOUR_TWITTER_USER_NAME';
</script>

Home Page

Mapache - come with 6 Home page with different layout options

First back up your routes in your ghost settings Dashboard -> Labs -> Routes -> Download current routes.yml
Re-download the Route and edit routes.yml line collections -> template
- index — Personal
- godo-home-blog — Blog
- godo-home-travel — Travel
- godo-home-travel-featured — Travel With Featured Post
- godo-home-fashion-concept — Fashion Concept

📢 If you plan to use (Personal, Blog, Travel, Fashion) for your home page, Rename or delete the file home.hbs

Personal - Edit package.json and change "posts_per_page": 10

Blog - Edit package.json and change "posts_per_page": 10

Fashion - Edit package.json and change "posts_per_page": 12

collections:
  /:
    permalink: /{slug}/
    template:
      # - godo-home-blog
      # - godo-home-travel
      # - godo-home-travel-featured
      # - godo-home-fashion-concept
      - index

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.
Post Image Single — It's similar to post image. The difference is that you won't have a sidebar.
Post Single — Includes the featured image at the top but does not include the sidebar
Post Not Image — The sidebar doesn't have the featured image either.
Post Video — The first video found will move to the top of the page.
- vimeo
- Dailymotion
- Youtube
- Twitch
- kickstarter

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

Page

About Us Page

Mapache has a beautifull page for - about us

Create a new page
Choose your favorite url and title
Template dropdown -> Select Page About Us
You have to add a section of html and add the rows and columns. you can guide yourself with the capture of the image
Publish the page
To add the page to the navigation

<section class="row">
<div class="col s12 l6">
<!-- Content here -->

</div>
<div class="col s12 l6">
<!-- The image here -->


</div>
</section> <!-- close Row -->
<section class="row">
<div class="col s12 l6 u-hide-before-lg">
<!-- Content here -->

</div>
<div class="col s12 l6">
<!-- The image here -->

</div>
</section> <!-- close Row -->

Contact Page

Create a new page
Choose your favorite url and title
Template dropdown -> Select Page Contact
Publish the page
To add the page to the navigation

➡️ I am using FORMSPREE for sending emails. Please replace with your email. I recommend having an email dedicated especially to FORMSPREE.

<div class="u-fontSize20 u-maxWidth740 u-marginAuto u-marginBottom40 u-textAlignCenter">
  We’re here for you! Please contact us using the form below.
</div>

<!-- FORMSPREE replace with your email -->
<form action="https://formspree.io/your@email.com" class="contact-form u-marginBottom40 u-marginAuto" method="POST">
  <input name="name" type="text" class="u-marginBottom30" placeholder="Your Name" required>
  <input name="email" type="email" class="u-marginBottom30" placeholder="Your Email" required>
  <textarea name="message" class="u-marginBottom40" placeholder="Type Message" required></textarea>
  <button type="submit" class="button button--large button--dark">Send Message</button>
</form>

➡️ PHONE - ADDRESS - EMAIL

<div class="pae u-textAlignCenter u-maxWidth1000 u-marginAuto">
  <div class="row">
    <div class="col s12 m4 u-marginBottom30">
      <div class="pae-icon">
        <svg viewBox="0 0 24 24" width="64" height="64" stroke="currentColor" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12" y2="18"></line></svg>
      </div>
      <h4 class="pae-title">PHONE</h4>
      <div class="pae-des u-fontSizeBase">
        <p>+51 987 659 249</p>
        <p>+51 01 424 0827</p>
      </div>
    </div>

    <div class="col s12 m4 u-marginBottom30">
      <div class="pae-icon">
        <svg viewBox="0 0 24 24" width="64" height="64" stroke="currentColor" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
      </div>
      <h4 class="pae-title">ADDRESS</h4>
      <div class="pae-des u-fontSizeBase">
        <p>Parque de la Reserva, Jr. Madre de Dios, Cercado de Lima, Perú</p>
      </div>
    </div>

    <div class="col s12 m4 u-marginBottom30">
      <div class="pae-icon">
        <svg viewBox="0 0 24 24" width="64" height="64" stroke="currentColor" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
      </div>
      <h4 class="pae-title">EMAIL</h4>
      <div class="pae-des u-fontSizeBase">
        <p>hello@godofredo.ninja</p>
        <p>test@godofredo.ninja</p>
      </div>
    </div>
  </div>
</div>

➡️ Google Maps

<div class="contact-maps u-textAlignCenter">
  <div class="video-responsive">
    <!-- ADD_YOUR_IFRAME_GOOGLE_MAPS -->
  </div>
</div>

Newsletter Page

Create a new page
Choose your favorite url and title
Template dropdown -> Select Archive Newsletter
Publish the page
To add the page to the navigation

➡️ I am using Mailchimp for Newsletter. Please replace the form action url

<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="yourname@example.com" required="">
        <button class="godo-ne-button button button--dark button--large" 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="http://localhost:2368/assets/images/avatar.png" alt="Hello">
    <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="http://localhost:2368/assets/images/avatar.png" alt="Hello">
    <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="http://localhost:2368/assets/images/avatar.png" alt="Hello">
    <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>

Authors Page

Create a new page
Choose your favorite url and title
Template dropdown -> Select Archive Author
Publish the page
To add the page to the navigation

Tags Page

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

Create a new page
Choose your favorite url and title
Template dropdown -> Select Archive Tags
Publish the page
To add the page to the navigation

Podcast Page

Create a new page
Choose your favorite title
Use the url podcast
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 buttonSet">

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

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

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

</div>

Members / Subscription

Subscribers can be enabled via a checkbox on the Labs page ➡️ Dashboard -> Labs -> Enable Memebers

😄 Once enabled, different parts of the theme will appear:

Login In and Sign Up buttons in the header.
Header subscription Dropdown
Footer subscription form.
Post Sidebar subscription form.

In order for the theme to be fully compatible with member subscription flows you have to add the following routes.

routes:
  /signup/: members/signup
  /signin/: members/signin
  /account/: members/account
  /membership/: members/membership

To edit plans features, you can edit the members/membership.hbs file.

For more information about Members, connecting Stripe and setting the package price, I highly recommend checking the official Ghost documentation.

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

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
pt — Brazilian Portuguese - By Renato Rattes
sr — Serbian - By Marjan Panić
uk — Ukrainian - By Maksim
tr — 🇹🇷 Turkish by @tolgaaaltas

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)

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 {
    --header-logo-color:#fff;
    --header-bg-color:#d25704;
    --header-color:#ffc79e;
    --header-color-hover:#fff4de;
    --header-menu-color:#ffc79e;
    --header-menu-color-hover:#fff4de;
    --composite-color:#007d85;
    --composite-color-hover: #0b97a0;
  }
</style>

<!-- 2.-Theme Mapache Blue Dark -->
<style>
  :root{
    --header-logo-color:#fff;
    --header-bg-color:#1e3757;
    --header-menu-color:#c1cbdb;
    --header-menu-color-hover:#fcffff;
    --header-color:#c1cbdb;
    --header-color-hover:#fcffff;
    --composite-color:#007d85;
    --composite-color-hover: #0b97a0;
  }
</style>

<!-- 3.-Theme Mapache Red -->
<style>
  :root{
    --header-logo-color:#fff;
    --header-bg-color:#c43235;
    --header-menu-color:#ffbbb4;
    --header-menu-color-hover:#fff0ec;
    --header-color:#ffbbb4;
    --header-color-hover:#fff0ec;
    --composite-color:#ff5b5e;
    --composite-color-hover: #c75d5f;
  }
</style>

<!-- 4.-Theme Mapache Blue -->
<style>
  :root{
    --header-logo-color:#fff;
    --header-bg-color:#0273d4;
    --header-menu-color:#ddecfa;
    --header-menu-color-hover:#fff;
    --header-color:#ddecfa;
    --header-color-hover:#fff;
    --composite-color:#0389FF;
    --composite-color-hover: #0273D4;
  }
</style>

<!-- 5.-Theme Mapache Bluen Semi Dark -->
<style>
  :root{
    --header-logo-color:#fff;
    --header-bg-color:#01579b;
    --header-menu-color:#ddecfa;
    --header-menu-color-hover:#fff;
    --header-color:#ddecfa;
    --header-color-hover:#fff;
    --composite-color:#0392FF;
    --composite-color-hover: #01579B;
    }
</style>

<!-- 6.-Theme Mapache Black -->
<style>
  :root{
    --header-logo-color:#fff;
    --header-bg-color:#000;
    --header-menu-color:hsla(0,0%,100%,0.9);
    --header-menu-color-hover:#fff;
    --header-color:hsla(0,0%,100%,0.9);
    --header-color-hover:#fff;
  }
</style>

PrismJS code syntax

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 329 Commits
.github		.github
assets		assets
documentation		documentation
locales		locales
members		members
partials		partials
.editorconfig		.editorconfig
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
amp.hbs		amp.hbs
author.hbs		author.hbs
custom-archive-author.hbs		custom-archive-author.hbs
custom-archive-newsletter.hbs		custom-archive-newsletter.hbs
custom-archive-tags.hbs		custom-archive-tags.hbs
custom-page-about-us.hbs		custom-page-about-us.hbs
custom-page-contact.hbs		custom-page-contact.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-404.hbs		error-404.hbs
godo-home-blog.hbs		godo-home-blog.hbs
godo-home-fashion-concept.hbs		godo-home-fashion-concept.hbs
godo-home-travel-featured.hbs		godo-home-travel-featured.hbs
godo-home-travel.hbs		godo-home-travel.hbs
godo-podcast.hbs		godo-podcast.hbs
godo-template-category-header.hbs		godo-template-category-header.hbs
godo-template-category.hbs		godo-template-category.hbs
home.hbs		home.hbs
index.hbs		index.hbs
package.json		package.json
page.hbs		page.hbs
post.hbs		post.hbs
routes.yaml		routes.yaml
screenshot.png		screenshot.png
tag.hbs		tag.hbs

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Mapache free theme for Ghost

If you have a ❤️ heart and value my work. 🙏 Please, help me with a small donation Here or PayPal. It'll help motivate me to update the theme with many improvements

Featured

Table of Contents

Web Browser Support for mapache

Ghost Settings

Mapache Settings

1. Social Media

2. Footer Menu

3. Instagram

4. Comments

5. Search

6. Twitter widget in the sidebar

Home Page

Post Format

Page

About Us Page

Contact Page

Newsletter Page

Authors Page

Tags Page

Podcast Page

Category

Category - Defautl

Category with Header

Members / Subscription

AMP

Theme Translation

Change Theme Color

PrismJS code syntax

Credits

Copyright & License

About

Releases

Packages

Languages

License

gplone/Mapache

Folders and files

Latest commit

History

Repository files navigation

Mapache free theme for Ghost

If you have a ❤️ heart and value my work. 🙏 Please, help me with a small donation Here or PayPal. It'll help motivate me to update the theme with many improvements

Featured

Table of Contents

Web Browser Support for mapache

Ghost Settings

Mapache Settings

1. Social Media

2. Footer Menu

3. Instagram

4. Comments

5. Search

6. Twitter widget in the sidebar

Home Page

Post Format

Page

About Us Page

Contact Page

Newsletter Page

Authors Page

Tags Page

Podcast Page

Category

Category - Defautl

Category with Header

Members / Subscription

AMP

Theme Translation

Change Theme Color

PrismJS code syntax

Credits

Copyright & License

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages