Theme intro

Mr.Hope ... 2021-2-25 Get Started
  • Intro
About 2 min

# 🎈 The original intention and design goals of this theme

# Original intention

The original intention of making this theme was to find that VuePress is just a pure static document generator. For example, it will not inject meta tags for SEO optimization, nor will it generate a Sitemap to help search engines index the content of the document.

At the same time, as Evan You switched to VitePress driven by Vite, the community ecosystem of VuePress was getting worse and worse. Some developers took up the most intuitive plugin names, such as copy-code feed seo sitemap, etc, while provides weak functions and no longer provides any updates.

At the same time, though VuePress has extended Markdown syntax to a certain extent, 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, dark mode, etc.

In this case, the design of vuepress-theme-hope was born. Since the developer, Mr. Hope, majors in physics while not good at design, this theme maintains the simple style of the default theme with little changes, while dedicates to provide a full range of enhancements for VuePress.

# Design goals

  • Direction: All the functions of the theme are to enhance the document content richness and shareable.

  • Powerful and independent functions: The theme provides comprehensive details on functions and decompose them into independent plugins so users can use them in other themes.

  • Zero or simple configuration: All functions of this theme are designed to work under zero or simple configuration to reduce your migration or learning costs while directly enjoy their convenience.

# ✨ Why is it powerful

# Markdown

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

  • 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 Mark, Task list 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 group component <CodeGroup /> and the "one-click copy" button. At the same time, we also provide the Code Demo function, which is convenient for you to show your own Vue, React components or other demos.

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

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

# Search engine enhancement

The theme provides SEO Enhance, which automatically injects meta tags into web pages to enhance search engine indexing.

The theme also provides Sitemap Generation to generate Sitemap automatically.

# Page UI

  • Homepage: Support for multiple action buttons, and the UI has been optimized.

  • Page: page icon, article information, Title list, picture preview function.

  • Site structure: simplifie the configuration of Navigation Bar and Sidebar, add support for icons and path prefixes. At the same time, the theme added breadcrumb and footer support.

# Blog

The theme provides categories, tags, timeline, star articles and other functions. Also, the theme gives you a brand new blog homepage, and also .

At the same time, the theme also provides common blog feature such as Comment and Feed.