搜索 K
Appearance
建了个人主页
很久很久以前，偶然发现一个很好看的主页：https://www.imsyy.top
当时觉得很不错，但我自己就一个博客，觉得没啥必要，就只是收藏了起来。
随后的看到不少博友都用它创立了个人主页：Abbilic の主页，酪灰の主页，Elykia' Home...
看上去效果很不错，搭建起来也不麻烦。
而且我如今没服务器了，可以用来做个主页（之前我都是将主域名重定向到 www 域名），就自己也做一个吧！
个人主页地址：https://peterjxl.com
本来以为一个上午就能搞定的事，结果硬生生弄了快两天，本文记录下搭建过程和遇到的问题。
下载项目
项目主页：https://github.com/imsyy/home
这里要说明的是，该项目作者已经不怎么维护了。即使有人修复了 bug、增加了功能，作者也不怎么处理 PR。
为此，不少热心网友自己二开了下，修复了不少 bug，更好用。
例如我用的就是：https://github.com/NanoRocky/home，功能更多，修复了一些 bug（就是 git 管理没做好，仓库很大，有 1G 多...） 但还是推荐用这个。
快速开始
- 将项目下载下来（也可以先 fork 到自己的仓库内，然后再下载，方便后续维护）
- 安装依赖：
npm i - 将
.env.example 文件重命名为.env，（重要，否则会报错） - 运行项目：
npm run dev
运行成功后，会自动打开网页。
修改配置
重点是修改 .env 文件，很多信息和功能都是在这里配置：
bash
VITE_SITE_NAME = "晓林の主页" # 名称
VITE_SITE_AUTHOR = "晓林" # 作者
VITE_SITE_KEYWORDS = "晓林,个人主页" # 关键词
VITE_SITE_MAIN_NAME = "晓林" # 自定义名
VITE_SITE_DES = "一个默默无闻的主页" # 站点简介
VITE_SITE_URL = "peterjxl" # 站点地址
VITE_SITE_LOGO = "/images/icon/re0.jpg" # 站点主图标
VITE_SITE_MAIN_LOGO = "/images/icon/re0.jpg" # 主页图标
VITE_SITE_APPLE_LOGO = "/images/logo/apple-touch-icon.png" # Apple 端图标
......
而且该文件中也有很多的说明，非常建议先看一遍。
社交链接
社交链接，就是页面左下角的这些图标，在 src/assets/socialLinks.json 文件中配置：
网站链接
网站链接，就是页面右下角的内容，在src/assets/siteLinks.json 文件中配置：
关于引用图标：
- 图标是在
Links.vue 里引入的：import { Link, WikipediaW } from "@vicons/fa"; - 按住 Alt 键，点击
@vicons/fa，会打开index.d.ts，里面引用了很多图标，可以自行搜索想要的 - 然后，将图标名称复制，然后在
Links.vue 里引入，并在siteIcon数组里配置
控制台输出
打开控制台，能看到有作者的信息：
这是在 App.vue 里定义的，可以按需修改。
自定义背景
壁纸相关的设置在 src/components/Background.vue。
壁纸文件要放在 public/images目录下。
壁纸文件名必须是 “background + 数字”，图片格式必须一致。
天气数据
天气在右上角显示：
原理：获取访客 IP，然后再根据 IP 查询天气。
作者用的是高德地图定位服务，但是高德有小问题，经常会获取失败。
这问题持续挺久了，作者一直没修复，我后面用的是 NanoRocky/home 这个项目，改为用腾讯的，修复了问题。
下面讲讲如何申请 Key，然后将其填到 .env 文件就可以了。
登录 腾讯位置服务，然后在 我的应用 里创建应用，名称建议用英文，类型就选出行吧：
然后点击添加 Key：
选择签名校验的方式，并记住 SK（鉴权 Key，后面要用）：
随后页面会显示 Key：
然后我们在 .env 里找到相应的配置，将 key 添加上去：
bash
VITE_TX_WEATHER_KEY = "JH..........." # 腾讯位置服务 Key
VITE_TX_WEATHER_SKEY = "刚刚记住的 SK" # 腾讯位置服务鉴权 SKEY
注意，还需要分配额度：打开「配额管理」-「账号额度」
分别给「IP 定位」和「天气服务」添加配额：
选择要分配给的应用：
然后输入数字即可：
如果没分配额度，那么默认是 0，调用时会提示「此 key 每日调用量已达到上限」。
如果遇到了问题，不用怕，可以将请求结果打印出来看看（在 Weather.vue 中添加）：
js
const getTXW = async () => {
const adCode = (await getTXAdcode(txkey)) as TXAdCodeResponse;
console.log("腾讯天气接口 Adcode 获取结果：", adCode);
}
也可以在控制台中查看请求结果：
音乐功能
NanoRocky/home 还增加了音乐功能：
先在网易云里创建歌单（也支持 QQ 音乐，但我没试），然后点击分享：
选择复制链接：
就能得到一个网址，里面就含有歌单 ID：
然后在 .env 文件里找到相应的配置并添加 ID：
bash
VITE_SONG_ID = "177xxxx"
注意：该服务依赖一个后台服务，可以通过 https://github.com/injahow/meting-api 搭建。
如果不想要音乐功能，可以将所有配置留空：
bash
VITE_SONG_API = ""
VITE_SONG_SERVER = ""
VITE_SONG_SERVER_SECOND = ""
VITE_SONG_TYPE = ""
VITE_SONG_ID = ""
VITE_SONG_ID_SECOND = ""
此外，该歌单有个小 bug，会读取默认的歌单 ID，我排查了挺久才发现的，发了个 issue，附上了临时解决措施。
个人能力有限，还不清楚要怎么修复地好 😂
构建、缓存
最后，执行 npm run build，就能构建项目了，产出物会放在 dist 目录下。
另外要注意的是，该项目有个缓存问题：如果修改了代码，或者增加了背景图等，页面不会立即生效，而是要强制刷新，甚至要清除缓存才行...
其他项目
除了本文介绍的项目，GitHub 上还有很多类似的项目，自行搜索即可。
例如：dmego/home.github.io，访问地址：i.dmego.cn
3D 主页：作者用 React Three Fiber 构建的 3D 个人主页，非常华丽。
Link3.cc：这也是很多人（号称百万用户）用的主页项目，页面大概长这样：
也不一定非得用第三方项目，完全可以自定义一个，有 AI 的帮助，这并不难实现。
最后
由于文档不是那么详细，折腾了比较久，一开始甚至想过放弃的，但后来还是坚持做了下来，效果还不错。
如果你也想要该项目做个主页，欢迎尝试，相信本文能帮助到你。
也感谢项目作者们的无私奉献 ~