個人部落格網站升級
由於本人學習的一些知識點需要要個地方進行記錄，所有之前搞了個靜態網站，但是最近看著特別的彆扭，所以想想著給它搞得 好看一點，所以說幹就幹，將網站來個升級。
看這篇文章之前，建議大家，先看這個幾篇
升級前後對比
升級前
升級後
大家看著升級後的效果還是不錯的哈。
選擇主題
首先我們選擇自己喜歡的主題，看過我前面文章的小夥伴都知道，我的網站是基於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
}]
]
}
小結
以上就是對我的網站做的一個升級，過程不難，但是搞完以後自己還是很滿意的，小夥伴們把你的網站也搞起來吧。
