使用vuepress快速搭建个人博客

理论篇

• vuepress是啥？静态网页生成器
• 为啥选用vuepress,和其他博客框架对比？类似博客框架
• 学习vuepress博客项目主题：视频+官网

操作篇

快速搭建一个初始化博客项目

• 采用博客主题： vuepress-theme-reco
  视频教程

创建文件夹vuepress_blog

快速搭建一个初始化博客项目	使用vuepress博客脚手架工具
安装vuepress博客脚手架工具	npm install @vuepress-reco/theme-cli -g
创建自己的博客项目，#my-blog-项目名称	theme-cli init my-blog
进入项目目录	cd my-blog
安装npm	npm install
运行项目	npm run devorvuepress dev
打包项目	npm run buildorvuepress build

初始项目效果:项目模板

一、项目基础配置

• 导航栏

在项目文件.vuepress->config.js中设置

"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"
              }]
          }
      ],

• 首页

• 侧边栏

在项目文件.vuepress->config.js中设置

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

二、插件篇

1、安装相关插件

插件简介及使用

功能插件	安装命令
背景音乐	npm install @vuepress-reco/vuepress-plugin-bgm-player -D
看板娘	npm install @vuepress-reco/vuepress-plugin-kan-ban-niang -D
屏幕樱花效果	npm install vuepress-plugin-sakura -D
留言板评论	npm install@vuepress-reco/vuepress-plugin-comments -D
列表分页	npm install @vuepress-reco/vuepress-plugin-pagation -D
自动侧边栏	npm i vuepress-plugin-auto-sidebar -D

2、插件使用

在项目文件.vuepress->config.js中plugins设置

1.音乐插件

["@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.看板娘

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

3.樱花插件

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

3、总体效果插件

安装相关功能插件后，可直接复制

"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' // 绝对路径
        }
    }],
]