星星的筆記．Lucas

Windows 中優雅的開機自動執行 JS 腳本

Sat, 18 Apr 2026 00:00:00 GMT

這一陣子有在做兩個小工具，都是要在 Windows 開機的時候自動執行特定的 JS 腳本，原本我用了工作排程器 (Task Scheduler) 來觸發，但問題就在每次開機之後，都會閃過一下終端機視窗，看著就會有點不爽就是了。

所以我就去找了一下有沒有更好的方式，去找了一些 Windows 啟動 JS 腳本的套件，爬到原始碼之後，發現竟然是用 VBScript + Regedit 的方式來達成的，而且試過之後還真的不會閃出終端機視窗，Windows 還真是麻煩啊！

實作自動開機腳本

首先需要將檔案放在同一個資料夾中：

root/
├── my-service.js   - 我們寫的，要自動執行的 JavaScript 腳本
├── start.vbs       - 用來執行 JS 腳本的 VBScript 腳本
├── install.cmd     - 註冊開機自動執行
└── uninstall.cmd   - 取消註冊開機自動執行

基本上原理就是，會在 Windows 的 Regedit 裡面註冊一個項目，會在開機啟動時執行一個 VBScript 腳本 start.vbs，裡面會透過 Node.js 來執行傳給該 VBScript 的腳本：

start.vbs

CreateObject("WScript.Shell").Run """C:\Program Files\nodejs\node.exe"" """ & WScript.Arguments(0) & """", 0, False

接著我們需要 install.cmd 和 uninstall.cmd 兩個批次檔，分別用來註冊和取消註冊這個開機自動執行的功能。註冊時需要提供一個名字，可以將 MyService 替換成你想要的名字，還有要執行的 JS 腳本路徑 my-service.js，%~dp0 是批次檔所在的資料夾路徑，這樣就不需要擔心路徑問題了：

install.cmd

@echo off
reg add "HKCU\Software\Microsoft\Windows\CurrentVersion\Run" /v "MyService" /t REG_SZ /d "wscript.exe \"%~dp0start.vbs\" \"%~dp0my-service.js\"" /f
echo.
echo MyService installed successfully!
pause

然後對應的取消註冊的批次檔，做刪除註冊項目的動作就可以了：

uninstall.cmd

@echo off
reg delete "HKCU\Software\Microsoft\Windows\CurrentVersion\Run" /v "MyService" /f
echo.
echo MyService uninstalled successfully!
pause

試用 ui.sh：Tailwind 的 AI 設計工具

Fri, 17 Apr 2026 00:00:00 GMT

來淺淺分享一下 Tailwind 推出的新 AI 服務 ui.sh 的體驗心得~

ui.sh 是什麼?

ui.sh 是 Tailwind 推出的新 AI 服務，使用 /ui 這個 skill 來改善 AI 產生的 Tailwind CSS 網站設計，底層是一套用於設計和建立 UI 的最佳實踐資料庫。目前擅長的領域是產生 Landing Page、Dashboard 等常見的網站類型。

技術上是使用 skill 來呼叫遠端的 MCP，然後才能取得更詳細的設計指引內容，算是使用了漸進式揭露的設計方式，好處是有任何更新都會是即時的，不需要重新安裝任何 skill。這種設計基本上在 Claude Code 和 Codex 上都是可以使用的，不過文件寫了建議你使用 Opus 4.6 就是了哈哈哈

原因是因為在建構 ui.sh 的 prompt 時，是讓 Tailwind 團隊的設計師 Steve Schoger 在學習使用 Claude Code 建構網站的過程中，將其中的經驗精煉出來而變成 ui.sh 的，然後人家又是使用 Opus 4.6… 像我這樣的 $20 使用者沒辦法大規模使用阿… 今天我嘗試用一下 Opus 4.7，做了 1.5 個功能然後就被強制休息了呵呵

設計方案選擇器

比起設計內容是其次，我覺得最好玩的是這個選擇器XDD 沒有靈感的時候，只要跟 AI 許願說請幫我產生一些不同的設計方案，它就會在 HTML 中注入 ui-picker.js 的腳本，然後你的網頁中就會在下方出現一個黑色選擇器，可以切換 4 組方案讓你選擇~ 而且不僅限在整個頁面，網頁其中的一個小區塊一樣也可以~ 對於有時候想要重新洗牌 AI 產生 UI 的操作變得更容易了。

下面是我使用 ui.sh 搭配 Opus 4.7 產生的設計方案選擇器的結果：

產品狀態和收費方式

目前 ui.sh 產品狀態是封閉測試階段，需要先加入候補名單，然後才有機會收到邀請使用的機會。然後收費方式是每年 USD$120 ($10/月)。我是覺得不算太貴，又急著想體驗，所以就刷下去了哈哈哈

如何選擇前端設計的 Skill?

目前我知道的前端設計相關的 Skill 大概有這幾個，簡單介紹一下差異 (只有 ui.sh 是付費的，其他都免費)：

ui.sh：專門為 Tailwind CSS 網站設計的，如果你是 Tailwind 的使用者，這個 Skill 可能會非常適合你
Anthropic 的 frontend-design skill：算是比較通用的前端設計工具，適用於想要快速美化前端設計的開發者，如果你想要快速產出一個有個性的頁面，可以直接使用這個 Skill
impeccable：一個更全面的前端設計工具，提供了從設計到實現的完整流程，適合有一定前端設計經驗的開發者，尤其是那些需要嚴格避免 AI slop 設計模式的團隊
ui-ux-pro-max：一個大型的知識庫驅動的設計系統自動化工廠，適合需要快速生成比較成熟的設計系統的團隊

定位上都是有些不同，可以根據自己的需求來選擇適合的工具~

2025 年終回顧

Wed, 31 Dec 2025 00:00:00 GMT

其實以前是沒有寫回顧的習慣的，但今年突然有了寫的慾望XD 想說至少整理一下自己的這一年的經歷和以後的目標吧！

渾渾噩噩的度過

最近在聽尖不想寫扣這個 Podcast 的時候，Anthony 有分享說他今年會常常在想：「自己的人生想要什麼？要怎麼平衡工作與生活？」，我自己是滿有同感的。

我讀了6~7年的大學終於快要畢業了，為了保證明年年初就可以畢業，今年我選的課都幾乎是塞滿的說，同時還有在做接案，生活節奏上是讓我有點喘不過氣來，也會常常想說我以後要怎麼平衡工作與生活？就會想希望未來自己可以做一些改變。聽到 Anthony 說他也在想這種事情，我自己也覺得或許沒那麼孤單了XD

今年部落格做了什麼改變?

回首望去 2025 年，我自己幾乎都被讀書和接案工作佔滿了，總覺得時間過得太快太快，有種自己快要變成只會重複讀書和工作的機器了呵呵。話雖是那麼說，但總歸還是有做了一些事情可以拿來分享的呵呵~

今年我終於幫自己的部落格買了一個獨立的域名(star-note-lucas.me)了~ 對於我自己來說也是一個很重要的里程碑，像是解鎖了一個人生成就了一樣~ 以前只為了圖方便，都直接用 Vercel 預設的免費域名呵呵。

然後今年終於對部落格進行了大改版，最近接案中有使用了 Astro 來試做了幾個專案，覺得他特別適合這種小型靜態網站，再加上原本的 VuePress 的靈活度不大夠，這就足以有動力來重寫了XDD 除了直接重寫部落格外，也對專案架構、畫面設計等都做了大量優化，最後現在看到的版本就是我自己很滿意的一版啦~

被迫學習 AI，但是為了偷懶XD

這兩年 AI 突然開始爆紅，讓我這個手寫派也被迫開始學習新工具了，找了一些 GitHub Copilot、Claude Code 的免費、付費課程開始學，學了半年至少可以在實際寫程式中一起協做，可以省了一些做有重複性剪剪貼貼的工作了~

但不得說還是無法完全替代人，有滿多專案的大方向還是得自己把空住才行，畢竟我是真的不那麼信任 AI 就是了。

優化 Terminal 體驗

在開始用了 Claude Code 之後，就萌生了一些優化跟 Terminal 相關的想法。

原本我的 Windows Terminal 有設定了一組背景圖片，每天登入電腦後就會自動輪換下一張，這些程式設定原本是和我常用的設定檔放在一起，但最近迷上了「魔法少女的魔女審判」XDD 想要可以快速替換不同的背景圖片，且為了好管理，就做了 Terminal Wallpaper 呵呵~

然後 Claude Code 每次派發完任務之後，有任何問題或執行完成後都靜悄悄，完全不理人QQ 因此就爬了一下網路找播放提示音的作法，並做了 Claude Code 提示音合集，雖然只放了一個簡單的聲音，來不及做「魔法少女的魔女審判」的版本，等以後補上吧~

寫了人生第一個 ESLint 套件

自從 3 年前 Anthony Fu 釋出了 eslint-config，我才有使用 ESLint 的習慣直到現在。但最近 Astro 的專案中有個較為特殊的 JSX 寫法，雖然編譯器可以過網頁也能跑，但會在 ESLint 檢查中造成衝突。

為了避免專案中出現此寫法，我就寫了人生中第一個 ESLint 的套件 eslint-plugin-astro-explicit-wrapper~

又達成一個人生小成就了~

修了一個 Laravel 上游套件的 bug

當然也是因為今年一直做 Astro 前端的專案，反倒 Laravel 就比較少碰了。

在去年寫 Laravel 時其實就遇到了一個不大不小的問題，Laravel 為了讓 Console 顯示的內容可以設計更漂亮，使用了 Termwind 這個套件，雖然英文可以顯示正常，但如果寫了中文等 CJK 文字就會出現排版問題，雖然不影響程式運作，但看了會不大爽就是呵呵~

於是就去提交了一個 PR：Fix incorrect space count of CJK characters，但 Review 速度非常緩慢，後來有一位網友 James 也對這個 PR 進度感興趣，我們一起跟進了一年後終於成功 merge 了~ 之後在 Laravel 和 Pest 都可以享受到正常的中文排版了！可喜可賀~

Laravel Console 排版問題修復前：

Laravel Console 排版問題修復後：

Pest 測試畫面排版問題修復前：

Pest 測試畫面排版問題修復後：

開源 Laravel ezPay 電子發票套件

不過也不是完全和 Laravel 絕緣，暑假的時候阿龜微氣候有想要串接 ezPay電子發票 API，他們後端也是使用 Laravel 寫，但現在市面上沒有好用的 ezPay電子發票的 Laravel 套件，因此我們就合作開源了 Laravel ezPay Invoice 套件，我負責開發，阿龜微氣候團隊會繼續維護，希望大家多多支持開源~

2025 最喜歡的動漫

當然今年也有看不少動漫，以下是我今年最喜歡的幾部：

我們不可能成為戀人！絕對不行。（※似乎可行？）
金牌得主
明天，美食廣場見。
對我垂涎欲滴的非人少女
琉璃的寶石
GNOSIA
前橋魔女
妻子變成小學生。

還有去電影院看的劇場版動畫，也是看得很爽的：

鏈鋸人蕾潔篇
佐賀偶像是傳奇夢幻銀河樂園

聽說 2026 年又會有好幾部熱門續作，期待明年可以繼續追番啦~

新一年的目標

對於 2026 年的目標，我雖然不敢訂定一個很具體的目標，但至少想要多學一點日文，畢竟還是想要直接看生肉的動漫XD，以及希望可以多去和不同的人交流，畢竟宅在家裡太久，都不大敢和人交流了呵呵，跨出一點舒適圈應該就是我的小目標啦~

願 2026 年有個美好的一年。

Inertia v2.2 的 Infinite Scroll (無限滾動) 新功能

Fri, 03 Oct 2025 00:00:00 GMT

原本在 Inertia v2.0 的時候，應該就要一起推出的 Infinite Scroll (無限滾動) 功能，拖了一年之後，終於在 Inertia v2.2 正式推出了！無限滾動通常常見在聊天室訊息、社交媒體動態、照片牆等場景，可以讓使用者無限滑動載入資料，而不需要點擊分頁按鈕。而且我滿喜歡這個 API 的設計，使用起來還滿簡單的說~

Infinite Scroll (無限滾動)

通常在 Laravel 中都是使用 Model 來取得資料，因此我們可以使用 Inertia::scroll() 來包裝 Eloquent 的分頁結果，它會自動合併分頁參數，並回傳 Inertia 所需的資料格式：

app/Http/Controllers/UserController.php

return Inertia::render('Users/Index', [
    'users' => Inertia::scroll(fn () => User::paginate()),
]);

然後在前端 Vue.js 中，我們就可以使用 <InfiniteScroll> 元件來實現無限滾動功能，以及在 props 中傳入資料來源 users：

resources/js/Pages/Users/Index.vue

<template>
  <InfiniteScroll data="users" as="ul">
    <li v-for="user in users.data" :key="user.id">
      {{ user.name }}
    </li>
  </InfiniteScroll>
</template>

<script setup>
import { InfiniteScroll } from '@inertiajs/vue3'

const props = defineProps({
  users: Object,
})
</script>

<InfiniteScroll> 元件背後使用了 Intersection Observer API 來偵測使用者是否快要滾動到底部，當快到底部時就會自動載入下一頁的資料，並且會自動合併到目前的資料中。

<InfiniteScroll> 元件也有一些其他的 props 可以使用。比如 buffer 可以設定在距離底部多少像素時候開始載入下一頁，預設是 0 像素：

<InfiniteScroll data="users" as="ul" :buffer="1000">
  ...
</InfiniteScroll>

<InfiniteScroll> 元件預設的網址處理方式是，當載入下一頁資料時會更新瀏覽器網址列的分頁參數，如果不想要更新網址列，可以加上 preserve-url prop：

<InfiniteScroll data="users" as="ul" preserve-url>
  ...
</InfiniteScroll>

當然也可以使用 loading slot 來自訂載入中的顯示內容：

<InfiniteScroll data="users" as="ul">
  ...

  <template #loading>
    <div>載入中...</div>
  </template>
</InfiniteScroll>

最後完整範例如下：

<template>
  <InfiniteScroll
    data="users"
    as="ul"
    :buffer="1000"
    preserve-url
  >
    <li v-for="user in users.data" :key="user.id">
      {{ user.name }}
    </li>

    <template #loading>
      <div>載入中...</div>
    </template>
  </InfiniteScroll>
</template>

<script setup>
import { InfiniteScroll } from '@inertiajs/vue3'

const props = defineProps({
  users: Object,
})
</script>

如果想要更詳細的說明，可以參考 Inertia 文件：Infinite scroll - Inertia.js。

Demo

這次的無限滾動功能，可以在 inertia-v2-demo 裡面試用喔~

參考資料

Infinite scroll - Inertia.js

部署 Astro 專案到低配置的 Ubuntu 伺服器

Fri, 12 Sep 2025 00:00:00 GMT

這回 Astro 專案的開發，一開始選定了部署到 Netlify 上，結果正式站在上線之時卻意外掛掉，查了之後發現是 Astro 在 Netlify 使用 Session 時，依賴的 Netlify Blobs 卻有問題，無奈之下決定改用自架的 Ubuntu 伺服器來部署。

為了節省成本，這次專案給了超小的 Ubuntu 伺服器，只有 1G RAM，可是專案不是小專案，那不出意外的自然無法部署成功，因為跑 yarn build 時報了記憶體不足的錯誤 (這還是我頭一回見到 Node.js 中的記憶體不足的錯誤XDD)。後來我就研究了一個方法，先在本地 WSL 內編譯好，再把編譯好的檔案用 SFTP 傳到伺服器上，這樣就可以成功部署了~

在 Ubuntu 伺服器上可以直接用 Node.js 的部署方式，使用 Nginx 作反向代理，並用 pm2 來管理 Astro 的 Node.js 服務。

Nginx 反向代理設定

Nginx 只要負責反向代理的部分就行了，以下是 Nginx 設定範例：

/etc/nginx/sites-available/your-domain.conf

server {
    listen 80;
    listen [::]:80;
    server_name your-domain;
    server_tokens off;
    root /var/www/html;

    index index.html;

    charset utf-8;

    location / {
        proxy_pass http://localhost:4321;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "no-referrer-when-downgrade" always;
}

手動部署專案

在本地編譯和上傳檔案：

Terminal window

# remote: 重建 dist 資料夾
rm dist -rf && mkdir dist

# local: 編譯和上傳檔案
yarn
yarn build
# 記得要設定全局變數
cp .env.example .env
sftp user@remote_host
> cd /var/www/html
> put -r dist
> bye

然後在伺服器上用 pm2 來啟動服務：

Terminal window

# remote: 安裝 pm2 並啟動服務
npm install -g pm2
pm2 start ./dist/server/entry.mjs --name app_name
pm2 startup
pm2 save

# remote: 重啟服務
pm2 list
pm2 restart app_name --update-env
# 或者是完全刪除再啟動
pm2 delete app_name
pm2 start ./dist/server/entry.mjs --name app_name

解除限制！自動化部署

後來這個專案合作的後端工程師找到了編譯時記憶體不足的解法，在執行 yarn build 時，增加 Node.js 的記憶體限制，這樣就可以直接在伺服器上編譯了，但這個數值還是不能超過實際上的記憶體上限呵呵：

Terminal window

NODE_OPTIONS="--max-old-space-size=1024" yarn build

如果可以在伺服器上直接編譯的話，就可以寫部署腳本來自動化部署了。這樣每次要更新網站時，只要把程式碼推到 GitHub 後，在伺服器上執行這個腳本就可以了：

deploy.sh

#!/bin/bash

git pull origin main

yarn
NODE_OPTIONS="--max-old-space-size=1024" yarn build

pm2 restart app_name --update-env

然後就可以 ssh 到伺服器上執行這個腳本來部署了：

Terminal window

# 使用 ssh 登入伺服器
ssh user@remote_host
cd /var/www/html

# 設定 git 不要處理檔案權限的變更，並給予 deploy.sh 執行權限
git config core.fileMode false
chmod +x deploy.sh

# 執行部署腳本
./deploy.sh

Astro 排除部分路徑不檢查 CSRF Origin

Sun, 27 Jul 2025 00:00:00 GMT

Astro 預設會檢查提交表單的 Origin 是否與網站的 Origin 相同，目的是為了防止 CSRF 攻擊，但是在串第三方金流 API 的時候，回傳的請求就會被擋下來，因為第三方金流的 Origin 不會是我們的網站 Origin。

既然 Astro 沒有提供排除部分路徑的選項，那就自己複製出來改吧！

修改 Astro 的 `originCheck` Middleware

先把 Astro 預設的 checkOrigin 給關掉：

astro.config.ts

export default defineConfig({
  security: {
    // Change built-in origin check to custom function
    // @see src/middleware.ts
    checkOrigin: false,
  },
})

然後在 src/middleware/originCheck.ts 新增一個 originCheck 的 middleware，裡面只新增了 EXCLUDE_PATHS 陣列，放入需要排除的路徑，這樣就可以讓 Astro 在這些路徑上不檢查 CSRF 的 Origin 了。

比如我們這邊就放了金流的回傳請求路徑 /checkout/done：

src/middleware/originCheck.ts

/**
 * @reference https://github.com/withastro/astro/blob/d2d04b02773f82103db75076fcdd1f089503770a/packages/astro/src/core/app/middlewares.ts
 */

import { defineMiddleware } from 'astro:middleware'

/**
 * Content types that can be passed when sending a request via a form
 *
 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype
 * @private
 */
const FORM_CONTENT_TYPES = [
  'application/x-www-form-urlencoded',
  'multipart/form-data',
  'text/plain',
]

// Note: TRACE is unsupported by undici/Node.js
const SAFE_METHODS = ['GET', 'HEAD', 'OPTIONS']

// Paths that should be excluded from origin check
const EXCLUDE_PATHS = [
  '/checkout/done',
]

/**
 * Returns a middleware function in charge to check the `origin` header.
 */
export const originCheck = defineMiddleware((context, next) => {
  const { request, url, isPrerendered } = context
  // Prerendered pages should be excluded
  if (isPrerendered) {
    return next()
  }
  // Safe methods don't require origin check
  if (SAFE_METHODS.includes(request.method)) {
    return next()
  }
  // Exclude specific paths from origin check
  if (EXCLUDE_PATHS.includes(url.pathname)) {
    return next()
  }

  const isSameOrigin = request.headers.get('origin') === url.origin

  const hasContentType = request.headers.has('content-type')
  if (hasContentType) {
    const formLikeHeader = hasFormLikeHeader(request.headers.get('content-type'))
    if (formLikeHeader && !isSameOrigin) {
      return new Response(`Cross-site ${request.method} form submissions are forbidden`, {
        status: 403,
      })
    }
  } else {
    if (!isSameOrigin) {
      return new Response(`Cross-site ${request.method} form submissions are forbidden`, {
        status: 403,
      })
    }
  }

  return next()
})

function hasFormLikeHeader(contentType: string | null): boolean {
  if (contentType) {
    for (const FORM_CONTENT_TYPE of FORM_CONTENT_TYPES) {
      if (contentType.toLowerCase().includes(FORM_CONTENT_TYPE)) {
        return true
      }
    }
  }
  return false
}

最後在 src/middleware/index.ts 中套用這個 middleware 就可以了：

src/middleware/index.ts

import { sequence } from 'astro:middleware'
import { originCheck } from './originCheck'

export const onRequest = sequence(
  // 必須將 `originCheck` 放在 middleware 的第一個
  originCheck,
  ...
)

在 Astro 中用 nanostores 共享全局變數

Sat, 08 Mar 2025 00:00:00 GMT

Astro 本身是沒有共享全局變數的功能，不過文件中建議使用 nanostores 這個套件，可以在純 JS 和各種前端框架中使用，以及支援 TypeScript，且使用上也很簡單。

在 Astro 中我對 nanostores 使用方式的理解是，因為 Astro 預設每個頁面都會重新初始化，因此狀態管理就可以非常簡單，只需管理跨元件的共用狀態，不用管切換路由後如何清理資料。

這篇文章記錄了一下我第一次用 nanostores 做的範例，是訊息提示元件的狀態管理，可以呼叫顯示訊息提示的函數，並在 2 秒後自動消失。

安裝 nanostores

Terminal window

yarn add nanostores

實作成功訊息功能

首先先定義一個 $messageState 在 src/stores/message.ts 中，$messageState 保存了顯示訊息類型和訊息內容，然後寫一個 showMessage() 函數來設定呼叫時要顯示的類型和內容，並在 2 秒後會自己消失：

src/stores/message.ts

import { atom } from 'nanostores'

export type MessageType = 'success' | 'info'

export const $messageState = atom({
  type: null as MessageType | null,
  content: '',
})

export function showMessage(type: MessageType, content: string) {
  $messageState.set({ type, content })

  setTimeout(() => {
    $messageState.set({ type: null, content: '' })
  }, 2000)
}

然後需要增加一個 src/components/MessagesContainer.astro 用來顯示訊息提示，會監聽剛才的 $messageState 更新訊息內容，有內容存在就顯示出來：

src/components/MessagesContainer.astro

<div class="messages-container"></div>

<script>
import { $messageState } from '@/stores/message'

$messageState.subscribe(value => {
  const messagesContainer = document.querySelector('.messages-container') as HTMLElement
  if (value.type) {
    messagesContainer.innerHTML = `
      <div class="message message-${value.type}">
        ${value.content}
      </div>
    `
  } else {
    messagesContainer.innerHTML = ''
  }
})
</script>

這樣一個簡易的訊息提示功能就完成了~ 現在用一個複製連結按鈕當範例，用法就是綁一個點擊事件，然後呼叫 showMessage() 函數即可：

src/pages/index.astro

<script>
import { showMessage } from '@/stores/message'

const btnCopy = document.querySelector('.btn-copy') as HTMLButtonElement
btnCopy.addEventListener('click', () => {
  // 複製連結...
  showMessage('success', '連結已複製')
})
</script>

只是現在如果短時間內觸發多次的話，舊的 setTimeout() 會干擾到新的狀態呈現，這邊我們可以加一個 timer，在設定 setTimeout() 之前先清除掉舊的 timer：

src/stores/message.ts

let timer = null as ReturnType<typeof setTimeout> | null

export function showMessage(type: MessageType, content: string) {
  $messageState.set({ type, content })

  if (typeof timer === 'number') {
    clearTimeout(timer)
  }

  timer = setTimeout(() => {
    $messageState.set({ type: null, content: '' })
  }, 2000)
}

這個寫法是使用 Astro 元件和純 JS 來實作，基於 nanostores 可以跨框架的特性，也可以用在 React、Vue、Svelte 等等框架的元件中~

參考資料

nanostores

在 Laravel Forge 配置的服務器上用 Docker 部署 Vite 專案

Fri, 21 Feb 2025 00:00:00 GMT

第一次試 Docker 部署專案，以及使用 Nginx 設定反向代理，紀錄一下筆記。

Docker 設定

Docker 安裝基本是參考官方文件，這邊就不贅述了。

這次測試用的專案是 Vite 6.1 版本，image 使用 node:22-alpine 版本，單純的前端專案部署。下面是一個簡單的 Dockerfile 設定：

Dockerfile

FROM node:22-alpine

WORKDIR /app

COPY package.json yarn.lock ./
RUN yarn
COPY . .
RUN yarn build

EXPOSE 4173

CMD ["yarn", "preview", "--host", "0.0.0.0"]

為了可以使用 Docker Compose 來管理，新增一個 compose.yaml：

compose.yaml

services:
  web:
    build: .
    ports:
      - "4173:4173"

然後就可以使用 Docker Compose 來啟動容器了：

Terminal window

docker compose up -d

關閉容器，可以使用：

Terminal window

docker compose down

Nginx 反向代理設定

Forge 預設使用 Nginx 來做網站伺服器，因此我們可以直接使用 Nginx 來做反向代理，讓請求可以轉發到 Docker 容器上。

在 Forge 的網站設定中，點 Edit Files > Edit Nginx Configuration 開啟 Nginx 設定，並根據以下設定調整：

# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/your-domain.com/before/*;

server {
    listen 80;
    listen [::]:80;
    server_name your-domain.com;
    server_tokens off;
    root /home/forge/your-domain.com;

    # FORGE SSL (DO NOT REMOVE!)
    # ssl_certificate
    # ssl_certificate_key

    ssl_protocols TLSv1.2 TLSv1.3;
    # ssl_ciphers XXXXXXX
    ssl_prefer_server_ciphers off;
    ssl_dhparam /etc/nginx/dhparams.pem;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    charset utf-8;

    # FORGE CONFIG (DO NOT REMOVE!)
    include forge-conf/your-domain.com/server/*;

    location / {
        proxy_pass http://127.0.0.1:4173;
        proxy_redirect off;

        proxy_set_header Host $proxy_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  off;

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/your-domain.com/after/*;

主要是 proxy_pass 等相關設定比較重要，其他的設定可以根據需求調整。

雖然折騰了滿久的，不過瞭解了細節後還是挺簡單的嘛！(哼！看你下次撞完牆後還敢這麼說😂)

參考資料

Astro 使用 Zod 驗證網址 Query String 格式

Sun, 09 Feb 2025 00:00:00 GMT

網址中的 Query String 參數驗證是一個還滿常見的需求，通常都會在需要做搜尋或過濾器的頁面中使用，傳統的作法都會是使用 if 判斷式來驗證參數是否符合預期的格式，但這樣的寫法我是覺得還滿醜的說。後來我就嘗試使用 zod 來解析驗證查詢參數，程式碼的確是看起來更簡潔也更好維護了~ 雖然需要稍微了解一下 zod 的用法，但其實也不難上手。

安裝套件

安裝 zod 和 query-string 這兩個套件，因為要解析網址 Query String，因此也一併安裝了 query-string：

Terminal window

npm install zod query-string
# or
yarn add zod query-string

解析 Query String 參數

這邊先看一個解析 Query String 參數的範例：

import { z } from 'zod'
import qs from 'query-string'

const defaultParams = {
  page: 1,
  priceFrom: 0,
  priceTo: 1000,
  sort: 'latest' as 'latest' | 'oldest',
}
const PRICE_MIN = 0
const PRICE_MAX = 1000

const querySchema = z.object({
  page: z.coerce.number().positive().default(1).catch(1),
  type: z.enum(['a', 'b', 'c']).nullish().default(null).catch(null),
  search: z.coerce.string().nullish().default(null).catch(null),
  category: z.coerce.number().nullish().default(null).catch(null),
  priceFrom: z.coerce.number().min(PRICE_MIN).max(PRICE_MAX).default(defaultParams.priceFrom).catch(defaultParams.priceFrom),
  priceTo: z.coerce.number().min(PRICE_MIN).max(PRICE_MAX).default(defaultParams.priceTo).catch(defaultParams.priceTo),
  tags: z.preprocess(val => [val || []].flat().map(Number).filter(Boolean), z.array(z.number())).catch([]),
  sort: z.enum(['latest', 'oldest']).default(defaultParams.sort).catch(defaultParams.sort),
})

const params = querySchema.parse(qs.parse(Astro.url.search))

以下是 zod 常見驗證查詢參數的範例：

// string 類型
z.coerce.string().nullish().default(null).catch(null)

// enum 類型
// 預設值為 null
z.enum(['product', 'service']).nullish().default(null).catch(null)
// 預設值不為 null
z.enum(['latest', 'oldest']).default('latest').catch('latest')

// number 類型
// 預設值為 null
z.coerce.number().nullish().default(null).catch(null)
// 預設值不為 null
z.coerce.number().default(0).catch(0)
// 限制範圍
z.coerce.number().min(0).max(100).default(1).catch(1)

// page 分頁頁數
z.coerce.number().positive().default(1).catch(1)

// array 類型
// 例如 tags 是 number[] 類型
//
// array 類型比較複雜，可以先使用 preprocess() 來處理輸入的值，
// 將輸入的值轉換成內部都是 Number 的陣列，並且過濾掉非數字的值，
// 最後再使用 z.array(z.number()) 來驗證陣列中的值都是數字。
z.preprocess(val => [val || []].flat().map(Number).filter(Boolean), z.array(z.number())).catch([])

這邊說明一下上面範例中使用到的 zod 方法：

coerce：將值強制轉換為指定的類型。
enum：限制值必須是列舉中的其中一個。
min：限制值必須大於等於指定的最小值。
max：限制值必須小於等於指定的最大值。
positive：限制值必須大於 0。
default：設定預設值。
nullish：允許值為 null 或 undefined。
catch：當值無法通過驗證時，使用預設值。
preprocess：對值進行預處理。

使用 zod 來驗證查詢參數的關鍵是 coerce、default 和 catch 這三個方法：

coerce 用來將值轉換為指定的類型，比如解析數字時非常關鍵
而 default 和 catch 的組合可以無論是沒有輸入、或是錯誤的輸入，都可以套用預設值，不會因為錯誤的輸入而導致程式出錯。

最後就可以在 Astro 頁面中使用解析後的參數了，而且參數一定會是符合預期的格式和型別：

<ul>
  <li>page: {params.page}</li>
  <li>type: {params.type}</li>
  <li>search: {params.search}</li>
  <li>category: {params.category}</li>
  <li>priceFrom: {params.priceFrom}</li>
  <li>priceTo: {params.priceTo}</li>
  <li>tags: {params.tags}</li>
  <li>sort: {params.sort}</li>
</ul>

參考資料

zod 說明文件

Astro + @astrolicious/i18n 實作 i18n 多語系功能

Sat, 08 Feb 2025 00:00:00 GMT

之前有使用過用 Paraglide 做 Astro i18n，但做起來就是很卡。後來發現 I18n for Astro (@astrolicious/i18n) 這個套件更好用，於是就改用這個套件來做多語系功能。

安裝 @astrolicious/i18n

@astrolicious/i18n 是基於 i18next 這個套件來做的，因此也需要安裝 i18next：

Terminal window

yarn add i18next @astrolicious/i18n

然後註冊 i18n 套件：

astro.config.ts

import i18n from '@astrolicious/i18n'

export default defineConfig({
  integrations: [
    i18n({
      defaultLocale: 'zh-TW',
      locales: ['zh-TW', 'en'],
    }),
  ],
})

在 Layout 中加入 I18nHead 元件來處理 SEO 相關的 meta：

src/layouts/Layout.astro

---
import I18nHead from '@astrolicious/i18n/components/I18nHead.astro'
import { getHtmlAttrs, getLocale } from 'i18n:astro'

const locale = getLocale()

const htmlLangMap: Record<string, string> = {
  'zh-TW': 'zh-Hant-TW',
}

const htmlAttrs = getHtmlAttrs()
htmlAttrs.lang = htmlLangMap[locale] || locale
---

<!doctype html>
<html {...htmlAttrs}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />

    <I18nHead />
  </head>
  <body>
    ...
  </body>
</html>

設定多語系檔案

在 src/locales/ 目錄下建立語系檔案，檔案格式為 JSON：

src/locales/en/common.json

{
  "nav_about": "About",
  "nav_home": "Home",
  "nav_posts": "Posts"
}

src/locales/zh-TW/common.json

{
  "nav_about": "關於",
  "nav_home": "首頁",
  "nav_posts": "文章"
}

使用翻譯

然後在元件或頁面中使用 t 函式來取得翻譯：

src/layouts/Layout.astro

---
import { t, getHtmlAttrs, getLocale, getLocalePath } from 'i18n:astro'
---

<!doctype html>
<html {...htmlAttrs}>
  <head>
    ...
  </head>
  <body>
    <ul class="menu">
      <li class:list={['menu-item', pathname === getLocalePath('/') && 'active']}>
        <a href={getLocalePath('/')}>{t('nav_home')}</a>
      </li>
      <li class:list={['menu-item', pathname.startsWith(getLocalePath('/posts/')) && 'active']}>
        <a href={getLocalePath('/posts/')}>{t('nav_posts')}</a>
      </li>
      <li class:list={['menu-item', pathname === getLocalePath('/about/') && 'active']}>
        <a href={getLocalePath('/about/')}>{t('nav_about')}</a>
      </li>
    </ul>
  </body>
</html>

新增語言選單

可以顯示語系文字後，就可以新增語言選單切換語系：

src/layouts/Layout.astro

---
import { t, getHtmlAttrs, getLocale, getLocalePath, getSwitcherData } from 'i18n:astro'

const switcherData = getSwitcherData()

const switcherLabels: Record<string, string> = {
  en: 'English',
  'zh-TW': '繁體中文',
}
---

<!doctype html>
<html {...htmlAttrs}>
  <head>
    ...
  </head>
  <body>
    <ul class="menu">
      ...
      <li class="menu-item menu-item-lang menu-item-has-children">
        <a href="#">
          <i class="fas fa-globe"></i>
          {switcherLabels[locale]}
        </a>
        <ul class="sub-menu">
          {switcherData.map(item => (
            <li class:list={['menu-item', item.locale === locale && 'active']}>
              <a href={`${item.href.replace(/\/$/, '')}/`}>{switcherLabels[item.locale]}</a>
            </li>
          ))}
        </ul>
      </li>
    </ul>
  </body>
</html>

完整程式碼

以下是完整的 Layout 程式碼：

src/layouts/Layout.astro

---
import { t, getHtmlAttrs, getLocale, getLocalePath, getSwitcherData } from 'i18n:astro'

const locale = getLocale()
const switcherData = getSwitcherData()

const switcherLabels: Record<string, string> = {
  en: 'English',
  'zh-TW': '繁體中文',
}

const htmlLangMap: Record<string, string> = {
  'zh-TW': 'zh-Hant-TW',
}

const htmlAttrs = getHtmlAttrs()
htmlAttrs.lang = htmlLangMap[locale] || locale
---

<!doctype html>
<html {...htmlAttrs}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />

    <I18nHead />
  </head>
  <body>
    <ul class="menu">
      <li class:list={['menu-item', pathname === getLocalePath('/') && 'active']}>
        <a href={getLocalePath('/')}>{t('nav_home')}</a>
      </li>
      <li class:list={['menu-item', pathname.startsWith(getLocalePath('/posts/')) && 'active']}>
        <a href={getLocalePath('/posts/')}>{t('nav_posts')}</a>
      </li>
      <li class:list={['menu-item', pathname === getLocalePath('/about/') && 'active']}>
        <a href={getLocalePath('/about/')}>{t('nav_about')}</a>
      </li>
      <li class="menu-item menu-item-lang menu-item-has-children">
        <a href="#">
          <i class="fas fa-globe"></i>
          {switcherLabels[locale]}
        </a>
        <ul class="sub-menu">
          {switcherData.map(item => (
            <li class:list={['menu-item', item.locale === locale && 'active']}>
              <a href={`${item.href.replace(/\/$/, '')}/`}>{switcherLabels[item.locale]}</a>
            </li>
          ))}
        </ul>
      </li>
    </ul>
  </body>
</html>

WebConf 2024 心得

Thu, 09 Jan 2025 00:00:00 GMT

紀錄一下去聽 WebConf 2024 的小小心得~

如何撰寫具彈性的測試程式

第一次看到 Summer 的真面目XDDD 知道 Summer 這個人還是從部落格「Summer。桑莫。夏天」了解的。這次議程也是從測試的一些心法概念開始講起，也有講到許多測試的 Best practice。雖然舉例是用 React，不過 Vue 應該也是同樣適用吧~

設計很豐滿，開發很骨感 — 淺談設計交付

第一次了解到 Figma 有推出 Design Tokens 的功能！！！畢竟我平常沒有在關注 Figma 的新功能，反而是這兩天，在不同議程都有聽到講者提到這個東西，才知道說這是一個神器！之後可以來玩玩看~

淺談 LLM-based AI Agents 應用開發

我以前只有稍微了解 LLM 而已，對於 Function-Call 等之類的概念都不熟，而這個議程剛好就提到這些 LLM 的基礎內容，也算是有學到新知識了~

《天下》如何思考數位敘事？從流程到技術大公開

這個議程從公佈開始我就超期待的~ 或許我就很喜歡這種解說幕後性質的吧！這回採用 PM + 工程師的兩人搭配還滿新奇的，因為我就很喜歡這種動態網頁的效果，而他們卻可以把動態網頁融入進整個數位報導之中。

且技術並不是為用而用，而是輔助整個報導可以呈現出完整的故事。最喜歡提到的一句「數位敘事，並不是報導的華麗裝飾」。技術上各個專案雖不盡相同，但大體上都是前端圖表、Three.js 3D 建模等方式來做呈現，甚至在需要呈現衛星 3D 畫面時，還需要使用專屬的套件和請教專家來完成，好厲害啊~

網站專案時程的挑戰跟威脅

這個議程 TonyQ 講得我覺得超有趣的~ 分享了滿多鬼故事和管理團隊的建議，感覺一整場都是精華，有談到不少帶團隊的內容，但離我現在還比較遠，可以以後再來慢慢研究~ 這場如果有公開錄影的話還會想再聽一次~

其中對於員工的一條建議記得最清楚：「個人工作時如果有遇到問題要先說出來，去煩死你的主管！」與其等事情爆發，還不如提出問題可以提前做處理。

Zeabur：雲端部署平台 PaaS 核心技術大揭秘

當時看到這個議程我都傻了！因為平常只會寫一點簡單的前/後端的程式碼，對雲、K8S 都沒什麼研究，這回沅霖講的靈感來自 Vercel，從零開始基於 K8S 做的部署平台 Zeabur，我基本上都聽不大懂，只覺得超厲害的說~

實戰！以 Web 3D 技術開發商品客製編輯器

當時一看到 3D 編輯器馬上就選定一定要看了~ 剛好也是因為最近也是有接做 3D 編輯器的案子，也是用 Three.js 開發，就想來了解一下有沒有有趣的分享~ 這個議程主要是分享講者 GUGU 的一些 3D 案子的故事，也有網頁做 3D 的一些小 Tips，還滿有趣的~

ESLint One for All Made Easy

哇！終於可以在現場看到我的偶像 Anthony Fu 的演講了~ 這回講的 ESLint Flat config 我也是有先了解過的，當時也是想要進入 ESLint 的世界，奈何設定太複雜，不想自己做，後來就基於 Anthony 的 ESLint Config 來擴充的。這回也聽到了一些有趣的小技巧，又在現場看到了 Anthony，滿足~

從零到頂尖：無懈可擊的網頁設計

這場勞哥真的算是把設計的精華都分享出來了~ 而對於在場聽眾的前端開發者們，我最印象深刻的是「前端要超越設計」，不是完美復刻設計稿，而是要超越設計稿，哇！感覺前端的工作開始變得高大上起來的😂 其他細節推薦再去看勞哥的簡報了~ (唯一一個小缺點是勞哥的 VTuber 大頭時不時會擋到字就是了XD)

從生活啟程的網站設計體驗

這個我最有印象的就是「台北白晝之夜」了！第一次知道原來2年前台北有辦過這個活動，而且這個網站最有趣的就是3D的台北地圖了！真的佩服講者 Henry 可以策畫出這麼高互動性的展覽~ 而且讓線上線下之間都可以互動，看起來超好玩的~

當 Vue 與 View 分手之後⋯

其實這個議程的主題是 Vue Vapor Mode，看起來是對於底層的優化，而一般開發者不會太感覺到差異。

我看的時候一直都在想，如果專案切成 Vapor Mode 的時候，是不是套件會先壞一半以上啊？不過現在還不急著著急，因為還沒正式推出，等之後 Vue 團隊應該也會為套件開發者寫 Vapor Mode 的文件吧~

結語

實話說剛聽完兩天是真的累爆了！每場議程中間只有 10 分鐘的休息時間，如果上個議程有拖到時間的還會少休息到，但為了不浪費門票還是堅持聽完了呵呵呵😭

第一次聽 PHP/Laravel 以外的研討會，聽到了平常不是很熟的設計相關議程，也算是增加了見識的廣度吧！當然，這次門票是有值回票價的😆~

Inertia v2.0 新功能介紹

Wed, 25 Dec 2024 00:00:00 GMT

Inertia 是一個像膠水一樣的東西，將前後端的框架黏合在一起。在這裡你可以看到用 Laravel 的路由 + Vue.js/React 前端頁面來開發 SPA 網頁應用。而在 2024 年年末，終於 Inertia 推出了 v2.0！我等了好久啊😭！！！下面就一起來看看有哪些新功能吧~

Async Requests (異步載入)

在 Inertia v1.0 的時候，預設載入頁面和 Partial reload (部分重載) 的時候都是同步載入 (Synchronous) 的，機制上是需要等到請求完成後才能發送下個請求，而畫面上則是都會有 Loading 載入的進度條。

這個機制在載入頁面是沒有問題的，畢竟是第一次載入，理所當然一次只能發一個請求，但是在 Partial reload 的時候就變得不大美觀。因為 Partial reload 就是想要模擬打 API 請求的效果，但一次只能發一個請求，且在發送請求時還會出現進度條，就看起來很奇怪。

因為這些原因，Inertia 團隊重寫了載入請求的程式碼，從 Inertia v2.0 開始，預設對當前頁面 Reload 的請求使用了異步載入 (Asynchronous) 的方式。異步載入可以同時發送多個請求的時候，不會影響當前頁面的請求，也不會出現上方的載入進度條，但要注意異步載入無法取消。

	同步載入 (Synchronous)	異步載入 (Asynchronous)
同時請求數	1	Infinity (無限制)
取消請求	可以	不可以
進度條	有	無

Polling (輪巡)

Polling (輪巡) 是可以固定時間重新拉取新資料的功能，通常用於需要即時資料的情境，比如比賽計分、天氣資訊、資訊看板等。

雖然說要手寫也不是什麼難事，不過 Inertia 還是新增了此輔助函數，簡化了需要寫的程式量，讓定時更新資料可以更方便。而且在預設情況下，會在比如縮小視窗、切換到其他頁籤等背景執行時候，限制輪巡的請求。

要使用輪巡，只要呼叫 usePoll() 就可以了，而參數是給每次輪巡間隔的毫秒數：

import { usePoll } from '@inertiajs/vue3'

// 2秒後重新拉資料
usePoll(2000)

效果差不多長這樣：

Prefetching (預先載入)

Prefetching (預先載入) 可以在使用者尚未點擊連結時，預先載入該連結的資料，這樣使用者真正點下此連結時就不用等待載入時間，可以直接看到資料，提升使用者體驗。

要使用 Prefetching 很簡單，只要在 <Link> 元件中加上 prefetch 屬性就可以了，這樣就會在滑鼠滑入連連結 75 毫秒後在背景載入該頁面：

<Link href="/users" prefetch>Users</Link>

<script setup>
import { Link } from '@inertiajs/vue3'
</script>

效果差不多長這樣：

也可以改變載入的時機，比如設定 click 是在點擊連結時預載：

<Link href="/users" prefetch="click">Users</Link>

如果確定使用者一定會點擊連結，可以設定 mount 在頁面載入時就開始預載：

<Link href="/users" prefetch="mount">Users</Link>

預先載入的資料預設會快取 30 秒，快取時間結束後的下次請求，就會強制重新發一次請求。可以透過 cache-for 屬性來設定快取時間，比如 500ms 是 500 毫秒，6s 是 6 秒，1m 是一分鐘等類推，也可以直接傳整數進去設定毫秒：

<Link href="/users" prefetch cache-for="6s">Users</Link>
<Link href="/users" prefetch cache-for="1m">Users</Link>
<Link href="/users" prefetch :cache-for="5000">Users</Link>

cache-for 屬性可以設定兩組時間，第一組是快取資料的有效時間，第二組是從伺服器取得新資料之前，還可以作為舊資料提供使用的時間：

<Link href="/users" prefetch :cache-for="['30s', '1m']">Users</Link>

嗯… 是的，聽完之後一定是霧煞煞的，這兩個不是差不多嗎？，因為我一開始也沒太看懂，後來研究了之後才慢慢搞懂。下面我們一個一個來看：

      第一組時間   第二組時間
--------- * --------- * ---------
 有效期間    資料過時     完全過期

如果是在快取的有效期間 (第一組時間之前) 發出請求，會直接回傳快取資料，不會真的發送請求。

如果是在資料過時 (兩組時間之間) 發出新請求，會先回傳舊資料，並且在背景發送請求，等到新資料回來後，就會把資料更新上去。

如果是在第二組時間之後發出新請求，會將快取資料視為過期，就會像往常規的請求方式一樣，發送新請求來取得新資料。

這個 Cache 的機制，要找一個接近的技術的話，應該是借鑑了 HTTP Cache-Control 的 stale-while-revalidate 機制吧？這是我後來才知道的XD

如果想要更細粒度的控制的話，現在官網有記載一個 usePrefetch() 的 hook，但現在似乎是壞掉的狀態，不建議現在使用。

Deferred Props (延遲載入資料)

Deferred Props (延遲載入資料)，可以讓當前頁面 HTML 先載入後，再去取得資料，體感上又更接近 SPA 的效果。通常如果有以下情況，可以考慮使用 Deferred Props：

資料庫查詢時間較長
載入大量資料
呼叫外部 API

使用方式上，後端部分可以使用 Inertia::defer() 方法，將查詢資料的程式包在函數裡，這樣在載入頁面時就不會先去查詢資料：

return Inertia::render('Users/Index', [
    'users' => Inertia::defer(fn () => User::all()),
]);

預設情況下，所有的 Deferred Props 都會包在一個請求當中，不過可以透過將 Props 分不同群組來並行載入。比如下面的 teams、projects、tasks 這三個 Props 就會在同一個請求中載入，而 users 則會在另一個請求中載入，這兩個請求會同步開始執行。群組名稱是字串，可以自訂名稱：

return Inertia::render('Users/Index', [
    'users' => Inertia::defer(fn () => User::all()),
    'teams' => Inertia::defer(fn () => Team::all(), 'attributes'),
    'projects' => Inertia::defer(fn () => Project::all(), 'attributes'),
    'tasks' => Inertia::defer(fn () => Task::all(), 'attributes'),
]);

前端部分要引入 <Deferred> 元件：

import { Deferred } from '@inertiajs/vue3'

然後在 <Deferred> 元件中傳入延遲載入 Prop 的名稱，內部可以增加一個 fallback 的 Slot 來顯示載入中的畫面：

<Deferred data="users">
  <template #fallback>
    <div>載入中...</div>
  </template>

  <h1>使用者列表</h1>
  <table>
    ...
  </table>
</Deferred>

效果差不多長這樣：

Lazy Loading (惰性載入)

Lazy Loading (惰性載入) 也是一種延緩載入資料時間的功能。這個看名字乍看之下和上面的 Deferred Props 有些相像，但其實是不一樣的。Deferred Props 是在載入頁面完成後就馬上載入新資料，而 Lazy Loading 是在使用者滾動到元素時才載入，機制上是不大一樣的。

因此要判斷使用哪個功能，最簡單就是看當前頁面的長度，如果頁面不長，且新資料的位置是在頁面頂部，就使用 Deferred Props；如果頁面很長很長，新資料需要滾動後才能看到的，就使用 Lazy Loading。

Lazy Loading 在以下情境，且需要滾動後才能看到的時候可以使用：

圖表
大量圖片或影片
無限滾動列表
使用者評論

使用方式上，後端部分可以使用 Inertia::lazy() 方法，將查詢資料的程式包在函數裡，這樣在載入頁面時就不會先去查詢資料：

return Inertia::render('Users/Chart', [
    'chartData' => Inertia::lazy(fn () => [
        'labels' => ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        'data' => [12, 19, 3, 5, 2, 3, 7],
    ]),
]);

前端部分要引入 <WhenVisible> 元件：

import { WhenVisible } from '@inertiajs/vue3'

然後在 <WhenVisible> 元件中傳入要 Lazy Loading 的 Prop 名稱，內部可以增加一個 fallback 的 Slot 來顯示載入中的畫面：

<WhenVisible data="chartData">
  <template #fallback>
    <div>
      載入圖表中...
    </div>
  </template>

  <UsersChart :data="chartData" />
</WhenVisible>

效果差不多長這樣：

Infinite Scroll (無限滾動)

Infinite Scroll 在 Inertia v2.2 終於推出了~

參考文章：Inertia v2.2 的 Infinite Scroll (無限滾動) 新功能

升級到 v2

從 Inertia v1 升級到 v2，可以參考官方的 v2.0 升級指南來進行升級。基本沒有太大的更動，主要差別是版本的調整。Laravel 的部分刪除了 8 和 9 版的支援，最低支援版本是 Laravel 10 和 PHP 8.1，Vue.js 的部分則是刪除了 Vue 2。如果依賴版本沒有太舊的話，理論上升級應該是沒有太大問題的。

Demo

這次的文章提到的新功能，我寫了一個簡單的 Demo，可以下載這個 GitHub Repo inertia-v2-demo 來玩玩看~

結語

Inertia v2.0 推出了許多新功能，我自然是很高興的~ 只是還是有些細節並沒有完善就推出穩定版，是比較可惜的說… 不過 Inertia 對於全端開發上是很有幫助的，至少對我來說是這樣啦XD 相信未來會越來越好的😁！

參考資料

孤獨搖滾劇場版後篇心得

Tue, 15 Oct 2024 00:00:00 GMT

孤獨搖滾劇場總集篇後篇也終於看完了🥰~

這次挑了個平日來電影院，人少的可以XD 除了我以外只有另外一個人在前面坐，讓我體驗一下幾乎算包場的感覺😆

後篇是從第8集的 Live 沒有播到的第三首歌開始，故事主要是放了9~12集的內容。因為沒有了24分鐘的限制，後篇的波奇和喜多的情感就一氣呵成渲染得很好~ 從最開始喜多是被涼學姐吸引來，接著慢慢開始關注小波奇，為了小波奇也開始努力地練習吉他，最後到結尾文化祭 Live 的救場，波喜多真是太棒太甜啦😍😍😍

這次後篇依然還是保持和前篇一樣的製作，有新歌、有快速帶過部分劇情，也有在一些地方加了新畫面和配 BGM~ 整體來說非常滿意🥰 只是在結尾的時候加了一小段時間倒帶的鏡頭，難道說會有第二季嗎？如果有那就趕快公布啊！！！我要看孤獨搖滾第二季啊！！！！！🤩

Astro + Paraglide 實作 i18n 多語系功能

Wed, 09 Oct 2024 00:00:00 GMT

Warning

這篇文章是我在研究 Astro i18n 寫的筆記，但內容不建議使用，現在在 Astro 做多語系請參考 Astro + @astrolicious/i18n 實作 i18n 多語系功能來使用。

Astro 可以做 i18n 的套件有好幾個，看完介紹後挑了個比較喜歡的 Paraglide 來做，而且還有 VSCode 套件可以搭配使用，做翻譯很舒服。

安裝 Paraglide

初始化 Paraglide 設定：

Terminal window

npx @inlang/paraglide-js init

# ❯ Which languages do you want to support?
# en, zh-TW

# 中間的都按 Enter

# Do you want to add the Ninja Github Action for linting translations in CI?
# No

然後修改 project.inlang/settings.json，把 sourceLanguageTag 預設語言改成 zh-TW，languageTags 內的繁體中文也改成 zh-TW 格式：

project.inlang/settings.json

{
  ...
  "sourceLanguageTag": "zh-TW",
  "languageTags": [
    "en",
    "zh-TW"
  ],
  ...
}

以及 messages/zh-TW.json 也要改名成 messages/zh-TW.json。

這裡提到的 messages 資料夾下就是翻譯文字的內容，每個語言一個 JSON 檔。

安裝 Paraglide Astro：

Terminal window

yarn add @inlang/paraglide-astro

然後註冊套件：

astro.config.ts

import { defineConfig } from 'astro/config'
import paraglide from '@inlang/paraglide-astro'

export default defineConfig({
  site: 'https://my-site.dev',
  integrations: [
    paraglide({
      project: './project.inlang',
      outdir: './src/paraglide',
    }),
  ],
  i18n: {
    locales: [
      { codes: ['zh-TW'], path: 'zh-tw' },
      'en',
    ],
    defaultLocale: 'zh-tw',
  },
})

目前 Astro 支援將語言 Code 和網址路徑分開設定，但如果這樣設定的話，會有不同的設定方式：

對應路徑	對應 Astro i18n 的選項
`messages/zh-TW.json`	`codes`，語言 Code 代號
`src/pages/zh-tw/...`	`path`，網址路徑

還有我平常有使用 EditorConfig，這邊附上設定檔：

.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[messages/*]
insert_final_newline = false
trim_trailing_whitespace = false

[project.inlang/*]
insert_final_newline = false
trim_trailing_whitespace = false

安裝 Sherlock VSCode 套件

Paraglide 有推出搭配使用的 VSCode 套件 Sherlock，點擊安裝 Sherlock VSCode 套件。

接著增加 VSCode 設定，確保此專案中都可以看到 Sherlock 的提取提示選項，以及關閉不需要的提示訊息：

.vscode/settings.json

{
  "editor.lightbulb.enabled": "onCode",
  "sherlock.appRecommendations.ninja.enabled": false
}

多語系資料夾結構

如果沒有特別的需求，通常比較通用的多語系資料夾結構是這樣的，預設語言可以不加上語言前墜：

src
├── pages
│   ├── index.astro // 預設語言
│   ├── about.astro // 預設語言
│   └── en
│       ├── index.astro // 英文
│       └── about.astro // 英文

通常版型都會做在預設語言的頁面裡，需要翻譯的部分可以透過後續篇章介紹的翻譯文字來做，因此其他語言就可以直接引用該頁面：

---
import Page from '@/pages/about.astro'
---

<Page />

而如果是需要 SSR 的頁面，需要手動加上 export const prerender = false：

---
import Page from '@/pages/posts/[slug].astro'

export const prerender = false
---

<Page />

當然這是排版完全相同的情形，如果其他語言有較多更改的地方，可以選擇直接複製預設語言的版型出來改比較快。

翻譯文字

記得啟動一下 Astro 的 Dev Server。

然後準備好需要翻譯的文字，並在上方引入 Paraglide 多語系的模組：

---
import * as m from '../paraglide/messages.js'
---

<h1>關於我們</h1>

使用方式很簡單，框選需要翻譯的文字後，點左邊出現的小燈泡按鈕，最下面出現的 Sherlock: Extract Message 選項，就會建立一調新的翻譯項目：

接著輸入翻譯項目的 key，比如 about_us，注意 Sherlock 會將標點符號等擋掉或轉換成底線，然後選擇要替換的文字。

現在就可以看到 m.about_us() 右側就會出現對應的翻譯文字了~ 如果現在鼠標移動到 m.about_us() 上，就可以看到其他語言的翻譯文字，如果上面出現 [missing] 也可以點右邊的閃光來讓 AI 自動產生翻譯文字：

而在左側 Sherlock 的 i18n inspector 也可以查看所有的翻譯文字：

語系設定虛擬模組

在後面要自訂語系的時候，會有缺少一些變數以及需要取得 Astro 的 config 選項，因此這邊我們建一個 Astro Plugin，裡面用 Vite Plugin 產生一個虛擬模組 astro:i18n:config 來引入需要的 config 選項：

src/i18n/config-integration.ts

import type { AstroIntegration, AstroConfig } from 'astro'
import type { Plugin } from 'vite'

export interface I18nConfigOptions {
  locales: Record<string, { text: string, code?: string }>
}

export interface I18nConfig {
  langCodeMap: Record<string, string>
  langTextMap: Record<string, string>
}

interface I18nConfigContext {
  astroConfig: AstroConfig
  i18nConfig: I18nConfig
}

const VIRTUAL_MODULE_ID = 'astro:i18n:config'
const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`

function vitePluginI18nConfig(context: I18nConfigContext): Plugin {
  const { astroConfig, i18nConfig } = context

  const { site } = astroConfig
  const { langCodeMap, langTextMap } = i18nConfig

  const i18nInternal = { site }

  return {
    name: 'astro:i18n:config',
    enforce: 'pre',
    resolveId(id) {
      if (id === VIRTUAL_MODULE_ID) {
        return RESOLVED_VIRTUAL_MODULE_ID
      }
    },
    load(id) {
      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
        return `
          export const langCodeMap = ${JSON.stringify(langCodeMap)}

          export const langTextMap = ${JSON.stringify(langTextMap)}

          export const i18nInternal = ${JSON.stringify(i18nInternal)}
        `
      }
    },
  }
}

export default function (options: I18nConfigOptions): AstroIntegration {
  const i18nConfig = {
    langCodeMap: {},
    langTextMap: {},
  } as I18nConfig

  Object.entries(options.locales).forEach(([locale, { text, code }]) => {
    i18nConfig.langCodeMap[locale] = code || locale
    i18nConfig.langTextMap[locale] = text
  })

  return {
    name: 'i18n-config',
    hooks: {
      'astro:config:setup': ({ config: astroConfig, updateConfig }) => {
        updateConfig({
          vite: {
            plugins: [
              vitePluginI18nConfig({
                astroConfig,
                i18nConfig,
              })
            ],
          },
        })
      },
    },
  }
}

然後為虛擬模組 astro:i18n:config 定義型別設定：

src/i18n/client.d.ts

declare module 'astro:i18n:config' {
  type AstroConfig = import('astro').AstroConfig
  type I18nConfig = import('./config-integration').I18nConfig

  export const langCodeMap: I18nConfig['langCodeMap']
  export const langTextMap: I18nConfig['langTextMap']
  export const i18nInternal: {
    site: AstroConfig['site']
  }
}

最後在 astro.config.ts 引入套件即可，這邊需要注意，locales 的 key 需要和 project.inlang/settings.json 的 languageTags 完全對應，包含大小寫都要一致：

astro.config.ts

import { defineConfig } from 'astro/config'
import i18nConfig from './src/i18n/config-integration'

export default defineConfig({
  integrations: [
    // ...
    i18nConfig({
      locales: {
        'zh-TW': { text: '繁體中文', code: 'zh-Hant-TW' },
        en: { text: 'English' },
      },
    }),
  ],
})

之後只要引入 astro:i18n:config 就可以使用了：

import { ... } from 'astro:i18n:config'

HTML Lang Code

Paraglide 安裝完成後，需要先在 Layout 裡新增語言的 lang 等 HTML 屬性。但剛才設定的 zh-TW 其實並不是正規的 ISO 語言格式，繁體中文其實要使用 zh-Hant-TW，因此這邊我們自訂一個 htmlLangCode() 函數來做轉換：

src/i18n/html.ts

import { languageTag } from '../paraglide/runtime.js'
import { langCodeMap } from 'astro:i18n:config'

export function htmlLangCode() {
  return langCodeMap[languageTag()] || languageTag()
}

然後就可以在 <html> 中增加正規的 ISO 語言格式了：

src/layouts/Layout.astro

---
import { htmlLangCode } from '@/i18n/html'
---

<!doctype html>
<html lang={htmlLangCode()} dir={Astro.locals.paraglide.dir}>
  <slot />
</html>

多語系輔助函數

目前跟多語系相關的輔助函數有：

astro:i18n：Astro 核心的產生多語系網址輔助函數
astro:i18n:config：自訂的 Astro 多語系輔助函數和變數
paraglide/runtime.js：Paraglide 的多語系輔助函數

但還有缺一些東西，就自己寫吧，開一個 src/i18n/linking.ts：

src/i18n/linking.ts

import { getAbsoluteLocaleUrl, getRelativeLocaleUrl } from 'astro:i18n'
import { i18nInternal } from 'astro:i18n:config'
import { availableLanguageTags, languageTag, sourceLanguageTag } from '../paraglide/runtime.js'
import type { AvailableLanguageTag } from '../paraglide/runtime.js'

export type AbsolutePathname = `/${string}`

interface AlternateLocale {
  locale: AvailableLanguageTag
  href: string
}

export function localizePathname(pathname: AbsolutePathname, locale?: AvailableLanguageTag) {
  locale = locale || languageTag()
  if (locale === sourceLanguageTag) {
    return pathname
  }
  return getRelativeLocaleUrl(locale, pathname)
}

export function localizeUrl(pathname: AbsolutePathname, locale?: AvailableLanguageTag) {
  locale = locale || languageTag()
  if (locale === sourceLanguageTag) {
    const { site } = i18nInternal
    return `${site || ''}${pathname}`
  }
  return getAbsoluteLocaleUrl(locale, pathname)
}

export function unlocalizedPathname(pathname: string) {
  const homeLocalePath = getRelativeLocaleUrl(languageTag(), '/')
  return (
    pathname.replace(
      homeLocalePath,
      homeLocalePath.endsWith('/') ? '/' : ''
    ) || '/'
  ) as AbsolutePathname
}

/**
 * Get the available alternate locales for generate `<link rel="alternate">` tags.
 */
export function availableAlternateLocales(requestPathname: string): AlternateLocale[] {
  const pathname = unlocalizedPathname(requestPathname)

  return availableLanguageTags
    .filter(locale => locale !== languageTag())
    .map(locale => ({
      locale,
      href: localizeUrl(pathname, locale),
    }))
}

最後手動把專案內所有的網址，都替換成自動加上當前語系的網址，比如 /about/ 替換成 localizePathname('/about/')：

---
import { languageTag } from '../paraglide/runtime.js'
import { localizePathname } from '../i18n/linking'
---

<a href={localizePathname('/about/')}>{m.about()}</a>

語系選單

在 src/i18n/ui.ts 裡寫個產生語系選單內容的輔助函數：

src/i18n/ui.ts

import { unlocalizedPathname, localizePathname } from './linking'
import { languageTag } from '../paraglide/runtime.js'
import type { AvailableLanguageTag } from '../paraglide/runtime.js'
import { langTextMap } from 'astro:i18n:config'

export interface LanguageSelectorItems {
  current: string
  items: {
    href: string
    label: string
    active: boolean
  }[]
}

export function languageSelectorItems(requestPathname: string): LanguageSelectorItems {
  const pathname = unlocalizedPathname(requestPathname)

  return {
    current: langTextMap[languageTag()],
    items: (Object.keys(langTextMap) as AvailableLanguageTag[]).map(locale => ({
      href: localizePathname(pathname, locale),
      label: langTextMap[locale],
      active: locale === languageTag(),
    })),
  }
}

在 Layout 中做一個下拉選單：

src/layouts/Layout.astro

---
import { languageSelectorItems } from '../i18n/ui'

const pathname = new URL(Astro.request.url).pathname
const langSelector = languageSelectorItems(pathname)
---

<div>
  <button type="button">
    <i class="fas fa-globe"></i>
    {langSelector.current}
  </button>

  <ul class="dropdown">
    {langSelector.items.map(({ href, label, active }) => (
      <li class={active && 'current-menu-item'}>
        <a href={href}>{label}</a>
      </li>
    ))}
  </ul>
</div>

Alternate 其他語系網址

使用上面已經寫好的 availableAlternateLocales() 函數來產生 Alternate 標籤：

src/layouts/Layout.astro

---
import { availableAlternateLocales } from '../../i18n/linking'
---

<head>
  {
    availableAlternateLocales(Astro.url.pathname).map(({ locale, href }) => (
      <link rel="alternate" hreflang={locale} href={href} />
    ))
  }
</head>

總結

先說缺點好了，Astro 做多語系雖然有提供了基本的功能，但既不完整，文檔說明並不完全清楚，生態也不夠強大。不過我摸出這套流程出來，目前我自己實作下來算很滿意的，起碼來說我可以比較自由的去拼裝出我要的功能，而不會被一些預設的東西給綁住，這是我最喜歡的部分~

參考資料

Astro 初見心得和筆記

Tue, 08 Oct 2024 00:00:00 GMT

其實在幾年前就聽過 Astro 的大名，只是當時一方面覺得寫法很 React，另一方面覺得這專案還太年輕，所以就沒有打算去碰這個工具。直到最近的案子中，需要參考現成的模板來做前端，而這些模板清一色都是 Bootstrap + jQuery，但前端需要做 SSR，原本用了 Nuxt 來轉換，只是轉了一個案子之後我就快起笑了…，最後證明不要把 jQuery 專案塞到 Nuxt 裡面。

但沒有 Nuxt 的話要怎麼做 SSR 呢？通常這種時候可以搭配 PHP 之類的後端語言，只是就做不到前後端分離了，所以 Pass。因此我最後選到了腦海記憶深處的 Astro 這個 SSG Framework 上，可以 SSG 模式產生出 HTML，和使用 SSR 模式串後端 API，可以直接載入模板的 jQuery 套件們，這不就是完美符合我的需求的框架嘛~ 因此最後還是投降了哈哈哈XD

在實際用了之後，發現說有時候不要對未知的事物抱有太大成見，雖然我沒有在寫 React，不過在 Astro 裡寫 JSX 還是滿舒服的。而且在 .astro 檔上方寫 Server Side 的 Block 也可以很好地控制每個頁面的 Request，以及 Islands 的設計真的太香~ 分區塊載入 JS 可以讓初次載入的使用者體驗更友好，也可以好好地重新思考 JS 是否是必須的這個問題上。以上這些都是實際用了之後才知道的事情。

依目前的體驗來看，我應該會繼續多嘗試 Astro 來做專案~ 如果你現在正在學習使用 Astro，希望本篇可以幫到你~

還有，這篇只是一個 Astro 的學習筆記，建議可以看看官網的文檔和教學從頭了解 Astro 的使用方式再來看會比較好喔~

建立 Astro 專案

初始化可以用 Astro 官方的 CLI 來建立。在建立的過程中，可以輸入專案資料夾名稱，選擇使用的 template，是否要使用 TypeScript，是否要初始化 Git 版控等等：

Terminal window

# 使用 npm
npm create astro@latest
# 使用 yarn
yarn create astro

不過試用完之後，我還是開了一個符合我使用習慣的 Astro Starter 了XD，畢竟每個人習慣還是不大一樣。可以用以下指令安裝：

Terminal window

npx degit ycs77/astro-starter my-project

Astro 元件

每個 .astro 檔都是一個元件 Component，內部使用 JSX 的寫法，預設約定原件是放在 components，Layout 佈局是放在 layouts，當然其實是都可以改的。

這裡先拿 Layout 元件做示範：

src/layouts/Layout.astro

---
interface Props {
  title: string
}

const { title } = Astro.props
---

<!doctype html>
<html lang="zh-Hant-TW">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />

    <title>{title}</title>

    <slot name="head"></slot>
  </head>
  <body>
    <slot />
  </body>
</html>

然後在頁面中引入使用：

src/pages/index.astro

---
import Layout from '../layouts/Layout.astro'
---

<Layout title="Astro">
  <h1>Astro</h1>
</Layout>

或是可以使用 slot 來注入頁面的 meta 標籤等：

src/pages/index.astro

<Layout title="Astro">
  <Fragment slot="head">
    <meta name="description" content="Astro description..." />
  </Fragment>

  <h1>Astro</h1>
</Layout>

Astro output 輸出模式

Astro 的設定檔 astro.config.ts 裡面有個設定叫 output，output 的兩個選項 static 和 server 都是可以在 SSR 模式下執行的，兩個本質都是可以跑 SSR 或 SSG 的混合模式，只是優先渲染方式不同。

預設值是 static，默認預先渲染 HTML，如果內容是靜態頁面就都是用這個，而如果某個頁面需要串 API 而改成 SSR 模式，只要在頁面加上 export const prerender = false; 就行了。

server 則和 static 相反，默認 SSR 模式，不預先渲染，通常應用於幾乎每個頁面都要串 API 的情境下使用。

模式	預設	切換
`static`	開啟 `prerender` 預先渲染	`export const prerender = false;`
`server`	關閉 `prerender` 預先渲染	`export const prerender = true;`

自訂輸出頁面回應碼

如果在輸出像是文章頁面時，會可能出現打的 API 返回是 404 之類的，但如果前端不做處理，就只會看到錯誤訊息，但我們只是想要讓它單純的輸出 404 頁面而已的說…，這裡就可以針對 404 的 API 直接輸出一個 404 的 Response 就行了。在 posts/[slug].astro 裡面對錯誤進行處理：

src/pages/posts/[slug].astro

const response = await fetch(...)
if (response.status === 404) {
  return new Response(null, {
    status: 404,
    statusText: 'Not found',
  })
}
const data = await response.json()

當然也可以回傳 500 伺服器錯誤：

src/pages/posts/[slug].astro

try {
  const response = await fetch(...)
  const data = await response.json()
} catch (error) {
  return new Response(null, {
    status: 500,
    statusText: 'Server error',
  })
}

如果每個頁面都有串 API 的話，我們可以新增一個 Middleware src/middleware.ts 來統一處理 API 的回傳錯誤。這裡就可以 catch 自己串的 API 的錯誤，然後根據 Response 狀態來回傳 404 頁面：

src/middleware.ts

import { defineMiddleware } from 'astro:middleware'

export const onRequest = defineMiddleware(async (_context, next) => {
  try {
    return await next()
  } catch (e) {
    // Handle 404 errors
    if (e instanceof ApiRequestError) {
      return new Response(null, {
        status: 404,
        statusText: 'Not found',
      })
    }

    throw e
  }
})

import 路徑別名

Astro 的教學中，預設都是使用相對定位來引入專案中的其他模組，但複製元件內容時總是會有定位錯誤的問題，這邊在 tsconfig.json 加個 paths 就解決了：

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

然後就可以在路徑開頭用 @/..，以專案根目錄為絕對定位，寫引入的模組路徑了：

import Layout from '@/layouts/Layout.astro'

Astro check 輸出超長的 hint 提示

這題直接上結論，把 public 和 dist 排除掉 TypeScript 的檢查即可：

tsconfig.json

{
  "exclude": ["public", "dist"]
}

自訂網站常數設定

Astro 並沒有自訂設定檔的機制，不過可以自己建立一個檔案來當作設定檔，比如這裡新增 src/site.config.js：

src/site.config.js

export default {
  email: 'astro@example.com',
  phone: '02-1111-2222',
  address: '台北市中山區XX路XX樓',
}

真的是相當的自由~

Netlify 或 Vercel？

通常情況下是看習慣，畢竟 Astro 兩個平台都有支援，只是如果是靜態產生 (static 模式) 的話就會有差，差在尾部斜線的處理：

Vercel 靜態產生網站支援強制移除網址尾部斜線，比如 /about/ 會強制跳轉到 /about
而 Netlify 靜態產生網站移除尾部斜線後依然可以瀏覽，但不會且不支援強制跳轉 (只能強制尾部加斜線)

事先對於網址的 style 選擇相當重要，要不然部署後可能會發現瀏覽網址有問題。

通常情況下加斜線會比較多平台支援，因為只需在資料夾內部加一個 index.html，以資料夾的方式來達到美化網址的方式，不需要伺服器有多餘的設定。但如果對網址有潔癖，連尾隨的斜線都不想要的話，這邊建議可以選用 Vercel。

而在 Astro 中尾部斜線的設定，可以參考 trailingSlash。

當然如果是 server 模式的話，兩個平台都可以自由設定網址的尾部斜線行為。以下是一個我比較喜歡的設定，在 server 模式下不使用尾部斜線的設定：

astro.config.ts

export default defineConfig({
  output: 'server',
  trailingSlash: 'never',
  build: {
    format: 'file',
  },
})

最後這邊附上我在兩個平台部署的專案所使用的設定檔：

netlify.toml

[build]
  command = "yarn build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

vercel.json

{
  "cleanUrls": true,
  "trailingSlash": false,
  "github": {
    "silent": true
  }
}

結語

強烈建議透過官網的文檔和教學來學 Astro 的使用方式~

參考資料

Astro Docs

Laravel 在 GitHub Actions 上用 MySQL 跑測試

Sat, 21 Sep 2024 00:00:00 GMT

Laravel 預設測試用的資料庫是 SQLite，可是正常線上都是用 MySQL，在跑測試的時候常常會因為兩邊不一致。這時候會建議可以用 MySQL 來跑測試，讓測試和正式兩邊可以保持一致，才不會有測試明明過了，但線上卻出現不一樣行為的狀況，而且 MySQL 測試執行速度更快~ (參考 Using MySQL for Testing (on Laravel))

本地測試設定

本地可以先複製好測試用的 .env.testing：

Terminal window

cp .env.example .env.testing

和設定測試用的 MySQL 帳密相關資料：

.env.testing

DB_DATABASE=laravel_test
DB_USERNAME=root
DB_PASSWORD=password

接著把 .env.testing 加進 .gitignore 裡：

.env
.env.backup
.env.production
.env.testing

最後產生密鑰和執行測試：

Terminal window

php artisan key:generate --env=testing
./vendor/bin/pest

設定 GitHub Actions

GitHub Actions 跑測試的範例 yaml：

.github/workflows/tests.yml

name: Tests

on:
  push:
    branches: [main]

jobs:
  tests:
    name: Tests

    runs-on: ubuntu-latest

    env:
      DB_DATABASE: laravel
      DB_USERNAME: root
      DB_PASSWORD: password

    services:
      mysql:
        image: mysql:5.7
        env:
          MYSQL_DATABASE: laravel
          MYSQL_ALLOW_EMPTY_PASSWORD: false
          MYSQL_ROOT_PASSWORD: password
        ports:
          - 3306/tcp
        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: 8.3
          extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, mysql, mysqli, pdo_mysql, bcmath, intl, gd, exif, iconv, imagick, fileinfo
          coverage: none

      - name: Setup problem matchers
        run: |
          echo "::add-matcher::${{ runner.tool_cache }}/php.json"
          echo "::add-matcher::${{ runner.tool_cache }}/phpunit.json"

      - name: Install dependencies
        run: composer install --prefer-dist --no-interaction

      - name: Setup environment key
        run: |
          php -r "file_exists('.env.testing') || copy('.env.example', '.env.testing');"
          php artisan key:generate --env=testing

      - name: Run tests
        run: vendor/bin/pest
        env:
          DB_PORT: ${{ job.services.mysql.ports[3306] }}

參考資料

解決 Laravel 回傳 Etag Header 被 Nginx 攔截的問題

Fri, 20 Sep 2024 00:00:00 GMT

HTTP Cache 裡面的其中一個機制是 Etag，可以回傳當前資源的唯一 Hash 值，然後在之後的請求可以比對此 Etag 值有沒有變化，沒變化就直接回傳 304，有改變才會重新下載新的資源。通常如果是靜態資源可以直接交給 Nginx 處理就行了，但剛好我有個需求需要在 Laravel 中處理後才回傳出去，因此就需要在 Laravel 處理 Etag 和 304 了。

Etag 和 If-None-Match

先上一個基本的 Controller，把檔案內容讀出來之後用 md5() Hash 過傳給 Etag Header。然後在第二次請求的時候，會附上 If-None-Match Header，這時就可以比對 Hash 值是否一樣：

app/Http/Controllers/AssetController.php

<?php

namespace App\Http\Controllers;

class AssetController extends Controller
{
    public function __invoke(Request $request)
    {
        $cacheControl = 'no-cache';

        $content = '...';

        $etag = md5($content);

        if ($this->matchesCache($etag)) {
            return response('', 304, [
                'Cache-Control' => $cacheControl,
            ]);
        }

        $headers = [
            'Content-Type' => $contentType,
            'Cache-Control' => $cacheControl,
            'Etag' => $etag,
        ];

        return response($content, 200, $headers);
    }

    protected function matchesCache($etag)
    {
        /** @var string|null */
        $ifNoneMatch = request()->header('If-None-Match');

        return $ifNoneMatch !== null && $ifNoneMatch === $etag;
    }
}

在本地還可以正常跑，但一搬到線上就沒有效果了。經過一番調查，是 Nginx 開啟 gzip 後就會過濾掉 etag，可是不完全對。它會刪掉不符合規則的強 Etag，而不會管弱 Etag。

簡單來說在這裡我們只要轉成弱 Etag 就行了，弱 Etag 的格式是 W/"etag內容"，把 etag內容 前後加上 W/"..." 變成 W/"etag內容" 就可以了：

$etag = md5($content);
// 原本的 Etag: abc123

$etag = 'W/"'.md5($content).'"';
// 新的弱 Etag: W/"abc123"

參考資料

循序漸進理解 HTTP Cache 機制 - Huli’s blog

重新編譯 Filament 的 CSS

Tue, 10 Sep 2024 00:00:00 GMT

Tip

或許是當時做這個功能的時候，沒有詳細看完說明文件，後來才知道其實 Filament 早就有這個功能了…😭

在 Filament 文件中的自訂主題 CSS 就有紀錄了，而且還更簡單啊！！！不過好歹也還是研究出了我自己的方案，就留下來當作參考用的吧！或許不知道什麼時候會使用到~

基本上做後台時會時不時出現各種奇形怪狀的需求，Filament 預設的程式會無法負荷，在這種時候只能自己來寫 Blade 的 View。只是這時會冒出個問題…

「CSS 要怎麼辦？我用了新的 Tailwind 的 class 是不是就不會出現了？」

因此在客製化 Filament 後台介面後，我們需要重新編譯完整的、包含 Filament 和我們客製化後的完整的 CSS。

編譯 Tailwind CSS

要客製化 CSS 的話需要一個基礎的資料夾結構，裡面都放置跟客製 Filament 前端相關的東西：

filament/
  ├── css/
  |  └── app.css
  ├── assets.sh
  └── tailwind.config.js

css/app.css 裡面依然還是 Tailwind 預設的樣板：

css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

然後是 Tailwind 的設定檔 tailwind.config.js，這樣編譯完之後可以包含舊的和新的 CSS：

tailwind.config.js

import preset from '../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

最後在 package.json 中加上編譯 Filament CSS 的腳本，輸出的 CSS 會直接覆蓋掉 Filament publish 出來的 CSS，這樣就達到了增加自己客製的 Tailwind class 的目的了：

package.json

{
    "scripts": {
        "dev": "vite",
        "dev:filament-css": "npx tailwindcss -c ./filament/tailwind.config.js -i ./filament/css/app.css -o ./public/css/filament/filament/app.css --watch",
        "build": "vite build",
        "build:filament-css": "npx tailwindcss -c ./filament/tailwind.config.js -i ./filament/css/app.css -o ./public/css/filament/filament/app.css --minify"
    }
}

自訂 CSS 覆蓋問題

但這時會有個問題，在每次呼叫完 composer dump-autoload 後 Filament 都會重新覆蓋掉 CSS 等資產，這樣我們自訂的內容就又不見了，於是我們需要修改一下編譯的腳本：

package.json

{
    "scripts": {
        "build:filament-css": "npx tailwindcss -c ./filament/tailwind.config.js -i ./filament/css/app.css -o ./filament/dist/app.css --minify && bash ./filament/assets.sh"
    }
}

我們先讓 CSS 輸出到 filament/dist/app.css，而且不要加到 .gitignore 裡面，然後資料夾結構變成這樣：

filament/
  ├── css/
  |  └── app.css
  ├── dist/
  |  └── app.css
  ├── assets.sh
  └── tailwind.config.js

然後我們再加個腳本 assets.sh 來發布回自訂版的 CSS：

Terminal window

if [ -f filament/dist/app.css ]; then
    cp filament/dist/app.css public/css/filament/filament/app.css

    echo 'Published assets for Filament successfully.'
fi

然後我們可以在 composer.json 裡面找到 post-autoload-dump，發現有 @php artisan filament:upgrade，只要我們在後面加上 assets.sh 就可以再次覆蓋回來了：

package.json

    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi",
            "@php artisan filament:upgrade",
            "bash filament/assets.sh" // 加上這行
        ]
    }

開發用 dev:filament-css，上線用 build:filament-css：

Terminal window

# dev
npm run dev:filament-css

# production
npm run build:filament-css

在 Laravel Forge 配置的服務器上使用 vsftpd 設定 FTP 伺服器

Sat, 10 Aug 2024 00:00:00 GMT

雖然 Laravel Forge 預設會設定好 SSH 的連線方式，也可以快速設定好 SFTP，但內建的 sftp-server 要設定 chroot 有點不太自由，既不能彈性設定 FTP 登入的路徑，登入後的根目錄層也不能自由上傳檔案/新增目錄 (只能事先新增好一個資料夾用於上傳)，於是就找到了一個可以建立 FTP 上傳伺服器的套件 vsftpd。vsftpd 能夠設定虛擬帳號，且每個帳號都可以設定自己的初始目錄 (也可以設定重複的資料夾)，對於需要分配 FTP 帳號給其他人使用，且安全性較低的內容，可以使用此解決方案。

因此這篇來簡單紀錄一下，在 Laravel Forge 配置的服務器上設定 FTP 上傳檔案的方式。

安裝 vsftpd

首先先更新 apt 套件和安裝 vsftpd：

Terminal window

sudo apt update
sudo apt install vsftpd

開啟防火牆連接埠

先確認現在防火牆的狀態：

Terminal window

sudo ufw status

基本上 Forge 預設只會幫我們設定好三個 port，22 是 SSH，80 是 HTTP，443 是 HTTPS：

Status: active

To                         Action      From
--                         ------      ----
22                         ALLOW       Anywhere
80                         ALLOW       Anywhere
443                        ALLOW       Anywhere
22 (v6)                    ALLOW       Anywhere (v6)
80 (v6)                    ALLOW       Anywhere (v6)
443 (v6)                   ALLOW       Anywhere (v6)

然後是規劃一下我們要在 vsftpd 中使用的 port ，vsftpd 預設的 port 是：

主動連線 port (ftp_data_port)：20
vsftpd 命令通道 port (listen_port)：21
passive mode 最小 port (pasv_min_port)：0 (預設是不限制連接的 port)
passive mode 最大 port (pasv_max_port)：0 (預設是不限制連接的 port)

當然盡量不要使用預設的 port ，既然可以自訂，那就換成以下的：

主動連線 port (ftp_data_port)：60020
vsftpd 命令通道 port (listen_port)：60021
passive mode 最小 port (pasv_min_port)：65400
passive mode 最大 port (pasv_max_port)：65420

其中 passive mode 會開啟 65400~65420 共 21 個 port。

確定沒問題就可以更新防火牆的設定：

Terminal window

sudo ufw allow 60020,60021/tcp
sudo ufw allow 65400:65420/tcp

vsftpd 設定

備份 vsftpd 設定檔：

Terminal window

sudo cp /etc/vsftpd.conf /etc/vsftpd.conf.orig

用 vim 開啟 vsftpd 設定檔：

Terminal window

sudo vim /etc/vsftpd.conf

先確認以下設定是否正確：

/etc/vsftpd.conf

anonymous_enable=NO
local_enable=YES

然後將以下設定刪掉註解：

/etc/vsftpd.conf

write_enable=YES
chroot_local_user=YES
utf8_filesystem=YES

最後將以下設定複製到設定檔最底部：

/etc/vsftpd.conf

# Basic settings
ftp_data_port=60020
listen_port=60021
pasv_min_port=65400
pasv_max_port=65420
use_localtime=YES
pasv_enable=YES
local_umask=022
allow_writeable_chroot=YES
userlist_enable=YES
userlist_file=/etc/vsftpd.userlist
userlist_deny=NO
tcp_wrappers=YES
xferlog_enable=YES
vsftpd_log_file=/var/log/vsftpd.log

# Virtual users
secure_chroot_dir=/var/run/vsftpd/empty
pam_service_name=vsftpd
hide_ids=YES
guest_enable=YES
guest_username=forge
user_config_dir=/etc/vsftpd/user_conf
one_process_model=NO
virtual_use_local_privs=YES
local_root=/home/vsftpd # 目前此目錄不存在，目的是讓每個虛擬用戶都設定不同的路徑

建立虛擬用戶

然後要根據上面的設定來執行一些對應的指令。先是要刪除 /var/run/vsftpd/empty 的讀取權限：

Terminal window

sudo chmod o-w /var/run/vsftpd/empty

然後建立虛擬用戶的帳密資料庫 /etc/vsftpd/virtual-user，最終用於 FTP 登入：

Terminal window

sudo mkdir /etc/vsftpd
sudo vim /etc/vsftpd/virtual-user

virtual-user 檔格式為一行帳號、一行密碼：

user1
password
user2
password

填好之後就要轉換成資料庫檔案（Berkeley DB 格式），如果出現 The program 'db_load' is currently not installed. 錯誤訊息，就執行 sudo apt install db-util 指令來安裝需要的套件：

Terminal window

sudo chmod 600 /etc/vsftpd/virtual-user
sudo apt install db-util
sudo db_load -T -t hash -f /etc/vsftpd/virtual-user /etc/vsftpd/virtual-user.db
sudo chmod 600 /etc/vsftpd/virtual-user.db

接著新增 userlist 檔案，設定允許使用 FTP 的帳號：

Terminal window

sudo vim /etc/vsftpd.userlist

然後把 FTP 帳號都填上去：

user1
user2

不過 virtual-user 畢竟是明碼儲存帳密，建議轉換完之後就把 virtual-user 檔案刪除。

然後建立虛擬用戶的設定檔：

Terminal window

sudo mkdir /etc/vsftpd/user_conf
sudo vim /etc/vsftpd/user_conf/user1
sudo vim /etc/vsftpd/user_conf/user2

user1 帳號的設定檔：

local_root=/home/forge/example.com

user2 帳號的設定檔：

local_root=/home/forge/example.com/storage/app/public

local_root 就是 FTP 登入後的主目錄，其他 vsftpd.conf 的參數都可以使用。

PAM 設定

備份 vsftpd 的 PAM 設定檔：

Terminal window

sudo cp /etc/pam.d/vsftpd /etc/pam.d/vsftpd.orig

開始編輯 /etc/pam.d/vsftpd：

Terminal window

sudo vim /etc/pam.d/vsftpd

把預設設定全部註解掉後，在下面增加以下設定，讓 vsftpd 讀取 virtual-user 資料庫中的帳密：

/etc/pam.d/vsftpd

auth  required  pam_userdb.so db=/etc/vsftpd/virtual-user
account  required  pam_userdb.so db=/etc/vsftpd/virtual-user

最後重啟 vsftpd 就可以連線了：

Terminal window

sudo systemctl restart vsftpd

FileZilla 連線可以參考以下：

協定：FTP
主機：[你的主機IP]
連接埠：60021
加密：允許的話就使用透過外顯式 TLS 的 FTP
使用者：user1
密碼：password

SSL 憑證

目前還沒試過，有空再補上…

參考資料

孤獨搖滾劇場版前篇心得

Sat, 27 Jul 2024 00:00:00 GMT

看完《劇場總集篇孤獨搖滾！Re:》了~ 孤獨搖滾的劇場版前篇~

雖然是總集篇，雖然都知道劇情了，但是還是覺得超好看的！！！LIVE 看得超爽的！！！付了電影票錢值的呀！！！

這次劇場版內容主要是正片1~8集的劇情，不過有刪掉或快速帶過部分劇情，剪輯成了適合電影長度的節奏，這點上是有加分不少的，重點是還有新歌！在 PPT 快速切畫面的時候放新歌，簡直不要太爽😍 以及結尾的「孤獨搖滾」的點題後放 ED，全身雞皮疙瘩都起來了！！！

等10月後篇出了再光臨一次電影院~

Nginx 簡易防止連結圖片/網頁盜連

Tue, 25 Jun 2024 00:00:00 GMT

紀錄一下使用 Nginx 檢查 referer 來實作簡易防止連結的功能。

簡易圖片防盜連

防止其他網站直接連入自家網頁內的圖片，不過可以在新分頁開啟：

location ~ /images {
    valid_referers server_names none;

    if ($invalid_referer) {
        return 403;
    }
}

簡易頁面防直連

模擬了一個情境，當自己網頁中提供了類似雲端硬碟，可以讓人下載檔案的服務，但想要讓訪客只能透過提供的主頁進入下載頁，而不想要讓其直接進入或分享下載頁的連結時使用：

location = /secret.html {
    valid_referers server_names;

    if ($invalid_referer) {
        rewrite ^/(.*)$ https://star-note-lucas.me/ redirect;
    }
}

如果使用者分享了下載頁，或從其他分頁開啟，就會自動跳轉至一個指定的頁面。

參考資料

Nginx配置referer校验，实现简单的防盗链

s3cmd 和 s5cmd 安裝筆記

Fri, 26 Apr 2024 00:00:00 GMT

原本是用 Laravel 的 S3 driver 來上傳檔案，但偏偏卻遇到需要一次上傳數百個小檔案的情境，如果按照在 Laravel 的寫法，上傳會要花非常久的時間，偏偏這數百個小檔案家起來卻又才幾 MB，搜了一番之後的結論是要透過 CLI 工具來解決。姑且是有找到老牌用 Python 寫的 s3cmd 和用 Golang 寫的 s5cmd，有支援 sync 的指令可以快速同步資料夾和檔案。本篇先記錄下在 Ubuntu 的安裝方式，以及我現在是在使用相容 S3 API 的 DigitalOcean Spaces，因此範例會使用 DigitalOcean Spaces 的網址設定。

s3cmd

老牌知名的非官方 S3 CLI 工具，基本上常見的操作指令都有。

安裝方式有很多種，我選擇用最簡單的用 pip 安裝，需要先安裝 Python：

Terminal window

pip install s3cmd

然後開始設定 key 之類的東西，等下要照順序填：

Terminal window

s3cmd --configure

然後輸入 Access Key 和 Secret Key 兩個金鑰，可以在 Spaces access keys 新增，region 不需要設定，因為等下會連同 endpoint 網址一起設定：

Access Key []: EXAMPLE7UQOTHDTF3GK4
Secret Key []: exampleb8e1ec97b97bff326955375c5
Default Region [US]:

然後要輸入 DigitalOcean 的 endpoint 網址，命名格是要依照 <region>.digitaloceanspaces.com 來填，像這裡我設定的 region 是 sgp1：

Use "s3.amazonaws.com" for S3 Endpoint and not modify it to the target Amazon S3.
S3 Endpoint [s3.amazonaws.com]: sgp1.digitaloceanspaces.com

這邊的是要填完整的網址範本，直接輸入 %(bucket)s.sgp1.digitaloceanspaces.com 就可以了 (一字不漏照打)，%(bucket)s 是替換用的變數，會用於替換掉 bucket 名稱，如果你的 region 和我不同的話需要修改：

Use "%(bucket)s.s3.amazonaws.com" to the target Amazon S3. "%(bucket)s" and "%(location)s" vars c
an be used if the target S3 system supports dns based buckets.
DNS-style bucket+hostname:port template for accessing a bucket []: %(bucket)s.sgp1.digitaloceanspaces.com

接下來這幾個可以視情況酌情修改，我是直接都 Enter 跳過：

Encryption password:
Path to GPG program [/usr/bin/gpg]:
Use HTTPS protocol [Yes]:
HTTP Proxy server name:

最後兩個如果都沒問題都輸入 Y 就設定完成了：

Test access with supplied credentials? [Y/n] Y
Save settings? [y/N] Y

這些設定的內容會儲存在 ~/.s3cfg 這個檔案裡面，有需要修改可以直接看這個檔案就行。

s3cmd 的指令範例：

Terminal window

# 將 ~/demo/ 資料夾下的檔案上傳到 s3://demo-bucket/
s3cmd --recursive --acl-public --guess-mime-type put ~/demo/ s3://demo-bucket/
# 將 s3://demo-bucket/ 下的檔案下載到 ~/demo/ 資料夾
s3cmd --recursive get s3://demo-bucket/ ~/demo/
# 將 ~/demo/ 資料夾下的檔案同步到 s3://demo-bucket/
s3cmd --acl-public --guess-mime-type --delete-removed sync ~/demo/ s3://demo-bucket/
# 將 s3://demo-bucket/ 下的檔案強制全部刪除 (全部清空)
s3cmd --recursive --force rm s3://demo-bucket/

s5cmd

s5cmd 是用 Golang 寫的 S3 操作工具，執行速度比 s3cmd 還要快，但指令上不大相同。

安裝方式我選擇直接下載 s5cmd 發布的 GitHub release binary，根據你的主機要改成支援的版本，以下是一個範例的腳本：

Terminal window

curl -LO https://github.com/peak/s5cmd/releases/download/v2.2.2/s5cmd_2.2.2_Linux-64bit.tar.gz
mkdir ~/s5cmd_2.2.2_Linux-64bit
tar -xvzf s5cmd_2.2.2_Linux-64bit.tar.gz -C ~/s5cmd_2.2.2_Linux-64bit

# 如果當前使用者有 `~/.local/bin` 資料夾則執行
cp ~/s5cmd_2.2.2_Linux-64bit/s5cmd ~/.local/bin

# 如果可以執行 `sudo` 權限則執行
sudo cp -r ~/s5cmd_2.2.2_Linux-64bit /opt/s5cmd
sudo ln -s /opt/s5cmd/s5cmd /usr/bin/s5cmd

rm -rf ~/s5cmd_2.2.2_Linux-64bit s5cmd_2.2.2_Linux-64bit.tar.gz

s5cmd 預設是使用 AWS SDK 的 credentials 格式，下面就手動建立需要的 .aws 資料夾：

Terminal window

mkdir ~/.aws
chmod 755 ~/.aws
touch ~/.aws/credentials
chmod 600 ~/.aws/credentials

然後在 ~/.aws/credentials 裡輸入 Access Key 和 Secret Key 兩個金鑰，可以在 Spaces access keys 新增：

~/.aws/credentials

[default]
aws_access_key_id = EXAMPLE7UQOTHDTF3GK4
aws_secret_access_key = exampleb8e1ec97b97bff326955375c5

s5cmd 的指令範例：

Terminal window

# 將 ~/demo/ 資料夾下的檔案上傳到 s3://demo-bucket/
s5cmd --endpoint-url https://sgp1.digitaloceanspaces.com \
  cp --acl=public-read --cache-control "max-age=604800" \
  ~/demo/ s3://demo-bucket/
# 將 s3://demo-bucket/ 下的檔案下載到 ~/demo/ 資料夾
s5cmd --endpoint-url https://sgp1.digitaloceanspaces.com \
  cp s3://demo-bucket/* ~/demo/
# 將 ~/demo/ 資料夾下的檔案同步到 s3://demo-bucket/
s5cmd --endpoint-url https://sgp1.digitaloceanspaces.com \
  sync --acl=public-read --cache-control "max-age=604800" --delete \
  ~/demo/ s3://demo-bucket/
# 將 s3://demo-bucket/ 下的檔案強制全部刪除 (全部清空)
s5cmd --endpoint-url https://sgp1.digitaloceanspaces.com \
  rm s3://demo-bucket/*

參考資料

{Laravel x Vue}Conf Taiwan 2023 心得

Sun, 20 Aug 2023 00:00:00 GMT

剛看完 {Laravel x Vue}Conf Taiwan 2023，趁記憶還在的時候記一下聽完的小小心得。

因為是雙軌制，Laravel 跟 Vue 只能二選一，雖然我兩個都很想聽就是了😭 只能忍痛選一個了…

重新发明 Vue：经验和教训

興奮到只記得尤雨溪大大了XDD 咳… 不是

至少重新的全盤了解 Vue 的發展歷史和未來，其中我還滿喜歡的是講到事後對於 Vue 2 到 3 重構的反思，的確是再次體會到維護一個影響力很大的專案是很不容易，需要時時刻刻照顧好開發者和使用者的體驗。

用 Livewire 開發CMS的甘苦談

從這裡開始我幾乎都待在 Laravel 這軌了。Livewire 說實話我其實只有用過一點點，因為我現在鍾愛的是 Inertia XDD 阿當然過了 2 年之後 Livewire 也有更新了不少，聽完這場之後未來可能會想在玩具專案上試試吧！而且新官網超酷炫~

探討 PHP 中的程式碼保護策略

Albert 大大每次都帶來還滿深的講題內容。對於程式碼保護我也是有去搜尋過，但出來的幾乎不外乎都是只講混淆。這場就很完整的介紹了保護方式、原理和推薦使用的工具等，收穫還滿多的。

從MVC到前後端分離的策略

下午就跑到 Vue 軌去聽了一場XD 因為我平常不是用 PHPStorm，而是用 VSCode~ 而這場則是學到了 .net 如何跟 Vue、Vite、Nuxt 整合的神奇用法，雖然平常用不到，但如果有需要的時候可以來試試看~

MySQL 的權衡之道 - 優雅與卓越的設計心法

講師好帥啊😍(被打

撇開講師帥的部分，真的是把平常在用但幾乎不會的 MySQL 重新學了遍，而且內容循序漸進、架構清晰，聽著很舒服~ 還有提到很多豆知識都是以前不知道的。如果時間還夠，還想繼續聽完啊！(才…才不是因為…

運用Event Storming來一起探索可觀測性

這場是離我相對比較有點距離的，聽的時候是半懂不懂，但事後回想其實重點只有兩個，其一是貼那一堆事件的便條紙，現在是看不大懂，以後有機會再懂，其二則是搭配炫酷的監控工具，這個可能比較有機會來試試看吧~

結語

今年終於有機會來線下還挺開心的，因為前兩年一年是全線上、一年是有事。只差在一個人去是還有點怕怕就是了… (社恐的心理獨白) 不過還是期待明年~ 許個願希望明年的自己可以再去投個稿當講者🥰~

在 Laravel Forge 配置的服務器上設定 SFTP 伺服器

Sat, 22 Jul 2023 00:00:00 GMT

以前剛學網站的時候都是用共享主機來放網站，並用 FTP 跟 FileZilla 來連線，但後來用習慣了 Git + SSH 的佈署方式之後就幾乎很少再用 FTP 了。但今天就偏偏就有了要開 FTP 帳號給人上傳檔案的需求，這篇來簡單紀錄一下，在 Laravel Forge 配置的服務器上設定 SFTP，和連結這些上傳檔案的方式。

建立帳號

基本上 Laravel Forge 配置過之後都會有一個 forge 帳號，只要在後台設定過 SSH 的 Public Key 就可以直接連線：

Terminal window

ssh forge@[你的主機IP]

先建立一個 Unix 帳號，帳號名稱基本上是都可以，不過這邊我們可以在前面會冠一個 ftp- 開頭來區別：

Terminal window

sudo adduser ftp-user

然後因為這個帳號目的只是用來 FTP 登入，基本上是不允許用 SSH 等來連線，因此首頁可以導向給 /bin/false，只要一連上就會被斷掉：

Terminal window

sudo usermod -s /bin/false ftp-user

接下來要做 chroot 的操作，可以理解成設定用 FTP 連線之後可以瀏覽使用的根目錄。

比如當 ftp-user 登入的時候只能看到 /home/ftp-user 目錄下的資料，無法回更上一層的目錄，相當於這就是它的根目錄了。需要注意一個點是，這個目錄的所有上層資料夾都必須是 owner 為 root，否則會無法成功設定 (如果都無法成功連線的話可以查看 /var/log/auth.log 裡的錯誤原因)：

Terminal window

sudo chown root:ftp-user /home/ftp-user
sudo chmod 755 /home/ftp-user

然後就可以在這個目錄下新增好目錄，讓用戶可以在 FileZilla 上傳了：

Terminal window

sudo mkdir /home/ftp-user/uploads
sudo chown ftp-user:ftp-user /home/ftp-user/uploads
sudo chmod 755 /home/ftp-user/uploads

不過我一開始也在想，為什麼其他文章都教到要增加一個目錄，難道不能在 FileZilla 的根目錄直接上傳嗎？結果還真不行。因為剛才已經把根目錄 owner 設給 root，沒有 root 的權限就不能開新資料夾上傳檔案，因此需要先開好 owner 是 ftp-user 的資料夾讓用戶可以上傳檔案。當然資料夾想要開幾個都可以~ 只是你開哪些用戶就只能用哪些。

設定 SFTP

然後設定 /etc/ssh/sshd_config 檔，先加上 # 來註解掉以下：

/etc/ssh/sshd_config

Subsystem sftp /usr/lib/openssh/sftp-server

然後複製以下到該行之下，ChrootDirectory 就是要鎖住 FTP 瀏覽時的根目錄：

/etc/ssh/sshd_config

# Enable sftp
Subsystem sftp internal-sftp

Match User ftp-user
    # set the homedirectory as root
    ChrootDirectory %h

    ForceCommand internal-sftp
    X11Forwarding no
    AllowTCPForwarding no

    # enable loging with a password
    PasswordAuthentication yes

最後重啟 SSH 就可以連線了：

Terminal window

sudo service ssh restart

FileZilla 連線可以參考以下：

協定：SFTP
主機：[你的主機IP]
連接埠：22
使用者：ftp-user
密碼：[剛才adduser時設定的密碼]

公開上傳檔案到 Laravel 網站

當然我這次的目的是要讓這些上傳的檔案可以公開在網站中，因此參考了 Laravel 公開本地上傳檔案的方式，只需設個軟連結就行了：

Terminal window

sudo ln -s /home/ftp-user/uploads /home/forge/[your-domain]/public/uploads

如果上傳了一張 image.jpg 檔，就可以從 https://[your-domain]/uploads/image.jpg 瀏覽了！

參考資料

可塑性記憶心得

Wed, 07 Jun 2023 00:00:00 GMT

剛看完了可塑性記憶，中間哭了好幾次 QQ 艾菈好可愛~

雖然以前就有聽說是很催淚的作品，就想說反正你也騙不了我的眼淚就沒去看，但真的看完之後還是覺得很感動~

而之所以能感動，是因為和裡面的角色有著類似的生活方式，同樣要吃飯睡覺生活工作，同樣也都要經歷離別的時刻，這些都是我們做為人會經歷的過程。

相遇是為了離別，但真到了離別之時，回憶中的點滴才顯得如此彌足珍貴。知道自己的生命注定結束的時間，剩下的時間才會盡力去不留遺憾。

「願和重要的人能再次相遇」

使用 Chocolatey 安裝 Windows 軟體

Fri, 31 Mar 2023 00:00:00 GMT

又是某天的下午，在幫朋友的新電腦裝軟體的時候，重複著先去各個官網下載和瘋狂點下一步，我心裡想說：「何不去研究用下指令來安裝軟體呢？」，於是就去稍微研究了一下 Chocolatey，發現還滿好用的，連 Google Chrome、LINE 跟 K-Lite 都可以裝，這篇就來記錄一下安裝和配置我常用的軟體啦～

Chocolatey

以系統管理員身分執行 Powershell：

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

安裝軟體 (可以在這裡搜尋軟體)：

choco install googlechrome -y
choco install line -y
choco install git -y
choco install nodejs-lts -y
choco install vscode --params "/NoDesktopIcon" -y
choco install 7zip -y
choco install ffmpeg -y
choco install k-litecodecpackfull -y

查看本地安裝的軟體：

choco list -l

參考資料

Chocolatey 官網

ffmpeg 命令筆記

Mon, 20 Mar 2023 00:00:00 GMT

紀錄一下最近在用 ffmpeg 的一些常用指令，和轉檔成 Chromecast 支援的影片格式。

轉檔

Terminal window

ffmpeg -i input.avi output.mp4

更多選項

Terminal window

ffmpeg -i input.avi -c:v libx264 -preset medium -crf 23 -c:a aac -b:a 160k -vf format=yuv420p output.mp4

壓縮

壓縮影片 (-crf 預設值是 23，可以調更低比如 18 來壓縮影片品質)：

Terminal window

ffmpeg -i input.mp4 -c:v libx264 -crf 23 -c:a copy output.mp4

壓縮音樂：

Terminal window

ffmpeg -i input.mp3 -vn -b:a 192k output.mp4

定位時間

依照 HOURS:MM:SS.MICROSECONDS 的格式來輸入時間。如果輸入是數字預設是秒數，比如 30 是 30 秒。

分割片段

從 00:01:00 剪到 00:02:00：

Terminal window

# 如果使用 `-c copy` 來分割，且要用 Concat Demuxer 合併的話，需要使用 `-avoid_negative_ts 1` 參數
ffmpeg -ss 00:01:00 -to 00:02:00 -accurate_seek -i video.mp4 -c copy -avoid_negative_ts 1 cut.mp4
# 如果剪出來的片段有問題，可以重新編碼
ffmpeg -ss 00:01:00 -to 00:02:00 -accurate_seek -i video.mp4 -c:v libx264 -crf 23 -c:a aac -b:a 192k cut.mp4

從 00:01:00 剪 2 分鐘：

Terminal window

# 如果使用 `-c copy` 來分割，且要用 Concat Demuxer 合併的話，需要使用 `-avoid_negative_ts 1` 參數
ffmpeg -ss 00:01:00 -t 00:02:00 -accurate_seek -i video.mp4 -c copy -avoid_negative_ts 1 cut.mp4
# 如果剪出來的片段有問題，可以重新編碼
ffmpeg -ss 00:01:00 -t 00:02:00 -accurate_seek -i video.mp4 -c:v libx264 -crf 23 -c:a aac -b:a 192k cut.mp4

合併片段

使用 Concat Demuxer 來合併，新增一個 mylist.txt 檔案，檔案中包含要合併的檔案們的路徑 (可以只用檔名)：

file '/path/to/video1.mp4'
file '/path/to/video2.mp4'
file '/path/to/video3.mp4'

然後就可以開始合併這些媒體檔案

Terminal window

ffmpeg -f concat -safe 0 -i mylist.txt -c copy output.mp4

使用 Concat Protocol 來合併，只有在合併 MPEG-2 的 ts 檔案時使用：

Terminal window

ffmpeg -i "concat:video1.ts|video2.ts|video3.ts" -c copy output.ts

提取音樂/影片

提取音樂：

Terminal window

ffmpeg -i input.mp4 -q:a 0 -map a output.mp3

提取影片：

Terminal window

ffmpeg -i input.mp4 -c:v copy -an output.mp4

截圖

快速截圖：

Terminal window

ffmpeg -ss '01:20:29' -i video.mp4 -frames:v 1 out1.jpg

精準截圖：

Terminal window

ffmpeg -i video.mp4 -ss '01:20:29' -frames:v 1 out2.jpg

將影片中所有影格(Frame)都擷取成 JPG 圖片：

Terminal window

ffmpeg -i video.mp4 'video-screenshot-%04d.jpg'

將影片中每1秒的畫面擷取成 JPG 圖片：

Terminal window

# 每1秒截1張
ffmpeg -i video.mp4 -vf fps=1 'video-screenshot-%04d.jpg'
# 每5秒截1張
ffmpeg -i video.mp4 -vf fps=1/5 'video-screenshot-%04d.jpg'

縮放畫面尺寸

Terminal window

ffmpeg -i video.mp4 -vf scale="1280:-1" output.mp4

碼率 (bitrate)

Terminal window

ffmpeg -i video.mp4 -b:v 1000k output.mp4

幀率 (frame rate)

Terminal window

ffmpeg -i video.mp4 -r 25 output.mp4

mkv 字幕轉 mp4

Terminal window

ffmpeg -i video.mkv -vf "subtitles=video.mkv:si=0" -strict -2 video.mp4

字幕順序從 si=0 開始。

如果不知道字幕的 index，可以使用 ffprobe 來查詢：

Terminal window

ffprobe -loglevel error -select_streams s -show_entries stream=codec_name,index:stream_tags=language -of csv=p=0 "video.mkv"

如果以上方法不管用的話，需要使用 MKVToolNix 合併。

ass 字幕嵌入 mp4

Terminal window

ffmpeg -i video.mp4 -vf "ass=subtitle.ass" output.mp4

sup 圖形字幕嵌入 mp4

如果 sup 圖形字幕在 .mkv 檔案中：

Terminal window

ffmpeg -i video.mkv -filter_complex "[0:v][0:s]overlay[v1]" -map "[v1]" -map 0:a output.mp4

如果 sup 圖形字幕是額外的字幕檔：

Terminal window

ffmpeg -i video.mp4 -i subtitle.sup -filter_complex "[0:v][1:s]overlay[v1]" -map "[v1]" -map 0:a output.mp4

mkv 抽取軌道

MKVToolNix 附了一個 mkvextract 可以來抽取出 .mkv 的各個軌道：

Terminal window

mkvextract tracks video.mkv 0:video.mp4 1:audio.flac 2:subtitle.srt

轉成 8 位元深度

為了要投放影片到 Chromecast 上面，卻發現影片是 10 位元深度而不能播，轉成 8 位元深度 (yuv420p) 就可以了：

Terminal window

ffmpeg -i "video.mp4" -c:v libx264 -profile:v high -level:v 5.1 -pix_fmt yuv420p -c:a copy "output.mp4"

音訊從 5.1 轉成雙聲道

為了要投放影片到 Chromecast 上面，卻發現不支援 5.1 而不能播，轉成雙聲道就可以了：

Terminal window

ffmpeg -i video.mp4 -c:v copy -c:a aac -ac 2 output.mp4

下載 m3u8

直接丟 m3u8 連結給 ffmpeg，就可以下載影片了：

Terminal window

ffmpeg -i https://example.com/720p.m3u8 -c copy video.mp4

但也有會給 403 的時候，可以試試看加上 Cookie 和一些 headers：

Terminal window

ffmpeg -headers "Cookie: 這裡放Cookie" -headers "Referer: https://example.com/" -user_agent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36" -i https://example.com/720p.m3u8 -c copy video.mp4

ffmpeg 相關資源

AI 繪圖資源

Sun, 12 Mar 2023 00:00:00 GMT

玩了一小陣子 AI 繪圖，先把好用的資源記下來。

軟體

Stable Diffusion web UI 套件

訓練模型

提示詞參考

提示詞教學

Inertia.js SSR | 讓 Laravel x Vue 實現服務端渲染

Wed, 12 Jan 2022 00:00:00 GMT

Info

2023/02/20 更新：將 Inertia 的使用方式更新到 v1 版，以及把 Laravel Mix 換成 Vite。

構建 Laravel 全端網站我最愛用的 Inertia，現在終於也正式釋出 SSR 的功能，補足了 SPA 網站會有的 SEO 問題了！

這一篇文章中會記錄在在一個現成的 Inertia 專案中加入 SSR 功能的過程，下面我們一起來看吧~

Inertia 中 SSR 的運作原理

先大概介紹一下運作原理，因為 Inertia 要適配 PHP 或 Ruby 等不同語言，使用了 Node.js 來實作 SSR 服務。在 SSR 模式下接收到請求後會直接將 page 物件傳入 SSR Server 做解析，最後再回傳 HTML 給瀏覽器，結束這一次的請求。

更新 Inertia

首先需要一個現成的 Inertia 專案，在現在新版 Laravel 預設都使用 Vite 來打包前端，因此我下面都會用 Vite 的配置。還有要更新 Inertia 到最新版才會支援 SSR 功能。

安裝 Laravel 端到最新版：

Terminal window

composer require inertiajs/inertia-laravel

安裝 Vue 端 (使用 NPM 或 Yarn)：

Terminal window

npm install @inertiajs/vue3
# 或
yarn add @inertiajs/vue3

如果你的專案裡還有 @inertiajs/inertia 和 @inertiajs/inertia-vue3 的套件的話，表示還是在舊版，可以參考升級指南升級，基本上都是改改套件名字、變數名字等，升級難度應該不會太大。

設置 SSR 應用

現在就要開始配置 SSR 了，如果是在 Vue 3 新版可以不需要安裝官方的 SSR 套件 @vue/server-renderer，因為 Vue 核心套件會連帶安裝了，可以改用 vue/server-renderer 來使用。

同樣 Inertia v1 版也會一起安裝 @inertiajs/server 套件，裡面包含了一個執行 SSR 渲染的 HTTP Server。

之後新增一個 resources/js/ssr.js 檔案：

Terminal window

touch resources/js/ssr.js

這個 ssr.js 檔案跟 app.js 有點相似，但是個只會在服務端 (Node.js) 中執行的入口檔案，基本上不影響服務端渲染的套件都可以不用載入。而服務端/用戶端兩邊都會載入的部分就需要做兩邊兼容，比如需要顧慮到 Node.js 中沒有 window 和 document 的問題。

下面提供 resources/js/ssr.js 的範例：

resources/js/ssr.js

import { createSSRApp, h } from 'vue'
import { renderToString } from 'vue/server-renderer'
import { createInertiaApp } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'

createServer(page =>
  createInertiaApp({
    page,
    render: renderToString,
    resolve: name => {
      const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
      return pages[`./Pages/${name}.vue`]
    },
    setup({ App, props, plugin }) {
      return createSSRApp({
        render: () => h(App, props),
      }).use(plugin)
    },
  })
)

這裡稍微提一下 Vue 的 hydration 操作，在 SSR 模式中因為已經把 HTML 渲染好了，Vue 接手的時候就不需要再重新渲染一遍，而是使用 hydration 的方式，直接把靜態的 HTML 轉換成可以與 Vue 互動的動態 DOM。但有個前提是服務端生成的 DOM 和用戶端的必須保持一致，如果遇到不同的話會直接中斷 hydration，不管原本的 DOM，直接重新渲染新的。

在 Vue 3 要啟用 hydration 時，要將 app.js 裡的 createApp 替換成 createSSRApp：

import { createSSRApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createSSRApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

Hydration 相關更詳細的部分可以參考 Vue 的 hydration 注意事項。

設置 Vite

然後就進到 Vite 的編譯部分了，這裡需要在 vite.config.js 裡增加剛才的 ssr.js 路徑：

export default defineConfig({
  plugins: [
    Laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      ssr: 'resources/js/ssr.js',
      refresh: true,
    }),
    // ...
  ],
})

現在就可以執行 Vite 編譯 JS。原本的 vite build 是編譯用戶端的，所以再加一個 vite build --ssr 用於編譯 SSR 模式的指令：

  "scripts": {
    "dev": "vite",
    "build": "vite build && vite build --ssr"
  },

之後只要執行就可以同時編譯用戶端跟 SSR 了：

Terminal window

npm run build

在 Laravel 中啟用 SSR

開啟 app.blade.php，也就是 Inertia 專案的進入點，把 @inertiaHead 加到 <head> 的底部：

<!DOCTYPE html>
<html>
  <head>
    ...
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

好了之後就可以來啟用 SSR 功能了！先發布 config/inertia.php 設定檔到專案中：

Terminal window

php artisan vendor:publish --provider="Inertia\ServiceProvider"

然後會看到以下設定，基本上可以先用預設的，如果要改設定可以在這邊改。enabled 是一個單純的開關，url 是 SSR server 的網址，bundle 則是 vite build --ssr 產生的檔案的位置：

<?php

return [

    'ssr' => [

        'enabled' => true,

        'url' => 'http://127.0.0.1:13714',

        // 'bundle' => base_path('bootstrap/ssr/ssr.mjs'),

    ],

畢竟編譯出來的檔案不要送進版控，當然要加到 .gitignore 裡：

/bootstrap/ssr
/node_modules
...

執行 SSR 應用

當以上步驟都做完之後，現在就可以來啟動 SSR 網站了，啟動基本的 Artisan Serve：

Terminal window

php artisan serve

然後啟動 SSR 服務：

Terminal window

php artisan inertia:start-ssr

如果在正式環境下，更新完程式碼會需要手動關閉可以執行：

Terminal window

php artisan inertia:stop-ssr

現在就可以開瀏覽器看看啦~ 正常的話直接看是沒有差別的，這時候打開網頁原始碼，你就會看到差別所在。

首先是沒有 SSR，單純的用戶端渲染，內容很單純：

然後是啟用 SSR 的服務端渲染，就會看到已經渲染好的 <title> 以及 <body> 中的 HTML 了：

Tip

可以把瀏覽器左上的 自動換行 打開

結語

其實在 2021 年 Inertia 的 SSR 功能早期釋出時我就已經體驗過了，不過當時還沒有把功能包進套件中，使用起來比較麻煩一些，現在正式釋出的版本終於可以比較容易使用了。

在還沒出 SSR 功能之前，我都把 Inertia 定位成只能做後台操作的部分，需要 SEO 的頁面就只能用 blade 來頂替。SSR 功能的出現終於可以做完整的網頁功能了。可以把 Laravel 和 Vue 的功能發揮到極緻，這就是我喜歡 Inertia 的原因~ 期望之後 Inertia 可以完善更多功能，讓用 Laravel + Vue 來建立 Modern SPA 網站變得比較輕鬆~

參考資料

Server-side rendering (SSR) - Inertia.js

Tailwind CSS 小技巧之 scroll margin 篇

Fri, 01 Oct 2021 00:00:00 GMT

CSS 的 scroll-margin 和 scroll-padding 解決了在跳轉到次級標題時，卻因為上面留白不足，導致畫面頂部顯得緊湊，或是標題被導覽列擋住的問題。而且 scroll-margin 在 caniuse 上的瀏覽器支援度也已達到了 90% 左右了，當然，IE 是不能用的喔！！

scroll-margin

scroll-margin 屬性可以設定滾動時，元素相對於容器的外邊距。可以使用在像文章中的次級標題，在導覽到次級標題正常都會直接貼到最頂端，一點空間都不留。用上 scroll-margin 就可以在跳轉到次級標題時增加一些邊距，留下適當的空間看起來也比較不會那麼緊湊。

這裡看程式碼~ scroll-margin 跟 margin 一樣有 top/bottom/left/right 四個方向可以設定：

<div>
  <h2 id="sub-title" style="scroll-margin-top: 16px">Sub title</h2>
  ...
</div>

或是 Tailwind CSS 的使用方式，可以參考 margin 的使用方式：

<div>
  <h2 id="sub-title" class="scroll-mt-4">Sub title</h2>
  ...
</div>

因為現在 Tailwind 預設沒有增加 scroll-margin 相關的 utility class，所以我們要自己增加 CSS：

@layer utilities {
  .scroll-mt-4 {
    scroll-margin-top: 1rem;
  }
}

這樣就好啦！

scroll-padding

而 scroll-padding 則反之，是用在外層的容器元素，讓容器內部滾動時增加計算邊距。常見用法是頁面中有固定在頂部的導覽列時，跳轉到次要標題，卻被導覽列切掉了一半。因此 scroll-padding 就可以設定滾動後容器本身要偏移計算的內距。

使用方式如下 (也可以在 CSS 檔中設定)，一樣也有 top/bottom/left/right 四個方向：

<html style="scroll-padding-top: 56px">
  ...
  <body>
    <header class="navbar">
      <!-- 頂部導覽列 -->
    </header>
    ...
  </body>
</html>

或 Tailwind CSS 用法：

<html class="scroll-pt-14">
  ...
  <body>
    <header class="fixed ...">
      <!-- 頂部導覽列 -->
    </header>
    ...
  </body>
</html>

一樣 Tailwind 也要在 CSS 自訂 utility class：

@layer utilities {
  .scroll-pt-14 {
    scroll-padding-top: 3.5rem;
  }
}

不過你可能會覺得這樣在 Tailwind CSS 中設定比較麻煩 (雖然這些屬性通常是比較少使用)，這裡有消息要告訴你，在不久後的未來，Tailwind CSS 將會發布 3.0 的 Alpha 版🎉，其中會包含 scroll-margin、scroll-padding、scroll-snap 等滾動相關的 utility class，而且 JIT 會變成預設模式，當然也會有其他的更新，讓我們拭目以待吧😍！

崩壞三動畫短片「薪炎永燃」感想

Sun, 11 Jul 2021 00:00:00 GMT

前面剛開始的時候我還很平靜
想說沒什麼大不了的
就是個動畫短篇嘛…

但到鴨鴨拚盡全力射出大砲後
此時，旋律起
琪亞娜跟鴨鴨並肩而戰

到這裡時我的情感瞬間爆發
眼淚止不住
一直流
一直流

動畫短篇「薪炎永燃」真的精彩
音樂也非常好聽
直到現在腦中都還是盤旋者 Moon Halo 的旋律
和琪亞娜奮戰時的身姿

「即使這個世界依舊不完美，但還是要為世界上所有的美好而戰！」

Windi CSS - Tailwind CSS 的上位替代

Fri, 04 Jun 2021 00:00:00 GMT

Warning

Windi CSS 已經不再維護了，請使用 UnoCSS 來取代。

Windi CSS 作為 Tailwind CSS 的上位替代，提供了更多酷炫的功能。比 Tailwind CSS 更強大的任意值 class、Variants 群組，還可以在 DevTools 裡設計 (自動生成任意值 class~)。而且 Tailwind CSS 的 JIT 功能，是因為 Windi CSS 的關係才得以完成。這麼厲害的套件，下面我們一起來了解吧！

Windi CSS 的由來

如果你以前都沒有聽過 Windi CSS，看到任意值 class 功能時，反應可能是：「你這不是抄 Tailwind 嗎？」。事實恰恰相反，按需加載任意值 class 的功能其實就是從 Windi CSS 出來的。

事情要從 Tailwind CSS v1 時講起。雖然 Tailwind CSS 很強大，但為人所詬病的是編譯/HMR (熱更新) 的緩慢速度，當專案有幾十個組件時，初始編譯速度 3-5 秒起跳，熱更新更是超過 1 秒。為了解決這個問題，Windi CSS 應然而生。基於 TypeScript 實現了 Tailwind CSS 的功能，還可以按需加載 class，編譯和載入速度變得飛快！ (Tailwind CSS v1 和 Windi CSS 載入速度對照影片)

不過作者不是 Tailwind CSS 團隊的人，後來是 Tailwind CSS 的作者向 Windi CSS 團隊的人請教實現的細節，才完成了 v2 的 Just-in-Time 功能。

任意值 class (Windi CSS 版)

在 Windi CSS 裡可以直接書寫值，不強迫加上 [...]，當然你要加也可以，端看使用習慣：

<!-- 尺寸、定位 -->
<div class="pt-0.8rem pb-[0.5rem] mx-10px"></div>

<!-- 分數 -->
<div class="w-9/12"></div>

<!-- 顏色 -->
<button class="bg-hex-b2a8bb"></button>
<button class="bg-[hsl(211.7,81.9%,69.6%)]"></button>

<!-- 網格 (grid template) -->
<div class="grid-cols-[auto,1fr,30px]"></div>

響應式部分，除了手機端優先的斷點方式，Windi CSS 還多了大螢幕優先和當前斷點兩種斷點方式，定義斷點的彈性變大了：

<div class="lg:p-1"></div>  <!-- 手機端優先 -->
<div class="<lg:p-2"></div> <!-- 大螢幕優先 -->
<div class="@lg:p-3"></div> <!-- 當前斷點 -->

以上 3 種斷點寫法分別會輸出以下 CSS：

@media (min-width: 1024px) {
  .lg\:p-1 {
    padding: 0.25rem;
  }
}
@media (max-width: 1023.9px) {
  .\<lg\:p-2 {
    padding: 0.5rem;
  }
}
@media (min-width: 1024px) and (max-width: 1279.9px) {
  .\@lg\:p-3 {
    padding: 0.75rem;
  }
}

Variants 群組

當 class 越寫越多，會發現 class 變得雜亂無章，這裡我們可以依照 Variants 來分組，變得相對簡潔且易讀，而且最後會編譯成 utility class：

<div class="bg-white font-light hover:(bg-gray-400 font-medium) md:(text-indigo-100 bg-indigo-500) md:hover:(text-white bg-indigo-400)">
  ...
</div>

在 DevTools 裡設計

如果在原本 Tailwind CSS 中這樣開發還不算什麼稀有事情，畢竟所有的 class 都包在幾 MB 的 CSS 裡了，但代價就是拉垮的瀏覽器效能。在按需生成 class 的 Windi CSS 反而才覺得不可能，不過，它做到了！

先看影片示例~

只要在 Vite 專案的入口檔案 (通常是 main.js) 加上這串就可以使用了~

src/main.js

import 'virtual:windi-devtools'

Attributify Mode

Warning

Attributify Mode 目前只能在 Vite 使用。

在 windi.config.js 開啟：

windi.config.js

export default {
  attributify: true,
}

開啟之後能幹嘛呢？先看原本落落長難以閱讀的 class：

<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
  Button
</button>

然後再看把 class 們變成用屬性的方式定義 (Attributify Mode)，更加清楚整潔，而且只要看屬性馬上就可以知道定義了哪些 utility 功能，當然還是可以使用 class：

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

VS Code 套件

Windi CSS 官方維護的 VS Code 智能提示套件 WindiCSS IntelliSense，用 Windi CSS 基本上就是必備。

但我裝了之後遇到一個小衝突 (已經有人提 issue 了，而且說是小衝突但我也被卡了半小時…)，在安裝了 Auto Rename Tag 和專案有 Windi CSS 的設定檔時，會無法運行 WindiCSS IntelliSense，現在解方是在專案中禁用 Auto Rename Tag 就正常了。

結論

Tailwind CSS 發展到現在已經是一個大專案，4000 左右個 commits 和 170 多位貢獻者，依賴於 PostCSS 已然是不可變動，而且想要貢獻一些實驗性功能也不會那麼容易，因此作者才會自己用 TypeScript 開發出 Windi CSS。

如果你的專案還是依賴 PostCSS 的話請繼續用 Tailwind CSS (Windi CSS 不建議用在 PostCSS)，而如果使用 Vite、Rollup、Webpack 等技術，同時對上述新潮功能有興趣，不妨試試 Windi CSS，官方也有 Tailwind CSS 轉換指南。而且 Windi CSS 是用 TypeScript 開發，有用 TS 的專案相性非常好。

Info

當然 Windi CSS 的功能不只上面那些，我只是選了幾個我覺得很強的功能來分享給大家~

但同時也要記住，Windi CSS 的出現也是因為有 Tailwind CSS，兩者是無法從真正意義上爭論誰勝於誰的。最重要的是，選擇一個讓自己舒適的開發工具！

參考資料

Windi CSS 官網

快速了解 Tailwind CSS 的 JIT 模式

Mon, 24 May 2021 00:00:00 GMT

Info

切版技術再升級！一課覆蓋 TailwindCSS + Vue3｜打造後台管理頁面 UI - 課程開播中~

Tip

線上範例：JIT 線上範例 - Tailwind Play

因為 Tailwind CSS 的設計原理，在開發時會先幫你產生好超多的 class，CSS 檔最少 3 MB 起跳，而且預設還只有開 1-2個 Variants。但現實往往沒有那麼單純，開發下去需要的 Variants 只會越來越多，開發中產生的 CSS 檔長到 10-20 MB 都是可能的，還會連帶拖慢 Chrome 載入的時間。

這時候 JIT 模式就派上用場啦！Tailwind CSS 2.0 正式上線的 Just-in-Time (簡稱 JIT) 編譯器，可以在寫 HTML 時及時編譯 CSS，大幅縮短編譯時間，和縮小產生的資產大小。

Just-in-Time 模式的新功能

廢話不說，馬上來看它可以做什麼：

超快速的編譯時間。原本 Tailwind CLI 編譯需要 3-8 秒，在 JIT 模式 下僅需 0.8 秒。
直接使用任意 Variants。不用再煩惱需不需要開 active、focus 或 disabled 等。
任意值 CSS class。可以直接在 HTML 裡寫像 top-[247px] 這樣的 class，將會自動生成。而且也可以使用 Variants：lg:top-[587px]。
在 develop 和 production 產生一樣的 CSS。不需要煩惱上線後會不會有 class 靈異的消失~
在開發時有更好的瀏覽器效能。因為 develop 和 production 的 CSS 大小一樣小，本地預覽時不會出現 10-20 MB 的 CSS 檔案，開啟相關開發工具也不會載入很久。

啟用 JIT 模式

要開啟非常簡單，只需要在 tailwind.config.js 裡把 mode 設成 'jit' 就行了：

module.exports = {
  mode: 'jit',
  theme: {
    // ...
  }
  // ...
}

但因為 JIT 模式在開發時就只會打包需要的 class，所以也要配置 purge 的部分：

module.exports = {
  mode: 'jit',
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    // ...
  }
  // ...
}

新功能

然後就可以開始玩功能了！

直接使用任意 Variants

<input class="active:bg-indigo-200">

直接在 HTML 寫就可以了，不用在 tailwind.config.js 做設定，方便許多了。其他的 focus-visible、disabled、even 等都可以用喔！

當然，還支援各種疊加的用法，像這樣 XD：

<button class="md:dark:disabled:focus:hover:bg-gray-300">

任意值 class

如果網站是照著設計稿刻出來的，這個功能絕對是必備。使用任意值 class 很簡單，把你想要指定的值用 [...] 框起來，比如 h-[100px] 可以設定高度為 100px。但要注意的是不能濫用，否則 Tailwind CSS 的設計系統就失去了原本的優勢了。

首先是萬惡的圖片，絕對定位+圖片寬高，現在終於都可以在 HTML 裡搞定！：

<img class="absolute w-[165px] h-[110px] top-[-125px] left-[62px] md:top-[-30px] md:left-[180px]" src="/background-image.png">

如果有嵌入 LINE 或 Twitter 的按鈕時，LINE/Twitter 的商標顏色也不用增加到顏色系統了，因為只會用這麼一次呀：

<button class="bg-[#00b900]">加入 LINE 好友</button>

或者是更客製的網格設定：

<div class="grid-cols-[1fr,700px,2fr]">
  <!-- ... -->
</div>

!important 修飾符

還有 !important 也可以使用，在特殊狀況時會用到：

<div class="!font-bold">!IMPORTANT BOLD TITLE</div>

如果加上 Variants 時，! 要跟著樣式名字，而不是加在最前面：

<div class="sm:hover:!font-bold">

JIT 模式的限制

當然 JIT 模式不是萬能的，它也有一些使用上的限制，請往下看…

需要記住一件事情，Tailwind CSS 是靜態提取 class 的，寫 class 務必要寫完整，不然 Tailwind CSS 會無法正確的打包 CSS。

❌ 這樣是不行的呦：

<div :class="`mt-[${size === 'lg' ? '22px' : '17px' }]`"></div>

✅ 動態選擇完整的 class：

<div :class="size === 'lg' ? 'mt-[22px]' : 'mt-[17px]'"></div>

但如果真的要寫完全動態的 class 的話，只能改用 Inline-style 或 CSS-in-JS 的套件了。

❌ 這樣是不行的呦：

<div :class="`bg-[${userThemeColor}]`"></div>

✅ 改用 Inline-style

<div :style="`background-color: ${userThemeColor}`"></div>

還有，JIT 模式是沒有使用 PurgeCSS，所以 PurgeCSS 的設定都不能用。不過 v2.2 更新後增加了 safelist 的選項，所以現在 JIT 模式下也可以正常使用 safelist 囉！(記得要寫下完整的 class)

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: {
    content: ['./src/**/*.html'],
    safelist: [
      'bg-blue-500',
      'text-center',
      'hover:opacity-100',
      // ...
      'lg:text-right',
    ],
  },
}

結語

結論，JIT 模式太香了！速度快不說，還有這麼多新功能，推薦新專案都要啟用，真的爽到起飛！！！

線上體驗

啊！別忘了來用用看 Tailwind Play，可以在本篇的範例體驗看看唷：JIT 線上範例 - Tailwind Play

參考資料

Just-in-Time Mode - Tailwind CSS

課程資訊

我和 HiSIO 合作開設了一堂結合 Tailwind CSS + Vue3 的進階課程，透過一步步講解以及實作，帶大家整合使用 Tailwind CSS 和 Vue 3 來完成一個部落格的後台 UI。實作功能包含文章列表、編輯表單、富文本編輯器、用戶資料設定等，並教大家使用快速啟動又新潮的打包器 Vite 作為開發和編譯工具。一起來加入課程，提升切版技術吧！

【崩壞3MMD】要來和希兒玩捉迷藏嗎？ - 魘夜星淵|孑然妒火

Sun, 23 May 2021 00:00:00 GMT

這個月出了新的希兒裝甲「魘夜星淵」，我也做了 MMD，從5月初忙忙碌碌到快5月底才趕出來，同時也覺得，我的顯卡該換了…，出個4分鐘不到的影片，要跑2小時，好久啊！！！！！

還有，希兒最~~~可愛了！！！

借物表：

模型：魘夜星淵-神帝宇 miHoYo
動作：FlyingSpirits-P
表情：KAZUSA/天使の潤
鏡頭：乱入君/天使の潤
場景：溯北P
BGM：孑然妒火 (独りんぼエンヴィー) - 天神子兎音
渲染：Ray MMD by Rui_cg/Toon_Shader_Material by RedialC
MME：Diffusion7/XDOF/ExcellentShadow
字幕翻譯：kyroslee
字幕字型：ピグモ 00

簽章 Git 提交

Thu, 08 Apr 2021 00:00:00 GMT

GPG 全名為 The GNU Privacy Guard，又稱 GnuPG，可以用來對訊息或檔案進行加密(encrypt)或簽章(sign)。且可以和 Git 整合，用來簽章 Git 的提交內容，確保是由本人提交，而非被竄改或仿冒提交。

安裝 GPG

Windows

Windows 環境中現在在 Git Bash 已經內建了 GPG，安裝 Git 的時候就會安裝好 GPG 了。

不過也可以獨立安裝 Gpg4win，還附有一個 GUI 介面的金鑰管理員(Kleopatra) 與 Outlook 外掛程式，如果你需要還是可以安裝的。

雖然可以不用安裝 gpg，但還是需要設定 Git 的 gpg.program 選項設定，指定 gpg.exe 所在路徑：

Terminal window

git config --global gpg.program "C:\Program Files\Git\usr\bin\gpg.exe"

Bash

如果有使用 Bash，需要增加以下指令到 ~/.bashrc 檔案中：

Terminal window

# GPG Agent setup for Git commit signing
export GPG_TTY=$(tty)
gpgconf --launch gpg-agent

否則在執行 gpg 簽章時會發生以下錯誤：

error: gpg failed to sign the data
fatal: failed to write commit object

GPG 使用方式

安裝好之後就可以開始使用了。

建立 GPG 金鑰組

Terminal window

gpg --full-generate-key

建立過程中，需要輸入以下：

Please select what kind of key you want: 輸入 Enter 選預設值 (9) ECC (sign and encrypt)
Please select which elliptic curve you want: 輸入 Enter 選預設值 (1) Curve 25519
Please specify how long the key should be valid: 輸入 2y
輸入你的 GitHub 的名稱和 E-mail
輸入 O (即 OK)
設定密碼

看到如下畫面就是建立成功了：

gpg: revocation certificate stored as '/c/Users/Lucas/.gnupg/openpgp-revocs.d\7144F0FE70DA28DE2428982FAFA8022C0E4062EF.rev'
public and secret key created and signed.

pub   ed25519 2021-04-08 [SC] [expires: 2023-04-08]
      DC279878969CA746899B02FFAE57F5023B001577
uid                      Lucas Yang <yangchenshin77@gmail.com>
sub   cv25519 2021-04-08 [E] [expires: 2023-04-08]

查詢 GPG 金鑰組

列出公開金鑰資訊：

Terminal window

gpg --list-keys
gpg --list-keys --keyid-format SHORT
gpg --list-keys --keyid-format LONG

列出私密金鑰資訊：

Terminal window

gpg --list-secret-keys
gpg --list-secret-keys --keyid-format SHORT
gpg --list-secret-keys --keyid-format LONG

如果我們要簽章 Git 提交，就必須先取得金鑰 ID：

Terminal window

gpg --list-secret-keys --keyid-format SHORT


[keyboxd]
---------
sec   rsa4096/0E4062EF 2021-04-08 [SC]
      7144F0FE70DA28DE2428982FAFA8022C0E4062EF
uid         [ultimate] Lucas Yang <yangchenshin77@gmail.com>
ssb   cv25519/5F50EFE6 2021-04-08 [E]

上述訊息中，sec 就是 secret (私密金鑰)，而 7144F0FE70DA28DE2428982FAFA8022C0E4062EF 就是完整的金鑰 ID，可以用簡短的金鑰代替，也就是 0E4062EF，之後的操作都會用到這段 ID。

設定 Git 提交進行 GPG 簽章

設定預設的 GPG 金鑰：

Terminal window

git config --global user.signingkey 0E4062EF

然後就可以在 Git 提交 (commit) 或標籤 (tag) 時進行 GPG 簽章：

Terminal window

git commit -S
git tag -s

當然也可以設定自動簽章：

Terminal window

git config --global commit.gpgSign true
git config --global tag.gpgSign true

顯示 Git 簽章資訊

顯示含有簽章資訊的 Git 的指令：

Terminal window

git log --show-signature


commit aa993b7b69b47a6bf9d23cacf56e00139f3907a0 (HEAD -> main, origin/main)
gpg: Signature made 2021/4/8 <A4>U<A4><C8> 04:54:57 <A5>x<A5>_<BC>зǮɶ<A1>
gpg:                using RSA key CB8E694EB798BFED6FA1C2DC88D3F62D215D5306
gpg: Good signature from "Lucas Yang <yangchenshin77@gmail.com>" [ultimate]
Author: Lucas Yang <yangchenshin77@gmail.com>
Date:   Thu Apr 8 16:54:57 2021 +0800
    Formatting

設定 GitHub 帳號的 GPG 金鑰

直接將 GPG 公鑰輸出在「命令提示字元」中：

Terminal window

gpg --armor --export 0E4062EF

並複製公鑰，到 GitHub 的 SSH and GPG keys 設定，新增一個 GPG 金鑰。

設定 VS Code

在 VS Code 增加 git.enableCommitSigning，之後 VS Code 提交 Git commit 時都會加上簽章：

settings.json

{
  "git.enableCommitSigning": true,
}

遷移 GPG 金鑰組到其他電腦

匯出公鑰：

Terminal window

gpg --armor --export 0E4062EF > gpg-pub.asc

匯出私鑰，這裡應該會提示輸入密碼：

Terminal window

gpg --armor --export-secret-keys 0E4062EF > gpg-sc.asc

確認一下公鑰和私鑰：

Terminal window

ls -l gpg*.asc

然後把金鑰組移到新電腦上。到新電腦之後就開始匯入的操作：

Terminal window

gpg --import gpg-pub.asc

匯入私鑰，這裡應該會提示輸入密碼：

Terminal window

gpg --import gpg-sc.asc

最後記得要在舊電腦上刪除乾淨金鑰組。

刪除 GPG 金鑰組

如果公鑰私鑰都在同一台電腦，必須先刪除私鑰，才能刪除相對應的公鑰。也可以直接刪除私鑰就好，公鑰保留。

刪除私鑰：

Terminal window

gpg --delete-secret-key 0E4062EF

刪除公鑰：

Terminal window

gpg --delete-key 0E4062EF

延長 GPG 金鑰組的有效期限

Terminal window

gpg --edit-key 0E4062EF

進入互動介面後，輸入 expire，然後選擇新的有效期限比如 2y，最後輸入 save 就完成了。

參考資料

【崩壞3MMD】帥氣駭兔，在線熱舞！ [布朗尼‖擬劇論]

Sun, 28 Mar 2021 00:00:00 GMT

第一次做 MMD，花了4天研究，終於變出來了。

用4.7版登場的迷城駭兔-布朗尼，配上 hanser 翻唱的擬劇論，真的太讚了！

布朗尼：“想搞波大的嗎？老子罩著你” 艦長：“啊~~好帥的鴨鴨”

借物表：

模型：迷城駭兔-神帝宇 miHoYo
動作：moka
鏡頭：ゆきねこ
場景：怪獣対若大將P
BGM：擬劇論（ドラマツルギー）（翻自 Eve） - hanser
渲染：Ray MMD by Rui_cg，Toon_Shader_Material Ver1.3 by RedialC
MME：Diffusion7，SvSSAO，SvDOF2，MMD-ColorGray
Tools：MMD，小丸工具箱月兒版

使用本地 phpMyAdmin 連線到遠端 MySQL 資料庫

Wed, 23 Dec 2020 00:00:00 GMT

為了要管理遠端 MySQL 資料庫，還要在遠端主機安裝 phpMyAdmin 且不安全。本文分享如何在本地用 phpMyAdmin 連線到遠端 MySQL 資料庫。

首先先確保有設定好 SSH 無密碼登入，讓 SSH 連線可以掛在後台運行。

然後執行以下 SSH 指令連線到遠端主機，使用此方式連線會將本地的 3307 port 轉發到遠端主機的 3306 port：

Terminal window

ssh -fNL 3307:localhost:3306 root@REMOTE_HOST

Tip

將 root@REMOTE_HOST 替換為實際連線的主機名稱

然後確認該 SSH 連線是否已經成功掛在後台運行：

Terminal window

ps aux | grep ssh

現在可以來配置 phpMyAdmin 的設定：

Terminal window

sudo vim /etc/phpmyadmin/config.inc.php

把以下設定貼到 Servers 設定的底部：

config.inc.php

$cfg['Servers'][$i]['verbose']       = 'Local';
$cfg['Servers'][$i]['host']          = 'localhost';
$cfg['Servers'][$i]['port']          = '3306';
$cfg['Servers'][$i]['connect_type']  = 'tcp';
$cfg['Servers'][$i]['extension']     = 'mysqli';
$cfg['Servers'][$i]['compress']      = FALSE;
$cfg['Servers'][$i]['auth_type']     = 'cookie';
$i++;

$cfg['Servers'][$i]['verbose']       = 'Remote Server 1'; // Your Remote Server Name
$cfg['Servers'][$i]['host']          = '127.0.0.1';
$cfg['Servers'][$i]['port']          = '3307';
$cfg['Servers'][$i]['connect_type']  = 'tcp';
$cfg['Servers'][$i]['extension']     = 'mysqli';
$cfg['Servers'][$i]['compress']      = FALSE;
$cfg['Servers'][$i]['auth_type']     = 'cookie';
$i++;

正常的話現在應該就可以用 phpMyAdmin 連線到遠端主機了。但如果使用 MySQL 8 在連線時，應該會遇到一個錯誤：

Danger

The server requested authentication method unknown to the client

當然還是有解方。先用 root 帳號登入 MySQL (CLI)，然後執行以下：

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

Tip

把 password 改成你的 MySQL root 帳號的密碼

現在終於可以舒舒服服地用 phpMyAdmin 囉！

啊！如果要移掉 3307 port 的話，可以執行這個指令：

Terminal window

fuser -n tcp -k 3307

參考資料

啟動 SSH 密碼登入 & 設定 SSH 無密碼登入

Sat, 14 Nov 2020 00:00:00 GMT

啟動 SSH 密碼登入

DigitalOcean 的 SSH 登入設定我一開始沒設好，沒辦法直接用 SSH 連線，結果只能用 DigitalOcean 自帶的古怪 Web Console 連，還不能複製文字，反正就是超級難用。想改成用密碼登入時卻回 Permission denied，沒法正常的使用 SSH。

好在至少還有 Web Console 可以用，用 root 連線後修改 sshd_config 檔：

Terminal window

sudo vim /etc/ssh/sshd_config

把 PasswordAuthentication 的 no 改成 yes。

然後重新啟動 SSH 服務：

Terminal window

sudo service sshd restart

現在就可以用密碼來連線做無密碼登入的設定了。

設定 SSH 無密碼登入

如果沒有 SSH 金鑰可以先生成：

Terminal window

ssh-keygen -t ed25519 -C "your_email@example.com"

然後使用 ssh-copy-id 複製公鑰到遠端主機 (還需要密碼)：

Terminal window

ssh-copy-id root@host

# 或指定其他金鑰
ssh-copy-id -i ~/.ssh/mykey root@host

測試 SSH 連線，神奇似的不用了密碼：

Terminal window

ssh root@host

# 或指定其他金鑰
ssh -i ~/.ssh/mykey root@host

檢查 authorized_keys 會發現公鑰已經在裡面：

Terminal window

cat ~/.ssh/authorized_keys

記得把密碼登入的設定關掉啊！

參考資料

VuePress 部落格開發踩坑記

Wed, 19 Aug 2020 00:00:00 GMT

Warning

這篇文章的內容已經過時了，請查閱 Vuepress 新版文檔使用。

新部落格上線，紀錄一下使用 VuePress + Tailwind CSS + Dark Mode 開發時的小技巧和奇怪的坑。

VuePress 篇

VuePress，以 Markdown 為中心的 Vue.js 靜態網站產生器，只要寫好 Markdown 文件和基本的設定一下，馬上就變出一個簡單的文檔網站了。但要客製化的話，就會遇到一些奇怪的坑：

Config 沒有更新？

難道是 VuePre```js title=“ss 壞了？當然不是，只要改了 VuePress 都要重啟 VuePress，才會看到更新後的結果。如果有改 Markdown 上方的 frontmatter 最好也重啟。

這個坑讓我一開始卡的超…久的，每次重啟都要浪費很多時間。本來想換以 Vite 為基礎的 Vitepress，本機 Dev Server 啟動超…快，更新超…快。但 Vitepress 目前尚在開發中，文檔也寫明不支持 VuePress 的生態系，也不會有套件 (Plugin) 這東西存在，所有功能都要自己寫。出於以上原因，最後決定還是先用 VuePress。

語言設定

語言比較簡單，直接增加這段就好了：

.vuepress/config.js

module.exports = {
  // ...
  locales: {
    '/': { lang: 'zh-TW' }
  }
}

VuePress Blog Plugin

看到官方有出建部落格的套件就馬上拿來用了，部落格都會有的文章區，可以使用套件的 Directory Classifier 功能實現。先上我的 Blog Plugin 設定：

Info

具體如何實現請看 VuePress Blog Plugin 文檔

.vuepress/config.js

module.exports = {
  // ...
  plugins: [
    ['@vuepress/blog', {
      directories: [
        {
          id: 'post',
          title: '文章',
          dirname: 'post',
          layout: 'IndexPost',
          path: '/post/',
          itemPermalink: '/post/:slug',
          pagination: {
            layout: 'IndexPost',
            lengthPerPage: 15
          }
        }
      ],
      frontmatters: [
        {
          id: 'tag',
          title: '標籤',
          keys: ['tags'],
          path: '/tag/',
          layout: 'Tags',
          scopeLayout: 'Tag'
        }
      ]
    }]
  ]
}

我的文章檔名格式是 2020-01-01-article-slug，然後再將 Blog 套件 directories 內文章的 itemPermalink 設為 /post/:slug，其中 :slug 它就會自動抓 Markdown 檔名中的 article-slug 部分。這算是它比較聰明的地方。

文章區做完後，想說可以在首頁顯示最新的幾篇文章，結果光就這功能要爬到源碼才找到解法。

在文章列表的 Vue 組件 (IndexPost.vue) 裡可以使用 this.$pagination 直接取得文章的資料，以此為線索找了方法，可以在 Home.vue 裡可以調用 this.$getPagination('post', 'post') 取得文章，並用 slice() 截出我需要的文章數：

.vuepress/theme/layouts/Home.vue

<template>
  <layout>
    <!-- ... -->

    <div class="container">
      <div>文章</h2>
      <div class="grid gap-8 sm:grid-cols-6 mt-8">
        <div v-for="(page, i) in homePosts" :key="page.name">
          <PostGridItem :page="page" />
        </div>
      </div>
      <!-- ... -->
    </div>

    <!-- ... -->
  </layout>
</template>

<script>
// ...
export default {
  // ...
  computed: {
    post() {
      return this.$getPagination('post', 'post')
    },
    homePosts() {
      return this.post._matchedPages.slice(0, 9)
    }
  }
}
</script>

後來看到一些網站可以置頂文章在首頁，增加排序文章方法，因此程式碼改成以下：

Info

雖然這不是坑，姑且還是紀錄一下好了

.vuepress/theme/layouts/Home.vue

<script>
// ...
export default {
  // ...
  computed: {
    post() {
      return this.$getPagination('post', 'post')
    },
    homePosts() {
      return this.post._matchedPages
        .sort((prev, next) => {
          const prevPinOrder = prev.frontmatter.pin
          const nextPinOrder = next.frontmatter.pin
          if (typeof prevPinOrder === 'number' && typeof nextPinOrder === 'number') {
            return prevPinOrder > nextPinOrder ? 1 : -1
          }
          return typeof prevPinOrder === 'number' ? -1 : (typeof nextPinOrder === 'number' ? 1 : 0)
        })
        .slice(0, 9)
    }
  }
}
</script>

然後只要在想要置頂的文章設定 pin 為想要顯示的順序就好了。首頁的文章會照 1234… 的順序，之後接其他的文章：

---
pin: 1
title: 文章...
---

VuePress Last Updated Plugin 的時間 Bug

用 vuepress-plugin-seo + @vuepress/plugin-last-updated 這組合，連 VuePress 都啟動不了。不過爬文時還看到過別的組合但同樣問題。話不多說，先上解法：

.vuepress/config.js

module.exports = {
  // ...
  plugins: [
    ['@vuepress/last-updated', {
      transformer: timestamp => timestamp
    }]
  ]
}

改完重啟 VuePress 就恢復正常了。原因其實是 @vuepress/plugin-last-updated 預設 timestamp 的 transformer() 已經轉換成文字的日期格式 (用 toLocaleString())，但在 vuepress-plugin-seo 卻把這串日期文字丟進 new Date() 解析。但在台灣的我，電腦預設 toLocaleString() 會回傳中文格式的日期再丟進 new Date()，但 JavaScript 卻表示看不懂，才造成現在這窘境。所以只需覆寫原本的 transformer()，讓它回傳原本 timestamp 格式 (自 1970年1月1日到該時間的秒數)，再丟進 new Date() 解析就正常了。

移除外部連結的 Icon

VuePress 很 貼心 的幫你在連外的連結後方都加上了標示的 Icon，但我不是很喜歡，想關掉但卻沒有…。後來在 Issue 也有人提到這個問題，才有下方解決方案 (參考自)：

.vuepress/config.js

module.exports = {
  // ...
  chainMarkdown(config) {
    const { removePlugin, PLUGINS } = require('@vuepress/markdown')
    const originalLinkPlugin = require('@vuepress/markdown/lib/link')

    removePlugin(config, PLUGINS.CONVERT_ROUTER_LINK)

    config
      .plugin(PLUGINS.CONVERT_ROUTER_LINK)
        .use(function (md, externalAttrs) {
          originalLinkPlugin.call(this, md, externalAttrs)
          const linkClose = md.renderer.rules.link_close
          md.renderer.rules.link_close = function () {
            return linkClose.apply(this, arguments).replace('<OutboundLink/>', '')
          }
        }, [{
          target: '_blank',
          rel: 'noopener noreferrer'
        }])
        .end()
  }
}

改完記得重啟 VuePress 才看得到結果。

滾動至標題錨點

VuePress 預設會在每個標題左側加上 # 錨點連結，但如果標題有中文，並瀏覽中文標題產生出的連結，他會留在最頂部，不會自動滾動到錨點定位的點。而且還會警告：

Danger

[Vue warn]: Error in nextTick: “SyntaxError: Failed to execute ‘querySelector’ on ‘Document’: ’#%E4%B8%AD%E6%96%87%E6%A8%99%E9%A1%8C’ is not a valid selector.”

查了一下，這是源碼的問題，也有人開 PR 了，但官方還沒處理，在新版出來之前先用點硬招強行突破吧！

.vuepress/theme/components/Layout.vue

<script>
// ...
export default {
  // ...
  methods: {
    scrollTo(selector) {
      if (!selector || selector === '#') return
      const el = document.querySelector(decodeURIComponent(selector))
      if (el && el.offsetTop) {
        window.scrollTo(0, el.offsetTop)
      }
    }
  },
  mounted() {
    this.scrollTo(location.hash)
  }
}
</script>

Tailwind CSS 篇

Tailwind CSS 是一個 Utility-first、可高度客製化的 CSS 框架。網頁刻板必備，比 Bootstrap 好用。

Tailwind CSS 之切換色系 (Dark/Lght Mode)

Tailwind CSS 目前我遇到的問題基本只有在做雙色系 (Dark/Light Mode) 切換。原本只打算做暗色系，後來聽朋友的建議，也把亮色系加進來，做了可以切換色系的功能。

首先先裝 Dark Mode 套件：

Terminal window

yarn add tailwindcss-dark-mode

除了註冊套件之外，還要手動加 Variants，要用什麼才開什麼，例如下面對 backgroundColor 和 textColor 開了 dark 跟 dark-hover 兩個 Variants。可以使用的 Variants 請參考 Tailwind CSS Dark Mode：

Warning

沒看錯！這套件註冊後面要加括號！

tailwind.config.js

module.exports = {
  // ...
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'dark', 'dark-hover'],
    textColor: ['responsive', 'hover', 'focus', 'dark', 'dark-hover']
  },
  plugins: [
    require('tailwindcss-dark-mode')()
  ]
}

Typography 和 Dark/Lght Mode

Tailwind CSS 官方也剛出建立純 HTML 樣式的套件 Typography，至少有現成的樣式可以調，不需要全部自己來。但用到 Dark Mode 時也出包了。不過還好，Tailwind CSS 的作者大大提供了解法：tailwindcss-dark-mode-prototype (DEMO)，參考裡面的寫法終於解決了這問題：

tailwind.config.js

const plugin = require('tailwindcss/plugin')
const selectorParser = require('postcss-selector-parser')

module.exports = {
  purge: {
    content: [
      './.vuepress/**/*.vue'
    ],
    options: {
      whitelist: ['html', 'body', 'scheme-dark']
    }
  },
  // ...
  plugins: [
    require('tailwindcss-dark-mode')(),
    plugin(function ({ addVariant, theme, prefix }) {
      const darkSelector = theme('darkSelector', '.mode-dark')
      addVariant('dark', ({ modifySelectors, separator }) => {
        modifySelectors(({ selector }) => {
          return selectorParser((selectors) => {
            selectors.walkClasses((sel) => {
              sel.value = `dark${separator}${sel.value}`
              sel.parent.insertBefore(sel, selectorParser().astSync(prefix(`${darkSelector} `)))
            })
          }).processSync(selector)
        })
      })
    }),
    require('@tailwindcss/typography')
  ]
}

除了這個之外，切換的按鈕也是直接借來用，只是它是用 React 寫的，轉換成 Vue 的格式才能使用。

部署網站

在 Netlify 和 Vercel 中經過艱難的選擇後，最後還是決定來試試用 Vercel 部署網站。開一個新的 Vercel 專案，經過簡單的設定後，就上線了我的新網站！更新網站也需要 Push 到 GitHub，不需要串任何 CI/CD 服務，還滿簡單的。目前還沒打算買 Domain，暫時先用 Vercel 預設的。

參考文章

建部落格時參考的文章：

結語

其實很早就有在找建個人網站/部落格的平台，試過 Medium、GitBook 和其他的方法，最後決定以 VuePress 為基礎、 Tailwind CSS 刻板這個組合最滿意，花了快1個月完成，果然自己設計網站還是比較有趣。比起完成作品，更多的是在過程中吸取的經驗，一次會比一次進步。感謝你看到這裡，希望本文些許可以幫到你😁。

Swoole 從入門到實戰工作坊 | Docker 環境安裝筆記

Sat, 26 Oct 2019 00:00:00 GMT

上課時使用的筆電是 Win10 家用版，因 Docker for Windows 只能在旗艦版中安裝，家用版無法直接使用 Docker，因此選擇在 Homestead 中安裝 Docker 使用。

安裝環境

先 clone swoole-course-examples 到本地：

Terminal window

git clone https://github.com/albertcht/swoole-course-examples.git

開啟 homestead.yaml 設定環境，資料夾掛載、開啟 Docker、掛載 9501 Port，設定完成後就可以 vagrant up：

homestead.yaml

folders:
    - map: d:/dev/code/swoole-course-examples
      to: /home/vagrant/code/swoole-course-examples

features:
    - docker: true

ports:
    - send: 9501
      to: 9501

登入 Vagrant SSH，切換到 swoole-course-examples 資料夾，執行 Docker image：

Terminal window

docker run -it --name swoole -v $PWD:/src -p 9501:9501 albertcht/swoole

參考資料

VSCode 紀錄

Tue, 04 Jun 2019 00:00:00 GMT

設定 VSCode 的終端機為 Git Bash

Tip

安裝 Git 就會安裝 Git Bash。

開啟 VSCode 設定檔，增加以下設定：

settings.json

{
    // ...

    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "terminal.integrated.shellArgs.windows": [
        "--login"
    ]
}

VSCode 智能感知(IntelliSense) 異常解決方法

將 C:\Users\[使用者]\AppData\Roaming\Code\User\workspaceStorage 下的檔案清除，重新啟動 VS Code。

Git Bash 使用別名

Wed, 22 May 2019 00:00:00 GMT

Tip

Vim 輸入 i 開始編輯模式，Esc 關閉編輯模式，:wq 儲存並退出。(Vim 教學)

設定本機指令別名

開啟 Git Bash 設定別名的檔案：

Terminal window

vim /c/'Program Files'/Git/etc/profile.d/aliases.sh

增加以下內容，或自訂常用指令：

Terminal window

alias pa='php artisan'
alias pa71='php71 artisan'
alias pa72='php72 artisan'
alias pa73='php73 artisan'
alias pa74='php74 artisan'
alias pa80='php80 artisan'
alias pa81='php81 artisan'
alias pa82='php82 artisan'
alias pav='php artisan serve'
alias pam='php artisan migrate'
alias pams='php artisan migrate --seed'
alias pamr='php artisan migrate:rollback'
alias pamf='php artisan migrate:fresh'
alias pamfs='php artisan migrate:fresh --seed'
alias pas='php artisan db:seed'
alias par='php artisan route:list'
alias paq='php artisan queue:work'
alias pah='php artisan horizon'
alias pat='php artisan tinker'
alias phpunit='./vendor/bin/phpunit --colors=always'
alias pu='phpunit'
alias pest='./vendor/bin/pest'
alias pint='./vendor/bin/pint'
alias stan='./vendor/bin/larastan'

如果在 Laragon 有安裝多個 PHP 版本，可以增加以下別名來切換使用版本：

Terminal window

alias php71='/c/laragon/bin/php/php-7.1.33-Win32-VC14-x64/php'
alias php72='/c/laragon/bin/php/php-7.2.34-Win32-VC15-x64/php'
alias php73='/c/laragon/bin/php/php-7.3.33-Win32-VC15-x64/php'
alias php74='/c/laragon/bin/php/php-7.4.30-Win32-vc15-x64/php'
alias php80='/c/laragon/bin/php/php-8.0.14-Win32-vs16-x64/php'
alias php81='/c/laragon/bin/php/php-8.1.14-Win32-vs16-x64/php'
alias php82='/c/laragon/bin/php/php-8.2.1-Win32-vs16-x64/php'
alias composer71='php71 /c/Users/Lucas/AppData/Local/ComposerSetup/bin/composer.phar'
alias composer72='php72 /c/Users/Lucas/AppData/Local/ComposerSetup/bin/composer.phar'
alias composer73='php73 /c/Users/Lucas/AppData/Local/ComposerSetup/bin/composer.phar'
alias composer74='php74 /c/Users/Lucas/AppData/Local/ComposerSetup/bin/composer.phar'
alias composer80='php80 /c/Users/Lucas/AppData/Local/ComposerSetup/bin/composer.phar'
alias composer81='php81 /c/Users/Lucas/AppData/Local/ComposerSetup/bin/composer.phar'
alias composer82='php82 /c/Users/Lucas/AppData/Local/ComposerSetup/bin/composer.phar'

設定 Homestead 指令別名

開啟 Git Bash 設定別名的檔案：

Terminal window

vim /c/'Program Files'/Git/etc/profile.d/aliases.sh

增加以下指令內容：

Terminal window

# 開啟虛擬機
function vup() (
  cd ~/Homestead
  if [[ $1 == '-p' ]]; then
    vagrant up --provision
  else
    vagrant up
  fi
)

# 更新設定值
function vp() (
  cd ~/Homestead
  vagrant provision
)

# 登入 SSH
function vs() (
  cd ~/Homestead
  if [[ ! -z $1 ]]; then
    vagrant ssh -c "$1"
  else
    vagrant ssh
  fi
)

# 關機虛擬機
function vh() (
  cd ~/Homestead
  vagrant halt
)

# 重新開啟虛擬機
function vrs() (
  cd ~/Homestead
  vagrant halt
  if [[ $1 == '-p' ]]; then
    vagrant up --provision
  else
    vagrant up
  fi
)

# 查看虛擬機狀態
function vst() (
  cd ~/Homestead
  vagrant status
)

設定完成後，可使用以下指令操作 Vagrant：

vup：開機
vp：更新設定值
vs：登入 SSH
vh：關機
vrs：重新開機
vst：查看虛擬機狀態

Homestead 安裝 phpMyAdmin

Sun, 12 May 2019 00:00:00 GMT

1. 下載 phpMyAdmin：

到 phpMyAdmin官網下載程式碼，解壓縮後重新命名為 phpmyadmin，並移至 ~/code/ 裡。

2. 修改 Homestead.yaml

Homestead.yaml

sites:
  ...
  - map: phpmyadmin.test
    to: /home/vagrant/code/phpmyadmin

3. 修改 Hosts 設定

開啟 C:\Windows\System32\drivers\etc\hosts，增加以下設定：

hosts

192.168.10.10     phpmyadmin.test

4. 重新啟動虛擬機

Terminal window

vagrant halt
vagrant up --provision
vagrant ssh

即可使用 phpmyadmin.test 瀏覽 MySQL 資料庫內容了。

◎提示訊息解決方法

訊息：「設定檔案需要設定一組加密密碼 (blowfish_secret)。」

執行：

Terminal window

cd ~/code/phpmyadmin
cp config.sample.inc.php config.inc.php
vim config.inc.php

Tip

Vim 輸入 i 開始編輯模式，Esc 關閉編輯模式，:wq 儲存並退出。(Vim 教學)

將檔案內的：

~/code/phpmyadmin/config.inc.php

$cfg['blowfish_secret'] = '';

設定為：(隨機32個以上的亂七八糟英文數字，例：sSG5sg4sd54…)

~/code/phpmyadmin/config.inc.php

$cfg['blowfish_secret'] = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

可使用 Laravel Tinker 生成亂數字串：

Terminal window

php artisan tinker


>>> \Str::random(32);

訊息：「新的 phpMyAdmin 已經發佈，請考慮升級至最新的版本（版本 xxx，於 20xx-xx-xx 發佈）。」

執行：

Terminal window

cd
vim config.inc.php

以及關閉 phpMyAdmin 的版本檢查：

~/code/phpmyadmin/config.inc.php

$cfg['VersionCheck'] = false;

訊息：「設定檔權限錯誤，檔案不應讓所有人可以寫入！」

如果 phpMyAdmin 安裝在虛擬機裡，將權限修改成 755 就可以正常執行了：

Terminal window

cd ~/code
chmod -R 755 phpmyadmin

但如果是安裝在 Windows 電腦裡，再映射到虛擬機中的話就改不了 (權限強制 777)，因此只能關掉 phpMyAdmin 的權限檢查了：

~/code/phpmyadmin/config.inc.php

$cfg['CheckConfigurationPermissions'] = false;

增加 phpMyAdmin 登入逾時時間

執行指令修改 php.ini 檔：

Terminal window

sudo sed -i 's/session.gc_maxlifetime = 1440/session.gc_maxlifetime = 86400/' /etc/php/7.4/fpm/php.ini
sudo service php7.4-fpm restart

然後修改 LoginCookieValidity 參數：

~/code/phpmyadmin/config.inc.php

$cfg['LoginCookieValidity'] = 86400;

Homestead 安裝過程記錄 (Windows)

Sat, 11 May 2019 00:00:00 GMT

安裝

本地軟體安裝

PHP
Composer
Node.js
Yarn(可選)：npm install -g yarn

1. 安裝 Git

下載 Git

設定 Git

初次使用 Git 需設定使用者名稱和 E-mail：

Terminal window

git config --global user.name "John Doe"
git config --global user.email "johndoe@example.com"

若出現亂碼 ESC[33 和 ESC[m 可執行此指令：

Terminal window

git config --global core.pager "less -r"

2. 終端機 - Git Bash

終端機建議使用 Git Bash (安裝 Git 即會自動安裝Git Bash)。在 Git Bash 中無法使用 Ctrl C/V 複製貼上，需要用 Ctrl Insert 複製、Shift Insert 貼上。但如果使用 Windows Terminal 的話就可以直接使用 Ctrl C/V 複製貼上。

6. 下載 Homestead

Terminal window

git clone https://github.com/laravel/homestead.git ~/Homestead
cd ~/Homestead
init.bat

7. 配置 Homestead

(詳細、必讀) 配置 Homestead 教學

(可選) 自動複製.gitconfig到虛擬機 (配置 Vagrantfile)

(可選) 移動Vagrant Box及VirtualBox VMs到其他磁碟 (固態硬碟適用)

8. BIOS 設定

Info

重新開機，進入 BIOS，將「Intel Virtualization Technology」(Intel 虛擬化技術) 選項開啟。

9. 啟動虛擬機

執行(Windows須使用Git-bash)：

開機並更新設定：

Terminal window

vagrant up --provision

SSH連線、操作：

Terminal window

vagrant ssh

關機(虛擬機使用完畢須關機，否則下次使用會出問題)：

Terminal window

vagrant halt

10. 安裝 phpMyAdmin

安裝phpMyAdmin

11. (Ubuntu) 修改Ubuntu預設編輯器

登入虛擬機，執行：

Terminal window

sudo update-alternatives --config editor

出現以下畫面：

輸入 3，將會切換成Vim編輯器。

12. 配置共享資料夾

預設的資料夾為 C:\Users\[使用者]\code，若 code 資料夾不存在須創建。

Terminal window

mkdir ~/code && cd ~/code

13. 新增 Laravel 專案

使用 Composer 下載 Laravel 安裝包：

Terminal window

composer global require "laravel/installer"

建立新 Laravel 專案 (blog 為專案名稱)：

Terminal window

laravel new blog

修改 Homestead.yaml：

Homestead.yaml

folders:
  ...
  - map: ~/code/blog
    to: /home/vagrant/code/blog

sites:
  ...
  - map: blog.test
    to: /home/vagrant/code/blog/public

重新啟動虛擬機：

Terminal window

vagrant halt
vagrant up --provision
vagrant ssh

14. 修改 Hosts 設定

開啟 C:\Windows\System32\drivers\etc\hosts，增加以下設定：

Terminal window

192.168.10.10     blog.test

15. 整合 Vite

開啟 Vite Server 的 port：

Tip

如果有使用 VSCode Remote SSH 套件的話就不用加這段，因為 Remote SSH 套件會在啟動 dev server 時自動轉發 port。

Homestead.yaml

ports:
    - send: 5173 # for vite server
      to: 5173

然後在 vite.config.js 加上以下設定：

vite.config.js

import path from 'node:path'

export default defineConfig({
  server: {
    host: true,
    hmr: {
      host: 'localhost',
    },
    watch: {
      ignored: [
        path.join(__dirname, 'app/**'),
        path.join(__dirname, 'bootstrap/**'),
        path.join(__dirname, 'config/**'),
        path.join(__dirname, 'database/**'),
        path.join(__dirname, 'lang/**'),
        path.join(__dirname, 'public/**'),
        path.join(__dirname, 'routes/**'),
        path.join(__dirname, 'storage/**'),
        path.join(__dirname, 'tests/**'),
        path.join(__dirname, 'vendor/**'),
      ],
      usePolling: true,
    },
  },
})

Warning

usePolling: true 的設定會讓 CPU 使用率提高，如果要避免此問題，可以使用 VSCode 的 Remote SSH 套件來遠端開發，只要在非 Windows 的環境編輯就不需要加上 usePolling: true 了。

建立 Vite 開發伺服器的 HTTPS 證書：

Terminal window

sudo /vagrant/scripts/create-certificate.sh localhost
sudo chmod -R 644 /etc/ssl/certs/localhost.key

設定本地開發用證書路徑：

.env

VITE_DEV_SERVER_KEY=/etc/ssl/certs/localhost.key
VITE_DEV_SERVER_CERT=/etc/ssl/certs/localhost.crt

然後就可以在 Vite 中讀取 HTTPS 證書了：

vite.config.js

import fs from 'node:fs'
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())

  return {
    server: {
      host: true,
      hmr: {
        host: 'localhost',
      },
      https: env.VITE_DEV_SERVER_KEY && env.VITE_DEV_SERVER_CERT
        ? {
            key: fs.readFileSync(env.VITE_DEV_SERVER_KEY),
            cert: fs.readFileSync(env.VITE_DEV_SERVER_CERT),
          }
        : undefined,
      ...
    },
  }
})

16. ngrok 內網穿透

把 example.com 替換成需要使用的網址，如果有用 HTTPS 可以使用 443：

Terminal window

ngrok http example.com:80 --host-header=rewrite
# 若使用 HTTPS
ngrok http example.com:443 --host-header=rewrite

其他

錯誤訊息：「`Timed out while waiting for the machine to boot`」

需要關閉「容器」、「Windows 沙箱」、「虛擬機器平台」、「Windows 子系統 Linux 版」、「Hyper-V」功能，以「系統管理員」身分開啟 PowerShell 執行：

Terminal window

Disable-WindowsOptionalFeature -Online -FeatureName Containers,Containers-DisposableClientVM,VirtualMachinePlatform,Microsoft-Windows-Subsystem-Linux,Microsoft-Hyper-V-All

若需要使用 Docker 或 WSL 的話，可以重新開啟：

Terminal window

Enable-WindowsOptionalFeature -Online -FeatureName Containers,Containers-DisposableClientVM,VirtualMachinePlatform,Microsoft-Windows-Subsystem-Linux,Microsoft-Hyper-V-All

檢查功能是否開啟：

Terminal window

Get-WindowsOptionalFeature -Online -FeatureName Containers
Get-WindowsOptionalFeature -Online -FeatureName Containers-DisposableClientVM
Get-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform
Get-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
Get-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V-All

Homestead 安裝問題

Homestead 安装问题汇总

在本機安裝 Homestead 的安全憑證

解決 HTTPS 顯示為不安全的問題。

登入虛擬機，輸入以下指令取得憑證 (your-dir 替換成任一已存在的資料夾)：

Terminal window

sudo cp /etc/nginx/ssl/ca.homestead.homestead.crt ~/code/your-dir
# Ubuntu 20.04 的版本要執行下方的指令
sudo cp /etc/ssl/certs/ca.homestead.homestead.crt ~/code/your-dir

開啟檔案總管，雙擊開啟憑證，點擊 安裝憑證，憑證存放區選擇為 受信任的根憑證授權單位，之後點擊完成即可。

Info

舊的文章可以參考：使用 HTTPS 連線 Homestead 網站 (Windows)

(Windows CMD) 設定在虛擬機中用 Composer 安裝套件時，新增 .bat 檔

Config (bin-compat) - Composer

於 Homestead 執行：

Terminal window

composer config -g bin-compat full

增加路徑至 PATH

執行：

Terminal window

sudo vim ~/.profile

輸入：

Terminal window

PATH="/home/vagrant/.yarn/bin:$PATH"

執行 php artisan storage:link 時出錯 (無法新增 symlinks)

解決方法：重新開機並以 系統管理員 執行 Git bash，啟動虛擬機。完成後再執行一次 php artisan storage:link。

執行 vagrant up 時總是出錯，最終解決方法，重新下載相關檔案

刪除以下資料夾：

C:\Users\[使用者]\.vagrant.d
C:\Users\[使用者]\VirtualBox VMs
C:\Users\[使用者]\Homestead\.vagrant

再重新執行 vagrant up

執行 vagrant ssh 並啟動任意持續執行的程式，按 Ctrl+C 會出問題

導出 vagrant ssh 的設定檔：

Terminal window

sed -i '1i Include config.d/*' ~/.ssh/config
mkdir ~/.ssh/config.d
vagrant ssh-config --host vm > ~/.ssh/config.d/vm

之後可以在啟動 vagrant 虛擬機後使用 ssh 來連接：

Terminal window

ssh vm

Vite HMR 沒反應或很慢

因為在 Linux 環境下 file descriptor 和 inotify 遇到上限時會直接沒反應，因此當遇到此問題時可以檢查看看當前的 inotify 上限數量：

Terminal window

sysctl fs.inotify

臨時增加上限：

Terminal window

sudo sysctl fs.inotify.max_queued_events=16384
sudo sysctl fs.inotify.max_user_instances=8192
sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl -p

永久增加上限，執行完記得重啟：

Terminal window

echo fs.inotify.max_queued_events=16384 | sudo tee -a /etc/sysctl.conf
echo fs.inotify.max_user_instances=8192 | sudo tee -a /etc/sysctl.conf
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

當然也有可能是 RAM 太小，同時調高虛擬機的 RAM 可以來解決。

使用 HTTPS 連線 Homestead 網站 (Windows)

Thu, 07 Feb 2019 00:00:00 GMT

在本地使用 Homestead 開發 Laravel 專案非常方便，一開始使用 HTTP 連線時：

但如果改用 HTTPS 連線時，就會…

其實只要在本機中安裝 Homestead CA 根憑證，「不安全」的標示就會消失了。

在 Windows 安裝 Homestead CA 根憑證

先透過 SSH 連接至虛擬機，然後執行下列指令，複製 CA 根憑證檔：

Terminal window

sudo cp /etc/nginx/ssl/ca.homestead.homestead.crt ~/code/homestead

然後開始安裝 Homestead CA 根憑證：

最後 重新開啟瀏覽器 後，就可以看到 HTTPS 連線成功，也不會有「不安全」的標示了：

Laravel 登入失敗次數限制等待時間遞增

Sat, 20 Oct 2018 00:00:00 GMT

Warning

這篇文章的內容已經過時了，請使用 Laravel Backoff Limiter 來代替。

Laravel 本身已實現了登入失敗次數限制的功能。在使用 Laravel 的登入驗證時，登入失敗次數限制預設是：

失敗5次，1分鐘後 才可再次登入
之後都是每隔 1分鐘 就可以再試5次

但這樣的設定太單純且不安全，如果要增加安全性，要實現的功能是：

　失敗3次，1分鐘後 才可登入
再失敗3次，3分鐘後 才可登入
再失敗3次，5分鐘後 才可登入
…

本文將示範此進階版登入失敗次數限制的功能。

版本

Laravel 5.8 以上

改寫登入類別設定

app/Http/Controllers/Auth/LoginController.php

<?php

...
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;
use App\Cache\AdvancedRateLimiter;

class LoginController extends Controller
{
    use AuthenticatesUsers;

    ...

    /**
     * The maximum number of attempts to allow.
     *
     * @var int
     */
    protected $maxAttempts = 3;

    /**
     * The number of minutes to throttle for.
     *
     * @var int|float|int[]|float[]
     */
    protected $decayMinutes = [1, 3, 5];

    /**
     * Get the rate limiter instance.
     *
     * @return \App\Cache\AdvancedRateLimiter
     */
    protected function limiter()
    {
        return app(AdvancedRateLimiter::class);
    }

    /**
     * Increment the login attempts for the user.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return void
     */
    protected function incrementLoginAttempts(Request $request)
    {
        $this->limiter()->hit(
            $this->throttleKey($request), array_map(function ($decayMinute) {
                return (int) ($decayMinute * 60);
            }, (array) $this->decayMinutes())
        );
    }
}

在 LoginController 類中，增加自訂方法覆蓋 AuthenticatesUsers 類原本的方法：

limiter 方法是返回登入失敗次數限制的類，原本是返回 RateLimiter 類(實現登入失敗次數限制的類)，但本例要擴充新方法，因此返回了我們下面創建的子類別 AdvancedRateLimiter。
$maxAttempts 屬性是設定登入失敗次數。
$decayMinutes 屬性是登入失敗達上限後，須等待的分鐘數。但我們要實現的功能是每次都等待不一樣的時間，因此傳入一個陣列，輸入每次的等待分鐘數。

如果只是要修改 Laravel 原本的錯誤次數設定，新增 $maxAttempts 屬性及 $decayMinutes 屬性並設定值即可完成。

擴充登入失敗次數限制功能

新增類別 AdvancedRateLimiter：

app/Cache/AdvancedRateLimiter.php

<?php

namespace App\Cache;

use Illuminate\Cache\RateLimiter;

class AdvancedRateLimiter extends RateLimiter
{
    /**
     * Increment the counter for a given key for a given decay time.
     *
     * @param  string  $key
     * @param  int|int[]  $decaySeconds
     * @return int
     */
    public function hit($key, $decaySeconds = 60)
    {
        if (is_array($decaySeconds)) {
            if (! $this->cache->has($key.':timer')) {
                if (! $this->cache->has($key.':step')) {
                    $this->cache->add($key.':step', 0, 86400);
                } else {
                    $this->cache->increment($key.':step');
                }
            }

            $step = $this->cache->get($key.':step', 0);
            $step = $step < count($decaySeconds) ? $step : count($decaySeconds) - 1;
            $decaySeconds = $decaySeconds[$step];
        }

        return parent::hit($key, $decaySeconds);
    }

    /**
     * Clear the hits and lockout timer for the given key.
     *
     * @param  string  $key
     * @return void
     */
    public function clear($key)
    {
        $this->cache->forget($key.':step');

        parent::clear($key);
    }
}

hit 方法是在登入錯誤後，執行登入錯誤次數記錄遞增的方法。為了實現每次登入錯誤等待的時間可以不一樣，我們讓傳入的變數 $decayMinutes 可以接受傳入陣列，第一次登入錯誤等待時間為 陣列[0] 的分鐘數(本例為1分鐘)，第二次為 陣列[1] 的分鐘數(例：3分鐘)，而第三次為 陣列[2] 的分鐘數(例：5分鐘)，之後的登入錯誤等待時間皆為陣列的最後的元素的分鐘數。
clear 方法是成功登入後，將時間、次數重設，下一次再登入錯誤後，將從頭開始計數。

此時登入失敗次數限制的功能已改寫完成，再次登入並輸入錯誤的帳號或密碼，重複數次即可看到結果。

星星的筆記．Lucas

Windows 中優雅的開機自動執行 JS 腳本

實作自動開機腳本

試用 ui.sh：Tailwind 的 AI 設計工具

ui.sh 是什麼?

設計方案選擇器

產品狀態和收費方式

如何選擇前端設計的 Skill?

2025 年終回顧

渾渾噩噩的度過

今年部落格做了什麼改變?

被迫學習 AI，但是為了偷懶XD

優化 Terminal 體驗

寫了人生第一個 ESLint 套件

修了一個 Laravel 上游套件的 bug

開源 Laravel ezPay 電子發票套件

2025 最喜歡的動漫

新一年的目標

Inertia v2.2 的 Infinite Scroll (無限滾動) 新功能

Infinite Scroll (無限滾動)

Demo

參考資料

部署 Astro 專案到低配置的 Ubuntu 伺服器

Nginx 反向代理設定

手動部署專案

解除限制！自動化部署

Astro 排除部分路徑不檢查 CSRF Origin

修改 Astro 的 originCheck Middleware

在 Astro 中用 nanostores 共享全局變數

安裝 nanostores

實作成功訊息功能

參考資料

在 Laravel Forge 配置的服務器上用 Docker 部署 Vite 專案

Docker 設定

Nginx 反向代理設定

參考資料

Astro 使用 Zod 驗證網址 Query String 格式

安裝套件

解析 Query String 參數

參考資料

Astro + @astrolicious/i18n 實作 i18n 多語系功能

安裝 @astrolicious/i18n

設定多語系檔案

使用翻譯

新增語言選單

完整程式碼

WebConf 2024 心得

如何撰寫具彈性的測試程式

設計很豐滿，開發很骨感 — 淺談設計交付

淺談 LLM-based AI Agents 應用開發

《天下》如何思考數位敘事？從流程到技術大公開

網站專案時程的挑戰跟威脅

Zeabur：雲端部署平台 PaaS 核心技術大揭秘

實戰！以 Web 3D 技術開發商品客製編輯器

ESLint One for All Made Easy

從零到頂尖：無懈可擊的網頁設計

從生活啟程的網站設計體驗

當 Vue 與 View 分手之後⋯

結語

Inertia v2.0 新功能介紹

Async Requests (異步載入)

Polling (輪巡)

Prefetching (預先載入)

Deferred Props (延遲載入資料)

Lazy Loading (惰性載入)

Infinite Scroll (無限滾動)

升級到 v2

Demo

結語

參考資料

孤獨搖滾劇場版後篇心得

Astro + Paraglide 實作 i18n 多語系功能

安裝 Paraglide

安裝 Sherlock VSCode 套件

多語系資料夾結構

翻譯文字

語系設定虛擬模組

HTML Lang Code

多語系輔助函數

語系選單

修改 Astro 的 `originCheck` Middleware