VuePress

Simply put, VuePress is a VUUe-powered static website generator. VuePress is simple and easy to use, but also has enough customization capabilities, especially for front-end developers familiar with Vue. The biggest advantage VuePress has over the well-known blog generator Hexo is the flexibility that Vue brings.

At the time of VuePress 0.x, VuePress was only a good tool for generating documents, with fixed themes and not powerful enough features. Then, with the introduction of themes and plug-ins, VuePress 1.x really evolved into a weapon. Themes and plug-ins can be customized, published, and used, and the powerful Vue framework makes theme and plug-in development much easier.

This article will talk about blog theme customization based on VuePress 1.x. Let’s take a look at the renderings

This project is based on github.com/bencodezen/… Retrofit.

VuePress preset knowledge

Only a few important points are mentioned here. As for the use and configuration of VuePress, students need to know about it by themselves. The official website portal 👉 guide

Front Master

Similar to Hexo, VuePress uses Front Matter to identify Markdown text information. VuePress supports front Matter in YAML, JSON, or TOML formats.

---
title: Blogging Like a Hacker
lang: en-US
---
Copy the code

Between these three dotted lines, you can set predefined variables and create your own custom variables. You can then use $frontMatter to access these variables in the rest of the page, as well as in all custom components, theme components.

Use components in Markdown

All *. Vue files in.vuepress/ Components are automatically registered as global asynchronous components, which can be used directly in Markdown files.

. └ ─. Vuepress └ ─ components ├ ─ demo - 1. Vue ├ ─ OtherComponent. Vue └ ─ Foo └ ─ Bar. The vueCopy the code
<demo-1/>
<OtherComponent/>
<Foo-Bar/>
Copy the code

Theme development

Developing a VuePress theme is easy, just create a.vuepress/theme directory and create a layout. vue file. Then we can customize our theme just like developing a Vue application.

.├ ─ 088Copy the code

Layout. Vue file can be seen as the entrance of vUE project, we need to complete the page Layout in Layout. Vue file, introduce other components, implement JS logic and so on. VuePress will inject the metadata of the website into all components, such as the config of the website, front matter information of the current page, etc., which can be used directly in the components.

Get Markdown content

VuePress implements a content delivery API for Markdown. With this feature, you can split your document into multiple pieces that can be combined flexibly in layout components.

In simple terms, VuePress populates the Markdown Content where the
component is.

The page layout

Once we know this, we can proceed to simple theme development. For the simplest theme, all you need is a
component

<template>
  <div class="theme-container">
    <Content/>
  </div>
</template>
Copy the code

Further, by default, all Markdown files use the same layout component, which can be specified in front Matter

---
layout: AnotherLayout
---
Copy the code

In front Matter, we can specify the type of Markdown file to use to determine which layout (component) to use.

<Blog v-else-if="$page.frontmatter.blog"/>

<Page v-else>
</Page>
Copy the code

For example, here we use the Blog component layout for all Markdown files that have the blog attribute.

Developing blog themes

At this point, we can develop our VuePress blog. First we need a list page to display our article, and second we need an article page to display the content of the article.

First we can get all the Markdown pages through $site.pages, of course not all the pages are blog posts, so we can do a filter after we get the data. We can develop a simple Vue component to filter and display the list of articles, and use this component in the SRC/readme.md file

---
home: true
---
<BlogPostList :list="$site.pages" />
Copy the code

By default, VuePress renders the contents of the SRC/readme. md file as the front page of the website, so we can display the list of articles as the front page.

As for the blog page, it is simpler to add an attribute to all blog Markdown files that determines the layout to use.

conclusion

So far, we have briefly covered some key points for customizing your blog with VuePress, so you can explore further and develop your own website or blog.

The appendix

Project address: GitHub