caojiezi2003/Homepage-imsyy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新简介

Browse Source
This commit is contained in:
底层用户 2023-01-15 13:20:24 +08:00
parent e5310257ed
commit abcfa92d8b
6 changed files with 70 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env
View File

@ -24,6 +24,7 @@ VITE_SOCIAL_TWITTER = "iimmsyy"
VITE_WEATHER_KEY = "57eaea5833ff1616cfd1ff2c4cf9b58a"
# 歌曲 API 地址
## 备用：https://api.wuenci.com/meting/api/
VITE_SONG_API = "https://api-meting.imsyy.top"
# 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
VITE_SONG_SERVER = "netease"

55
README.md
View File

@ -7,7 +7,7 @@
![無名の主页](https://s2.loli.net/2022/07/14/K5JigfvDoNewtuS.webp)
>主页的 Logo 字体已经过压缩，若用本站 Logo 以外的字母会变回默认字体，这里是 [完整字体](https://file.imsyy.top/font/Pacifico-Regular.ttf)
>主页的 Logo 字体已经过压缩，若用本站 Logo 以外的字母会变回默认字体，这里是 [完整字体](https://file.4everland.app/font/Other/Pacifico-Regular.ttf)
### Demo
@ -27,34 +27,41 @@
- [x] 音乐播放器
- [x] 移动端适配
* [ ] 去除 jQuery 依赖
* [ ] VUE 重构
* [ ] 播放器取消使用 Aplayer
### 部署
```bash
yarn install
yarn dev
yarn build
```
> 构建完成后，可将 `dist` 文件夹下的文件上传至服务器，也可使用 `Vercel` 等托管平台一键导入并自动部署
### 天气
由于原天气 API 不稳定，已更换天气 API，现需要前往以下网站获取 key
天气及地区获取需要 `高德开放平台` 相关 API
- 前往 [ROLL](https://www.mxnzp.com/doc/list) 获取 app_id 和 app_secret，用于获取城市信息
- 前往 [和风天气](https://dev.qweather.com/) 获取 key，用于获取天气信息
- 前往 [高德开放平台控制台](https://console.amap.com/dev/index) 创建一个 `Web 服务` 类型的 `Key`，并将 `Key` 填入 `.env` 中的 `VITE_WEATHER_KEY` 中
也可自行更换其他方式
### 配置
嘿嘿
### 音乐
>本项目采用了基于 `MetingJS` 的 `Aplayer` 音乐播放器，可实现快速自定义歌单
>*仅支持 **中国大陆地区**，其他区域请将 [以下内容](https://cdn.jsdelivr.net/gh/imsyy/file/js/music/music-other.js) 替换 `music.js` 以实现音乐播放器的正常使用
>*仅支持 **中国大陆地区**
更改 `music.js` 的参数即可实现自定义歌单列表
请在 `.env` 文件中更改歌曲相关参数即可实现自定义歌单列表
```js
let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
```bash
# 歌曲 API 地址
VITE_SONG_API = "https://api-meting.imsyy.top"
# 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
VITE_SONG_SERVER = "netease"
# 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
VITE_SONG_TYPE = "playlist"
# 播放 ID
VITE_SONG_ID = "7452421335"
```
### 字体
@ -100,20 +107,20 @@ make clean all
</details>
### 插件
### 技术栈
* [Bootstrap](https://getbootstrap.com/)
* [iziToast](https://izitoast.marcelodolza.com/)
* [Font Awesome](https://fontawesome.com/)
* [jQuery](https://jquery.com/)
* [Vue](https://cn.vuejs.org/)
* [Vite](https://vitejs.cn/vite3-cn/)
* [Pinia](https://pinia.vuejs.org/zh/)
* [IconPark](https://iconpark.oceanengine.com/official)
* [xicons](https://xicons.org/)
* [Aplayer](https://aplayer.js.org/)
### API
* [MetingAPI By 武恩赐](https://api.wuenci.com/meting/api/)
* [小歪 API](https://api.ixiaowai.cn/)
* [和风天气](https://dev.qweather.com/)
* [ROLL](https://www.mxnzp.com/doc/list)
* [高德开放平台](https://lbs.amap.com/)
* [Hitokoto 一言](https://hitokoto.cn/)
<a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2022-%E7%84%A1%E5%90%8D-red"></a>
<a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2023-%E7%84%A1%E5%90%8D-red"></a>

108
README_EN.md
View File

@ -7,7 +7,7 @@ Simple little homepage, had enough of the original one and made a new one
![無名の主页](https://s2.loli.net/2022/07/14/K5JigfvDoNewtuS.webp)
>The logo font on the home page has been compressed, so if you use a font other than this logo, it will change back to the default font, Here is the [full font](https://file.imsyy.top/font/Pacifico-Regular.ttf)
>The logo font on the home page has been compressed, so if you use a font other than this logo, it will change back to the default font, Here is the [full font](https://file.4everland.app/font/Other/Pacifico-Regular.ttf)
### Demo
@ -27,83 +27,41 @@ Simple little homepage, had enough of the original one and made a new one
- [x] Music player
- [x] Mobile adaptation
* [ ] Remove jQuery dependency
* [ ] VUE refactoring
* [ ] Player cancels using Aplayer
### Deployment
```bash
yarn install
yarn dev
yarn build
```
> Once the build is complete, the files in the `dist` folder can be uploaded to the server or imported and automatically deployed with one click using a hosting platform such as `Vercel`.
### Weather
Because the original weather API is unstable, the weather API has been replaced. Now you need to go to the following website to obtain the key
Weather and area access requires `高德开放平台` related API
- to [ROLL] (https://www.mxnzp.com/doc/list) for app_id and app_secret, used to capture the city
- to [and wind weather] (https://dev.qweather.com/) to obtain the key, is used to get the weather information
- Go to [高德开放平台控制台](https://console.amap.com/dev/index) to create a `Key` of type `Web Service` and fill the `Key` into `VITE_WEATHER_KEY` in `.env`
It can also be replaced by other methods
<!-- ### Configuration
This project uses `json` file to configure the site content, the configuration is not affected by version updates, you can write custom configuration to `setting.json` to change the page content
<details>
<summary>Configuration instructions</summary>
```json
{
"title": "Title of the page",
"description": "Short description of the page",
"keywords": "Keyword(s)",
"author": "author of the page",
"logo_img": "Logo image path",
"logo_text_1": "Domain Prefix",
"logo_text_2": "Domain_suffix",
"des_title": [
"Hello World !" , // site description title
"A small site built in the 21st century, living on the edge of the Internet" // site description content
],
"des_title_change": [
"Oops !" , //text after clicking on the site's title
"Oops, you found this ( click once more to close )" //text after click on site content
],
"github": "imsyy", //Github username
"qq": "1539250352", //QQ
"email": "one@imsyy.top", //email email
"telegram": "bottom_user", //Telegram user name
"twitter": "iimmsyy", //Twitter username
"weather_api": "https://www.yiketianqi.com", //Weather API
"link_1": [
"https://blog.imsyy.top/", //link_address
"fa-solid fa-blog", //icon class name
"blog" //link text
],
"link_2": [
"https://drive.imsyy.top/",
"fa-solid fa-cloud",
"netdisk"
],
"wallpaper_api": [
[
"picture of the day", //name of wallpaper setting item
"https://api.dujin.org/bing/1920.php" //link to wallpaper image
]
],
"Copyright_year": "2020", //site start year
"Copyright_text": "No name" //Copyright
}
```
</details> -->
### Music
>This project uses the `Aplayer` music player based on `MetingJS` for quick song list customization
>*Only supported in **Mainland China**, please replace `music.js` with [the following](https://cdn.jsdelivr.net/gh/imsyy/file/js/music/music-other.js) in other regions to enable the music player to work properly
>*Only supported in **Mainland China**
Change the parameters of `music.js` to achieve a custom song list
Please change the song related parameters in the `.env` file to customize the song list
```js
let server = "netease"; //netease; tencent; kugou; xiami; kuwo;
let type = "playlist"; //song; playlist; album;
let id = "7452421335"; //album ID; song ID; playlist ID;
```bash
# Songs API address
VITE_SONG_API = "https://api-meting.imsyy.top"
# Song server ( netease-netease, tencent-qq music )
VITE_SONG_SERVER = "netease"
# Playback type ( song-song, playlist-playlist, album-album, search-search, artist-artist )
VITE_SONG_TYPE = "playlist"
# Playback ID
VITE_SONG_ID = "7452421335"
```
### Fonts
@ -149,20 +107,20 @@ make clean all
</details>
### Plugins
### Technology Stack
* [Bootstrap](https://getbootstrap.com/)
* [iziToast](https://izitoast.marcelodolza.com/)
* [Font Awesome](https://fontawesome.com/)
* [jQuery](https://jquery.com/)
* [Vue](https://cn.vuejs.org/)
* [Vite](https://vitejs.cn/vite3-cn/)
* [Pinia](https://pinia.vuejs.org/zh/)
* [IconPark](https://iconpark.oceanengine.com/official)
* [xicons](https://xicons.org/)
* [Aplayer](https://aplayer.js.org/)
### API
* [MetingAPI By wuenci](https://api.wuenci.com/meting/api/)
* [MetingAPI By 武恩赐](https://api.wuenci.com/meting/api/)
* [小歪 API](https://api.ixiaowai.cn/)
* [和风天气](https://dev.qweather.com/)
* [ROLL](https://www.mxnzp.com/doc/list)
* [高德开放平台](https://lbs.amap.com/)
* [Hitokoto 一言](https://hitokoto.cn/)
<a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2022-%E7%84%A1%E5%90%8D-red"></a>
<a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2023-%E7%84%A1%E5%90%8D-red"></a>

4
index.html
View File

@ -9,6 +9,10 @@
<meta name="keywords" content="無名,个人主页">
<meta name="author" content="無名">
<title><%- title %></title>
<!-- HarmonyOS Sans -->
<!-- 本站 CDN 已开启防盗链，非本站域名不可访问，请更改链接为下方内容，否则自定义字体将失效 -->
<!-- https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css -->
<link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" />
<link rel="icon" href="/images/icon/favicon.ico">
<link rel="apple-touch-icon" href="/images/icon/apple-touch-icon.png">
<link rel="stylesheet" href="/loading/loading.min.css">

0
src/components/Music/old.vue → src/components/Music/test.vue
View File

1
src/style/style.scss
View File

@ -15,6 +15,7 @@ body {
height: 100%;
background-color: #333;
overflow: hidden;
font-family: 'HarmonyOS_Regular', sans-serif;
}
*,