个人博客网站升级
作者：北漂码农有话说
- 2021 年 11 月 21 日
本文字数：7579 字
阅读完需：约 25 分钟
个人博客网站升级
由于本人学习的一些知识点需要要个地方进行记录，所有之前搞了个静态网站，但是最近看着特别的别扭，所以想想着给它搞得好看一点，所以说干就干，将网站来个升级。
看这篇文章之前，建议大家，先看这个几篇
升级前后对比
升级前
升级后
大家看着升级后的效果还是不错的哈。
选择主题
首先我们选择自己喜欢的主题，看过我前面文章的小伙伴都知道，我的网站是基于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: truebgImage: 图片地址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 }] ]}
复制代码
小结
以上就是对我的网站做的一个升级，过程不难，但是搞完以后自己还是很满意的，小伙伴们把你的网站也搞起来吧。
划线
评论
复制
发布于: 1 小时前阅读数: 4
版权声明: 本文为 InfoQ 作者【北漂码农有话说】的原创文章。
原文链接:【http://xie.infoq.cn/article/53a2c9a22e76341db8fd0804b】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
北漂码农有话说
关注
强化内功、持续改进、不断叠加、保持耐心 2018.03.23 加入
行走在江湖的程序员 个人网站：http://blog.triumphxx.com.cn 微信公众号：北漂码农有话说
评论