無名の主頁

簡單的小主頁，原來的看夠了，重新弄了一個

主頁的 Logo 字體已經過壓縮，若用本站 Logo 以外的字母會變回默認字體，這里是 完整字體，若無法下載，可將字體目錄下的 Pacifico-Regular-all.ttf 進行替換

🎉 功能

• 載入動畫
• 站點簡介
• Hitokoto 一言
• 日期及時間
• 實時天氣
• 時光進度條
• 音樂播放器
• 移動端適配

?? 自動部署

如果遇到構建環境或者打包過程出現錯誤，則可以采用 Github Actions 來進行自動構建

• 在成功 fork 倉庫后，前往 Actions 頁面，若您是首次開啟，則會出現下面的提示，點擊開啟

  

• 然后在倉庫中進行任意修改后均會觸發工作流的運行，在工作流完成后，會在下方生成一個可供下載的壓縮包，這就是構建出的靜態文件，可自行上傳至服務器
  

?? 手動部署

• 安裝 node.js 環境

  node > 16.16.0
  npm > 8.15.0

• 然后以 管理員權限 運行 cmd 終端，并 cd 到 項目根目錄

• 在 終端 中輸入：

# 安裝 pnpm
npm install -g pnpm# 安裝依賴
pnpm install# 預覽
pnpm dev# 構建
pnpm build

構建完成后，靜態資源會在 dist 目錄 中生成，可將 dist 文件夾下的文件上傳至服務器，也可使用 Vercel 等托管平臺一鍵導入并自動部署

?? Docker 部署

安裝及配置 Docker 將不在此處說明，請自行解決

# 構建
docker build -t home .
# 運行
docker run -p 12445:12445 -d home

?? Vercel 部署

其他部署平臺大致相同，在此不做說明

1. 點擊本倉庫右上角的 Fork，復制本倉庫到你的 GitHub 賬號
2. 復制 /.env.example 文件并重命名為 /.env（ 重要 ）
3. 按需修改 /.env 文件中的配置
4. 點擊 Deploy，即可成功部署

網站鏈接

在 src/assets/siteLinks.json 中可以自定義網站鏈接（以指向自己的網站）:

{"icon": "Blog","name": "博客","link": "https://blog.imsyy.top/"
},

其中 icon 網站鏈接的圖標可以在 src/components/Links/index.vue 中添加:

// 可前往 https://www.xicons.org 自行挑選并在此處引入
// 此處引入的是 fa 類型
import {Link,Blog,CompactDisc,Cloud,Compass,Book,Fire,LaptopCode,
} from "@vicons/fa";...// 網站鏈接圖標
const siteIcon = {Blog,Cloud,CompactDisc,Compass,Book,Fire,LaptopCode,
};

社交鏈接

在 src/assets/socialLinks.json 中可以自定義社交鏈接。

天氣

天氣及地區獲取需要 高德開放平臺 相關 API

• 前往 高德開放平臺控制臺 創建一個 Web 服務 類型的 Key，并將 Key 填入 .env 中的 VITE_WEATHER_KEY 中

也可自行更換其他方式

音樂

本項目采用了基于 MetingJS 的 Aplayer 音樂播放器，可實現快速自定義歌單
*僅支持 中國大陸地區

請在 .env 文件中更改歌曲相關參數即可實現自定義歌單列表

# 歌曲 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"

字體

現采用 HarmonyOS Sans 開源字體，采用字體拆分，提升加載速度

由于本站 CDN 已開啟防盜鏈，非本站域名不可訪問，請將字體引入鏈接更改為下方內容，否則 自定義字體將失效

https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css

舊版方式

由于本項目引入了中文字體，需要壓縮中文字體以提高網頁加載速度（ 也可以取消使用中文字體 ）

中文字體去除繁體

• 安裝 Python 3.7 和 pip
• 運行 pip install fonttools
• 下載 sc_unicode.txt
• 運行 pyftsubset 字體名稱.ttf --unicodes-file=sc_unicode.txt

字體進一步壓縮

• 編譯安裝 Google woff2

sudo apt-get install -y git g++ make
git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all

• 再壓縮字體

./woff2_compress ./字體名稱.ttf

• 最終可對原字體進行緩加載，先行加載壓縮后的字體

詳細信息可前往 虹墨空間站 查看原文

網站圖標及網站背景

網站背景

可以在 public/images 中修改網站背景

如果想要添加更多的本地圖片作為網站背景，可以將圖片重命名 background+數字 的形式，并在 src/components/Background/index.vue 中進行修改：

if (type == 0) {// 修改此處 Math.random() 后面的第一個數字為圖片的數量bgUrl.value = `/images/background${Math.floor(Math.random() * 10 + 1)}.webp`;
}

網站圖標

可以在 public/images/icon 中修改網站圖標。

技術棧

• Vue
• Vite
• Pinia
• IconPark
• xicons
• Aplayer

API

• 小歪 API
• 搏天 API
• 教書先生 API
• 高德開放平臺
• Hitokoto 一言