@frontity/mars-theme
Mars theme is meant to be considered a starter theme or a theme to show people how to use some of Frontity functionalities. You can check out its code and structure on this GitHub repository and find it on npm.
You can also find a detailed guide to learn how both Frontity and mars-theme
work on "Understanding Mars Theme".
Demo

You can check out all the features in this theme demo.
Settings
You can configured it via the frontity.settings.js
file. The theme options can be specified in the state.theme
property.
Here you have an example of a possible configuration (each setting is explained later in detail):
{
name: "@frontity/mars-theme",
state: {
theme: {
menu: [
["Home", "/"],
["Nature", "/category/nature/"],
["Travel", "/category/travel/"],
["Japan", "/tag/japan/"],
["About Us", "/about-us/"]
],
featured: {
showOnList: true,
showOnPost: true
}
}
}
},
All the settings that can be set under state.theme
and their description:
Key
Description
Default value
menu
Menu links to display in the header
[]
featuredMedia.showOnList
Whether to show featured image on list view
true
featuredMedia.showOnPost
Whether to show featured media on post view
true
API Reference
Actions
There are some actions used along the theme that you may need useful:
actions.theme.toggleMobileMenu
It changes the status of state.theme.isMobileMenuOpen
, which lets you open/close the mobile menu.
actions.theme.closeMobileMenu
It changes state.theme.isMobileMenuOpen
to false
, so it closes the mobile menu.
Libraries
This theme doesn't have its own libraries, but it includes the image and iframe processor of @frontity/html2react, so all the <img>
tags are converted into the <Image />
component and the <iframe> tags into the <Iframe />
component.
Last updated
Was this helpful?