Vue 重构 & 新年快乐

yyyxx6 · Jan 15, 2023 · 5b15716 · 5b15716
1 parent 9da5e50
commit 5b15716
Show file tree

Hide file tree

Showing 107 changed files with 9,403 additions and 3,333 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,34 @@
+# 站点名称
+VITE_SITE_NAME = "無名の主页"
+VITE_SITE_URL = "imsyy.top"
+
+# 简介文本
+VITE_DESC_HELLO = "Hello World !"
+VITE_DESC_TEXT = "一个建立于 21 世纪的小站，存活于互联网的边缘"
+VITE_DESC_HELLO_OTHER = "Oops !"
+VITE_DESC_TEXT_OTHER = "哎呀，这都被你发现了（ 再点击一次可关闭 ）"
+
+# 社交链接
+VITE_SOCIAL_GITHUB = "imsyy"
+VITE_SOCIAL_QQ = "1539250352"
+VITE_SOCIAL_EMAIL = "[email protected]"
+VITE_SOCIAL_TELEGRAM = "bottom_user"
+VITE_SOCIAL_TWITTER = "iimmsyy"
+
+# 网站链接
+## 请在 src/components/Links/index.vue 中设置
+
+# 天气 Key
+## 请前往高德开放平台注册 Web服务 Key
+## 请各位大佬行行好，别再让我超量了
+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"
+# 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
+VITE_SONG_TYPE = "playlist"
+# 播放 ID
+VITE_SONG_ID = "7452421335"
diff --git a/.gitignore b/.gitignore
@@ -1 +1,24 @@
-/.vscode/*
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/README.md b/README.md
@@ -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,82 +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` 中
 
 也可自行更换其他方式
 
-<!-- ### 配置
-
-本项目采用 `json` 文件来配置站点内容，该配置不受版本更新影响，可将自定义配置写入 `setting.json` 以更改页面内容
-
-<details>
-<summary>配置说明</summary>
-
-```json
-{
-    "title": "网页标题",
-    "description": "网页简短介绍",
-    "keywords": "网页关键词",
-    "author": "网页作者",
-    "logo_img": "Logo图片路径",
-    "logo_text_1": "域名前缀",
-    "logo_text_2": "域名后缀",
-    "des_title": [
-        "Hello World !", //站点介绍标题
-        "一个建立于 21 世纪的小站，存活于互联网的边缘" //站点介绍内容
-    ],
-    "des_title_change": [
-        "Oops !", //站点介绍标题点击后文字
-        "哎呀，这都被你发现了 ( 再点击一次可关闭 )" //站点介绍内容点击后文字
-    ],
-    "github": "imsyy", //Github 用户名
-    "qq": "1539250352", //QQ
-    "email": "[email protected]", //Email电子邮件
-    "telegram": "bottom_user", //Telegram 用户名
-    "twitter": "iimmsyy", //Twitter用户名
-    "weather_api": "https://www.yiketianqi.com", //天气 API
-    "link_1": [
-        "https://blog.imsyy.top/", //链接地址
-        "fa-solid fa-blog", //图标类名
-        "博客" //链接文字
-    ],
-    "link_2": [
-        "https://drive.imsyy.top/",
-        "fa-solid fa-cloud",
-        "网盘"
-    ],
-    "wallpaper_api": [
-        [
-            "每日一图", //壁纸设置项名称
-            "https://api.dujin.org/bing/1920.php" //壁纸图片链接
-        ]
-    ],
-    "Copyright_year": "2020", //站点起始年份
-    "Copyright_text": "無名" //版权
-}
-```
-
-</details> -->
 
 ### 音乐
 
 >本项目采用了基于 `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"
 ```
 
 ### 字体
@@ -148,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>
diff --git a/README_EN.md b/README_EN.md
@@ -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
 
-### 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  
-
-- to [ROLL] (https://www.mxnzp.com/doc/list) for app_id and app_secret, used to capture the city  
+### Deployment
 
-- to [and wind weather] (https://dev.qweather.com/) to obtain the key, is used to get the weather information  
-
-It can also be replaced by other methods
+```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`.
 
-<!-- ### Configuration
+### Weather
 
-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
+Weather and area access requires `高德开放平台` related API
 
-<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": "[email protected]", //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
-}
-```
+- 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` 
 
-</details> -->
+It can also be replaced by other methods
 
 ### 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>