个人博客网站升级

个人博客网站升级

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

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

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

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

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

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

升级前后对比

  • 升级前 个人博客网站升级_第1张图片

  • 升级后

个人博客网站升级_第2张图片

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

选择主题

首先我们选择自己喜欢的主题,看过我前面文章的小伙伴都知道,我的网站是基于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

文章概要


:::


以上信息配置好,会在你的网站首页,形成概要目录,官方所说的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",
            {
                size90,     // width of the ribbon, default: 90
                opacity0.8// opacity of the ribbon, default: 0.3
                zIndex-1    // z-index property of the background, default: -1
            }
        ],
        
            //鼠标点击特效 
            "cursor-effects",
            {
                size3,                    // size of the particle, default: 2
                shape: ['circle'],  // shape of the particle, default: 'star'
                zIndex999999999           // z-index property of the canvas, default: 999999999
            }
        [
            //动态标题
            "dynamic-title",
            {
                showIcon"/favicon.ico",
                showText"(/≧▽≦/)咦!又好了!",
                hideIcon"/failure.ico",
                hideText"(●—●)喔哟,崩溃啦!",
                recoverTime2000
            }
        ],
        [
            //图片放大插件 
            '@vuepress\plugin-medium-zoom', {
            selector'.page img',
            delay1000,
            options: {
                margin24,
                background'rgba(25,18,25,0.9)',
                scrollOffset40
            }
        }
        ]

整体配置

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: {
                location2,
                text'分类',
            },
            tag: {
                location2,
                text'标签'
            }
        },
        friendLink: [
            {
                title'北漂码农有话说',
                desc'强化内功、持续改进、不断叠加、保存内心',
                avatar'头像地址',
                email'triumphxx@163.com',
                link'https://blog.triumphxx.com.cn/'
            },
        ],
        searchtrue,
        searchMaxSuggestions5,
        record'©2021 triumphxx 京ICP备20026452号',
        // 最后更新时间
        lastUpdated'最后更新时间',
        // 作者
        author'北漂码农有话说',
        // 作者头像
        authorAvatar'http://cdn.triumphxx.com.cn/img/%E5%A4%B4%E5%83%8F.jpeg',
    },
    markdown: {
        lineNumberstrue
    },
    plugins: [
        [
            "@vuepress-reco/vuepress-plugin-kan-ban-niang",
            {
                theme: ['blackCat''whiteCat''haru1''haru2''haruto''koharu''izumi''shizuku''wanko''miku''z16'],
                cleanfalse,
                messages: {
                    welcome'我是北漂码农有话说欢迎你的关注 ',
                    home'欢迎来到北漂码农有话说的空间',
                    theme'好吧,希望你能喜欢我的其他小伙伴。',
                    close'再见哦'
                },
                width240,
                height352
            }
        ],
        [
            "ribbon",
            {
                size90,     // width of the ribbon, default: 90
                opacity0.8// opacity of the ribbon, default: 0.3
                zIndex-1    // z-index property of the background, default: -1
            }
        ],
        [
            "cursor-effects",
            {
                size3,                    // size of the particle, default: 2
                shape: ['circle'],  // shape of the particle, default: 'star'
                zIndex999999999           // z-index property of the canvas, default: 999999999
            }
        ],
        [
            "dynamic-title",
            {
                showIcon"/favicon.ico",
                showText"(/≧▽≦/)咦!又好了!",
                hideIcon"/failure.ico",
                hideText"(●—●)喔哟,崩溃啦!",
                recoverTime2000
            }
        ],
        [
            '@vuepress\plugin-medium-zoom', {
            selector'.page img',
            delay1000,
            options: {
                margin24,
                background'rgba(25,18,25,0.9)',
                scrollOffset40
            }
        }
        ],
        [
            'flowchart'
        ],
        [
            'sitemap', {
            hostname'https://www.glassysky.site'
        }
        ],
        ['@vuepress/pwa', {
            serviceWorkertrue
            updatePopup: {
                message"发现新内容可用",
                buttonText"刷新"
            }
        }
        ],
        ["vuepress-plugin-nuggets-style-copy", {
            copyText"复制代码",  
            tip: {
                content"复制成功!"
            }
        }],
        ["@vuepress-yard/vuepress-plugin-window",{
            title"北漂码农有话说の公告",  
            contentInfo: {
                title"给个关注呀 ",
                needImgtrue,
                imgUrl"https://cdn.triumphxx.com.cn/%20web/wechart.png",
                content"喜欢博皮可以到博客园关注教程",
                contentStyle""
            },
            bottomInfo: {
                btnText'知识点',
                linkTo'https://blog.triumphxx.com.cn/advertise/'
            },
            closeOncefalse
        }]
    ]
}

小结

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

你可能感兴趣的