搜索 K
Appearance
建了个人主页
个人主页的必要性
随着自媒体的兴起，一个博主可能在各大平台上都有账号，或者自己创建了很多网站。
此时有一个自己的主页，就有点必要了：一个网址，聚合所有平台入口，方便读者导航。
那如何制作个人主页呢？其实网上已经有很多平台提供这样的功能。例如：
用法也很简单，注册，然后就可以开始自定义主页了。
除了用网上现有的平台，你也可以用代码自建一个。
下面就分享我自己建立主页的过程。
自建主页
很久很久以前，偶然发现一个很好看的主页：https://www.imsyy.top
当时觉得很不错，但我自己就一个博客，觉得没啥必要，就只是收藏了起来。
随后的看到不少博友都用它创立了个人主页：Abbilic の主页，酪灰の主页，Elykia' Home...
看上去效果很不错，搭建起来也不麻烦，就自己也做一个吧！
个人主页地址：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 这个项目，改为用腾讯的，修复了 bug。
下面讲讲如何申请 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，我排查了挺久才发现的，不想要第二歌单的话，得在 example_config.json 中把 SECOND 的值全部删掉。
构建、缓存
最后，执行 npm run build，就能构建项目了，产出物会放在 dist 目录下。
另外要注意的是，该项目有个缓存问题：如果修改了代码，或者增加了背景图等，页面不会立即生效，而是要强制刷新，甚至要清除缓存才行...
作者补充：这是正常现象，项目内的 Workbox 为了加快页面加载速度，会默认缓存页面到客户端，所以服务端修改后客户端并不会立刻变化。
不过通常在服务器修改重新 build 后，客户端打开一次页面会弹出更新提示，此时刷新一次页面会自动更新缓存。
如果不需要客户端缓存（比如有 CDN），可以看项目说明，里面有写如何禁用 Workbox 的缓存功能。
其他项目
除了本文介绍的项目，GitHub 上还有很多类似的项目，自行搜索即可。
例如：dmego/home.github.io，访问地址：i.dmego.cn
3D 主页：作者用 React Three Fiber 构建的 3D 个人主页，非常华丽。
也不一定非得用第三方项目，完全可以自定义一个，有 AI 的帮助，这并不难实现。
最后
由于文档不是那么详细，折腾了比较久，一开始甚至想过放弃的，但后来还是坚持做了下来，效果还不错。
如果你也想要该项目做个主页，欢迎尝试，相信本文能帮助到你。
也感谢项目作者们的无私奉献 ~