2022-05-20 09:37:18 +00:00
English | [Chinese ](./README.md )
< p >
< strong > < h2 > 無名の主页< / h2 > < / strong >
Simple little homepage, had enough of the original one and made a new one
< / p >
2022-07-14 08:25:08 +00:00
2022-05-20 09:37:18 +00:00
2023-01-15 05:22:30 +00:00
>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 )
2022-05-20 09:37:18 +00:00
### Demo
2022-08-03 11:33:01 +00:00
2022-05-20 09:37:18 +00:00
>Due to CDN caching, you may need `Ctrl` + `F5` to force a browser cache refresh to see the latest results
- [無名の主页 ](https://www.imsyy.top )
2022-08-03 11:33:01 +00:00
- [無名の主页 - 备用线路 ](https://home-imsyy.vercel.app/ )
2022-05-20 09:37:18 +00:00
### Functions
- [x] Loading animation
- [x] Site description
- [x] Hitokoto
- [x] Date and time
- [x] Live weather
- [x] Time progress bar
- [x] Music player
- [x] Mobile adaptation
2022-08-02 02:25:29 +00:00
2023-01-15 05:22:30 +00:00
* [ ] Player cancels using Aplayer
2022-05-20 09:37:18 +00:00
2023-01-15 05:22:30 +00:00
### Deployment
2022-07-07 13:42:10 +00:00
2023-06-25 06:45:38 +00:00
* **Installation** [node.js ](https://nodejs.org/zh-cn/ ) **Environment**
> node > 16.16.0
> npm > 8.15.0
* Then run the `cmd` terminal with **administrator privileges** and `cd` to the project root directory
* In the `terminal` type:
2023-01-15 05:22:30 +00:00
```bash
2023-06-25 06:45:38 +00:00
# Install pnpm
npm install -g pnpm
# Install the dependencies
pnpm install
# Preview
pnpm dev
# Build
pnpm build
2023-01-15 05:22:30 +00:00
```
2023-06-25 06:45:38 +00:00
2023-01-15 05:22:30 +00:00
> 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`.
2022-07-07 13:42:10 +00:00
2023-01-15 05:22:30 +00:00
### Weather
2022-06-28 09:50:15 +00:00
2023-01-15 05:22:30 +00:00
Weather and area access requires `高德开放平台` related API
2022-06-28 09:50:15 +00:00
2023-01-15 05:22:30 +00:00
- 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`
2022-06-28 09:50:15 +00:00
2023-01-15 05:22:30 +00:00
It can also be replaced by other methods
2022-06-28 09:50:15 +00:00
2022-05-25 11:55:17 +00:00
### Music
>This project uses the `Aplayer` music player based on `MetingJS` for quick song list customization
2023-01-15 05:22:30 +00:00
>*Only supported in **Mainland China**
2022-05-25 11:55:17 +00:00
2023-01-15 05:22:30 +00:00
Please change the song related parameters in the `.env` file to customize the song list
2022-06-22 09:42:51 +00:00
2023-01-15 05:22:30 +00:00
```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"
2022-06-22 09:42:51 +00:00
```
### Fonts
2022-08-03 11:33:01 +00:00
Now using `HarmonyOS Sans` open source font, using font splitting to improve loading speed
>Because this site's `CDN` has opened anti-leech, **non-site domain name is not accessible** , please change the font import link to the following content, otherwise **custom fonts will be invalid**
>
>`https://cdn.jsdelivr.net/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css`
< details >
< summary > old way< / summary >
2022-06-22 09:42:51 +00:00
>As Chinese fonts are introduced in this project, Chinese fonts need to be compressed to improve the loading speed of the page (you can also cancel the use of Chinese fonts)
#### Chinese font removal traditional
- Install `Python 3.7` and `pip`
- Run `pip install fonttools`
2022-06-22 09:44:09 +00:00
- Download [sc_unicode.txt ](https://gist.githubusercontent.com/imaegoo/d64e5088b723c2e02c40985f55ff12db/raw/5ebd2ce49418c73459a9dfe050483409306a6c1d/sc_unicode.txt )
2022-06-22 09:42:51 +00:00
- Run `pyftsubset font-name.ttf --unicodes-file=sc_unicode.txt`
#### fonts further compressed
- Compile and install ``Google woff2``
```bash
sudo apt-get install -y git g++ make
git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all
```
- Compress the font again
```
. /woff2_compress . /font_name.ttf
```
- Eventually the original font can be slow loaded, **load the compressed font first**
>For more information, please go to [虹墨空间站 ](https://www.imaegoo.com/2020/chinese-font-compress/ ) to view the original article
2022-08-03 11:33:01 +00:00
< / details >
2023-01-15 05:22:30 +00:00
### Technology Stack
2022-05-20 09:37:18 +00:00
2023-01-15 05:22:30 +00:00
* [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/ )
2022-05-20 09:37:18 +00:00
* [Aplayer ](https://aplayer.js.org/ )
### API
2023-01-15 05:22:30 +00:00
* [MetingAPI By 武恩赐 ](https://api.wuenci.com/meting/api/ )
2023-06-19 03:21:37 +00:00
* [搏天 API ](https://api.btstu.cn/doc/sjbz.php )
2023-01-15 05:22:30 +00:00
* [高德开放平台 ](https://lbs.amap.com/ )
2022-05-20 09:37:18 +00:00
* [Hitokoto 一言 ](https://hitokoto.cn/ )
2023-01-15 05:22:30 +00:00
< 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 > < a title = "CDN" target = "_blank" href = "https://cdnjs.com/" > < img src = "https://img.shields.io/badge/CDN-Cloudflare-blue" > < / a > < 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 >
