vitepress全局公告栏组件

vuepress 2.0的hope主题自带了公告栏插件，我切换到vitepress也想要搞一个公告栏，找遍全网没看到一个现成，无奈只能自己写了，这里粥里有勺糖感谢提供的思路和样式。

参考官方文档

// .vitepress/theme/index.js
import { h } from 'vue'
import DefaultTheme from 'vitepress/theme'
import MyComponent from './MyComponent.vue'

import './gonggao.css';

export default {
  ...DefaultTheme,
  Layout() {
    return h(DefaultTheme.Layout, null, {
    //   'aside-outline-before': () => h(MyComponent)
      'layout-top': () => h(MyComponent)
    })
  }
}

创建.vitepress/theme目录下index.js文件，只需要把aside-outline-before改成layout-top,我理解应该是置顶的意思。

css

css样式直接再index.js内全局引入就行了

css

/* .vitepress/theme/gonggao.css */
/* 公告文字样式 */
.p_margin {
    margin: 20px 0;
}

#p1 {
    color: red;
    font-size: 20px;
    font-weight: bold;
    text-align:left;
}

#p2 {
    font-size: 20px;
    line-height: 1.5;
    text-align:left;
}

#p2 span {
    font-size: 18px;
    font-weight: bold;
    text-align:left;
}

:root {  
    --width-zt: 258px;  /* 公告总宽度 */
    --width-bo: 80px;  /* 公告离地高度 */
    --height-close: 40px;  /* 显示按钮的高度宽度 */
  }  

/* 主体样式 */
.popover {
    width: var(--width-zt); 
    position: fixed;
    bottom: var(--width-bo); 
    right: 20px;
    z-index: 22;
    box-sizing: border-box;
    border: 1px solid #5672cd;
    border-radius: 6px;
    background-color: rgba(255, 255, 255);
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .1);
}

/* 关闭后样式 */
.popover-close {
    opacity: .5;
    z-index: 22;
    bottom: calc(var(--width-zt) + var(--width-bo) + var(--height-close));
    right: 20px;
    position: fixed;
    background-color: #5672cd;
    border: none;
    /* 移除默认的边框 */
    padding: 10px;
    color: #fff;
    border-radius: 50%;
    /* 使按钮成为正圆形 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 使图标在按钮中居中 */
    width: var(--height-close);
    height: var(--height-close); 
    cursor: pointer;
    /* 添加鼠标悬停时的手形光标 */
}

.el-icon2 {
    display: flex;
    /* 添加 flex 属性 */
    align-items: center;
    /* 使 SVG 在 i 标签内居中 */
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 主体样式 */
.header {
    background-color: #5672cd;
    color: #fff;
    padding: 6px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-wrapper {
    display: flex;
    align-items: center;
}

.el-icon {
    height: 1em;
    width: 1em;
    line-height: 1em;
    display: block;
    /* justify-content: center;
    align-items: center; */
    position: relative;
    fill: currentColor;
    color: inherit;
    font-size: inherit;
}

.title-wrapper .title {
    font-size: 14px;
    padding-left: 6px;
}

img,
video {
    max-width: 100%;
    height: auto;
}

.header .close-icon {
    cursor: pointer;
}

.body.content,
.footer.content {
    text-align: center;
}

.body {
    box-sizing: border-box;
    padding: 10px 10px 0;
}

.footer {
    box-sizing: border-box;
    padding: 10px;
}

/* a标签的按钮样式 */
.button-container {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
}  
  
.button-author,  
.button-group {  
    border: none;  
    color: white !important;  
    transition: all 0.3s ease;  
    cursor: pointer;  
    font-size: 16px;  
    padding: 10px 20px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    border-radius: 8px;  
    margin: 5px;
    text-decoration: none !important;
}  
  
.button-author {  
    background-color: #4CAF50;  
}  
  
.button-group {  
    background-color: #f44336;  
}  
  
.button-author:hover,  
.button-group:hover {  
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  
    transform: translateY(-3px);  
}

MyComponent.vue

vue

<!-- .vitepress/theme/MyComponent.vue -->
<template>
    <div class="popover" v-show="showPopover">  
        <div class="header">
            <i class="el-icon" style="font-size: 20px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                    <path fill="currentColor" d="M288 128h608L736 384l160 256H288v320h-96V64h96v64z"></path>
                </svg></i>
            <span class="title">公告</span>
            <i class="el-icon close-icon" @click="toggleCloseIcon" style="font-size: 20px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                    <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"></path>
                </svg></i>
        </div>
        <div class="body content">
            <p class="p_margin" id="p1">文字1：<br />文字2</p>
            <!-- <img src="https://img.cdn.sugarat.top/mdImg/MTYxNTAxODc2NTIxMA==615018765210" style=""> -->
            <p class="p_margin" id="p2">文字3<span>文字4</span></p>
            <!-- <p class="p_margin" id="p3"></p> -->
            <div class="button-container">
                <a href="https://item.taobao.com/" target="_blank" class="el-button el-button--primary button-author">
                    <span>按钮1</span>
                </a>
                <!-- <a href="https://item.taobao.com/" target="_blank" class="el-button el-button--success button-group">  
              <span>按钮2</span>  
            </a> -->
            </div>
        </div>
        <div class="footer content"></div>
    </div>

    <button class="popover-close" v-if="showCloseIcon" @click="togglePopover">
        <i class="el-icon2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="18px" height="18px">
                <path fill="currentColor" d="M288 128h608L736 384l160 256H288v320h-96V64h96v64z"></path>
            </svg>
        </i>
    </button>
</template>

  
<script>    
export default {    
  data() {    
    return {    
      showPopover: true,  
      showCloseIcon: false    
    };    
  },    
  methods: {    
    togglePopover() {    
      this.showPopover = !this.showPopover;  
      this.showCloseIcon = this.showPopover ? false : true;  
    },  
    toggleCloseIcon() {  
      this.showPopover = false;  
      this.showCloseIcon = !this.showCloseIcon;  
    }  
  }    
};    
</script>

vitepress全局公告栏组件 ​

参考官方文档 ​

css ​

MyComponent.vue ​

vitepress全局公告栏组件

参考官方文档

css

MyComponent.vue