Hyde Blog

主题

Hyde2025-03-04 19:07:052025-05-18 00:27:36VdoingVdoing
888
4.4m
Get...

配置壁纸风格 ​

提示

本文是在 博主One 文章：《博客壁纸风格更换》 基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~

配置 ​

  • 在docs\index.md中添加以下代码
md
bannerBg: /img/bg/bg5.webp # 背景图，长度是整个屏幕
  • 在docs\.vuepress\config\themeConfig.ts中注释以下代码
ts
// bodyBgImg: [
//   "/img/bg/bg1.webp",
//   "/img/bg/bg2.webp",
//   "/img/bg/bg3.webp",
//   "/img/bg/bg4.webp",
//   "/img/bg/bg5.webp",
//   "/img/bg/bg6.webp",
//   "/img/bg/bg7.webp",
//   "/img/bg/bg8.webp",
//   "/img/bg/bg9.webp",
//   "/img/bg/bg10.webp",
//   "/img/bg/bg11.webp",
//   "/img/bg/bg12.webp",
//   "/img/bg/bg13.webp",
//   "/img/bg/bg14.webp",
//   "/img/bg/bg15.webp",
//   "/img/bg/bg16.webp",
//   "/img/bg/bg17.webp",
//   "/img/bg/bg18.webp",
//   "/img/bg/bg19.webp",
//   "/img/bg/bg20.webp",
//   "/img/bg/bg21.webp",
// ],
  • 在docs\.vuepress\components\IndexBigImg.vue中添加以下代码
ts
data() {
    return {
    // 省略...
      fadeInInterval: "", // 淡入定时器
      fadeOutInterval: "", // 淡出定时器
      currentBgIndex: 0, // 当前背景图片索引
      bgInterval: null, // 背景图片轮播定时器
      bgImages: [ // 背景图片数组
        "/img/bg/bg1.webp",
        "/img/bg/bg2.webp",
        "/img/bg/bg3.webp",
        "/img/bg/bg4.webp",
        "/img/bg/bg5.webp",
        "/img/bg/bg6.webp",
        "/img/bg/bg7.webp",
        "/img/bg/bg8.webp",
        "/img/bg/bg9.webp",
        "/img/bg/bg10.webp",
        "/img/bg/bg11.webp",
        "/img/bg/bg12.webp",
        "/img/bg/bg13.webp",
        "/img/bg/bg14.webp",
        "/img/bg/bg15.webp",
        "/img/bg/bg16.webp",
        "/img/bg/bg17.webp",
        "/img/bg/bg18.webp",
        "/img/bg/bg19.webp",
        "/img/bg/bg20.webp",
        "/img/bg/bg21.webp",
      ],
      usedBgIndices: [], // 用于记录已经显示过的图片索引
      preloadedImages: {}, // 用于存储预加载的图片
    };
  },
ts
mounted() {
    // 省略..
    // 初始化背景图片轮播
    this.initBgRotation();
  },
ts
methods: {
    // 省略...
    preloadImage(url) {
      if (!this.preloadedImages[url]) {
        this.preloadedImages[url] = new Promise((resolve, reject) => {
          const img = new Image();
          img.onload = () => resolve(url);
          img.onerror = () => reject(url);
          img.src = url;
        });
      }
      return this.preloadedImages[url];
    },
    async setBannerBg(imgPath) {
      const banner = document.getElementsByClassName('banner')[0];
      if (banner) {
        // 预加载下一张图片
        try {
          await this.preloadImage(imgPath);
          banner.style.backgroundImage = `url(${imgPath})`;
        } catch (error) {
          console.error('Failed to load image:', error);
        }
      }
    },
    initBgRotation() {
      // 预加载所有图片
      this.bgImages.forEach(img => this.preloadImage(img));

      // 设置初始背景（随机选择）
      this.currentBgIndex = Math.floor(Math.random() * this.bgImages.length);
      this.usedBgIndices = [this.currentBgIndex];
      this.setBannerBg(this.bgImages[this.currentBgIndex]);

      // 设置定时器，每8秒随机切换一次背景
      this.bgInterval = setInterval(() => {
        let nextIndex;
        if (this.usedBgIndices.length >= this.bgImages.length) {
          this.usedBgIndices = [];
        }
        do {
          nextIndex = Math.floor(Math.random() * this.bgImages.length);
        } while (this.usedBgIndices.includes(nextIndex));

        this.currentBgIndex = nextIndex;
        this.usedBgIndices.push(nextIndex);
        this.setBannerBg(this.bgImages[this.currentBgIndex]);
      }, 8000);
    },
  },
  // 防止重写编译时，导致定时器叠加问题
  //   省略...
  beforeDestroy() {
    clearInterval(this.fadeInInterval);
    clearInterval(this.fadeOutInterval);
    // 组件销毁前清除定时器
    if (this.bgInterval) {
      clearInterval(this.bgInterval);
    }
  },

样式 ​

css
/* 图片大小 */
.vdoing-index-class .home-wrapper .banner {
  margin-top: 0 !important;
  height: 100vh;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center !important;
  transition: background-image 1s ease-in-out;
}

/* 添加一个伪元素来实现平滑过渡 */
.vdoing-index-class .home-wrapper .banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: -1;
}
css
/* 页脚的颜色 */
.vdoing-index-class .footer {
  color: #3399fe;
}

/* 链接的样式 */
.vdoing-index-class .footer a {
  color: #3399fe;
  /* 链接的默认颜色 */
  text-decoration: none;
  /* 避免链接的下划线样式 */
}

/* 首页鼠标悬浮在链接上时的颜色 */
.vdoing-index-class .footer a:hover {
  color: #5a9bf1;
  /* 悬浮时改变颜色 */
}
  • docs\.vuepress\styles\palette.styl也需要配置下
css
/* docs\.vuepress\common\footer.ts页脚样式 */
/* 页脚的颜色 */
.footer {
  color: #3399fe; /* 默认颜色 */
}

/* 链接的样式 */
.footer a {
  color: #3399fe; /* 链接的默认颜色 */
  text-decoration: none; /* 避免链接的下划线样式 */
}

/* 鼠标悬浮在链接上时的颜色 */
.footer a:hover {
  color: #5a9bf1; /* 悬浮时改变颜色 */
}

验证 ​

配置完成后，你可以启动 VuePress 开发服务器来查看效果

bash
pnpm docs:dev
最近更新