Vuepress Themes & Templates Logo Vuepress Themes & Templates
Vuepress Theme Libra screenshot

Vuepress Theme Libra

Author Avatar Theme by Libra11 zz
Updated: 7 Jan 2021
31 Stars

Github

Categories

Vue Less

Overview:

This article discusses the use of Vuepress to build a theme. It includes information about updates, such as changes to the comment style and default language, the addition of a back-to-top feature, modifications to the article directory logic and style, changes to the article title display style, and the addition of a rotating avatar and GitHub comment functionality. It also mentions bug fixes and the official release of version 1.0.0 on npm. The article provides a guide on how to install the theme and write blog articles using Vuepress. It concludes with instructions on how to deploy the theme.

Features:

  • Comment Style and Default Language: The theme has a modified comment style and supports multiple languages.
  • Back-to-Top Functionality: The theme includes a feature that allows users to quickly navigate back to the top of the page.
  • Article Directory: The theme implements logic and style changes to the article directory, making it easier to navigate.
  • Modified Article Title Display: The theme has a new style for displaying article titles.
  • Rotating Avatar: The theme includes a small animation of a rotating avatar.
  • GitHub Comment Functionality: Users can leave comments using GitHub.
  • Bug Fixes: The theme addresses issues such as incomplete title displays for long article directories and a bug related to excessive categorization.
  • Customizable Personal Information: The theme allows customization of personal information, including the option to display a QR code for WeChat.

Installation:

To get started, make sure you have Vuepress installed globally. Then, follow these steps:

  1. Create a folder named “my-blog” anywhere on your computer.
  2. Navigate to that folder in the command line.
  3. Install Vuepress by running the following command:
npm install -g vuepress
  1. Create the basic directory structure for your project.
  2. Add the following code snippet to your project’s package.json file:
"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs"
}
  1. Copy the configuration file (config.js) provided in the article and paste it into your project’s docs/.vuepress/ directory.
  2. Customize the configuration file according to your needs.
  3. Start writing your blog posts in the docs/blogs directory. Each post should be written in Markdown format and include the following information at the beginning:
title: [Article Title]
category: [Article Category]
desc: [Article Description]
tag: [Article Tags]
picture: [Article Thumbnail]
thumbnaildate: [Publication Date]
Update: [Update Date]
  1. After adding your articles, run the command yarn dev or npm run dev in the command line to start the preview.
  2. To deploy your theme, run vuepress build docs in the command line. This will generate a “dist” folder in the .vuepress directory, containing all HTML, CSS, JS, and static files. You can then deploy this folder.

Summary:

This article provides details on how to build a theme using Vuepress. It covers various features and updates implemented in the theme, such as modified comment styles, back-to-top functionality, changes to the article directory logic and display, and the addition of a rotating avatar and GitHub comment functionality. The article also includes a guide on how to install the theme, configure it, and write blog articles using Markdown. It concludes with instructions on deploying the theme.