雖然有點久了，但還是來玩一下Github Pages

前言

在小珍珠生日這天，志清哥找我討論一個案子，說教師部需要，大神都開口了當然是不能收錢拉，但我首先跟他提出一個最根本的問題，伺服器呢！！沒有伺服器我能怎麼辦呢？我還真的能怎麼辦，後來思考既然需求並不包含資料庫跟後端，那來玩一下出了很久一直沒機會碰的Github pages吧

使用Github pages很容易，開啟一個新repository，然後到setting > pages頁面 > 找到Branch這個欄位，然後選擇分支，在選擇資料夾即可（資料夾只支援/跟/docs兩個）

如果是一般前端專案，根目錄要放專案，所以可以把build出來的檔案放到docs，這邊我以vue及vite為範例

export default defineConfig({

 // 因為最後專案網址是https://{github_account}.github.io/{repository}, 不是在根目錄，所以base也要調整

base: "/{repository_name}",

build: {

target: "es6",

outDir: "docs", // <- 改這裡

},

plugins: [vue()],

resolve: {

alias: {

"@": fileURLToPath(new URL("./src", import.meta.url)),

},

},

})

這樣就每次更新，然後build完一起把檔案commit就好，一切就大功告成了。

But，把build完的檔案一起commit這看起來是件很愚蠢的事，所以我開始想看有沒有機會使用action解決，在奶綠茶大大多年前的文章中找到解法，有人已經把套件做了，我只要使用就好，但因為年代久遠，現在已經是疫情後的2024年，有些畫面已經不一樣了還是要摸索一下，要使用的是peaceiris/actions-gh-pages@v3這套

step1.
簡單說明一下首先你要到帳戶的settings(右上角頭貼) > Developer Setting > Person Access Token > Tokens(classic) > 產生一組token供action使用（產生完記得複製起來，不然頁面關掉就看不到了）

step2.
接著到repository的Settings > Secrets and variables > actions > secrets > 新增一個secrets(開頭不能是GITHUB_，其他可以隨便取，我這邊取ACTIONS_TOKEN)

step3.
最後在專案中新增/.github/workflows/main.yml，這裡也有許多參考範例

name: GitHub Pages

on:

push:

branches:

- main

jobs:

deploy:

runs-on: ubuntu-22.04

permissions:

contents: write

steps:

- uses: actions/checkout@v3

- name: Setup Node

uses: actions/setup-node@v3

with:

node-version: "20"

- name: build

run: |

yarn

yarn build

- name: Deploy

uses: peaceiris/actions-gh-pages@v3

if: github.ref == 'refs/heads/main'

with:

github_token: ${{ secrets.ACTIONS_TOKEN }}

publish_dir: ./docs

step4.
接著把所有改動都commit & push進去

你就會發現github actions開始動拉，deploy完就會發現一個新的分支gh-pages，裡面就會是編譯完的檔案，並且github actions也都幫你設定好了，等於上面那些步驟也不用自己來，可以說非常懶人及完美啊！

後記

我再到其他專案開啟pages頁面結果顯示這樣，點進去發現要付費，原來免費只讓你啟用一個，果然天下沒白吃的午餐啊～

幫女兒切完蛋糕接到大哥驗收完成電話，大哥的笑聲像中了樂透彩，應該是有免費的伺服器跟碼農內心竊喜吧～

如何再遮罩上挖個洞

前言

相信大家都有用過Modal，都有遇過背後那半透明的遮照，但如果要做到以下效果，在下方按鈕上挖一個洞，我的第一直覺應該會用圖片去做處理

實際上這是我接手同事專案後他做出來的效果，我仔細研究了一下他的程式碼，發現想法還挺有趣的直得學習一下。

因為這部分程式碼不好呈現，所以今天就用截圖代替吧，絕對不是因為我比較懶

簡單解釋，mask-info一樣左上對齊，設成fixed。

這裡使用

const { x, y, height, width } = element.getBoundingClientRect()

去取得按鈕（目標元素）的座標及大小，放到類元素:before去瞄準絕對位置跟尺寸，最後使用box-shadow讓陰影往外延伸並且設上透明度（照片中往外延伸3000px，以手機版來說也很夠用了）。

打完收工。

後記

跟以往我總是從座標0,0開始思考有點不一樣，沒想到類元素還可以這樣使用。只能說世界還是很大啊～（煙

<div class="mask-info" :style="clipPath">

...

</div>

const clipPath = computed(() => {

const { x, y, height, width } = props.data // element.getBoundingClientRect() 進來的值

return {

"--top": `${y}px`,

"--left": `${x}px`,

"--width": `${width}px`,

"--height": `${height}px`,

}

})

.mask-info {

@apply fixed left-0 right-0 top-0 bottom-0 z-[100];

&:before {

@apply absolute block rounded;

content: "";

left: var(--left);

top: var(--top);

width: var(--width);

height: var(--height);

box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.8);

}

}

另外紀錄一個點，同事使用var(--left)去取得主元素的style left值，這點也挺特別的，沒有使用vue3原生的v-bind去取
如果沒意外應該會寫成這樣
left: v-bind("clipPath['--left']")