API Reference
  • Introduction
  • 💻CLI Commands
    • Create commands
      • create
      • create-package
    • Run commands
      • dev
      • serve
    • Build commands
      • build
    • Extra commands
  • 🍱Packages
    • 💙Core package
      • frontity
    • ⚡Features packages
      • @frontity/wp-source
      • @frontity/tiny-router
      • @frontity/html2react
      • @frontity/head-tags
      • @frontity/yoast
      • @frontity/google-ad-manager
      • @frontity/smart-adserver
      • analytics packages
        • @frontity/google-analytics
        • @frontity/google-tag-manager-analytics
        • @frontity/comscore-analytics
      • @frontity/wp-comments
    • 📚Collections packages
      • @frontity/components
      • @frontity/hooks
        • Infinite Scroll Hooks
        • Intersection Observer Hooks
    • 🎨Themes Packages
      • @frontity/twentytwenty-theme
      • @frontity/mars-theme
  • 🔌WordPress Plugins
    • REST API - Head Tags
    • Frontity Embedded Mode
Powered by GitBook
On this page
  • Demo
  • Settings
  • API Reference
  • Actions
  • Libraries

Was this helpful?

  1. Packages
  2. Themes Packages

@frontity/mars-theme

Previous@frontity/twentytwenty-themeNextWordPress Plugins

Last updated 3 years ago

Was this helpful?

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 and find it on .

You can also find a detailed guide to learn how both Frontity and mars-theme work on "".

Have a look at this episode of Frontity Talks where we talk about the mars-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

You can check out all the features in this .

This theme doesn't have its own libraries, but it includes the image and iframe processor of , so all the <img> tags are converted into the and the <iframe> tags into the .

🍱
🎨
theme demo
GitHub repository
npm
Understanding Mars Theme
Frontity Talks 2020-04 - mars-theme [27:52]
@frontity/html2react
<Image /> component
<Iframe /> component