Giter VIP home page Giter VIP logo

vuepress-theme-blog-vuetify's Introduction

vuepress-theme-blog-vuetify

πŸ’₯The world's most simple, beautiful and customizable 2 columns VuePress blog theme built with Vuetify.

It has following features.

  • List hot tags automatically
  • List recent posts automatically
  • Scroll-spy TOC
  • SEO ready (perfect <title> and <meta> tags)
  • Mobile friendly
  • Customizable styles using scss (not stylus)
  • Ability of inserting your own content into the layout of the theme

Live demo

πŸ‘‰ https://vuepress-theme-blog-vuetify.ttskch.com/

Installation

$ yarn add --dev vuepress-theme-blog-vuetify

# or
$ npm install -D vuepress-theme-blog-vuetify

Usage

// .vuepress/config.js
module.exports = {
  theme: 'blog-vuetify',
  themeConfig: {
    // ...
  }
}

Configurations

You can see the valid options and default values here πŸ‘

Customizing styles

You can customize styles flexibly by overwrite scss variables.

In order to overwrite them, you have to just place .vuepress/styles/variables.scss which re-defines some variables like this πŸ‘

Inserting your own content into the layout of the theme

You can insert your own content like as following.

1. Create Vue component

For example, create .vuepress/components/AfterPage.vue like following.

<template>
  <div id="after-page">
    <p>Some content for after page content of each page</p>
  </div>
</template>

2. Create enhanceApp.js and register your component to Vue app

import AfterPage from './components/AfterPage'

// @see https://vuepress.vuejs.org/theme/writing-a-theme.html#app-level-enhancements
export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData // site metadata
}) => {
  Vue.component('MyAfterPage', AfterPage)
}

3. Notify the name of your component to the theme

themeConfig: {
  components: {
    afterPage: 'MyAfterPage'
  }
}

That's it πŸ˜ƒ

Default (empty) components for valid hook points are them.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.