4.主题魔改说明
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 Hitokoto = defineAsyncComponent(() => import('./components/Hitokoto.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,
Hitokoto,
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);
}
}
}
// 让内容在更宽的屏幕上可以有更宽的显示区域,嗯,宽屏补丁。
: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';
}
- 0
- 0
- 0
- 0
- 0
- 0