Guide

Tips

If you met a bug while using, you can open an issue here (opens new window)

✨Theme Features

The theme maintains the style of the @vuepress/theme-default, and adds a lot of features and optimizations:

Markdown Enhance

Added more syntax to Markdown, enriching documentation and blog writing

• Badge <Badge />: Added color support
• CodeGroup <CodeGroup />
• Tex Support
• Custom alignment
• FlowChart
• Mermaid Diagram
• Mark
• Task list
• Subscript and Supercript
• Code demo
• Presentation

Layout

• Optimization of other built-in components:

  • Add prefix and icon for Navbar Sidebar

• Added:

  • Path navigation

  • Custom footer

  • Default homepage optimization:

    • Features have new animations and support jump
    • Multiple action buttons
    • Widescreen layout optimization

Interface

• Theme colors: allowing you to switch dynamically during browsing

• Dark mode: allowing you to switch manually or apply automatically according to device settings

• Icon support

• Full Screen Button

• Back to top button

Page Enhance

• One-click copy code

• Picture preview feature: supports zooming, dragging, sliding browsing, sharing and downloading

• Copyright info

• Comment System

• Article info

  • Reading Counts
  • Author and writing date
  • Automatically generated word count and estimated reading time
  • Tags and Categorys

• Encryption of specific articles and paths

Features

• PWA support

• Feed generation

• SEO enhancement

• Sitemap generation

• Information from Git

• TypeScript support

Blog

• Social follow button and page social sharing (opens new window)

• Article list with sticky support, and summary autogeneration

• Cateory and tag list

• Timeline

• Star article

• New blog homepage layout

🧩Build-in Plugins

The theme also includes the following plugins, you can use them in other themes or directly.

• vuepress-plugin-comment1 (opens new window): Comment and page info feature

• @mr-hope/vuepress-plugin-components (opens new window): Provide some out of box plugins

• vuepress-plugin-copy-code1 (opens new window): Provide copy button for code blocks

• vuepress-plugin-feed1 (opens new window): Feed support

• @mr-hope/vuepress-plugin-git (opens new window): Info plugin based on git

• vuepress-plugin-pwa1 (opens new window): PWA support

• vuepress-plugin-reading-time1 (opens new window): Expect reading time and words count

• vuepress-plugin-seo1 (opens new window): SEO Enhancement Plugin

• vuepress-plugin-sitemap1 (opens new window): Sitemap Generator for your site

• @mr-hope/vuepress-plugin-smooth-scroll: Smooth scrolling (Remove old browers polyfill)

• vuepress-plugin-active-hash (opens new window): update active hash in links automatically

• vuepress-plugin-add-this (opens new window): Provide sociel share and follow function

• vuepress-plugin-md-enhance (opens new window): Provide more Markdown syntax

• vuepress-plugin-photo-swipe (opens new window): Make the site’s picture support click zoom