Use vuepress to quickly build a personal blog

Theory

• What is vuepress? Static web page generator
• Why choose vuepress to compare with other blog frameworks? Blog-like framework
• Learn the topic of the vuepress blog project: video + official website

Operation

Quickly build an initial blog project

• Use blog theme: vuepress-theme-reco
  video tutorial

Create foldervuepress_blog

Quickly build an initial blog project	Use vuepress blog scaffolding tool
Install vuepress blog scaffolding tool	npm install @vuepress-reco/theme-cli -g
Create your own blog project, #my-blog-project name	theme-cli init my-blog
Enter the project directory	cd my-blog
Install npm	npm install
Run the project	npm run devorvuepress dev
Packaged project	npm run buildorvuepress build

Initial project effect: project template

1. Project basic configuration

• Navigation Bar

.vuepress->config.jsSet in the project file

"nav": [{
    
    
              "text": "主页",
              "link": "/",
              "icon": "reco-home"
          },
          {
    
    
              "text": "时间轴",
              "link": "/timeline/",
              "icon": "reco-date"
          },
          {
    
    
              "text": "笔记",
              "icon": "reco-message",
              "items": [{
    
    
                  "text": "文档1",
                  "link": "/docs/document/"
              }, {
    
    
                  "text": "文档2",
                  "link": "/docs/document2/"
              }]
          },
          {
    
    
              "text": "友链",
              "icon": "reco-message",
              "items": [{
    
    
                  "text": "GitHub",
                  "link": "https://github.com/recoluan",
                  "icon": "reco-github"
              }]
          }
      ],

• Home page

• Sidebar

.vuepress->config.jsSet in the project file

"sidebar": {
    
    
    '/docs/': [
        // '',
        {
    
    
            title: 'vue教程',
            collapsable: true, // 可折叠
            children: ['document/api', 'document/b']
        },
        {
    
    
            title: 'vue教程2',
            collapsable: true, // 可折叠
            children: ['document2/api', 'document2/b']
        }
    ]
},

Two, plug-in articles

1. Install related plug-ins

Introduction and use of plug-ins

Function plug-in	Install command
Background music	npm install @vuepress-reco/vuepress-plugin-bgm-player -D
Signboard girl	npm install @vuepress-reco/vuepress-plugin-kan-ban-niang -D
Screen cherry blossom effect	npm install vuepress-plugin-sakura -D
Message board comments	npm install@vuepress-reco/vuepress-plugin-comments -D
List pagination	npm install @vuepress-reco/vuepress-plugin-pagation -D
Automatic sidebar	npm i vuepress-plugin-auto-sidebar -D

2. Plug-in use

In the project file .vuepress->config.jsin the pluginsset

1. Music plugin

["@vuepress-reco/vuepress-plugin-bgm-player", {
    
    
    audios: [
        // 网络文件示例
        {
    
    
            name: '강남역 4번 출구',
            artist: 'Plastic / Fallin` Dild',
            url: 'https://assets.smallsunnyfox.com/music/2.mp3',
            cover: 'https://assets.smallsunnyfox.com/music/2.jpg'
        },
        {
    
    
            name: '用胳膊当枕头',
            artist: '최낙타',
            url: 'https://assets.smallsunnyfox.com/music/3.mp3',
            cover: 'https://assets.smallsunnyfox.com/music/3.jpg'
        }
    ]
}],

2. Signboard girl

"plugins": [
  [
    "@vuepress-reco/vuepress-plugin-kan-ban-niang",
    {
    
    
      theme: ["blackCat"],
      clean: false,
      messages: {
    
    
        welcome: '我是lookroot欢迎你的关注 ',
        home: '心里的花，我想要带你回家。',
        theme: '好吧，希望你能喜欢我的其他小伙伴。',
        close: '再见哦'
      }
    }
  ],
]

3. Sakura plugin

// 只要把这个放进 config的plugins中就可以了 有木有很简单
["sakura", {
    
    
    num: 20,  // 默认数量
    show: true, //  是否显示
    zIndex: -1,   // 层级
    img: {
    
    
      replace: false,  // false 默认图 true 换图 需要填写httpUrl地址
      httpUrl: '...'     // 绝对路径
    }     
}]

3. The overall effect plug-in

After installing the relevant function plug-in, you can directly copy

"plugins": [
    ["vuepress-plugin-auto-sidebar", {
    
     collapsable: true }],//自动侧边栏
    ["@vuepress-reco/vuepress-plugin-pagation", {
    
    }],//分页插件
    ["@vuepress-reco/vuepress-plugin-bgm-player", {
    
    //背景音乐插件
        audios: [
            // 网络文件示例
            {
    
    
                name: '강남역 4번 출구',
                artist: 'Plastic / Fallin` Dild',
                url: 'https://assets.smallsunnyfox.com/music/2.mp3',
                cover: 'https://assets.smallsunnyfox.com/music/2.jpg'
            },
            {
    
    
                name: '用胳膊当枕头',
                artist: '최낙타',
                url: 'https://assets.smallsunnyfox.com/music/3.mp3',
                cover: 'https://assets.smallsunnyfox.com/music/3.jpg'
            }
        ]
    }],
    [//看板娘插件
        "@vuepress-reco/vuepress-plugin-kan-ban-niang",
        {
    
    
            theme: ["whiteCat"],
            clean: true,
        }
    ],
    ["sakura", {
    
    //页面樱花插件
        num: 30, // 默认数量
        show: true,
        zIndex: 2,
        img: {
    
    
            replace: false, // false 默认图 true 换图 需要填写httpUrl地址
            httpUrl: 'http://www.zpzpup.com/assets/image/sakura.png' // 绝对路径
        }
    }],
]