超简单实现vuepress和vitepress更新提示用户刷新网页

云霾在黑暗中发愁，竟忘了遮住太阳的就是它们自己。---泰戈尔-

前言

做文档类型的静态网站选择很多，快收上手而且大众化一点属于鱿鱼须团队的vuepress和vitepress(灵沐星宿文档)

但是他们有一个共同特点当你更新内容后，用户访问不会出现新内容，而没提示用户刷新的提示

估计是自身知识储备不够无法在官网文档中学习到提示用户刷新网页的文档

后续网上冲浪后发现很多就是使用components全局组件，或者新建version.json文件，再用axios请求对比版本

月薪300自然有月薪3000的方式，本文采用Layout插槽方式加2个文件搞定，超简单，快速上手

预览

缺点

移动端无法出现提示用户刷新

实践

打开以下文件夹（如果没有theme，自己建立一个即可）

.vitepress/theme

建立index.js

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import MyLayout from './MyLayout.vue'


// export default DefaultTheme
export default {
  extends: DefaultTheme,
    Layout: MyLayout
}

再建立MyLayout.vue，后续更新只需要修改docVer的值即可

<!--.vitepress/theme/MyLayout.vue-->
<script setup>
  import DefaultTheme from 'vitepress/theme';
  import {
    ref,
    onMounted
  } from 'vue';

  // 解构出需要的属性，这里假设Layout是需要使用的
  const {
    Layout
  } = DefaultTheme;

  // 使用ref创建响应式数据 后续更新 只需要更新docve值
  const docVer = ref(202412271020);
  const showUpdatePrompt = ref(false);

  // 页面加载触发函数
  onMounted(() => {
    checkForUpdate();
  });

  // 检查更新
  const checkForUpdate = () => {
    const storedVersion = localStorage.getItem('websiteVersion');
    if (storedVersion === null || storedVersion != docVer.value) {
      showUpdatePrompt.value = true;
    }
  };


  // 刷新页面的函数
  const refreshPage = () => {
    localStorage.setItem('websiteVersion', docVer.value);
    window.location.reload();
  };
</script>

<template>
  <Layout>
    <template #aside-bottom>
      <div class="fr-update-prompt" v-if="showUpdatePrompt">
        <p>有新版本可用，请刷新页面以获取最新内容。</p>
        <button class="fr-btn" @click="refreshPage">立即刷新</button>
      </div>
    </template>
  </Layout>
</template>

<style scoped>
  .fr-update-prompt {
    padding: 10px 20px;
    background-color: #ffeb3b;
    color: #000;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .fr-btn {
    margin-top:10px;
    padding: 5px 10px;
    background-color: #f57c00;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
</style>

总结

简单，快速，易懂