【Vercel】教你部署imsyy／home个人主页

　　本篇博客教你如何部署一个自己的个人主页

　　项目地址：https://github.com/imsyy/home

　　本文首发于 慕雪的寒舍

　　首先我们点击fork，将仓库复刻到自己的账户

　　image-20230129110045979

　　随后进入vercel，点击

　　image-20230129105710157

　　选择你复刻的仓库

　　image-20230129105752537

　　然后什么都不用改，直接deploy

　　[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CzjxkSjZ-1682292147979)(null)]

　　等待部署成功，点击domains，在这里添加个你自己的域名+解析。否则vercel默认的域名无法直接访问

　　image-20230129105917245

　　到这里就已经部署成功了，可以不用管vercel了；

　　克隆下我们fork的仓库，接下来就是修改配置文件！

　　备注，env中已有的配置在这里不提

　　本地预览需要我们在本地安装好环境以及npm包管理器，随后安装yarn

　　安装完成后，进入项目所在文件夹，先执行安装依赖项。

　　如果下载依赖的时候卡在其中某一个了，可能是网络问题，可以尝试给npm/yarn的下载器配置镜像源【参考博客】

　　依赖项搞定了，用dev查看预览页面

　　注意，第一次查看预览页面的时候，加载会非常慢，这是正常情况

　　后续的修改，可以先在本地预览成功后，再部署到vercel

　　如果你想部署到云服务器，则使用

　　会生成一个文件夹，弄到云服务器上就可以了（不会用，没试过）

　　如果根据上面的步骤设置了解析后，还是出现访问缓慢甚至无法访问的问题，可以将域名的A或者cname解析更改为下面的国内访问较快的解析

　　[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BLs1OPnZ-1682292148024)(null)]

　　这里光是修改是不够的，因为作者暂时还没有写社交链接的判断，即便你把所有社交链接的环境变量都注释掉，他还是会显示出来

　　这里需要我们修改代码，不算难，一步一步来就行

　　打开这个文件，最顶部是包裹的一个

　　我们需要修改的就是这里面的代码

　　比如下面这一个包裹的就是tg的社交链接。如果你不需要，那就直接把它注释掉

　　根据上面这个模板的格式，我们可以新增自己需要的社交链接，比如我就新增了一个gitee的链接。需要修改的只有和里面的图标名字

　　这里的Icon图标都是从一个本地文件导入的，文件路径为

　　你可以在这里面搜索已有的图标名字，并回到社交链接的 文件，修改如图所示的代码，新增图标（必须要在这里新增， 再去html里面引用）

　　image-20230129110914215

　　最后，在TipData中新增一个点击会显示的文字，这里的id要和上面写的一样

　　在社交链接的地址里面，新增gitee的地址，参考已有的github的地址的写法

　　最后，还需要在鼠标移入移出事件中，新增一个case，照着已有的抄就行

　　最后的最后，回到环境变量，新增一个，填写你的gitee用户名

　　搞定啦！

　　[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XMcmjN46-1682292144643)(https://img.musnow.top/i/2023/02/2023bb64405854c6b13bed42cadd891f5636.png)]

　　如果一个图标在本地路径没有，可以试着用下面的办法导入一个本地图片，或者是图片url

　　本地图片的存储路径为

　　但是上面这样弄会有边距问题，可以看到gitee和qq之间的边距比右侧更短，暂时没找到解决办法

　　image-20230129122440630

　　嗨嗨嗨，经过半小时的折腾，我找到解决办法了。在本地中f12找到如下的代码，这里要做的就是看其他图标的代码是怎么写的

　　[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bVXV08kj-1682292148003)(null)]

　　这里能看到，他们都用了一个的，我们要做的，就是给这个img也加上一个

　　现在就OK了！

　　image-20230129125808923

　　作者写的版本是写死的，即便你的env里面没有那个社交链接，他还是会展示在主页上。我的需求就是如果env里面，那就不展示这个社交链接的图标

　　比如我个人的需求就不需要后面的3个，那就把环境变量设置为空，且自动不展示

　　这时候要做的就是修改代码，添加一个判断语句（我没学过前端，百度到的）

　　先在社交链接的文件里面，添加下面这个变量定义（可以理解为他就是一个类，通过的方式访问）

　　随后要做的，就是在最上面的里面添加一个判断语句（需要给每一项都添加，注意名字别搞混了）

　　这时候，就会自动判断这个环境变量是不是为空，如果为空那就不显示

　　image-20230130112314998

　　image-20230130112352368

　　完美达成目标！

　　可以把原本的改成使用，避免两个都是import，太长了不好看

　　https://github.com/imsyy/home/issues/49

　　如果你修改了站点首页的文字，会发现一部分文字没办法正常显示

　　image-20230129112006589

　　根据作者在issue里面提供的链接，下载了完整的字体文件

　　将其粘贴到以下路径，覆盖原本的字体文件

　　现在就Ok了

　　[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VIY61YsC-1682292144645)(https://img.musnow.top/i/2023/02/202353987c55bd2242d25a29c611c738e1b9.png)]

　　修改中的如下字段

　　将你自己的logo图标放到下即可。这里修改的是浏览器顶部的图标

　　主页图标的路径如下

　　里面有注释，找到字段修改即可

　　在环境变量中写明了配置网站的位置

　　首先是这里的图标，还是在老位置，找你需要的图标导入

　　随后网站链接就照着抄，起一个新的就可以了

　　建议链接不超过6个，不然就会变成下面这样

　　image-20230129113936262

　　在页脚配置网站用户和链接，修改如下字段

　　如果你的站点经过了备案，修改如下字段

　　如果没有备案，可以把这部分注释掉

　　这部分可能有老哥不太清楚，我顺便说一下吧!

　　在环境变量里面，修改最底部的播放id就可以了

　　id在哪儿找？登陆你的网页版网易云/QQ音乐，找到一个歌单

　　image-20230129113433710

　　此处网页链接里面的ID就是播放id，复制过来就OK了

　　这里有不少配置项，其中关于壁纸种类有3中

　　可以在backgound里面找到壁纸3个种类的不同：0是本地壁纸，随机1到10（可以在本地新增你喜欢的壁纸，并修改这里的随机数范围）

　　0是默认的几张本地壁纸，1是bing，2是随机风景，3是随机二刺螈👻

　　咳咳，才发现原来背景图可以在前端直接设置呀？点击左侧留言，再点击时间胶囊右侧的设置按钮。不过目前只能设置这一个内容，而且这个设置随着网页刷新会被覆盖掉，建议在后端设置好默认的壁纸

　　[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yBn4Wgf9-1682292144645)(https://img.musnow.top/i/2023/02/2023b117617632908357a2f1267b45ad80f1.png)]

　　点击左侧的网站介绍（就是社交链接上面那个面板）能打开时间胶囊。默认显示的信息挺不错的，但是还空了一块，这不得把站点运行时间给加上？

　　参考 https://blog.csdn.net/jay_chou345/article/details/110201897

　　将这一串代码添加到的和之间

　　随后在顶部的模板末尾的前添加如下代码

　　环境变量中添加如下字段

　　这样就OK啦！

　　image-20230201220013087

　　当我开了一个后，源项目作者提供了一个更简单的代码版本。该版本更加精简，但是不能显示秒数，不过完全够用了！

　　https://github.com/imsyy/home/pull/63

　　环境变量

　　vue中代码

　　春节假期结束辣！我们首页的新春灯笼也要取下来了

　　找到,注释掉里面的import

　　有任何问题，欢迎评论提问