个人博客网站升级

由于本人学习的一些知识点需要要个地方进行记录，所有之前搞了个静态网站，但是最近看着特别的别扭，所以想想着给它搞得好看一点，所以说干就干，将网站来个升级。

看这篇文章之前，建议大家，先看这个几篇

1、是时候来一个个人博客网站了

2、什么？你还没有自己的域名？

3、你的个人博客网站该上线了！

4、PV与UV你的网站也可以

升级前后对比

升级前
升级后

大家看着升级后的效果还是不错的哈。

选择主题

首先我们选择自己喜欢的主题，看过我前面文章的小伙伴都知道，我的网站是基于VuePress进行构建，所以我们找的主题也是这个方面的，基于以上的考虑我选择的主题是vuepress-theme-reco

`vuepress-theme-reco`介绍

这是一个vuepress主题，旨在添加博客所需的分类、TAB墙、分页、评论等能
主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用

安装

首先我们需要将主题进行安装并且进行配置。

安装

npm install vuepress-theme-reco --save
# 或者
yarn add vuepress-theme-reco

配置在你的网站配置文件.vuepress/config.js中引用主题，并将类型修改为type

module.exports = {
  theme: 'reco'
}

 module.exports = {
   theme: 'reco',
   themeConfig: {
   type: 'blog'
   }
}

添加分类、标签

这个功能就很实用了，能帮我们将文章进行汇总。效果访问我的网站就可以看到：网站地址配置如下.vuepress/config.js中

module.exports = {
  theme: 'reco',
  themeConfig: {
     // 博客配置
    blogConfig: {
      category: {
        location: 2,     // 在导航栏菜单中所占的位置，默认2
        text: '分类' // 默认文案 “分类”
      },
      tag: {
        location: 3,     // 在导航栏菜单中所占的位置，默认3
        text: '标签'      // 默认文案 “标签”
      }
    }
  }
}

配置完成只是第一步，下一步就是在我们写MarkDown文档时，需要在文档的前面，加上如下的代码

---

title: 文章标题

date: 书写时间

sidebar: 'auto'

categories:

- 文章属于哪个分类

tags:

- 文章标签

publish: true

---

::: tip

文章概要


:::

<!-- more -->

以上信息配置好，会在你的网站首页，形成概要目录，官方所说的Front Matter，以上信息也包含了时间轴的信息，就是文章首页是按时间进行倒序排列的。

网站首页配置

如本人的网站所呈现的样子，上面的部分是一张图片。那么是如何设置的呢？找到你的网站首页描述文档README.md将下面的代码拷贝进去就可以了

---
home: true
bgImage: 图片地址
heroImageStyle: {
  maxHeight: '200px',
  display: block,
  margin: '6rem auto 1.5rem',
  borderRadius: '50%',
  boxShadow: '0 5px 18px rgba(0,0,0,0.2)'
}
bgImageStyle: {
  height: '450px'
}

网站效果增强

大家，点击网站的时候，会有点击效果图、点击图片的时候会将图片放大，还有彩带的背景、以及公告牌的设置。这些是咱们配置的呢？这个是需要我们安装一些插件的

彩带背景安装

npm install vuepress-plugin-ribbon --save

鼠标点击特效

npm install vuepress-plugin-cursor-effects --save

动态标题

npm install vuepress-plugin-dynamic-title --save

图片法放大

npm install @vuepress\plugin-medium-zoom --save

插件配置

以上的插件我们下载安装完成后，在.vuepress/config.js中进行如下配置

 plugins: [
        [
            //彩带背景 
            "ribbon",
            {
                size: 90,     // width of the ribbon, default: 90
                opacity: 0.8, // opacity of the ribbon, default: 0.3
                zIndex: -1    // z-index property of the background, default: -1
            }
        ],
        
            //鼠标点击特效 
            "cursor-effects",
            {
                size: 3,                    // size of the particle, default: 2
                shape: ['circle'],  // shape of the particle, default: 'star'
                zIndex: 999999999           // z-index property of the canvas, default: 999999999
            }
        [
            //动态标题
            "dynamic-title",
            {
                showIcon: "/favicon.ico",
                showText: "(/≧▽≦/)咦！又好了！",
                hideIcon: "/failure.ico",
                hideText: "(●—●)喔哟，崩溃啦！",
                recoverTime: 2000
            }
        ],
        [
            //图片放大插件 
            '@vuepress\plugin-medium-zoom', {
            selector: '.page img',
            delay: 1000,
            options: {
                margin: 24,
                background: 'rgba(25,18,25,0.9)',
                scrollOffset: 40
            }
        }
        ]

整体配置

module.exports = {
    base:'',
    locales:{
      '/':{
          lang: 'zh-CN'
      }
    },
    title: '北漂码农有话说',
    description: '强化内功、持续改进、不断叠加、保持耐心',
    head: [
        ['link', {rel: 'icon', href: '导航栏小图标'}],
        ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }],
        [            "script",            {}, `        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "网站分析百度分析工具地址";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
      `
        ]
    ],
    theme: 'reco',
    themeConfig: {
        author: '北漂码农有话说',
        mode: 'dark',
        nav: [
            {text: '首页', link: '/',icon: 'reco-home'},
            {text: 'Java', link: '/java/',icon: 'reco-document'},
            {text: '网站', link: '/web/',icon: 'reco-document'},
            {text: '容器技术', link: '/container/',icon: 'reco-document'},
            {text: '搜索引擎', link: '/search/',icon: 'reco-document'},
            {text: '分布式事务', link: '/dis-transaction/',icon: 'reco-document'},
            {text: '源码系列', link: '/source-code/',icon: 'reco-document'},
            {text: '框架系列', link: '/frame/',icon: 'reco-document'},
            {text: '其他', link: '/other/',icon: 'reco-document'},
            {text: 'GitHub', link: 'https://github.com/triumphxx',icon: 'reco-github' }
        ],
        sidebar: {
            '/java/': [
                '',
                'network-programming-define',
                'network-programming-bio',
                'network-programming-nio',
                'network-programming-multiplexer',
                'network-programming-aio'
            ],

            '/web/': [
                '',
                'VuePress-Create',
                'VuePress-Deploy',
                'VuePress-Analysis',
                'VuePress-upgrade'
            ],
            '/container/': [
                '',
                'docker-overview',
                'docker-dockerfile',
                'docker-network',
                'docker-compose',
                'docker-se-composition',
                'docker-images-maven',
                'docker-list'
            ],
            '/search/': [
                '',
                'es-overview',
                'es-install',
                'es-start',
                'es-mapping',
                'es-doc'
            ],
            '/dis-transaction/': [
                '',
                'tx-lcn-overview',
                'tx-lcn-lcn',
                'tx-lcn-tcc'
            ],
            '/source-code/': [
                '',
                'tomcat-compile',
                'tomcat-architecture',
                'tomcat-lifecycle',/
                'tomcat-start-process' 
                'tomcat-component'
            ],
            '/frame/': [
              '',
              'Quartz1',
              'Quartz2',
              'SpringBootMultipleModules',
              'SpringCloudEureka',
              'SpringCloudProducerConsumer'
            ],
            '/other/': [
                '',
                'DomainNameRegistration',
                'tree'
            ]
        },
        logo: '网站logo地址',
        type:'blog',
        blogConfig: {
            category: {
                location: 2,
                text: '分类',
            },
            tag: {
                location: 2,
                text: '标签'
            }
        },
        friendLink: [
            {
                title: '北漂码农有话说',
                desc: '强化内功、持续改进、不断叠加、保存内心',
                avatar: '头像地址',
                email: 'triumphxx@163.com',
                link: 'https://blog.triumphxx.com.cn/'
            },
        ],
        search: true,
        searchMaxSuggestions: 5,
        record: '©2021 triumphxx 京ICP备20026452号',
        // 最后更新时间
        lastUpdated: '最后更新时间',
        // 作者
        author: '北漂码农有话说',
        // 作者头像
        authorAvatar: 'http://cdn.triumphxx.com.cn/img/%E5%A4%B4%E5%83%8F.jpeg',
    },
    markdown: {
        lineNumbers: true
    },
    plugins: [
        [
            "@vuepress-reco/vuepress-plugin-kan-ban-niang",
            {
                theme: ['blackCat', 'whiteCat', 'haru1', 'haru2', 'haruto', 'koharu', 'izumi', 'shizuku', 'wanko', 'miku', 'z16'],
                clean: false,
                messages: {
                    welcome: '我是北漂码农有话说欢迎你的关注 ',
                    home: '欢迎来到北漂码农有话说的空间',
                    theme: '好吧，希望你能喜欢我的其他小伙伴。',
                    close: '再见哦'
                },
                width: 240,
                height: 352
            }
        ],
        [            "ribbon",            {                size: 90,     // width of the ribbon, default: 90                opacity: 0.8, // opacity of the ribbon, default: 0.3                zIndex: -1    // z-index property of the background, default: -1            }        ],
        [            "cursor-effects",            {                size: 3,                    // size of the particle, default: 2                shape: ['circle'],  // shape of the particle, default: 'star'
                zIndex: 999999999           // z-index property of the canvas, default: 999999999
            }
        ],
        [            "dynamic-title",            {                showIcon: "/favicon.ico",                showText: "(/≧▽≦/)咦！又好了！",                hideIcon: "/failure.ico",                hideText: "(●—●)喔哟，崩溃啦！",                recoverTime: 2000            }        ],
        [            '@vuepress\plugin-medium-zoom', {            selector: '.page img',            delay: 1000,            options: {                margin: 24,                background: 'rgba(25,18,25,0.9)',                scrollOffset: 40            }        }        ],
        [            'flowchart'        ],
        [            'sitemap', {            hostname: 'https://www.glassysky.site'        }        ],
        ['@vuepress/pwa', {            serviceWorker: true,             updatePopup: {                message: "发现新内容可用",                buttonText: "刷新"            }        }        ],
        ["vuepress-plugin-nuggets-style-copy", {            copyText: "复制代码",              tip: {                content: "复制成功!"            }        }],
        ["@vuepress-yard/vuepress-plugin-window",{            title: "北漂码农有话说の公告",              contentInfo: {                title: "给个关注呀 🎉🎉🎉",                needImg: true,                imgUrl: "https://cdn.triumphxx.com.cn/%20web/wechart.png",                content: "喜欢博皮可以到博客园关注教程",                contentStyle: ""            },            bottomInfo: {                btnText: '知识点',                linkTo: 'https://blog.triumphxx.com.cn/advertise/'            },            closeOnce: false        }]
    ]
}

小结

以上就是对我的网站做的一个升级，过程不难，但是搞完以后自己还是很满意的，小伙伴们把你的网站也搞起来吧。

个人博客网站升级

个人博客网站升级

升级前后对比

选择主题

vuepress-theme-reco介绍

安装

添加分类、标签

网站首页配置

网站效果增强

插件配置

整体配置

小结

`vuepress-theme-reco`介绍