2025/1部落格更新:切換畫面動畫、效能優化
編輯日期:2025-01-08
發布日期:2025-01-08
蜥嘎公告
部落格更新

距離上次更新,這次主要都在做畫面優化之類的內容,還有部分改善,大概預計近期會做一些有關Twitch的小功能,所以先把一些基本的內容修正一下(?

總之這次做的改良大概是這些

新增頁面切換動畫 🔗

為了讓不同頁面、進入網頁的視覺更加滑順,加入了水平移入移出的動畫。

其中頂端導覽列間的切換採用Nuxt的transition設定,調整起來方便得多;反倒是初次進入網頁的部分因為擔心畫面呈現的先後順序,開發思路繞了一圈,最後還是決定簡單粗暴的寫CSS動畫直接完事。

資料讀取改用Nuxt的useAsyncData() 🔗

簡單來說,讓搜尋引擎的索引效率提高,把原本進入網頁後才做的事情前移到進入網頁前。

文章內頁面本來就是採用這種設計,這次將其他文章列表等頁面也參照同樣方法處理。

BUG修復&misc 🔗

  • 修復文章搜尋頁進入後會頁面錯誤,把Element-plus input系列元件加上ClientOnly。
  • 修復手機瀏覽文章內文時,被胖出畫面外的Google廣告區塊頂到有左右滾動條的問題。
  • 修復導覽列點頁面連結時,點擊完後連結按鈕沒有變回原樣的問題。
  • 調整文章列表的畫面排版。
  • 刪除已穩定運作部分的控制台log,神清氣爽。