Theme intro

Original Intention

VuePress extends Markdown syntax to a certain extent, but it still lacks some commonly used functions, such as text alignment, mark, flowchart, formula, presentation, etc. At the same time, some features provided by the default theme are weak or missing, such as picture preview, code block copy, toc, etc. Meanwhile, VuePress default theme is too simple and not powerful enough. vuepress-theme-hope and related plugins were born under this situation.

We not only greatly improve outlook comparing to default theme, but also provide a full range of enhancements for VuePress with theme plugins.

Design Goals

Powerful and independent features

We extract each feature into a plugin, so that users can use them in other themes or customize their behavior standalone.

Minimum Configuration

All features will try to use a default value if possible, so you can use them under zero or minimum configuration.

This helps a lot to reduce your migration or learning costs while directly enjoy their convenience.

Improved Layout

The theme interface has been completely refactored to provide customizable and beautiful layouts.

Tree-shaking

With the help of Vue3's composition API, the theme fully achieve "Tree-shaking" while remaining powerful.

The theme will only run with features you want, without being slowed down by other features or affecting the bundle size.

Why Powerful

Content Richness

The theme provides a lot of extended syntax support for Markdown, allowing you to insert more content in the body.

• We have some built-in enhancement with images.

• If you are a literature lover and want to place some essays, the theme provides Custom Alignment and footnote.

• To store some knowledge notes, the theme provides Custom container, Mark, Task list mindmap and Tex support.

• If you are a programmer and need to show a lot of codes and demos, this theme provides light and dark themes for code blocks, code tabs and the "one-click copy" button. At the same time, we also provide the Code Demo, Playground, Kotlin Playground and Vue Playground functions, which is convenient for you to show your own Vue, React components or other demos and provide playground for visitors.

• If you are providing product documentation and presentation, the theme provides tabs, slide, chart, echarts, flowchart, mermaid diagram and plantuml functions.

• To reorganize your content, the theme provides File Include function.

• To style your content, the theme provides Subscript and Superscript, Attrs setting and Stylize function.

• The theme also provides you a lot of useful components.

In short, anyone can enjoy the convenience of Markdown's enhanced syntax.

UI Improvements

• Darkmode Support

• Icon Support

• Customizing Code Block Theme

• Theme colors: allowing you to switch dynamically during browsing

• More:

  Full Screen Button, Back to top button, Print button, Full A11y support and RTL layout.

Layouts Improvement

• Navbar:

  • Support for icons and path prefix.
  • Improved layout on mobile.

• Sidebar:

  • Support for icons and path prefix.
  • Auto generating sidebars from file structure.

• Brand-new Homepage with features and highlights

• More:

  Adds breadcrumb, toc and footer support.

Page Meta

• Page info including:

  • Author
  • Writing date
  • Word count and estimated reading time
  • Tags and Categories
  • Pageviews

• Contributors and Last update time

• Edit link

New Features

• Picture Preview which supports zooming, dragging, slides browsing, sharing and downloading

• Catalog Page auto-generation

• Search feature

  • Crawler search support with docsearch
  • Powerful client search support with slimsearch.

• Page Encryption feature to limit access.

• Copyright appending while copying, or directly disable page copy and selection

• Search Engine Optimization

  • SEO Enhancement with full support of OGP and JSON-LD protocols

  • Sitemap Generation

  • PWA feature

Blog Support

The theme supports blogging, with article list with sticky support, starred articles, auto excerpt generation, auto summary.

• Support categories and tags, timeline.

• A brand-new blog homepage.

• Provides Comment and PageViews feature to let you communicate with your visitors

• Provides Feed generation, so that others can subscribe your site.

Build-in Plugins🧩

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

• vuepress-plugin-components: Provide some out of box plugins
• vuepress-plugin-md-enhance: Provide more Markdown syntax
• vuepress-plugin-sass-palette: Sass style plugin for all plugins and themes

Tips

Here are some other plugins that are not bundled by the theme, you can enable them according to your own needs.

• vuepress-plugin-lightgallery: Image preview plugin based on lightgallery
• vuepress-plugin-search-pro: Client search plugin