勝勝

解決 Macbook Pro 連接 4K 螢幕導致卡頓

TL;DR 換成 HDMI 2.0 就好了勝勝近期買了 Dell 的 U2720Q，用隨附的 Type-C to Type-C 連接，除了能連接螢幕外，還可以充電。不過很常用到一半電腦 CPU 佔用率就開始往上衝，電腦就開始卡了，也不知道在卡啥的，但拔掉跟螢幕連接線後就變順了。這個問題困擾了我一個多月，勝勝越想越不對勁，幹我明明就用 Macbook Pro 不可能接個 4K 螢幕就開始卡啊，蘋果官網還有賣 5K 螢幕欸。直到今天跑去買了 HDMI 2.0 的線線透過 Type-C 轉接器連上螢幕後，結果就沒再當過了，雖然不知道為什麼。...

利用 GitHub Action 自動部署 Hugo 部落格

在 GitHub 建立 Repo 註冊並登入 GitHub 後，點右上角的 New Repository，並填寫 Repo 名稱等資訊便可建立 Repo。上傳部落格原始碼對於剛使用 GitHub 的新手，最簡單的方式是將部落格原始碼直接拖拉到你的儲存庫頁面便可完成上傳。你也可以使用 Git 客戶端來上傳，這會讓未來新增文章時更加方便。建立 Workflow 新增 .github/workflows/build.yaml 檔案並填入下方的資料即可建立 Workflow 了，每次當你推送 commit 時，GitHub 會幫你自動部署到 Github Pages 上頭。 name: Github-Pages on: push: branches: - main #你的 branch 名稱 jobs: deploy: runs-on: ubuntu-18.04 steps: - uses: actions/[email protected] with: submodules: true - name: Setup Hugo uses: peaceiris/[email protected] with: hugo-version: '0.81.0' # hugo 版本，建議填寫與你電腦相符的版本 extended: true - name: Build run: hugo --gc --minify --cleanDestinationDir - name: Deploy uses: peaceiris/[email protected] with: github_token: ${{ secrets....

將部落格遷移到 Hugo

前言其實我之前就打算把部落格從 WordPress 搬走了，只是之前都懶得弄。 Hugo 除了很快之外，也能直接用 Markdown 來寫文章，除此之外不需要資料庫用起來真的很香。為什麼是 Hugo 先前嘗試過 Hexo，但是上面的主題感覺好少而且很多都不是很漂亮，相較之下，Hugo 除了有很多漂亮的主題，執行速度也比 Hexo 快很多，因此就選擇了 Hugo 作為我的部落格。初始化 Hugo 安裝如果你有安裝 Homebrew 的話，在 macOS 上只要 brew install hugo 就裝好了！如果你用其他系統請查看官方安裝文件看看你有沒有裝好在終端機輸入 hugo version，沒意外的話應該可以看到 Hugo 版本號 $ hugo version hugo v0.81.0+extended darwin/amd64 BuildDate=unknown 建立部落格使用底下指令在目前資料夾建立以 <blog-name> 為名的部落格 hugo new site <blog-name> 耶，此時你的部落格就建立好了，讓我介紹一下這些可愛的資料夾結構ㄅ設定 Hugo 安裝主題建立好部落格後，可以到 https://themes.gohugo.io/ 找找喜歡的主題，並按照主題開發者的安裝指南來設定部落格。文章遷移如果你剛好也用 WordPress ，可以看看將 WordPress 文章匯入到 Hugo 來了解如何將 WordPress 文章轉換為 Hugo 可用之格式。...

將 WordPress 文章匯入到 Hugo

Hugo 官方有推薦幾個套件來協助文章的遷移，我先是先用了 wordpress-to-hugo-exporter，不過安裝後似乎無法成功開啟。之後我用了 blog2md 便能順利匯入文章了。事前準備將文章從 WordPress 匯出下載 blog2md 安裝 Node.js 開始轉換 cd ./blog2md-master/ 安裝 node 套件（註：需要 node.js） npm i 轉換檔案 node index.js w your-wordpress-backup-export.xml out 之後將 out 資料夾中的內容複製到 /content/posts 就完工了！...

如何使用 Javascript 將多部影片混合為一個影片

最近在製作 How 發聲器因為影片每個發音播放時都會有間隙，超討厭，但 How哥產生器聽說是用 ffmpeg 來做輸出，要後端而且看起來很燒錢，所以在尋找純前端的做法。我先說，這真的有夠搞剛，超級無敵麻煩，另外，如果你用 Node.js 用 fluent-ffmpeg 就好了。在尋找的時候看到這個 How do i append two video files data to a source buffer using media source api? ，而且下面的解法還會動，甚至支援不同尺寸影片混合，所以我把它偷過來就好了嗎。錯誤！他根本不會動，只知道不停地噴錯，明明我放的跟他一樣都是 MP4，我完全不知道他 Demo 怎麼會動解法在網路上尋找不同解法後，看了這篇文章「Transcoding assets for Media Source Extensions」，發現是 MP4 少了幾個 Flag 以及 codec 要自己拿 MP4Box 看了之後填進程式碼，拿 ffmpeg 處理過後就會動了。結果處理時加這行就好了 -movflags frag_keyframe+empty_moov+default_base_moof ，害我花了快半天，真棒 Demo 你可以使用 Chrome 查看 How 發聲器雖然有點音聲不同步，算了隨便啦...

在 PWA 應用程式中使用遮罩圖示（maskable icon）

Chrome 最近釋出 79 版，終於支援了遮罩圖示（看看 Android 8 都出多久了），這篇教學會教你如何使用遮罩圖示。準備清單已更新 Chrome 79 的 Android 手機要修改的 PWA 應用程式圖示製作要製作圖示必須保留相對應的安全區域，免得要顯示的內容被裁掉。你可以在 Maskable.app 預覽套用後的效果修改 manifest.json 將 icons 中的圖示標示 "purpose": "maskable" 便可以使用遮罩了 { "scope": "/", "name": "PokaPlayer", "short_name": "PokaPlayer", "icons": [{ "src": "./img/icons/icon.png", "sizes": "512x512", "type": "image/png" }, { "src": "./img/icons/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ], "start_url": "/", "display": "standalone", "background_color": "#2f2b3e", "theme_color": "#ffffff" } 在手機上查看套用效果套用成功了參考資料...

透過 JS 即時偵測系統外觀是否處於深色模式

在撰寫網頁時若要用 JS 來檢測系統的主題，你會需要用到 CSS 的 prefers-color-scheme: dark 來檢測是否適用於該條規則，我們可以在 js 使用 matchMedia 來查看檢測後的結果。程式碼如下 const darkModeMediaQuery = window.matchMedia(`(prefers-color-scheme: dark)`); darkModeMediaQuery.addListener(e => { //當系統變更主題時都會執行這裡 const darkMode = e.matches; // darkMode: [true(深色主題開啟)|false(深色主題關閉)] }); ...