# 多功能带追番的vue3个人主页模版

*Published:* 2024-02-15
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年2月15日，已超过 180天没有更新



[![](https://www.xarjtc.com/wp-content/uploads/2024/02/231cd879c4cb6b5c086071bd1930eff7.webp)](https://www.xarjtc.com/wp-content/uploads/2024/02/231cd879c4cb6b5c086071bd1930eff7.webp)

**功能：**

- Hitokoto 一言
- 日期及时间
- 实时天气
- 音乐播放器
- 移动端完全适配（未实现）
- 番剧内容（尚未完全）

番剧页面使用Python脚本加 Github Actions 实现每天实时更新。

**天气：**

天气及地区获取需要高德开放平台 API还有一个备用的腾讯地图 API

前往[高德开放平台控制台](https://www.xarjtc.com/?golink=aHR0cHM6Ly9jb25zb2xlLmFtYXAuY29tL2Rldi9pbmRleA==) 创建一个 Web 服务 类型的 Key，并将 Key 填入 js 目录下的 main.js 中的 apiKeyamap

前往 [腾讯位置服务控制台](https://www.xarjtc.com/?golink=aHR0cHM6Ly9jb25zb2xlLmFtYXAuY29tL2Rldi9pbmRleA==)创建一个 WebServiceAPI类型的 Key，域名白名单填入你自己的域名并将 Key填入 js 目录下的 main.js 中的 apiKeyTencent 里面

**注意 \* 腾讯的 API 需要分配额度**

```
const apiKeyAmap = "xxxxxxxxxxxxx"； //高德地图key
const apiKeyTencent = "xxxxxxxxxxxxx"；//腾讯地图备用key
```

也可自行更换其他方式

**社交链接：**

在 index.html 中可以自定义社交链接。更换#号里的链接为自己的链接

```
<div>
<a href="#" title="QQ">
<i class="fa-brands fa-qq"></i>
</a>
</div>
```

**网站背景：**

使用自定义外部链接的可以在 js 目录下的 bg.js 里的var backgroundLinks =\[\]里面自定义，每次加载网页会随机切换

想使用固定背景的可以在 index.html 中的背景 img 里面的src 里填入自己的图片

```
<img
id="bg"
onerror="this.classList.add('error');"
src="你自己的图片"
alt="bg" />
```

demo地址：https://xiaoqvan.top/

**GitHub地址：https://github.com/XQxiaoqvan/xqxiaoqvan.github.io**

  

下载地址

 [ 夸克

 

 

 ](https://www.xarjtc.com/?golink=aHR0cHM6Ly9wYW4ucXVhcmsuY24vcy82ZmM0YTgzOTdkNjc=)密码：无