Vuepress Theme Material Free

This is a theme for blogs building with Vuepress. The design is inspired in Material Design Lite. In oficial site there are many templates as example and I chose this template for building this theme.

Real Case / Demo

I built this theme for use in my personal blog: https://sharklabs.com.br/

But you can use, change or distribute (license MIT).

Features

• Layout building with CSS Grid Layout and Flexbox
• Navbar for desktop and mobile devices
• Custom text in the footer
• Social icons (twitter, linkedin, github)
• Tag names with spaces and special characters
• Default language: English
• Optional language: Portuguese
• You can translate this theme for your language using themeConfig.
• Sidebar with favorite articles
• Schema.org: TechArticle

Install

npm install vuepress-theme-material-free --save

Configuration

This is an example of config.js with all options available:

// .vuepress/config.js
module.exports = {
  title: 'My Blog',
  theme: 'vuepress-theme-material-free',
  themeConfig: {
    logo: '/assets/img/my-logo.png',
    authors: {
      'Gabriel Willemann': {
        image: '/assets/img/gabrielwillemann.jpeg',
        jobTitle: 'Software Full Stack Developer',
      },
    },
    nav: [
      { label: 'About the author', path: '/about', icon: 'person' },
      { label: 'Tags', path: '/tag', icon: 'category' },
    ],
    footer: {
      text: 'Text in footer',
    },
    social: {
      twitter: 'https://twitter.com/gabrielwilleman',
      linkedin: 'https://www.linkedin.com/in/gabrielwillemann',
      github: 'https://github.com/gabrielwillemann/',
    },
    tags: {
      'vuejs': 'Vue.js',
      'ruby-on-rails': 'Ruby on Rails',
      'nodejs': 'Node.js',
    },
    locales: {
      default: 'en', // or 'pt-BR'
    },
    configPluginBlog: {
      // ...
    },
  },
};

In nav section, the icons will show in Mobile Menu. Click here to see all icons available for this option.

In tags you can write a special name for your tags, but it's optional.

Configurate vuepress-plugin-blog

This theme have vuepress-plugin-blog as a dependence and default configuration is:

{
  directories: [
    {
      id: 'post',
      dirname: '_posts',
      path: '/',
      layout: 'Index',
      itemLayout: 'Post',
      itemPermalink: '/:slug',
    },
  ],
  frontmatters: [
    {
      id: 'tag',
      keys: ['tags'],
      path: '/tag/',
      layout: 'Tags',
      scopeLayout: 'Tag',
    },
  ],
}

But you can apply custom options in this plugin using configPluginBlog (in themeConfig). For example, if you want to use sitemap:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    configPluginBlog: {
      sitemap: {
        hostname: 'https://myblog.com',
      },
    },
  },
};

Translate the theme

Initially, this theme have translate for English and Portuguese. But you can translate for your language using themeConfig.

For example, if you want to translate for Spanish:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    locales: {
      default: 'es',
      es: {
        breadcrumb: {
          home: 'Página de inicio',
        },
        sideBar: {
          favoritePosts: 'Publicaciones populares',
        },
        social: {
          follow: 'Redes sociales',
        },
        notFound: {
          title: 'Página no encontrada',
          home: 'Ir a casa',
        },
        article: {
          author: 'Autor',
        },
      },
    },
  },
};

Sorry for my spanish, I used the Google Translator :).

Front Matter

Available options:

---
title: 'Title of my post'
date: '2020-04-16'
author: Gabriel Willemann
image: /assets/img/2020-04/image-my-post.jpg
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dolor ex, lacinia sit amet porttitor feugiat, interdum vitae felis. Vestibulum vitae ullamcorper nibh, id gravida dolor.'
tags:
  - vuejs
  - vuepress
favorite: true
---

About the favorite option, there is a Sidebar with favorite/popular articles. If you set this option in front matter the post will show in this area.

Images

About the images of your posts, I recommend that you place in .vuepress/public/assets/img/ directory.

SEO Recomendations

I recommend the following plugins (they are optionals but compatible with this theme):

• @vuepress/plugin-google-analytics
• vuepress-plugin-seo
• vuepress-plugin-canonical

But you can use any others in your .vuepress/config.js.