4.主题魔改说明

整个站站点的修改分为以下几个部分

插件式美化

src/.vuepress/client.ts

文件内容

import { defineClientConfig } from 'vuepress/client';
import { onMounted } from 'vue';
import { defineAsyncComponent } from 'vue';
import 'vuepress-theme-hope/presets/bounce-icon.scss'; // 为页面图标添加鼠标悬停的跳动效果。

const TopNavBeautify = defineAsyncComponent(() => import('./components/TopNavBeautify.vue'));
const HeroBG = defineAsyncComponent(() => import('./components/HeroBG.vue'));
// const HeroHitokoto = defineAsyncComponent(() => import('./components/HeroHitokoto.vue'));
const NavMusic = defineAsyncComponent(() => import('./components/NavMusic.vue'));
const PrintVersion = defineAsyncComponent(() => import('./components/PrintVersion.vue'));
const CommentHideBtn = defineAsyncComponent(() => import('./components/CommentHideBtn.vue'));
const MyIcon = defineAsyncComponent(() => import('./components/MyIcon.vue'));
const BlogBg = defineAsyncComponent(() => import('./components/BlogBg.vue'));
const BlogBeautify = defineAsyncComponent(() => import('./components/BlogBeautify.vue'));
const PreviewImage = defineAsyncComponent(() => import('./components/PreviewImage.vue'));
const HeroContent = defineAsyncComponent(() => import('./components/HeroContent.vue'));

export default defineClientConfig({
  enhance({ app, router, siteData }) {
    app.component('MyIcon', MyIcon);
  },
  setup() {
    onMounted(() => {});
  },
  rootComponents: [
    HeroContent,
    TopNavBeautify,
    HeroBG,
    // HeroHitokoto,
    NavMusic,
    PrintVersion,
    CommentHideBtn,
    BlogBeautify,
    BlogBg,
    PreviewImage,
    // ...
  ],
});

插件源码都在 Github 上，可以自行查看：
https://github.com/mo7cc/blog-source/tree/main/src/.vuepress/components

每个插件都代表了某一个部分的美化效果，每个插件都是可以单独使用的。

插件功能说明

TopNavBeautify : 顶部导航栏相关的美化。包括透明导航栏；侧边栏和导航栏一起上划隐藏，下划显示；简化搜索按钮；导航栏文字和图标颜色调整等。

HeroBG : 博客首页的背景美化，这里是请求了自己的 bing 壁纸 api，每日自动更新。

HeroHitokoto : 博客首页一言的美化，之前是会自动打字机切换，觉得挺烦的，就换成了现在的刷新更换。但是保留了打字机效果。

NavMusic : 导航栏最右侧的音乐按钮，点击之后显示全局的音乐播放器，是使用 APlayer 音乐插件自己封装的。实现思路就是使用 js 强行在导航栏插入一片区域用于放置播放器。

CommentHideBtn : 评论区的显示和隐藏按钮，默认是隐藏评论区的，当有留言需要的时候点击按钮显示评论区。

BlogBeautify : 做了一些相关的主题的细节美化，包括文章分割线小汽车等，基本全是 css 效果。使用 vue 插件实现着扩展方便。

BlogBg : 背景美化，让整个博客可以添加自定义的背景，让观感更加舒适。包括 sidebar 的毛玻璃效果等。还有内容部分的视觉优化。

每个插件都是覆盖式的，不会对主题原本造成任何影响。引入对应的组件，则效果就有，去除引用则效果消失。而且组件基本上都只在客户端生效，对原本的 SEO 以及编译过程没有任何影响，非侵入式的修改。主题无论如何更新迭代，都不会有什么影响，安全无公害，兼容性好。

插件的实现思路： 使用 css 覆盖主题原本的 css 效果。如果需要的 dom 结构主题没有，则采用 js 进插入，创造和修改。js 部分的修改全都是在原本的页面渲染完成之后异步进行的，所以仅仅只是观感上的修改而已，不会影响编译结果。

比如 一言插件 和 音乐插件 以及 背景插件，就是采用 js 异步创建 dom 实现的。

一些其余的效果

src/.vuepress/styles/index.scss 文件中

// place your custom styles here
.none {
  width: 0;
  height: 0;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
  display: none;
}

// 自定义的页脚
.vp-footer-wrapper {
  .vp-footer {
    display: flex;
  }

  .footer-icp {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    & > img {
      width: 14px;
      margin-right: 4px;
    }
  }
  .footer-about {
    padding: 2px 3px;
    border-radius: 3px;
    position: relative;
    color: #fff;
    &:hover {
      background-color: rgba($color: #0c7bf4, $alpha: 0.8);
    }
  }
}
// 隐藏首页的内容区域
.mo7-blog-home {
  .theme-hope-content {
    display: none;
  }
}

// 让内容在更宽的屏幕上可以有更宽的显示区域，嗯，宽屏补丁。
:root {
  --content-width: 830px;
}
@media screen and (min-width: 1770px) {
  :root {
    --content-width: calc(100vw - 15rem - 6rem - var(--sidebar-width) - 20rem);
  }
}

// 图片合组

.ImgGroup {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-content: baseline;
  width: 100%;
  figure {
    margin: 2px;
  }
}

// 字体
@font-face {
  font-family: 'mo7_font';
  src: url('/font/mo7_font.ttf');
}

.vp-blog-hero-title,
.vp-site-name {
  font-family: 'mo7_font';
}