个人博客网站升级
由于本人学习的一些知识点需要要个地方进行记录，所有之前搞了个静态网站，但是最近看着特别的别扭，所以想想着给它搞得 好看一点，所以说干就干，将网站来个升级。
看这篇文章之前，建议大家，先看这个几篇
升级前后对比
-
升级前
-
升级后
大家看着升级后的效果还是不错的哈。
选择主题
首先我们选择自己喜欢的主题，看过我前面文章的小伙伴都知道，我的网站是基于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
????????}]
????]
}
小结
以上就是对我的网站做的一个升级，过程不难，但是搞完以后自己还是很满意的，小伙伴们把你的网站也搞起来吧。
