个人博客网站升级
个人博客网站升级
由于本人学习的一些知识点需要要个地方进行记录,所有之前搞了个静态网站,但是最近看着特别的别扭,所以想想着给它搞得 好看一点,所以说干就干,将网站来个升级。
看这篇文章之前,建议大家,先看这个几篇
升级前后对比
升级前
升级后
![](https://cdn.triumphxx.com.cn/web/web-after.png)
大家看着升级后的效果还是不错的哈。
选择主题
首先我们选择自己喜欢的主题,看过我前面文章的小伙伴都知道,我的网站是基于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
}]
]
}
小结
以上就是对我的网站做的一个升级,过程不难,但是搞完以后自己还是很满意的,小伙伴们把你的网站也搞起来吧。
![](http://cdn.triumphxx.com.cn/img/%E6%89%AB%E7%A0%81_%E6%90%9C%E7%B4%A2%E8%81%94%E5%90%88%E4%BC%A0%E6%92%AD%E6%A0%B7%E5%BC%8F-%E6%A0%87%E5%87%86%E8%89%B2%E7%89%88.png)