VuePress profile

VuePress is a markdown-centric static web site generator. You can use Markdown to write content (documents, blogs, etc.) and VuePress will help you generate a static website to display them.

VuePress was originally created to support the documentation needs of vuue.js and its subprojects, but it is already helping a large number of users build their documents, blogs, and other static websites.

start

The official website of VuePress is well written, just follow the steps provided by the official. Here I add some problems that I have not made the effect according to the document.

For detailed project initialization, please refer to VuePress

My website theme is vuepress-theme-vdoing

Step one: Use Vuepress to build a blog

Refer to the above three websites can build a basic website prototype

Here’s where I got into trouble while building

Navigation directory

First, build a prototype (normal file structure) based on the above two websites. The main thing related to our website construction is the Docs folder. My directory structure is

├─ docs │ ├─ ├.vuepress(required) │ ├─ @pages (Optional, auto-generated folder for class, tabs, archives).... ├─ ├─ garbage, ├─ garbage, ├─ garbage, ├─ garbage, download.txtCopy the code

The configuration of the directory structure in.vuepress /config.js is as follows

Module. Exports = {themeConfig:{nav: [{text:" home ",link:"/"}, {text: "Java related items: [{the text:" virtual machine ", the link: "/ JVM/head/"}, {the text:" essays ", the link: "/ essay/XOR/"},]}, {the text:" MySQL related, "the link: "/ MySQL/"}, {the text:" problems and design series, "link:"/design/pt - change/"}, {the text: "web site building," link: "/ website/"}, {the text:" take a break ", the link: "/games/"}, ], } }Copy the code

The actual effect is as follows

Theme Settings

Vuepress-theme-vdoing official document

The installation

yarn add -D vuepress-theme-vdoing

configuration

The topic configuration in.vuepress /config.js is as follows

module.exports = {
 theme: 'vdoing',
}
Copy the code

The.vuepress /config.js sidebar is configured as follows (using the default structuring)

A structured sidebar is automatically generated. A maximum of four levels of directories are supported. You need to specify the serial number before cutting the file name

Module. Exports = {/ / 'structuring | {mode:' structuring, collapsable: Boolean} | | custom sidebar: 'auto' 'structuring', }Copy the code

Matters needing attention

  • The md file or directory starts with “number.” “, such as “00. Java foundation”, “10.MySQL master-slave replication. Md”, etc., the order of the article is to rely on the number of sorting (numbers as far as possible not consecutive, convenient subsequent increase).
  • The images in this article cannot be named in Chinese, otherwise the compilation will fail.
  • Folders or files that do not start with a number will not be displayed.

Set up the article

You can set the author of the article, the time, etc

When the run starts, it automatically adds the content of the article to the first line of the MD. The default is as follows

Title: date: permalink: address of the article (randomly generated, suggested change to fixed) tags

Date: 2022-02-11 14:59:23 Permalink: /website/ VuePress/Categories: - Website building Tags: - Website buildingCopy the code

You can also manually add (titleTag: type of article, author: author,)

Author: Name: Mr. Ji Link: https://xxx.comCopy the code

Where author can also pass global configuration (md configuration overrides global configuration)

Module. exports = {themeConfig:{author: 'j ',}}Copy the code

Results the following

The head configuration of the site

Set the icon of the website, which is the picture displayed on the left side of the browser address bar, and add some scripts to the website (I added here is the script monitored by Umami).

The head configuration in.vuepress /config.js is as follows

VuePress /public/ is the directory where the ICONS should be stored

Module. exports = {head: ['link', {rel: 'icon', href: 'ajisun-logo-circular. PNG '}], // Add automatic push code ['script', {SRC: '/assets/js/autopush-baidu.js' } ], // third party script js(normal script configuration is <script async defer data-site-id =" XXXXX ") src="https://www.ajisun.fun/umami.js"></script>) ['script', { 'data-website-id': 'xxxxx', async: 'async', defer: 'defer', src: 'https://www.ajisun.fun/umami.js', }, ], ], }Copy the code

Configure footers and social information

The social and footer configurations in.vuepress /config.js are as follows

Module. exports = {themeConfig:{social: {ICONS: [{iconClass: 'icon-youjian', title: 'email ', link: 'mailto:[email protected]',}, {iconClass: 'icon-zhihu', title: 'Zhihu ', link: "Https://www.zhihu.com/people/ajisun"}, {iconClass: 'icon - juejin, title:' the nuggets' link: "Https://juejin.cn/user/123624772082791"}, {iconClass: 'icon - bokeyuan, title:' blog garden, link: 'https://www.cnblogs.com/sunjiguang',},],}, / / footer information footer: {createYear: 2022, / / blog created copyrightInfo year: 'Mr Ji advanced guide | < a href = "https://beian.miit.gov.cn" target = "_blank" > 2022001441 anhui ICP for < / a >',,}}},Copy the code

The effect is as follows:

Tripartite plug-in

Can refer to website whole station through train

including

  • Several styles of full-text search
  • Set baidu alliance advertising
  • Set up Google Affiliate ads
  • Configuring Baidu Statistics
  • Configuring Google Statistics
  • Baidu /360/ Google seo optimization

Full-text search

The default topic already has a search function, but the search scope is small, only the page title, H2, H3 and tags search, not the full text search, the effect is as follows

Specific effect reference: Mr. Ji’s guide to progress

I am Mr. Ji, with output force input and continue to learn, continue to share technology series articles, as well as the whole network worth collecting good articles, welcome to pay attention to or pay attention to the public number, to be a continuous growth of technical people.