VuePress中右侧全局添加侧边栏-实现置顶和置底

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

前言

在不久之前,有个前端同学好奇,聊到,我的网站itclanCoder,在手机移动端访问时

屏幕右侧出现的侧边栏是怎么做的,同时也支持置顶和置底的操作

尽管也知道这个网站是用vuepress去搭建的,但是依旧好奇,想实现这个效果,但不知道如何下手,今天就统一的在这里记录分享一下

(https://coder.itclan.cn/)

01

添加全局组件

在/.vuepress/components/global/RightBar.vue,创建一个全局组件

内部组件会自动根据文件名注册成全局组件

然后在md文件中,引入

<global-RightBar />

完整代码如下所示:

<template>
  <div>
    <div class="right-bar-wrap" v-show="isRightBar">
      <div>
        <a href="#">
          <img width="30" height="30" :src="rightbar.topImg" alt="置顶" />
        </a>
      </div>
      <div>
        <a href="/latestarticle/">
          <img width="30" height="30" :src="rightbar.newImg" alt="最新" />
        </a>
      </div>
      <div  @click="handleKeQun('https://kequn.itclan.cn/app/index.php?i=2&c=entry&do=index&m=dc_sqjd&state=index&rand=68drdo&spread=0#/')">
        <img width="30" height="30" :src="rightbar.keQunImg" alt="社群" />
      </div>
      <div>
        <img
          width="30"
          height="30"
          class="medium-zoom lazy"
          loading="lazy"
          :src="rightbar.buyImg"
          alt="小程序码"
        />
      </div>
      &