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):

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

npm