VuePress profile

VuePress is a VUUe-powered static web site generator. More SEO friendly than our Docsify dynamically generated site.

Using VuePress has the following advantages:

  • Using Markdown to write articles makes it easy for programmers to write and very simple to configure the site.
  • We can use the Vue component in Markdown, which is handy if you are familiar with Vue.
  • Packaging a website generates static HTML for each page pre-rendered, which is good for performance and SEO.

Vdoing theme

When building a website with VuePress, we usually choose a theme. Vuepress-theme-vdoing, a simple and efficient knowledge management & blog theme, is more than enough to build a document website.

Learn how to forget technology? Use Vdoing to build a knowledge base to try! It helps us to better manage knowledge and quickly retrieve lost knowledge.

Using a Vdoing theme has the following advantages:

  • Knowledge management: It is easy to integrate structured or fragmented content, thanks to the ability of this topic to catalog, categorize, tag, and so on.
  • Simple and efficient: Markdown-centric project structure with built-in automation tools to get more done with less configuration.
  • Immersive Reading: A UI designed for reading, with multiple color modes, closed sidebars and navigation, provides an immersive reading experience.

Results demonstrate

Let’s take a look at the finished product effect, there are three different modes to choose from, is it cool enough?

Set up

Building a website through Vdoing is very easy, even if you are not familiar with Vue.

  • First of all, we need to go to the official website of Vdoing to download the project. The download address is github.com/xugaoyi/vue…

  • After downloading, import IDEA. Since it is a Vue project, you need to run the following command to install the dependency and then run it in dev mode.

    The installation

    npm install

    run

    npm run dev

  • After successful operation, just find an article to go into the experience, the interface is quite good, visit the address: http://localhost:8080/

  • It also supports theme switching, such as switching to dark mode.

configuration

Since Vdoing is a complete website by itself, there are many articles and configurations that we don’t need, so we have to replace these articles and customize these configurations.

  • Let’s take a look at my custom home page effect, the theme is still very simple, looks very comfortable;

  • The project files are mostly in the docs directory. Let’s take a look at what these files do.

    Docs │ ├─ vuepress – For storing global configuration, components, static resources, etc. │ │ config.js – entry file │ │ enhanceapp.js – enhancement │ for client application │ ├─config │ ├─ head.js — Add custom HTML module │ │ nav.js — Top navigation bar │ │ plugins ├─ ├─ img — ├─ Styles │ ├ palette. Styl — Theme │ ├─ ├─ < Struct > ├─ @Pages – Generated folder │ Archivespage. md – Categoriespage. md – Categoriespage. md – Tag ├─images – You can store your own pictures ├ ─_posts – a special folder for fragged blog posts that doesn’t automatically generate a directory

  • If we want to automatically generate the article directory according to the directory structure, we need to add the directory and file number, such as the following directory;

  • In this directory structure, the first level directory is called column, the second level directory is column content, each column is independent of each other, the top directory structure will generate the following structure of the sidebar, but also generates the outline bar on the right;

  • If you also want to add a directory page to your column, you can add the 02. Mall tutorial in the 00. Directory page folder.

    ImgUrl: /img/ uI.png Description: Mall learning tutorial, architecture, business, technical points comprehensive analysis. Permalink: / Mall-Learning sidebar: False article: false comment: false editLink: false

  • The next page through the following address can access catalog: http://localhost:8080/mall-learning/

  • Of course, you can also modify the navigation bar to configure nav.js, which will be much easier to access;

    Module. exports = [{text: ‘home ‘, link: ‘/’, items: [{text:’ home ‘, link: ‘/’, items: [{text: ‘home ‘, link: ‘/’, items: [{text:’ home ‘, link: ‘/’, items: [{text: ‘home ‘, link: ‘/’, items: [ ‘/ pages / 72 bed2 /’}, {text: ‘architecture article, link:’/pages/c68875 / ‘}, {text: ‘business article, link:’/pages/c981c1 / ‘}, {text: ‘main technical points article, link:’/pages/fab7d9 / ‘}, {text: ‘deployment article, link:’/pages/db2d1e/’},],}]

  • After the directory is added successfully, the navigation bar displays as follows. Click the navigation bar to jump to the directory.

  • You can also add features to the index.md homepage for quick access. Here we have created three features.

    home: true

    heroImage: /img/web.png

    HeroText: Macrozheng’s Blog Tagline: heroText: Macrozheng’s Blog tagline is a Java backend technology blog.

    # Optional

    • Details: Mall learning tutorial, comprehensive analysis of architecture, business, technical points. link: /mall-learning/ imgUrl: /img/ui.png
    • Details: A set of SpringCloud tutorials covering the use of most of the core components of SpringCloud, including SpringCloud Alibaba and distributed transaction Seata. link: /springcloud-learning/ imgUrl: /img/other.png
    • K8S practical tutorial, designed for the Java direction of the crowd to create! Url: /img/web.png # Optional

  • The home page display effect is as follows;

  • Every time we create a Markdown file for our article, front Matter is automatically generated, such as this format;

    Date: 2021-08-19 16:30:11 Permalink: /pages/ C68875 / Categories:

    • Mall Learning Tutorial
    • Architecture article

    tags:

    • SpringBoot
    • MyBatis

  • Here’s how these attributes work:

  • Title: The title of the article, which defaults to the file name;

  • Date: the date of the article. The default is the creation date of the file.

  • Permalink: file access permalink, you can modify;

  • Categories: Categories of articles, which are automatically generated according to the categories;

  • Tags: article tags, easy to find fragmented articles.

  • If you take a closer look at the list of articles, you can see that some articles will display the summary and some will not. We can control the summary display by using comments.

  • Whether the article list shows the abstract comparison as follows;

  • If you want to change the author information, whether the sidebar folds, social information, copyright information at the bottom of the page, etc., you can modify the theme configuration file themeconfig.js.

    Module. exports = {nav, sidebarDepth: 2, // Sidebar display depth, default 1, Max 2 (display to h3 title) logo: ‘/img/avatar. PNG ‘, // navigation bar logo repo: ‘Macrozheng ‘, // generate Github link searchMaxSuggestions: 10, // search results show the maximum number of lastUpdated: ‘last updated, update / / open time, and configure the prefix text string | Boolean () values for git commits time docsDir:’ docs’, / / edit folder editLinks: False, // Enable editLinkText: ‘edit ‘,

    Sidebar: {mode: ‘structuring, collapsable: false}, / / the sidebar’ structuring | {mode: ‘structuring, collapsable: Boolean} | | custom warm prompt: ‘auto’ page directory data relies on the sidebar of structured data, if you don’t set to ‘structuring, will not be able to use the directory page

    Author: {/ / default information, the author of the article can separate configuration in md file this information String | {name: String, link: String} name: ‘macrozheng’, / / necessary link: ‘github.com/macrozheng’, // Optional}, blogger: {// Blogger information, displayed in the homepage sidebar Avatar: ‘/img/avatar. PNG ‘, name: ‘Macrozheng ‘, slogan: ‘This guy is lazy and doesn’t write anything… ‘,}, social: {// Social icon, displayed in the blogger’s info bar and footer // iconfontCssFile: ‘//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css’, // Optional, ali icon library online CSS file address, for the theme does not have ICONS can be freely added: [{iconClass: ‘icon-github’, title: ‘GitHub’, link: ‘github.com/macrozheng’, }, { iconClass: ‘icon-gitee’, title: ‘Gitee’, link: “Https://gitee.com/macrozheng”}, {iconClass: ‘icon – juejin, title:’ the nuggets’ link: ‘https://juejin.cn/user/958429871749192’}],}, footer: {/ / footer information createYear: 2019, / / blog created copyrightInfo year: ‘marcozheng | MIT License’, / / blog copyright information, support a label}, htmlModules / / insert HTML enthusiast (ads) module}

  • Sometimes we want to add some promotion information at the head and bottom of each article, such as recommending their own public number, you can modify htmlModules.js file pageT and pageB properties;

    module.exports = { pageTshowMode:’article’, pageBshowMode:’article’, pageT:

    , pageB: < h2 id = “public” > < a href = “# # public” class = “header – anchor” > # < / a > public number < / h2 > < p > < img SRC = “http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg” Alt = “public image” style = “cursor: zoom-in;” >

    , }

  • Next thing you know, each post has a header and a header at the bottom, saving you a lot more time than repeating each post!

  • Vdoing added many plugins, some you do not use, you can modify plugins.js to disable, such as baidu statistics plug-in, the second parameter is false;

    Module. exports = [[‘vuepress-plugin-baidu- nav ‘, // disable {hm: ‘XXX ‘,},]

  • Vdoing color theme The default code block theme is also a color theme, which can be changed to a darker theme by modifying the palette. Styl file.

    –codeBg: # f6F6F6 –codeColor: #525252 #252526 –codeColor: #fff codeThemeDark()

  • Our numbered columns in the docs level will generate a directory by default. If we have fragmented articles that don’t want to generate a structured directory, we can put them in the _posts directory.

  • The Linux command does not generate a structured directory, just a directory using the secondary headings in the article.

The deployment of

VuePress is also very simple to generate a web site, packaged with a single command and placed in an HTML directory in Nginx.

  • The NPM run build command on the command line can package the project into a static file with the output file directory docs/.vuepress/dist;

  • Next, copy all files in the dist directory to the HTML directory of Nginx to complete the deployment. After deployment, the following content is displayed.

conclusion

Using VuePress+Vdoing to build a document website is not only cool and powerful! Compared to Docsify’s dynamically generated documents, VuePress generates static pages with better performance and is more SEO friendly. If you only want to build simple single-project documents, Docsify will probably do. VuePress is recommended if you want to build multi-project documentation or blog sites.

Source: mp.weixin.qq.com/s/zFUCBYCiT…

Author: Dream de starry sky