A theme developed based on the vuepress default theme- vuepress-theme-reform

introduce

Project address: vuepress-theme-reform

Effect show: my blog

This theme inherits the default theme of Vuepress, adding features such as TAB page transformation, home page transformation, blog classification and display, GitalK integration and gitalK automation configuration, the latest Google Analytics integration and so on.

use

npm install vuepress-theme-reform -D # or yarn add vuepress-theme-reform
Copy the code

Then add it in the docs/.vuepress/config.js file

{... theme:'reform'. }Copy the code

You can use this topic

Function is introduced

Home page display

To modify defaultHome:true, run the readme. md command under docs on the home page

---
defaultHome: true
___
Copy the code

Catalogue classification and display

In config.js

. nav: [ ... { text:"Blog",
        icon: 'zhi',
        items: [
          { text: "Front end", link: "/blog/frontend/"}}]... ]Copy the code

Create a new readme. md under docs/blog/frontend and write it in the header

---
type: 'classify'
---
Copy the code

All other files in this folder will be compiled to display the blog, which is defined by /blog/frontend

Tag clustering into

Create a new tag under docs and create an empty readme.md under tags

Config.js under themeConfig

. themeConfig:{ ... tags:"tags". nav:[ ... { text:"Tag Cloud",
        link: '/tags/',
        tags: true},... ] }...Copy the code

Tags indicate the folder name of your tag cloud

In the article we write

---
tags:
  - vuepress
---
Copy the code

You can see it on the page

gitalk

In config.js

{
  themConfig:{
    ...
    gitalk: {
      // The main parameters of gitalk
      clientID: `your clientID`.clientSecret: `your clientSecret`.repo: `your repo`.owner: "yourname".admin: ["yourname"].accessToken: 'your accessToken '.labelRule: `(title,path)=> { let paths=path.split('/') if(paths.length>0){ let res = paths.pop() if(res===''){ res=paths.pop() } res = res.slice(-50) return res }else{ return title } }`},... }}Copy the code

ClientID: Your clientID, created on Github under Settings/Developer Settings/ OAuth Apps
ClientSecret: Your clientSecret, created under Github Settings/Developer Settings/ OAuth Apps
Repo: The name of the repository where your comments are stored, such as mine for Xuzhongpeng.github. IO
Owner: Your Github account name
Admin: The name displayed in the comments
AccessToken: Optional, taken to automatically send the request when creating GitalK, created under Github Settings/Developer Settings/ Personal Access Tokens
LabelRule: callback function for comment requests and automatic comment creation. The reason for the callback function is that the gitalk tag is limited to 50 characters. The first parameter of the callback function is the title of the current page, and the second parameter is the path of the current page, returning the name of the created tag

Gitalk is automatically created

Download and install plug-ins

yarn add vuepress-plugin-gitalk # npm i vuepress-plugin-gitalk -D
Copy the code

Add it to scripts in package.json

{
  "scripts":{
    ...
    "gitalk": "vuepress gitalk ./docs". }}Copy the code

perform

npm run gitalk
Copy the code

The results of the automated initialization comment can be output

The latest Google Analytics plugin integration

Vuepress provides @vuepress/plugin-google-analytics, but it has no effect after I use it. When I go to the Website of Google-analytics, I find that the current insert code has changed, so I have built-in plug-in, and I just need to configure it in config.js.

{
  ga:'XXXX'
}
Copy the code

Error handling

If you automatically create comments when output

The interface returns data {"message":"Bad credentials"."documentation_url":"https://developer.github.com/v3"} XXX failed to be createdCopy the code

If the accessToken is invalid, you need to create and replace it under Github Settings/Developer Settings/ Personal Access Tokens