Documentation
Instructions to setting up Maple on your Ghost website.
Maple is a modular theme for personal websites built with Ghost. It was created to enable people to build a pleasant personal website with all the publishing features they need. Below are all the features and instructions you need to use it.
đź’ˇ
We're constantly updating the documentation for Maple. If you find anything unclear or feel like something is missing, please let us know via email.
Basic installation
Install the theme as you’d install any other one. Go to Settings ➡️ Design ➡️ Change theme ➡️ Upload theme and upload the ZIP file we provided.
Routes
Then, you’ll need to install the routes.yaml file included in the theme folder. This is important to show some content on the homepage.
Homepage
The theme is made to be used with a dedicated home page. Create a page inside Ghost with the slug “home”. Add an image and any content you wish to display on the homepage.
đź’ˇ
A square image works best for "Bento" and "Center" hero styles (see below).
Design
Under design settings, fill out all the main sections. Add the color, description, site icon, logo, and cover image (not shown in the theme). All of these things are optional, but recommended.
Site-wide
Now we come to the custom settings, where you can set it up exactly as you want.
Blog layout
The posts are displayed in a simple grid layout with a clean design. If you set a post to featured, A small lightning icon will show up in the top-right corner. If there's no featured image, the post will be displayed without it and with an outline.
Hero color
Choose a custom color for the background of your hero and navbar - only on the homepage. The default is #f5f5f5. Please note that the text's color doesn't change according to the chosen background color, so ensure that there's enough contrast.
Post CTA
Write a call to action that’s displayed on all inline forms across the theme.
Crypto widget
A first of its kind in Ghost themes. You can choose whether you want to display it or no, and if you want to display a Bitcoin and/or Ethereum address. A button will automatically show up in the hero of the home page. The visitors can use it to open a widget and copy the address by clicking on it.
Disclaimer
- Use at Your Own Risk: This Ghost theme and its associated crypto widget are provided "as is" without warranty of any kind, either express or implied. The usage of this theme and widget is at the user's own risk.
- Security: While we have taken steps to ensure the security of this widget, we cannot guarantee complete security. Cryptocurrency transactions are irreversible; therefore, users should ensure they are sending funds to the correct address. We are not responsible for any lost or stolen cryptocurrency.
- Accuracy: We cannot guarantee the accuracy of the displayed cryptocurrency addresses. Users should double-check addresses before sending funds.
- Regulatory Compliance: Users of this widget are responsible for ensuring their use of cryptocurrency complies with all local, state, national, and international laws.
- Liability: In no event will we be liable for any loss or damage including, without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from the use of this widget.
- Updates & Maintenance: We reserve the right to modify, update, or discontinue this widget at any time without notice.
- Third-Party Services: This widget may contain links to third-party websites or services that are not owned or controlled by us. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party websites or services.
- No Investment Advice: The information provided in this widget does not constitute investment advice, financial advice, trading advice, or any other sort of advice, and you should not treat any of the widget's content as such.
Home page
There are several settings available for the homepage.
Hero style
Firstly, you’ll want to select a hero style. This is the uppermost portion of the home page.
The default is set to “Bento”, which is the flagship feature of this theme. With it, you display your latest post, crypto widget, total number of members, a featured page/post and social media links. Great for making a first impression on the visitor. See an example on the homepage of this demo.
đź’ˇ
Bento is a Japanese term for a single-portion boxed meal, which features different compartments for different parts of the meal.
The second option called “Headshot” is to display the introductory text from the “home” page and its feature image side by side.
The third option called “Center” is to display the feature image on the top with content under it.
đź’ˇ
Keep in mind that “Headshot” and “Center” have limited functionality in comparison to the “Bento”.
Posts and pages
You can add one additional post and/or page to the "Bento" hero. You just add the internal tag #bento to any post or page and it will show up in the same style as the rest.
Number of members
Display how many members are subscribed to your email list. This will show a widget in the “Bento” hero with a link that open the portal and allow visitors to sign up.
Social media
This is the secondary navigation of your Ghost blog. Every social media account you add to it gets displayed in the “Bento” hero as well. See the section below for detailed instructions.
Featured posts
Below the hero, you have the option to display featured posts. You can toggle this to on or off, depending on your preferences.
Recent posts will be displayed regardless of the settings.
Subscribe form
Choose whether you want to display the subscribe form on the home page or not.
Post
Next up, customize how you want your posts to look like. There is one main post template with a bento-like designed header to fit into the design of the home page.
Share menu
After the end of the text, there’s an optional share menu displayed. There are 3 options you can choose from and configure where to display it:
- Hidden (hides it everywhere)
- Posts (default, only displays it at the end of posts)
- Posts + pages (displays it at the end of posts and pages)
The readers can share your post on Facebook, Twitter, and LinkedIn. They can also copy the link or open the device-native (for example in iOS) share menu if the browser supports it.
Related posts
Display related posts right after the end of the text. This section displays the next posts with the same tag as the current post.
Post CTA and comments
You can decide whether you’d like to display the subscribe form and if you want to display comments in the comments settings (Settings ➡️ Membership).
Navigation and social media
In Ghost, there are two main navigations - primary and secondary. Both are utilized in this theme.
Primary navigation
The items you add to the primary navigation will show in the top navbar. Provide a label and a link and you’re good to go. On mobile, the navbar turns into a full-screen menu of the same items.
Secondary navigation
In Maple, we used the secondary navigation to allow you to add social media apart from Twitter and Facebook. When you add a social media profile in the secondary navigation, it will automatically show up in the “Bento” hero in its brand color and in the footer.
You do this by adding the social media name in the label, but the name has to be uncapitalized. For example, if you wanted to add your Instagram profile, you would do write “Instagram” for the label and provide a link.
The supported social media platforms are: Behance, Discord, Facebook, Flickr, GitHub, Goodreads, Instagram, LinkedIn, Mastodon, Patreon, PayPal, Pinterest, Product Hunt, Reddit, Snapchat, Soundcloud, Spotify, Strava, Telegram, TikTok, Twitter, Twitch, Unsplash, Vimeo, and YouTube.
The icons are provided by Fontawesome.
Table of contents
You can also add table of contents to any post or page. Simply add the internal #table-of-contents tag to the post or page and you’re good to go.
The table of contents will show up on screens wider than 1300px to the left of the content and will remain there while scrolling.
Custom pages
The two main custom pages are the author and tags page.
Author
This page shows all the posts by the given author. In the hero, you can display the author information: name, bio, website, Twitter and Facebook. Additionally, the hero displays the author image and an optional cover photo as a background. You can configure everything in the author settings in Ghost.
Tags
Similarly to the authors page, the tags page displays posts tagged with a given tag. The hero is designed similarly to the author page. It contains the tag name, description, and an optional cover image. Again, you can configure everything in the individual tags settings (including the color).
Customization
There are 2 ways you can customize this theme.
The first one is by adding code to the code injection section of your Ghost installation. This ensures your changes remain the same even after we update the theme.
The second one is by editing a file called custom.css, which you find in the theme folder and uncommenting line 12 in default.hbs. You will have to include the custom.css file into a new version of the theme.
Updates
We regularly update this theme based on customer feedback and when Ghost release new features. You can provide your feedback on this link as well.
Keep in mind that any customization you do to your theme files will not be updated when we release a new version. You’ll have to do that yourself.
Roadmap
Here are some features we plan to add in the feature. Keep in mind that there's no date for them, but we will almost surely add them.
- Dark mode
- Customizable fonts
- Navbar dropdown option
- Additional styles for featured posts and pages
Hosting
We recommend hosting your website with Ghost. You’ll need at least the Creator plan to host a custom theme like this one.