Comment on page
@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".Have a look at this episode of Frontity Talks where we talk about the
mars-theme: 📺 Frontity Talks 2020-04 - mars-theme [27:52].
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 |
There are some actions used along the theme that you may need useful:
It changes the status of
state.theme.isMobileMenuOpen , which lets you open/close the mobile menu.It changes
state.theme.isMobileMenuOpen to false, so it closes the mobile menu.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 modified 2yr ago