笔记

你是否曾进入他人的博客后，占据浏览器大屏的图片映入眼帘，如果你也喜欢这种样式，本内容将介绍如何实现。

2021-01-11 @Young Kbt

• 前言
• 组件添加
• 组件注册
  • 图片添加
  • 组件添加
• 属性说明
  • 导航栏配置
  • 背景图配置
  • desc淡入淡出配置
  • 气泡配置
• 额外动态大图
  • 静态资源获取
  • 组件配置
  • 首页配置
  • 全局配置
  • 我的建议
• 结束语

前言

目前适用版本是 Vdoing v1.x。

如果你没有了解什么是首页大图模块，可以浏览一番本内容介绍的大图模块，点击跳转 (opens new window) 我的首页。(PS：如果不想跳转，也可以参考下方的图片)

本内容实现了如下功能:

• 客户端的大图片效果
• 导航栏的颜色效果（可配置选择）
• 滑出大图片的位置后，切换导航栏颜色效果（可配置选择）
• 大图片的背景色随一天的不同时间而变化（可配置选择）
• 首页时间提示效果（可配置选择）
• 个人描述淡入淡出（打印机）效果（可配置选择）
• 大图片的气泡效果（可配置选择）
• 大图片气泡效果的位置选择（可配置选择）

......

本内容分为三步，无脑 Copy 即可：

• 在 docs/.vuepress/components 目录中创建 IndexBigImg.vue 组件
• 在 docs/index.md 添加 IndexBigImg.vue 组件
• 在 docs/.vuepress/config.js（新版 config.ts）的 themeConfig 中配置

组件添加

建议：本内容代码块比较长，可以点击代码块的右侧箭头来折叠，然后点击复制图标进行复制即可。

在 docs/.vuepress/components 目录中创建 IndexBigImg.vue 组件，如果没有 components 文件夹，则请创建。

在组件添加如下内容：

<template>
  <div class="index-bigimg" style="display: none"></div>
</template>
<script>
// 两个变量分别是背景元素的 class、生成的箭头 class
const banner = "banner";
const banner_arrow = "banner-arrow";
export default {
  data() {
    return {
      // 下面都是配置的默认值，建议在 themeConfig 进行配置，它们将覆盖这些属性值
      navColor: 1,
      switchNavColor: false,
      bgTimeColor: false,
      bgTimeColorArray: [
        "transparent", // 透明
        "rgba(255, 148, 48, .2)",
        "rgba(0, 0, 0, .3)",
        "rgba(0, 0, 0, .5)",
      ],
      descFade: false,
      desc: [],
      descFadeInTime: 200,
      descFadeOutTime: 100,
      descNextTime: 800,
      descFontSize: "1.4rem",
      bubble: false,
      bubblePosition: 0,
      bubbleNum: 200,
      fadeInInterval: "", // 淡入定时器
      fadeOutInterval: "", // 淡出定时器
    };
  },
  mounted() {
    const arrow = document.getElementById(banner_arrow);
    arrow && arrow.parentNode.removeChild(arrow);
    let a = document.createElement("a");
    a.id = banner_arrow;
    a.className = banner_arrow;
    document.getElementsByClassName(banner)[0].append(a);
    let targetA = document.getElementById(banner_arrow);
    targetA.addEventListener("click", (e) => {
      // 添加点击事件
      this.scrollFn();
    });

    // 初始化配置
    this.initConfig();

    // 初始化组件功能
    if (this.bgTimeColor) {
      this.bgTimeColorAndTip();
    }
    setTimeout(() => {
      this.noBgBlur();
    }, 100);

    this.blurText();
    this.watchScroll();

    if (this.descFade) {
      this.textFadeInAndOut();
    }
    if (this.bubble) {
      let canvas = document.createElement("canvas");
      canvas.id = "canvas";
      canvas.style.top = this.bubblePosition + "%";
      document.getElementsByClassName(banner)[0].append(canvas);
      this.canvasBubble();
    }
  },
  watch: {
    $route(to, from) {
      // 点击下一页后，往下滑动，移出大图
      if (to.path == "/" && Object.keys(this.$route.query).length > 0) {
        setTimeout(() => {
          this.clickArrow();
        }, 200);
      }
    },
  },
  methods: {
    // 初始化配置
    initConfig() {
      if (
        this.$themeConfig.indexImg &&
        Object.keys(this.$themeConfig.indexImg).length > 0
      ) {
        this.navColor =
          this.$themeConfig.indexImg.navColor == undefined
            ? this.navColor
            : this.$themeConfig.indexImg.navColor;
        this.switchNavColor =
          this.$themeConfig.indexImg.switchNavColor == undefined
            ? this.switchNavColor
            : this.$themeConfig.indexImg.switchNavColor;
        this.bgTimeColor =
          this.$themeConfig.indexImg.bgTimeColor == undefined
            ? this.bgTimeColor
            : this.$themeConfig.indexImg.bgTimeColor;
        this.bgTimeColorArray =
          this.$themeConfig.indexImg.bgTimeColorArray == undefined
            ? this.bgTimeColorArray
            : this.$themeConfig.indexImg.bgTimeColorArray;
        this.descFade =
          this.$themeConfig.indexImg.descFade == undefined
            ? this.descFade
            : this.$themeConfig.indexImg.descFade;
        this.desc =
          this.$themeConfig.indexImg.desc == undefined
            ? this.desc
            : this.$themeConfig.indexImg.desc;
        this.descFontSize =
          this.$themeConfig.indexImg.descFontSize == undefined
            ? this.descFontSize
            : this.$themeConfig.indexImg.descFontSize;
        this.descFadeInTime =
          this.$themeConfig.indexImg.descFadeInTime == undefined
            ? this.descFadeInTime
            : this.$themeConfig.indexImg.descFadeInTime;
        this.descNextTime =
          this.$themeConfig.indexImg.descNextTime == undefined
            ? this.descNextTime
            : this.$themeConfig.indexImg.descNextTime;
        this.bubble =
          this.$themeConfig.indexImg.bubble == undefined
            ? this.bubble
            : this.$themeConfig.indexImg.bubble;
        this.bubblePosition =
          this.$themeConfig.indexImg.bubblePosition == undefined
            ? this.bubblePosition
            : this.$themeConfig.indexImg.bubblePosition;
        this.bubbleNum =
          this.$themeConfig.indexImg.bubbleNum == undefined
            ? this.bubbleNum
            : this.$themeConfig.indexImg.bubbleNum;
      }
    },
    // 点击箭头向下滑动
    scrollFn() {
      const windowH = document.getElementsByClassName(banner)[0].clientHeight; // 获取窗口高度
      window.scrollTo({
        top: windowH,
        behavior: "smooth", // 平滑滚动
      });
    },
    // 触发下拉按钮
    clickArrow() {
      const arrow = document.getElementById("banner-arrow");
      arrow.click();
    },
    // 监听页面滚动的回调
    watchScroll() {
      const windowH = document.getElementsByClassName(banner)[0].clientHeight; // 获取窗口高度
      window.onscroll = () => {
        if (document.documentElement.scrollTop < windowH) {
          this.blurText(this.navColor);
          this.noBgBlur();
        } else {
          if (this.switchNavColor && this.navColor == 1) {
            this.blurText(2);
          } else if (this.switchNavColor && this.navColor == 2) {
            this.blurText(1);
          }
          this.bgBlur();
        }
      };
    },
    // 导航栏恢复原主题样式
    bgBlur() {
      let navbar = document.getElementsByClassName("navbar")[0];
      navbar.className = "navbar blur";
    },
    // 导航栏透明
    noBgBlur() {
      let navbar = document.getElementsByClassName("navbar")[0];
      navbar.className = "navbar navbar1 blur";
    },
    // 导航栏的字体颜色
    blurText(navColor = this.navColor) {
      let title = document.getElementsByClassName("site-name")[0];
      let search = document.getElementsByClassName("search-box")[0];
      let nav = document.getElementsByClassName("nav-links")[0];
      if (navColor == 1) {
        title.className = "site-name can-hide";
        nav.className = "nav-links can-hide";
        search.className = "search-box";
      } else if (navColor == 2) {
        title.className = "site-name site-name1 can-hide";
        nav.className = "nav-links nav-links1 can-hide";
        search.className = "search-box search-box1";
      }
    },
    // 背景色随时间变化，时间提示框内容随时间变化
    bgTimeColorAndTip() {
      var hours = new Date().getHours();
      var minutes = new Date().getMinutes();
      var seconds = new Date().getSeconds();
      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      let div = document.createElement("div");
      div.className = "banner-color";
      if (hours >= 6 && hours < 11) {
        div.style.backgroundColor = this.bgTimeColorArray[0];
        addTip(
          `早上好呀~~，现在是 ${hours}:${minutes}:${seconds}，吃早餐了吗？😊🤭`,
          "info",
          50,
          4000
        );
      } else if (hours >= 12 && hours <= 16) {
        div.style.backgroundColor = this.bgTimeColorArray[0];
        addTip(
          `下午好呀~~，现在是 ${hours}:${minutes}:${seconds}，繁忙的下午也要适当休息哦🥤🏀~~`,
          "info",
          50,
          4000
        );
      } else if (hours >= 16 && hours <= 19) {
        div.style.backgroundColor = this.bgTimeColorArray[1];
        addTip(
          `到黄昏了~~，现在是 ${hours}:${minutes}:${seconds}，该准备吃饭啦🥗🍖~~`,
          "info",
          50,
          4000
        );
      } else if (hours >= 19 && hours < 24) {
        div.style.backgroundColor = this.bgTimeColorArray[2];
        addTip(
          `晚上好呀~~，现在是 ${hours}:${minutes}:${seconds}，该准备洗漱睡觉啦🥱😪~~`,
          "info",
          50,
          4000
        );
      } else if (hours >= 0 && hours < 6) {
        div.style.backgroundColor = this.bgTimeColorArray[3];
        addTip(
          `别再熬夜了~~，现在是 ${hours}:${minutes}:${seconds}，早点睡吧，让我们一起欣赏早上的太阳~~😇🛏`,
          "info",
          50,
          4000
        );
      }
      document.getElementsByClassName(banner)[0].parentNode.append(div);
    },
    // 字体淡入淡出
    textFadeInAndOut(
      desc = this.desc, // 文字描述
      descFontSize = this.descFontSize, // 字体大小
      descFadeInTime = this.descFadeInTime, // 淡入时间
      descFadeOutTime = this.descFadeOutTime, // 淡出时间
      descNextTime = this.descNextTime // 下一个描述出现时间
    ) {
      let descElement = document.getElementsByClassName("description")[0];

      if (descElement) {
        // 非首页不触发
        descElement.style.fontSize = descFontSize;
        var span = document.createElement("span"); // 创建 | 的元素
        span.className = "typed";
        span.innerHTML = "|";
        var index = 0; // 为 desc 的长度服务
        var length = 0; // 为数组服务
        var description = descElement.innerText; // 先取默认值
        descElement.innerText = ""; // 清空 desc
        descElement.appendChild(document.createElement("span")); // 创建 desc 所在的新元素
        span && descElement.appendChild(span); // 添加 | 的元素
        // 初始化迭代
        this.fadeInInterval = setInterval(() => {
          fadeIn();
        }, descFadeInTime);
      } else {
        let hero = document.getElementsByClassName("hero")[0];
        descElement = document.createElement("p");
        descElement && (descElement.className = "description");
        descElement && hero.appendChild(descElement);
      }
      // 淡入回调
      let fadeIn = () => {
        if (descElement) {
          span.style.animation = "none"; // 淡入时，| 光标不允许闪烁
          if (desc instanceof Array && desc.length > 0) {
            // 如果是 themeConfig 传来的数组
            description = desc[length];
          }
          descElement.firstChild.innerText = description.substring(0, index++);
          if (index > description.length) {
            clearInterval(this.fadeInInterval);
            span.style.animation = "typedBlink 1s infinite"; // 淡入结束，| 光标允许闪烁
            setTimeout(() => {
              this.fadeOutInterval = setInterval(() => {
                fadeOut();
              }, descFadeOutTime);
            }, descNextTime);
          }
        }
      };
      // 淡出回调
      let fadeOut = () => {
        if (index >= 0) {
          span.style.animation = "none"; // 淡出时，| 光标不允许闪烁
          descElement.firstChild.innerText = description.substring(0, index--);
        } else {
          clearInterval(this.fadeOutInterval);
          span.style.animation = "typedBlink 1s infinite"; // 淡出结束，| 光标允许闪烁
          setTimeout(() => {
            length++;
            if (length >= desc.length) {
              length = 0; // desc 展示完，重新开始计数
            }
            this.fadeInInterval = setInterval(() => {
              fadeIn();
            }, descFadeInTime);
          }, descNextTime);
        }
      };
    },
    // 气泡效果
    canvasBubble(bubbleNum = this.bubbleNum) {
      var canvas = document.getElementById("canvas");
      var cxt = canvas.getContext("2d");
      function Dot() {
        this.alive = true;
        this.x = Math.round(Math.random() * canvas.width);
        this.y = Math.round(Math.random() * canvas.height);
        this.diameter = Math.random() * 10.8;
        this.ColorData = {
          Red: Math.round(Math.random() * 255),
          Green: Math.round(Math.random() * 255),
          Blue: Math.round(Math.random() * 255),
        };
        this.alpha = 0.5;
        this.color =
          "rgba(" +
          this.ColorData.Red +
          ", " +
          this.ColorData.Green +
          "," +
          this.ColorData.Blue +
          "," +
          this.alpha +
          ")";
        this.velocity = {
          x: Math.round(Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.7,
          y: Math.round(Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.7,
        };
      }
      Dot.prototype = {
        Draw: function () {
          cxt.fillStyle = this.color;
          cxt.beginPath();
          cxt.arc(this.x, this.y, this.diameter, 0, Math.PI * 2, false);
          cxt.fill();
        },
        Update: function () {
          if (this.alpha < 0.8) {
            this.alpha += 0.01;
            this.color =
              "rgba(" +
              this.ColorData.Red +
              ", " +
              this.ColorData.Green +
              "," +
              this.ColorData.Blue +
              "," +
              this.alpha +
              ")";
          }
          this.x += this.velocity.x;
          this.y += this.velocity.y;
          if (
            this.x > canvas.width + 5 ||
            this.x < 0 - 5 ||
            this.y > canvas.height + 5 ||
            this.y < 0 - 5
          ) {
            this.alive = false;
          }
        },
      };
      var Event = {
        rArray: [],
        Init: function () {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
          for (var x = 0; x < bubbleNum; x++) {
            this.rArray.push(new Dot());
          }
          this.Update();
        },
        Draw: function () {
          cxt.clearRect(0, 0, canvas.width, canvas.height);
          this.rArray.forEach(function (dot) {
            dot.Draw();
          });
        },
        Update: function () {
          if (Event.rArray.length < bubbleNum) {
            for (var x = Event.rArray.length; x < bubbleNum; x++) {
              Event.rArray.push(new Dot());
            }
          }
          Event.rArray.forEach(function (dot) {
            dot.Update();
          });
          Event.rArray = Event.rArray.filter(function (dot) {
            return dot.alive;
          });
          Event.Draw();
          requestAnimationFrame(Event.Update);
        },
      };
      window.onresize = function () {
        Event.rArray = [];
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      };
      Event.Init();
    },
  },
  // 防止重写编译时，导致定时器叠加问题
  beforeMount() {
    clearInterval(this.fadeInInterval);
    clearInterval(this.fadeOutInterval);
  },
  beforeDestroy() {
    clearInterval(this.fadeInInterval);
    clearInterval(this.fadeOutInterval);
  },
};
/**
 * 添加消息提示
 * content：内容
 * type：弹窗类型（tip、success、warning、danger）
 * startHeight：第一个弹窗的高度，默认 50
 * dieTime：弹窗消失时间（毫秒），默认 3000 毫秒
 *
 * 在 head 里添加图标 link 地址：https://at.alicdn.com/t/font_3114978_qe0b39no76.css
 */
function addTip(content, type, startHeight = 50, dieTime = 3000) {
  var tip = document.querySelectorAll(".global-tip");
  var time = new Date().getTime();
  // 获取最后消息提示元素的高度
  var top = tip.length == 0 ? 0 : tip[tip.length - 1].getAttribute("data-top");
  // 如果产生两个以上的消息提示，则出现在上一个提示的下面，即高度添加，否则默认 50
  var lastTop =
    parseInt(top) +
    (tip.length != 0 ? tip[tip.length - 1].offsetHeight + 17 : startHeight);

  let div = document.createElement("div");
  div.className = `global-tip tip-${type} ${time}`;
  div.style.top = parseInt(top) + "px";
  div.setAttribute("data-top", lastTop);
  if (type == "info" || type == 1) {
    div.innerHTML = `<i class="iconfont icon-info icon"></i><p class="tip-info-content">${content}</p>`;
  } else if (type == "success" || type == 2) {
    div.innerHTML = `<i class="iconfont icon-dagouyouquan icon"></i><p class="tip-success-content">${content}</p>`;
  } else if (type == "danger" || type == 3) {
    div.innerHTML = `<i class="iconfont icon-cuowu icon"></i><p class="tip-danger-content">${content}</p>`;
  } else if (type == "warning" || type == 4) {
    div.innerHTML = `<i class="iconfont icon-gantanhao icon"></i><p class="tip-warning-content">${content}</p>`;
  }
  document.body.appendChild(div);

  let timeTip = document.getElementsByClassName(time)[0];
  setTimeout(() => {
    timeTip.style.top = parseInt(lastTop) + "px";
    timeTip.style.opacity = "1";
  }, 10);

  // 消息提示 dieTime 秒后隐藏并被删除
  setTimeout(() => {
    timeTip.style.top = "0px";
    timeTip.style.opacity = "0";

    // 下面的所有元素回到各自曾经的出发点
    var allTipElement = nextAllTipElement(timeTip);
    for (let i = 0; i < allTipElement.length; i++) {
      var next = allTipElement[i];
      var top =
        parseInt(next.getAttribute("data-top")) - next.offsetHeight - 17;
      next.setAttribute("data-top", top);
      next.style.top = top + "px";
    }
    setTimeout(() => {
      timeTip.remove();
    }, 500);
  }, dieTime);
}
/**
 * 获取后面的兄弟元素
 */
function nextAllTipElement(elem) {
  var r = [];
  var n = elem;
  for (; n; n = n.nextSibling) {
    if (n.nodeType === 1 && n !== elem) {
      r.push(n);
    }
  }
  return r;
}
</script>

<style>
/* 图片大小 */
.vdoing-index-class .home-wrapper .banner {
  margin-top: 0 !important;
  height: 100vh;
  background-attachment: fixed !important;
}

/* 图片中间的签名和标题位置 */
.banner-conent {
  margin-top: 23vh !important;
}

/* 下面是配合 js 用的 class 样式 */
.vdoing-index-class .navbar1 {
  background-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.vdoing-index-class .nav-links1>.nav-item>a,
/* 没有二级导航的一级导航 */
.vdoing-index-class .nav-links1>a,
/* GitHub */
.vdoing-index-class .nav-links1 .dropdown-title a:hover,
/* 鼠标悬停 */
.vdoing-index-class .nav-links1 .title,
/* 不能跳转的一级导航 */
.vdoing-index-class .nav-links1 .dropdown-title>.link-title,
/* 能跳转的一级导航 */
.vdoing-index-class .site-name1

/* 左侧的名字 */ {
  color: #fff !important;
}

/* 页脚的颜色 */
.vdoing-index-class .footer {
  color: #fff;
}

.vdoing-index-class .search-box1 input {
  border-color: #fff;
  color: #fff;
}

/* 下面是箭头相关的样式 */
.banner-arrow {
  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: 15%;
  margin-left: -10px;
  cursor: pointer;
  z-index: 999;
}

@-webkit-keyframes bounce-in {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  80% {
    transform: translateY(0);
  }

  to {
    transform: translateY(0);
  }
}

.banner-arrow::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;
}

.banner-arrow::after {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  transform: rotate(135deg);
}

/* 描述淡入淡出元素 */
.description {
  display: inline-block;
}

.typed {
  opacity: 1;
}

/* 随时间变化的背景色元素 */
.vdoing-index-class .banner-color {
  width: 100%;
  min-height: 450px;
  overflow: hidden;
  margin-top: 0;
  height: 100vh;
  position: absolute;
  top: 0;
}

/* 气泡效果的画布元素 */
#canvas {
  position: absolute;
  top: 0;
}

/* 切换第二页，继续打开 banner */
.hide-banner {
  display: block !important;
}

/* 提示框元素 */
.global-tip {
  position: fixed;
  display: flex;
  top: -10px;
  left: 50%;
  opacity: 0;
  min-width: 320px;
  transform: translateX(-50%);
  transition: opacity 0.3s linear, top 0.4s, transform 0.4s;
  z-index: 99999;
  padding: 15px 15px 15px 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  grid-row: 1;
  line-height: 17px;
}

.global-tip p {
  line-height: 17px;
  margin: 0;
  font-size: 14px;
}

.icon {
  margin-right: 10px;
  line-height: 17px;
}

.tip-success {
  color: #67c23a;
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}

.tip-success .tip-success-content {
  color: #67c23a;
}

.tip-danger {
  color: #f56c6c;
  background-color: #fef0f0;
  border-color: #fde2e2;
}

.tip-danger .tip-danger-content {
  color: #f56c6c;
}

.tip-info {
  background-color: #edf2fc;
  border-color: #ebeef5;
}

.tip-info .tip-info-content {
  color: #909399;
}

.tip-warning {
  color: #e6a23c;
  background-color: #fdf6ec;
  border-color: #faecd8;
}

.tip-warning .tip-warning-content {
  margin: 0;
  color: #e6a23c;
  line-height: 21px;
  font-size: 14px;
}

@keyframes typedBlink {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
</style>

注释已经有说明，但是有几个配置建议在 themeConfig 中配置（往下看），其他随意。

组件注册

图片添加

图片的添加有两种（可二选一，可都选：效果叠加）：

• banner 图片，即仅仅开启首页的大图效果，离开大图后的背景是其他颜色（主题默认灰白色）

  打开 docs/index.md 文档，首先在 frontmatter 添加一个自定义类和自己的图片路径：

  ---
  pageClass: vdoing-index-class
  bannerBg: /img/index/bg.jpg  # 你的图片路径(必须位于 public 下)，可以是 URL
  ---
  

• 全背景图，即 首页大图 + 全背景图（我的博客使用这种方式）

  首先在 docs/index.md 中注释掉上方的 bannerBg，但是 pageClass 要保留（这是识别首页的 class），打开 docs/.vuepress/config.js（新版是 config.ts）文件，在 themeConfig 中添加如下代码：

  bodyBgImg: /img/index/bg.jpg,  // 你的图片路径(必须位于 public 下)，可以是 URL
  bodyBgImgOpacity: 1, // body 背景图透明度，选值 0 ~ 1.0, 默认0.5
  

  如果 bodyBgImg 是数组，则每隔 15 秒切换一次图片，具体介绍请看官网，点击直达 (opens new window)。

  注意 bodyBgImg 和 bodyBgImgOpacity 放在 themeConfig 里，否则不生效。

组件添加

回到 docs/index.md 文档，滑到文档的最下方，添加组件：

<ClientOnly>
  <IndexBigImg />
</ClientOnly>

<ClientOnly> 大部分情况下可加可不加，少部分情况的官方介绍：https://v2.vuepress.vuejs.org/zh/reference/components.html#clientonly。

确保 pageClass: vdoing-index-class 被添加到 docs/index.md 的 frontmatter 中。

打开 docs/.vuepress/config.js（新版 config.ts）文件，在 themeConfig 模块里添加如下代码（这是我的配置）：

indexImg: {
  navColor: 2,    // 导航栏左侧名字、中间搜索框、右侧字体的颜色，1 是黑色，2 是白色。默认是 1
  switchNavColor: true,    // 页面移出大图片的位置后，navColor 是否变换，如由白色变黑色，黑色变白色。默认是 false
  // 因为本主题的默认背景色偏向白色，如果 navColor 是 2，建议需要开启(true)，否则白背景 + 白字体 = 看不见
  bgTimeColor: true,     // 是否开启图片的背景色随一天的不同时间而变化，并且开启时间窗口提示，默认是 false。时间分为四种：白天（原图）、黄昏（偏黄）、晚上（偏黑）、深夜（偏深黑）
  bgTimeColorArray: ['transparent', 'rgba(255, 148, 48, .2)', 'rgba(0, 0, 0, .3)', 'rgba(0, 0, 0, .5)'],   // 第一个是白天的颜色（默认原图），第二个是黄昏的颜色，第三个是晚上的颜色，第四个是深夜的颜色。bgTimeColor 为 true 生效。提示：如果不想要这个效果，但是又想要时间窗口提示效果，则改为 ['transparent', 'transparent', 'transparent', 'transparent']
  descFade: true,   // 是否开启图片中间描述的淡入效果，默认为 false
  desc: ["Web前端技术博客，积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu", "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt", "这一生波澜壮阔或是不惊都没问题 —— 来自 Weibw"],  // 多个描述，如果填写则覆盖 config.js 的 description，不填写默认读取 config.js 的 description，descFade 为 true 生效
  descFontSize: '1.4rem',   // desc 的字体大小，默认 1.4rem。提示：原主题是 1.1rem
  descFadeInTime: 200,  // 描述的淡入效果持续时间，descFade 为 true 生效，默认 200 毫秒
  descFadeOutTime: 100,  // 描述的淡出效果持续时间，descFade 为 true 生效，默认 100 毫秒
  descNextTime: 800,  // 当存在多个 desc 时，一个 desc 展示完后或准备开始时，多少秒后出现下一个 desc，默认 800 毫秒
  bubble: true,    // 是否开启图片的气泡效果，默认为 false
  bubblePosition: 0,  // 气泡效果的位置，范围：0-100，不同数值代表不同的起始位置，0是整个图片，50是半张图（一半的下方）。bubble 为 true 生效。默认是 0
  bubbleNum: 200,   // 气泡的个数，bubble 为 true 生效，默认 200 个
},

属性说明

导航栏配置

navColor

• 类型：number
• 默认值：1

导航栏左侧名字、中间搜索框、右侧字体颜色，1 是黑色，2 是白色，默认是 1。

switchNavColor

• 类型：boolean
• 默认值：false

页面移出大图片的位置后，navColor 是否变换，如由白色变黑色，黑色变白色，默认是 false。

提示：因为本主题的默认背景色偏向白色，如果 navColor 是 2，建议需要开启(true)，否则白背景 + 白字体 = 看不见。

背景图配置

bgTimeColor

• 类型：boolean
• 默认值：false

是否开启图片的背景色随一天的时间而变化，是否开启图片的背景色随一天的不同时间而变化，并且开启时间窗口提示，默认是 false。时间分为四种：白天（原图）、黄昏（偏黄）、晚上（偏黑）、深夜（偏深黑）。

并且开启首次进入首页后的时间提示。

bgTimeColorArray

• 类型：Array
• 默认值：['transparent', 'rgba(255, 148, 48, .2)', 'rgba(0, 0, 0, .3)', 'rgba(0, 0, 0, .5)']

数组的第一个是白天的颜色（默认原图），第二个是黄昏的颜色，第三个是晚上的颜色，第四个是深夜的颜色。bgTimeColor 为 true 生效。

提示：如果不想要图片的背景色随一天的时间而变化效果，但是又想要时间窗口提示效果，则改为 ['transparent', 'transparent', 'transparent', 'transparent']

desc淡入淡出配置

descFade

• 类型：boolean
• 默认值：false

是否开启图片中间描述的淡入效果，默认为 false。

desc

• 类型：Array
• 默认值：[]

多条描述，如果填写则覆盖 index.md 的 tagline，不填写则默认读取 index.md 的 tagline，descFade 为 true 生效。

descFontSize

• 类型：string
• 默认值：1.4rem

desc 的字体大小，默认 1.4rem。提示：原主题是 1.1rem。

descFadeInTime

• 类型：number
• 默认值：200(ms)

图片中间描述的淡入效果持续时间，descFade 为 true 生效，默认 200 毫秒。

descFadeOutTime

• 类型：number
• 默认值：100(ms)

描述的淡出效果持续时间，descFade 为 true 生效，默认 100 毫秒。

descNextTime

• 类型：number
• 默认值：800(ms)

当存在多个 desc 时，一个 desc 展示完后或准备开始时，多少时间后出现下一个 desc，默认 800 毫秒。

气泡配置

bubble

• 类型：boolean
• 默认值：false

是否开启图片的气泡效果，默认为 false。

bubblePosition

• 类型：number

• 默认值：0

• 范围：0 - 100

气泡效果的位置，范围：0 - 100，不同数值代表不同的起始位置，0 是整个图片，50 是半张图（一半的下方）。bubble 为 true 生效，默认是 0。

bubbleNum

• 类型：number
• 默认值：200

气泡的个数，默认 200 个。

额外动态大图

上面的所有配置是属于 静态大图效果，如果你喜欢我的 动态 首页背景图：全背景、颜色随时间变化、日历显示当天、时间同步当前、播放音乐有音谱 ...（可能时间久远，我也许换背景图了🤣）

静态资源获取

首先需要下载一些需要用到的图片，总共 1.47MB（如果你觉得 1.47MB 太大，可以进行图片压缩）。点击前往下载地址 (opens new window)，找到 fantasy.rar 压缩包并下载。

下载后将其解压到 public 目录下，解压后的文件夹叫 fantasy，不是请改名。如图：

组件配置

在 docs/.vuepress/components 目录中创建 Fantasy.vue 组件，如果没有 components 文件夹，则请创建。

提示：代码块里的图片路径我已经配置好，获取的是 public 根目录下的 fantasy 文件夹下的图片，如果你更改了路径，则下方代码块也要改路径。

添加如下内容：

<template>
  <div class="fantasy">
    <canvas id="cvs" class="hidden" width="1980" height="1080"></canvas>
    <canvas id="screenImage" class="hidden" width="234" height="357"></canvas>
    <canvas id="rili" class="hidden" width="600" height="600"></canvas>
    <canvas id="display"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    // 只有一个 fantasy 元素，防止重复加载多个图片
    if (document.getElementsByClassName("fantasy").length == 1) {
      // 如果使用 IndexBigImg.vue，则去掉该组件提供的时间罩
      this.clearBannerColor();
      // 如果是在首页注册该组件，则挂载到正确的位置
      if (this.$attrs.index) {
        this.mountedElement();
      }
      this.init();
    }
  },
  methods: { 
    init() {
      var cvs = document.getElementById("cvs");
      if (!cvs) {
        return;
      }
      var ctx = cvs.getContext("2d");

      var display = document.getElementById("display");
      var displayCtx = display.getContext("2d");

      var screenImage = document.getElementById("screenImage");
      var screenImageCtx = screenImage.getContext("2d");

      var rili = document.getElementById("rili");
      var riliCtx = rili.getContext("2d");

      var songInfo = {};
      var AllTimeBak = 0;
      var NowBak = 0;
      var DrawWarning = false;
      var EnMonth = false;

      // 出处：https://blog.csdn.net/u012601195/article/details/47860617
      function drawRili() {
        riliCtx.clearRect(0, 0, 600, 600);
        var date = new Date();
        var year = date.getYear();
        var mouth = date.getMonth();
        var today = date.getDate();
        var week = date.getDay();

        var cardSize = 40;

        var array_three = [4, 6, 9, 11];
        var array_threeone = [1, 3, 5, 7, 8, 10, 12];
        var array_week = ["SUN", "MON", "TUES", "WED", "THUR", "FRI", "SAT"];

        var firstDraw; //1号绘制位置
        var wIdx = (today - 1) % 7;

        if (week >= wIdx) {
          firstDraw = week - wIdx;
        } else {
          firstDraw = week - wIdx + 7;
        }

        var dayIndex = 1;
        var countDay = 30;

        if (array_three.indexOf(mouth + 1) > -1) {
          countDay = 30;
        } else if (array_threeone.indexOf(mouth + 1) > -1) {
          countDay = 31;
        } else {
          if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0)
            countDay = 29;
          else countDay = 28;
        }

        var row = 6;
        // if (7 - firstDraw + 7 * 4 < countDay) { //确定表格行数，防止日期绘制不全
        //     row = 7;
        //}

        function drawTodaybg(i, j) {
          riliCtx.save();

          riliCtx.beginPath();
          riliCtx.strokeStyle = "#900";
          riliCtx.arc(
            45 + i * cardSize * 1.7 + cardSize / 1.18,
            50 + j * cardSize + cardSize / 2,
            cardSize / 2 - 10,
            -Math.PI,
            Math.PI * 1
          );
          riliCtx.stroke();
          riliCtx.closePath();

          riliCtx.beginPath();
          riliCtx.arc(
            45 + i * cardSize * 1.7 + cardSize / 1.18,
            50 + j * cardSize + cardSize / 2,
            cardSize / 2 - 9,
            -Math.PI,
            Math.PI * 0.9
          );
          riliCtx.stroke();
          riliCtx.closePath();

          riliCtx.beginPath();
          riliCtx.arc(
            45 + i * cardSize * 1.7 + cardSize / 1.18,
            50 + j * cardSize + cardSize / 2,
            cardSize / 2 - 8,
            -Math.PI,
            Math.PI * 0.8
          );
          riliCtx.stroke();
          riliCtx.closePath();

          riliCtx.beginPath();
          riliCtx.arc(
            45 + i * cardSize * 1.7 + cardSize / 1.18,
            50 + j * cardSize + cardSize / 2,
            cardSize / 2 - 7,
            -Math.PI,
            Math.PI * 0.7
          );
          riliCtx.stroke();
          riliCtx.closePath();

          riliCtx.beginPath();
          riliCtx.arc(
            45 + i * cardSize * 1.7 + cardSize / 1.18,
            50 + j * cardSize + cardSize / 2,
            cardSize / 2 - 6,
            -Math.PI,
            Math.PI * 0.6
          );
          riliCtx.stroke();
          riliCtx.closePath();

          riliCtx.restore();
        }

        var isNum = /^\d+(\d+)?$/;

        function drawDate(txt, i, j) {
          riliCtx.textAlign = "center";
          riliCtx.fillStyle = "rgb(69,68,84)";
          riliCtx.font = cardSize / 1.5 + "px Impact";
          var yOffest = 3;

          if ((j == 0 || j == 6) && isNum.test(txt)) {
            riliCtx.fillStyle = "#900";
          }

          riliCtx.fillText(
            txt.toString(),
            45 + j * cardSize * 1.7 + cardSize / 1.18,
            50 + i * cardSize + (cardSize / 3) * 2 + yOffest
          );

          if (txt == today) {
            drawTodaybg(j, i);
          }
        }

        riliCtx.fillStyle = "rgb(69,68,84)";
        riliCtx.font = "900 26pt SimHei";
        riliCtx.textAlign = "center";
        var monthCN = [
          "一",
          "二",
          "三",
          "四",
          "五",
          "六",
          "七",
          "八",
          "九",
          "十",
          "十一",
          "十二",
        ];
        var monthEN = [
          " January",
          "February",
          "  March",
          "  April",
          "   May",
          "  June",
          "  July",
          " August",
          "September",
          " October",
          "November",
          " December",
        ];

        if (EnMonth) {
          riliCtx.scale(1.1, 1);
          riliCtx.fillText(monthEN[mouth], 245, 32);
          riliCtx.resetTransform();
        } else {
          riliCtx.scale(1.1, 1);
          riliCtx.fillText(monthCN[mouth] + "月", 260, 32);
          riliCtx.resetTransform();

          riliCtx.font = "20pt SimHei";
          riliCtx.textAlign = "end";
          riliCtx.fillText(today + "日", 520, 38);
        }

        for (var i = 0; i < row; i++) {
          for (var j = 0; j < 7; j++) {
            riliCtx.strokeRect(
              45 + j * cardSize * 1.7,
              50 + i * cardSize,
              cardSize * 1.7,
              cardSize
            );
          }
        }

        dayIndex = 1;

        for (var i = 0; i < row; i++) {
          //开始绘制日期数
          for (var j = 0; j < 7; j++) {
            if (i == 0) {
              //表格第一行绘制星期
              drawDate(array_week[j], i, j);
              continue;
            }

            if (i == 1 && j < firstDraw) {
              //确定1号绘制位置
              continue;
            }

            if (dayIndex > countDay) {
              //只绘制月份的天数
              break;
            }

            drawDate(dayIndex++, i, j);
          }
        }
      }

      var riliInterval = setInterval(drawRili, 3600000);
      drawRili();

      // Canvas奇妙的剪切蒙版实现
      var screenMask = new Image();
      screenMask.src = "/fantasy/Screenmask.png";

      var screen = new Image();
      screen.src = "/fantasy/screen.png";

      var iv = setInterval(() => {
        if (screen.complete && screenMask.complete) {
          // 可以切换图片的位置，也可以换成自己的图片
          screenImageCtx.drawImage(screen, -300, -50, 1280, 720);
          screenImageCtx.globalCompositeOperation = "destination-atop";
          screenImageCtx.drawImage(screenMask, 0, 0);
          screenImageCtx.globalCompositeOperation = "source-over";
          clearInterval(iv);
        }
      }, 14);

      // 奇妙的屏幕大小自适应
      window.onresize = function () {
        display.width = window.innerWidth;
        if (window.innerWidth / window.innerHeight > 1.8333333333333) {
          display.height = (window.innerWidth / 1980) * 1080;
          // window.scrollTo(0, (window.innerHeight - 123) / 16);
        } else {
          display.height = window.innerHeight;
        }
      };

      window.onresize();

      // 加载图片
      var bg = new Image();
      bg.src = "/fantasy/bg.png";

      var mask = new Image();
      mask.src = "/fantasy/mask.png";

      var light = new Image();
      light.src = "/fantasy/light.png";

      var caidai = new Image();
      caidai.src = "/fantasy/caidai.png";

      var two = new Image();
      two.src = "/fantasy/22.png";

      var screenLight = new Image();
      screenLight.src = "/fantasy/screenLight.png";

      var phoneLight = new Image();
      phoneLight.src = "/fantasy/phoneLight.png";

      var phoneText = JSON.parse(
        '[{"time":0,"text":"凌晨啦!"},{"time":6,"text":"早上好!"},{"time":8,"text":"上午好!"},{"time":11,"text":"你吃了吗"},{"time":13,"text":"下午好鸭!"},{"time":16,"text":"傍晚咯!"},{"time":19,"text":"晚安!"}]'
      );

      var noRili = false;
      var updateSongInfoHandler = -1;

      var data = new Array(128);
      var animData = new Array(128);
      var SoundPlaying = false;

      // 奇妙的初始化
      for (var i = 0; i < 128; i++) {
        data[i] = animData[i] = 0;
      }

      // 奇妙的Normalize
      var peakValue = 1;
      if (window.wallpaperRegisterAudioListener) {
        window.wallpaperRegisterAudioListener(function (audioData) {
          var max = 0;

          for (var i = 0; i < 128; i++) {
            if (audioData[i] > max) max = audioData[i];
          }

          peakValue = peakValue * 0.99 + max * 0.01;

          for (i = 0; i < 64; i++) {
            data[63 - i] = audioData[i] / peakValue;
          }

          for (i = 0; i < 64; i++) {
            data[127 - i] = audioData[127 - i];
          }
        });
      } else {
        var iva;
        let audio = document.getElementsByClassName("aplayer-button")[0];
        if (audio) {
          audio.onclick = () => {
            let play = document.getElementsByClassName("aplayer-play")[0];
            if (play) {
              iva = setInterval(() => {
                for (i = 0; i < 64; i++) {
                  peakValue = peakValue * 0.99 + 1 * 0.01;
                  data[63 - i] =
                    ((Math.random() * 0.4) / peakValue) * Math.random();
                }
                for (i = 0; i < 64; i++) {
                  data[127 - i] = Math.random() * 0.2 * Math.random();
                }
                // for (var i = 0; i < 128; i++) {
                //     data[i] = Math.random();
                // }
              }, 130);
            } else {
              clearInterval(iva);
              for (var i = 0; i < 128; i++) {
                data[i] = animData[i] = 0;
              }
            }
          };
        }
      }

      // ....
      function min(a, b) {
        return a > b ? b : a;
      }

      function max(a, b) {
        return a > b ? a : b;
      }

      // 奇妙的颜色变化
      var targetColor = { r: 80, g: 120, b: 169 };
      var currentColor = { r: 80, g: 120, b: 169 };
      var lightColor = { r: 0, g: 34, b: 77, a: 0 };

      function colorToRgb(color) {
        return (
          "rgb(" +
          color.r.toString() +
          "," +
          color.g.toString() +
          "," +
          color.b.toString() +
          ")"
        );
      }

      function colorToRgba(colorWithA) {
        return (
          "rgba(" +
          colorWithA.r.toString() +
          "," +
          colorWithA.g.toString() +
          "," +
          colorWithA.b.toString() +
          "," +
          colorWithA.a.toString() +
          ")"
        );
      }

      var night = false;
      var debug = false;

      // Canvas的奇妙冒险!
      function render() {
        for (var i = 0; i < 128; i++) {
          animData[i] += (data[i] - animData[i]) * 0.3;
          animData[i] = min(animData[i], 1);
        }

        currentColor.r += (targetColor.r - currentColor.r) * 0.01;
        currentColor.r = min(currentColor.r, 255);
        currentColor.r = max(currentColor.r, 0);

        currentColor.g += (targetColor.g - currentColor.g) * 0.01;
        currentColor.g = min(currentColor.g, 255);
        currentColor.g = max(currentColor.g, 0);

        currentColor.b += (targetColor.b - currentColor.b) * 0.01;
        currentColor.b = min(currentColor.b, 255);
        currentColor.b = max(currentColor.b, 0);

        ctx.clearRect(0, 0, 1980, 1080);
        ctx.drawImage(bg, 0, 0);
        ctx.drawImage(mask, 954, 99);

        ctx.fillStyle = "#97adbb"; // 时间的颜色
        ctx.font = "32pt Impact";

        ctx.transform(1, 2.05 * (Math.PI / 180), 0, 1, 0, 0);

        var time = new Date();
        ctx.fillText(
          (time.getHours() < 10 ? "0" : "") +
            time.getHours().toString() +
            ":" +
            (time.getMinutes() < 10 ? "0" : "") +
            time.getMinutes() +
            ":" +
            (time.getSeconds() < 10 ? "0" : "") +
            time.getSeconds().toString(),
          725,
          318
        );
        ctx.resetTransform();

        // 日历本
        ctx.transform(0.9645, 0, 0 * (Math.PI / 180), 0.96, 967, 100);
        ctx.rotate(6 * (Math.PI / 180));

        if (!noRili) {
          ctx.drawImage(rili, 0, 0);

          ctx.resetTransform();

          ctx.transform(0.9645, 0, 9 * (Math.PI / 180), 1, 825, 160);
          ctx.rotate(7 * (Math.PI / 180));
        }

        targetColor = { r: 80, g: 120, b: 169 };

        if (night) {
          targetColor = { r: 255, g: 75, b: 80 };
        }

        if (!noRili) {
          ctx.fillStyle = "rgba(0,0,0,0.5)";
          ctx.fillRect(-10, 320, 650, 2);
        }

        ctx.fillStyle = colorToRgb(currentColor);

        if (!noRili) {
          for (var i = 32; i < 95; i++)
            ctx.fillRect(
              10 * (i - 32),
              20 + (300 - 300 * animData[i]),
              4,
              300 * animData[i]
            );
        } else
          for (var i = 32; i < 95; i++)
            ctx.fillRect(
              40 + 7.5 * (i - 32),
              30 + (300 - 300 * animData[i]),
              4,
              300 * animData[i]
            );

        ctx.resetTransform();

        ctx.globalCompositeOperation = "overlay";
        ctx.drawImage(light, 971, 197);
        ctx.globalCompositeOperation = "source-over";

        ctx.drawImage(caidai, 949, 25);
        ctx.drawImage(two, 1319, 345);

        // 夜间光照
        if (night && lightColor.a < 0.7) {
          lightColor.a += 0.005;
          lightColor.a = min(lightColor.a, 0.7);
        } else if (!night) {
          lightColor.a -= 0.005;
          lightColor.a = max(lightColor.a, 0.0);
        }

        if (lightColor.a > 0) {
          ctx.globalCompositeOperation = "hard-light";
          ctx.fillStyle = colorToRgba(lightColor);
          ctx.fillRect(0, 0, 1980, 1080);
          ctx.globalCompositeOperation = "source-over";

          ctx.globalAlpha = lightColor.a / 0.7;
          ctx.drawImage(phoneLight, 860, 437);
          ctx.globalAlpha = 1;
        }

        // 屏幕
        ctx.drawImage(screenImage, 0, 0);
        if (lightColor.a > 0) {
          ctx.globalAlpha = lightColor.a / 0.7;
          ctx.drawImage(screenLight, 0, 0);
          ctx.globalAlpha = 1;
        }

        night = true;
        var greeting = "凌晨啦!";

        phoneText.forEach((v) => {
          if (time.getHours() >= v.time) {
            greeting = v.text;
          }
        });

        if (time.getHours() >= 6 && time.getHours() <= 18) {
          night = false;
        }

        night = debug ? !night : night;

        // 手机
        ctx.fillStyle = "#000";
        ctx.font = "31.02pt SimHei";

        ctx.transform(
          1.0911,
          -35 * (Math.PI / 180),
          0,
          0.5868,
          1132.94,
          564.07
        );
        ctx.rotate(56.5 * (Math.PI / 180));
        ctx.textAlign = "center";
        ctx.fillStyle = "#fff";
        ctx.fillText(greeting, 135, 100);
        ctx.textAlign = "start";
        ctx.resetTransform();

        displayCtx.drawImage(cvs, 0, 0, display.width, display.height);
        window.requestAnimationFrame(render);
      }

      window.requestAnimationFrame(render);
    },
    // 针对首页挂载元素
    mountedElement() {
      let fantasy = document.getElementsByClassName("fantasy")[0];
      let banner = document.getElementsByClassName("banner")[0];
      // 去掉黑色栅格背景
      banner.style.background = "";
      fantasy && banner && banner.appendChild(fantasy);
    },
    clearBannerColor() {
      let bannerColor = document.getElementsByClassName("banner-color")[0];
      if (bannerColor) {
        bannerColor.parentNode.removeChild(bannerColor);
      }
    },
  },
};
</script>

<style>
.fantasy {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: -9;
}
.hidden {
  display: none;
}
#display {
  margin: auto;
}
/* 图片大小 */
.vdoing-index-class .home-wrapper .banner {
  margin-top: 0 !important;
  height: 100vh;
  background-attachment: fixed !important;
}
/* 图片中间的签名和标题位置 */
.banner-conent {
  margin-top: 23vh !important;
}
</style>

该大图左侧的电脑屏幕展示如下的图片（看页面左边），可以在 269 更换位置来截取自己喜欢的一角，或者换成自己喜欢的图片。

首页配置

如果你只想在首页配置该大图，不想在全局的背景使用（全局背景配置请看 全局配置），则打开 docs/index.md 文档，添加如下内容：

<ClientOnly>
  <Fantasy index="true" />
</ClientOnly>

此时你是没有导航栏的透明效果、标题下 desc 的淡入淡出（打印机）效果，这些效果我都放在了大图配置模块里，如果你没有配好大图模块，则从头阅读步骤开始，如果已经配好大图模块，则

<ClientOnly>
  <IndexBigImg />
  <Fantasy index="true" />
</ClientOnly>

Fantasy 组件的图片会覆盖 IndexBigImg 组件的图片，而 IndexBigImg 组件其他的样式和功能都会保留。

全局配置

当然你也可以像我一样不仅在首页配置，也在全局背景配置（2022.7.23），那么先把上面 首页配置 的 <Fantasy index="true" /> 注释或者去掉，然后在 docs/.vuepress/config.js（新版是 config.ts）的 plugins 中添加插件配置。

添加如下内容：

module.exports = {
    plugins: [
        {
            name: 'custom-plugins',
            globalUIComponents: ["Fantasy"]
        }
    ],
}

import { UserPlugins } from 'vuepress/config'
plugins: <UserPlugins>[
    [
    	{
        	name: 'custom-plugins',
        	globalUIComponents: ["Fantasy"]
    	}
    ]
]

最后记得重启项目。

如果不仅进行首页配置，也进行全局配置，那么以全局配置的为准，即全局配置会覆盖首页配置，所以你完全可以两个都配置，但是不建议这么做，而是建议注释掉其中一个配置以便日后进行切换。

我的建议

如果使用额外动态大图，则把 bgTimeColorArray 数组的内容都改为 transparent，如下：

indexImg: {
  // ......
  bgTimeColorArray: ['transparent', 'transparent', 'transparent', 'transparent'],   // 第一个是白天的颜色（默认原图），第二个是黄昏的颜色，第三个是晚上的颜色，第四个是深夜的颜色。bgTimeColor 为 true 生效
  // ......
}

因为额外动态大图自带该功能，不需要额外添加。

结束语

如果你还有疑惑，可以去我的 GitHub 仓库或者 Gitee 仓库查看源码。

• GitHub (opens new window)

• Gitee (opens new window)

如果你有更好的方式，评论区留言告诉我，或者加入 Vdoing 主题的 QQ 群：694387113。谢谢！