ADK-Blog 基于Vue3 和Vite 的个人博客(网站)
本文已参与「新人创作礼」活动，一起开启掘金创作之路。
大家好，我是ADKCodeXD。
这篇文章呢，我主要是来介绍一下我的博客以及博客的技术点。
我的博客名叫ADK-Blog，是一款基于Vue3 + vite2 + pinia + typescript的自搭建博客，也是一款基于了二次元主题风格的博客，在此之前我在b站上有进行过投稿和介绍，如果有小伙伴在Bilibili上看到博客的介绍，那就是我本人XD。
其实写到现在 博客主要的功能和风格都与传统博客有挺大的区别了，可能已经成了我的一个实验性的个人网站了
目前我的博客已在公网上线，网站地址为:adkdream.top
并且在github上我进行了博客的开源:github.com/ADKcodeXD/M…
网站目前使用的是cloudflare的CDN，所以国内部分地区或者网络或许会卡顿
那么这篇文章呢，主要还是介绍一下我的博客的前端部分的实现和项目构成，以及水一个文章。
搭建经历
搭建个人网站的这个想法，其实在很久之前就已经存在了。谁又不想拥有一个属于自己的网站呢？当然，这里是个人网站而并不是博客，其实是因为我个人并不喜欢写文章写博客，我个人更多的是喜欢去弄一下比较有创造性的东西，同时也可能发点文章，总之，一个个人网站兼博客的想法就在我脑子里萌生了。
起初博客搭建在二月份，那时正值vue3成为默认版本，而且刚好我手上有一个java的博客的后台，于是修修改改，我就用vue3和java，简单的搭起了一个博客的网站，那个时候我的想法很简单，就是快速的把功能实现，也并没有考虑到各种维护性和扩展性。也没有去专门的进行设计，所以当时是很简陋的一个博客。
初版的欢迎界面
\
初版文章列表页面
同时，在快速实现以及做网站的过程中，我也引入了大量的依赖，例如three，以及各种乱七八糟的包。也并没有实现工程化，规范化。更不要说引入cicd自动化部署，eslint规范代码等。这也为我之后写网站埋下了许多的坑。\
基本没有组件化，一个公用组件的模板就有上百行
三月中旬之后，我的网站基本的功能都做好了，同时也是春招旺季，我开始去到处找工作，于是就搁置了网站的继续建设和部署，很多东西都保留在初始的阶段。
随着时间的推移，时间来到了五月下旬：
我被春招击倒了之后，开始漫无目的的找点事做，这时候我开始将之前的博客网站捡了起来，这时候我的目标从不断的新增功能改成了另一个模板：
重构代码，重构设计方案
现在的首页
\
文章列表等等
关于设计风格的问题，我是偏向了二次元的风格进行了设计，整体主要遵循一定的设计规则：例如3px的粗边框，圆角，粗字体等等。总而言之就是在一定的规则和基础上，进行了网站的重新设计。也重新制定了全局的less变量。
而代码方面，我对各个页面的代码都进行了一定程度的页面组件和公用组件的拆分，逻辑的拆分，样式的拆分。从而达到了整体易维护，组件化的目的。同时我引入了eslint以及自动部署的工作流，\
一个页面被我拆分为多个组件和样式文件
封装了多个公用的组件
一些公共逻辑被我抽取为hooks进行复用
同时，我为网站的seo以及项目的规范提交和nginx部署，以及cdn的使用都进行了相应的实现，也配置了redis等缓存，也可谓是从0到有的完全自己去进行了一个网站的部署和开发了~
关键功能点介绍
网站的换肤以及全局less变量的使用
网站主要有实现到一个换肤功能，这个功能呢是利用了全局less变量来进行实现的
在配置vite工程项目的时候，想必大家都会想到将一些css的class写到一个全局的less文件中，以方便全局的更改，利用这个原理，再加上css的变量，那么不难实现全局变量的自定义化。\
我这里将颜色的less变量都挂载到了root标签上，不过这并不能够实现动态的变化，想要动态的变化，那还得结合pinia来进行实现。
这里有一个setConfig的函数，这个函数主要是通过读取一个配置类，来将我们预设好的属性进行全局的更改。
/**
* 可以自适应的传入或者不传入 不传入则默认读取本地的配置
* 传入local 配置则保存本地
* @param config 一个GlobalConfig 或者不传
* @param local Boolean 默认为false 用于保存本地
*/
export const setConfig = (config: GlobalConfig | void, local = false) => {
if (!config) {
const localConfig = getItem('globalConfig');
if (!localConfig) {
setProperty(defaultConfig);
setItem('globalConfig', defaultConfig);
} else {
setProperty(localConfig);
}
} else {
setProperty(config);
if (local) {
// 如果不传 则不保存到本地
setItem('globalConfig', config);
}
}
};
在页面中 ，我是这么干的
let localConfig = reactive(getItem('globalConfig') as GlobalConfig);
const changeLink = link => {
localConfig.backGroundImg = link;
};
const saveLocal = () => {
ElMessage.success('保存到本地成功!');
setConfig(localConfig, true);
};
这里主要是更改全局的less变量，我们可以同时在store中，进行一个默认的getItem，那么每次进入网站，都会默认的去读取存放在localStorage中存放的config配置文件，这样就可以做到一个主题的配置和改动。如果有人想要了解详情的话，也可以看一下我的另一篇文章：
adkdream.top/article/153…
部分element-plus的二次封装和使用
对于一些ui库中的部分组件，我为了适应网站的风格，也做了组件库的二次封装，比如element-plus的image组件，对于一些组件，进行特定要求的二次封装是很有必要的\
预设了三张不同的加载失败图片
const props = defineProps({
/**
* 传入图片链接url
*/
img: {
type: String,
require: true
},
/**
* 加载失败要显示图片 默认是1:1的方形图 可选3:4 3:1 fang
*/
notFoundType: {
type: String,
default: 'fang'
},
/**
* 是否开启懒加载 默认开启懒加载
*/
isLazy: {
type: Boolean,
require: true
},
/**
* 可以节省图片加载资源
* 指定最大宽度和图片质量
* 默认几档 如果不传 则默认原图质量
*/
zip: {
type: Number,
default: 0
}
});
defineEmits(['load']);
这些适应自己需求的二次封装，可以加大自己的开发效率，并且让组件更加适应自己的业务或者网站。\
eslint + pretterrc 规范前端项目代码
在项目当中，规范的代码，和整洁的代码习惯，无疑是很重要的，在我认识到这一点时，我的代码已经成为了一般的屎山了。
在此之前，我对于eslint这个东西是敬而远之的，可能是因为他的无限报红，让我产生了退意吧。不过在进行配置和使用之后呢，这个东西还是相当的香的。配置上vite的eslint的插件，更是让项目开发减少了很多潜在的问题和错误
// 增加下面的配置项,这样在运行时就能检查eslint规范
eslintPlugin({
include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
})
useHead 动态页面中管理你的meta
在seo中，动态网页的meta是无法控制的，不过通过useHead，就可以让我们控制我们的meta请求头。
例如在文章详情页中，可以通过useHead来进行管理标题和作者的meta
useHead({
// Can be static or computed
title: computed(
() =>
`${
article.value?.articleName ? article.value.articleName : '文章详情'
} - ADKBlog-我的个人小站`
),
meta: [
{
name: `description`,
content: computed(() => (article.value?.summary ? article.value.summary : '描述'))
},
{
name: `author`,
content: computed(
() =>
`文章作者:${
article.value?.authorVo?.nickname ? article.value.authorVo.nickname : '作者名字'
}`
)
}
]
});
其他)
关于我的网站介绍可能并没有写的很多，不过大家如果感兴趣呢，可以去我的网站浏览一下并且留个言，其实主要的，和二次元有关的部分并没有过多提及。如果后续大家感兴趣，我可以新开一个文章给大家提提网站的一些功能的实现的讲解~
