其他採到的坑

Card view無法顯示圖片

#

• 在list page的front matter裡將cardView=true。
• 調整檔案結構, 改成leaf bundle (只有index.md 和資源檔如圖片)，將你要顯示在card上的圖片改名為feature.jpeg放在index.md同層，你不需要在md裡的front matter指定就可以正常顯示
• 若要在文章內看使用圖檔，可以在md同層建一個folder e.g. images，把圖放進去，md檔可以直接使用，不用甚麼都塞在assets下
• 圖檔請用jpeg、png….

文章順序

#

可以用weight來指定順序:

• params.toml裡的’orderByWeight=true'
• md檔的front matter設定weight: weight=1，數字越大排越後。
• md檔會在footer顯示上下頁的箭頭，但會和習慣相反: 上一頁在右；下一頁在左。要改變這個格式，param.toml的invertPagination=true

favicon

#

可用這個連結載入你的圖，他產生一個zip檔，解開後會有不同尺寸的favicon，放到static/下。

day/night mode

#

可以設定day/night mode，下面範例是將它預設為night mode 在_default/params.toml裡設定defaultAppearance

defaultAppearance = "dark"  # valid options: light or dark

改善載圖速度

#

如果網頁的圖比較多，圖的layout要花一點時間才能調整好，可以用以下方法改善:

• 將圖縮小，200~300KB
• 改用figure
• img裡面調整class，加快渲染的速度
  • 加上 class="aspect-square object-cover"
  • aspect-square是壓成正方形(1:1)
  • aspect-video(16:9)適合寬的風景圖
  • aspect-[寬/高]，如aspect-[3/2]，可以讓你調整橫式與長式。以上aspect-xxx是指要用甚麼樣的容器放照片
  • 以上都要加上object-cover，不然會變形
  沒有加aspect，瀏覽器必須等圖片下載完，知道寬高後，才開始計算佈局；加上後browser在下載前就會知道該圖會佔多少空間，跳過計算重排的時間
• img裡設定decoding和loading
  • <img ... decoding="async" loading="lazy">
  • async decoding可以讓網頁運作順暢(背景load圖)
  • lazy loading是看到圖才去載圖，不然他會全載入(不分前後)