我的Vuepress搭建

之前搭建了Vuepress的网站进行了魔改，在此记录一下
vuepress跳转点这里

哈罗

非常抱歉有时候没来得及回复一些朋友的消息,可以加我好用（有时候工作忙忘了务必见谅）

因为最近以来偶尔会遇到部分小伙伴要源码，所以在这里整理一下

如果您觉得喜欢或若是能帮到您，点个star哦😘😘

地址

现整理了一趴代码直接点击[张益达的blog]

本人很菜！很多都是魔改的原作者样式，是当时接触的时候一步一步修改过来的。

而且后期也觉得很多地方不合适很合理。

所以！有可以改进的建议可以提出来，非常感谢您。

一些介绍

感谢作者的博客主题[vuepress-theme-reco]

基本设置和使用都是上面可以找到的喔！

后面魔改了原作者的样式加上之前参考部分优秀博主大佬的样式和设置

我也加了一些参数来方便使用（有些可能并不方便，见谅！！！）

config.js配置

首页背景

back:{
    isRandom: true, //是否采用随机模式
    bgImage: 'https://zyj_yida.gitee.io/source/img/indexbg/1.jpg',  //首页背景图
    bgUrls: [
        'https://zyj_yida.gitee.io/source/img/indexbg/1.jpg',
        'https://zyj_yida.gitee.io/source/img/indexbg/2.jpg',
        'https://zyj_yida.gitee.io/source/img/indexbg/3.jpg',
        'https://zyj_yida.gitee.io/source/img/indexbg/4.jpg',
        'https://zyj_yida.gitee.io/source/img/indexbg/5.jpg',
        'https://zyj_yida.gitee.io/source/img/indexbg/6.jpg',
        'https://zyj_yida.gitee.io/source/img/indexbg/7.jpg'
      ] //随机模式下图片的随机数组
}

这里随机展示图片可以有很多种方式

可以自己进行随机的修改

这里暂时使用将喜欢的图片地址加到配置里

另外，文章的封面和详情页的顶图如果不单独配置的话也是会去取上面的图片

mottos

mottos: [{
      "zh": "人生来来往往，来日并不方长。",
      "en": "Life comes and goes, but the future is not long."
      },
      {
        "zh": "他心里的苦越多，一丝甜就能填满。",
        "en": "The more bitterness in his heart, the sweetness can fill it."
      },
      {
        "zh": "梦想不会逃跑，会逃跑的永远都是自己。",
        "en": "Dream will not run away, will always be their own escape."
      },
      {
        "zh": "涉江而过，芙蓉千朵。诗也简单，心也简单。",
        "en": "Crossing the river, there are thousands of Hibiscus. Poetry is simple, heart is simple."
      },
      {
        "zh": "一别两三年，忽然又夏天。",
        "en": "Two or three years later, it was summer again."
      }, {
        "zh": "未成定局的事就不要弄的人尽皆知。",
        "en": "Don't do anything that's not settled but everyone knows it."
      },
      {
        "zh": "也许明天的我会痛恨自己，但今夜的我仍在前行。",
        "en": "I might hate myself tomorrow, but I'm on my way tonight."
      }
    ]

这里就是首页上面展示的文字

可以自己替换自己喜欢的

这里是按顺序一周七天每天循环替换

md文件增加的配置

title: '这是一个title'
author: "xxx"
date: 2021-11-11
isShowComment: true //是否显示评论组件
isShowIndex: false //文章是否展示到首页
isFull: true //是否采用顶部背景模式
topUsePic: false //顶部背景是否使用封面图
pic: 'https://zyj_yida.gitee.io/source/img/indexbg/1.jpg' //封面图地址
categories:
- 'Back-end'

在原有的frontmatter配置上增加了一些自己用到的配置

后续您有需要还可以自己增加

isShowIndex
因为原先是首页分页会把所有文章按时间顺序展示在首页
这个主要是自己有时候写的一些文章或者心情不想展示在首页的分页
就可以设置为false，这样首页分页就不会出现这篇文章
可以在时间轴和对应标签分类下找到
isFull && pic && topUsePic
这三个配置是当初魔改文章详情页的时候加的
因为不想影响原作者最初的样式所以加了配置
基本上是一起用的
isFull 为true就是改变了原作者样式采用现有顶部图片背景，false或者不配置的话就是原作者样式,所以两种文章显示样式可以共存。
pic 就是当你想给某一篇文章单独设置封面时的图片地址，不配置的话会去默认读取你themeConfig.back里面的图片配置。
topUsePic 正常情况下你设置了pic,文章封面和详情顶部都采用的你的pic地址，但是我之前加过的一些pic作封面看着可以但是详情页顶部放大后并不好看，所以加了此配置，为false就会读取你themeConfig.back里面的图片配置。不配置就会默认跟pic一致

其他配置

加的组件

之前想把B站一些想分享的视频嵌到自己博客来，所以当初加了一个小组件

本源码有一篇文章也有使用到，可以自行查看

直接在md文章中引入

<PlayVideo aid="75257577" cid="128732400" page="1"/>

aid和cid可以在B站详情页分享里面找到

page代表up主发布多个视频里面的哪一个

一些使用

还有一些组件都是作者官方可以找到的喔

最初使用的使用也整理过一篇文章[为您的Vuepress博客引入插件]

作者[官方插件广场]

之前也有问到背景的彩带时引入的js文件

可以点击这里查看[Vuepress博客引入外部js样式]

共勉！

End

当时也是看到一个博主样式很漂亮，问该博主之后给我说了做法，后面就自己慢慢瞎改改成现在这样

下面也会把博主的地址贴出来

源码里面的图片地址是我收藏的一些壁纸，如果你觉得好看可以拿去用喔！

点击[来看看壁纸]开启壁纸

希望自己学习路上得分享能帮到你，有意见也希望您能提出来

大家一起多多交流

希望您能点个star喔

十分感谢您

感谢

[午后南杂] 感谢作者

[zealsay说你想说] 这个博主大佬的样式真的美观简洁