使用vuepress-theme-reco搭建自己的博客

使用vuepress-theme-reco搭建自己的博客

vuepress-theme-reco是VuePress的一个主题,大家可以参考VuePress和其他主题,搭建你自己风格的主题,这篇主要讲解vuepress-theme-reco主题的博客。

VuePress是静态网页生成器,通过它,可以迅速的将我们的Markdown笔记变成网页,方便我们翻阅,查找。

一、初始化项目

1、引入vuepress-theme-reco主题

npm install vuepress-theme-reco --save-dev

2、使用官方的模板初始化项目

theme-cli init blogs

按要求输入内容

使用vuepress-theme-reco搭建自己的博客

将在你的文件夹下生成你项目名的文件夹,我这里是blog.

3、运行

进到文件夹内,使用cmd执行

npm install
npm run dev

使用vuepress-theme-reco搭建自己的博客

至此博客已经可以正常使用了,但是我们打开官方的案例,往往比我们现在的效果要好,我们需要优化的继续往下看。

二、优化页面

1、官方的功能

像评论、时间线、域名的配置、多语言、暗色适配、侧边栏、文档的摘要…官方写的已经很详细,这里就不再介绍,按照官方文档配置即可。如果有疑问,可以在下面评论,咨询我。

2、看板娘

  • 引入依赖:npm i @vuepress-reco/vuepress-plugin-kan-ban-niang

  • 配置

    在config.js下的module.exports加入如下代码,可参考npm

    plugins: [
        [
          '@vuepress-reco/vuepress-plugin-kan-ban-niang',{
            theme: [
              'miku', 'whiteCat', 'haru1', 'haru2', 'haruto', 'koharu', 'izumi', 'shizuku', 'wanko', 'blackCat', 'z16'
            ],
            clean: false,
            messages: { 
              welcome: '欢迎来到我的博客', home: '心里的花,我想要带你回家。', theme: '好吧,希望你能喜欢我的其他小伙伴。', close: '你不喜欢我了吗?痴痴地望着你。' 
            },
            messageStyle: { right: '68px', bottom: '290px' },
            width: 250,
            height: 320
          }
        ],
      ],
    
  • 效果图

使用vuepress-theme-reco搭建自己的博客

3、公告

  • 安装依赖:npm i @vuepress-reco/vuepress-plugin-bulletin-popover

  • 修改配置:在config.js下的module.exports的plugin下加入以下代码:

    ['@vuepress-reco/vuepress-plugin-bulletin-popover', {
          title: '公告',
          body: [
            {
              type: 'title',
              content: '欢迎加我的QQ/vx 
上一篇:简单的todolist的demo


下一篇:express+mongoDB做一个todolist小项目