导航栏透明+背景图填充+跳转样式+悬浮气泡

1. 背景图填充

效果图：

下面的小框扩展到大框，让后面的导航栏透明更完善一些。

编辑Theme/components/HomeBlog.vue下的

.hero {margin $navbarHeight auto 0position relativebox-sizing border-boxpadding 0 20pxheight 100vhdisplay flexalign-items centerjustify-content center.hero-img {max-width: 300px;margin: 0 auto 1.5rem}

为：

.hero {margin 0position relativebox-sizing border-boxpadding 0 20pxheight 100vhdisplay flexalign-items centerjustify-content center.hero-img {max-width: 300px;margin: 0 auto 1.5rem}

2. 导航栏透明

效果图：

编辑theme/components/Navbar.vue下的

.navbarpadding $navbar-vertical-padding $navbar-horizontal-paddingline-height $navbarHeight - 1.4rembox-shadow var(--box-shadow)background var(--background-color)a, span, imgdisplay inline-block.logoheight $navbarHeight - 1.4remmin-width $navbarHeight - 1.4remmargin-right 0.8remvertical-align topborder-radius 50%.site-namefont-size 1.2remfont-weight 600color var(--text-color)position relative.linkspadding-left 1.5rembox-sizing border-boxwhite-space nowrapfont-size 0.9remposition absoluteright $navbar-horizontal-paddingtop $navbar-vertical-paddingdisplay flexbackground-color var(--background-color).search-boxflex: 0 0 autovertical-align top

为：

.navbarpadding $navbar-vertical-padding $navbar-horizontal-paddingline-height $navbarHeight - 1.4rembox-shadow: 0 1px 8px 0 rgba(0, 0, 0, .1)//box-shadow var(--box-shadow)background: rgba(0,0,0,0)//background var(--background-color)a, span, imgdisplay inline-block.logoheight $navbarHeight - 1.4remmin-width $navbarHeight - 1.4remmargin-right 0.8remvertical-align topborder-radius 50%.site-namefont-size 1.2remfont-weight 600color var(--text-color)position relative.linkspadding-left 1.5rembox-sizing border-boxwhite-space nowrapfont-size 0.9remposition absoluteright $navbar-horizontal-paddingtop $navbar-vertical-paddingdisplay flexbackground-color: rgba(0,0,0,0)//background var(--background-color).search-boxflex: 0 0 autovertical-align top

3. 图片中的点击向下跳转的样式

   如图所示

在主页的README.md文件最下面添加下列代码（此方法转载自某大佬博客，但是找不到是哪个了，如本人看到请联系我附上原文链接。）

或者在HomeBlog.vue文件里面类似的写法也可以达到相应的目的。

<style>
.anchor-down {display: block;margin: 12rem auto 0;bottom: 45px;width: 20px;height: 20px;font-size: 34px;text-align: center;animation: bounce-in 5s 3s infinite;position: absolute;left: 50%;bottom: 30%;margin-left: -10px;cursor: pointer;
}
@-webkit-keyframes bounce-in{0%{transform:translateY(0)}20%{transform:translateY(0)}50%{transform:translateY(-20px)}80%{transform:translateY(0)}to{transform:translateY(0)}
}
.anchor-down::before {content: "";width: 20px;height: 20px;display: block;border-right: 3px solid #fff;border-top: 3px solid #fff;transform: rotate(135deg);position: absolute;bottom: 10px;
}
.anchor-down::after {content: "";width: 20px;height: 20px;display: block;border-right: 3px solid #fff;border-top: 3px solid #fff;transform: rotate(135deg);
}
</style><script>
export default {mounted () {const ifJanchor = document.getElementById("JanchorDown"); ifJanchor && ifJanchor.parentNode.removeChild(ifJanchor);let a = document.createElement('a');a.id = 'JanchorDown';a.className = 'anchor-down';document.getElementsByClassName('hero')[0].append(a);let targetA = document.getElementById("JanchorDown");targetA.addEventListener('click', e => { // 添加点击事件this.scrollFn();})},methods: {scrollFn() {const windowH = document.getElementsByClassName('hero')[0].clientHeight; // 获取窗口高度document.documentElement.scrollTop = windowH; // 滚动条滚动到指定位置}}
}
</script>

4. 悬浮气泡

效果图：

图中背景上的透明气泡

此插件采用的是vue-canvas-effect这款插件实现的。

使用方法：

在博客项目目录下NPM安装插件

npm install vue-canvas-effect --save

然后在theme/components/Homeblog.vue中引入，这里外部组件的引入要使用动态引入的方法不能够直接引入，否则会出现windows is not defined的错误。

动态引入的方法就是在mounte（）{}中引入插件，如下面图片位置

接着在data（）中设置一个接受组件的变量

在上面的html部分引入即可

如果要更改默认的参数，可以在计算属性中添加一个options函数，具体参数可以参考插件的GitHub。