RojerChen's 的學習筆記

Github Copilot CLI 無法更新

2026-04-20T14:46:00.002+08:00

今天在公司的筆電發現到 Copilot CLI 還是 v.1.0.11 的版本，想說要來嘗試更新一下，但是怎樣都沒辦法更新，不論我怎樣下命令、重開都還是維持 v1.0.11。

如果一切正常，其實應該下這個指令就可以更新了

copilot update

或者是透過下面這樣的方式

# 先解除安裝舊版
npm uninstall -g @github/copilot

# 清理 npm 快取（選用，避免抓到舊檔）
npm cache clean --force

# 重新安裝最新版
npm install -g @github/copilot@latest

只不過我上述兩種方式都無法更新，即便是重開機重做一次也是沒有辦法。

最後發現到，只需要把 .copilot 底下的這個資料夾刪除即可

 pkgs

這個資料夾裡面有擺放了過去歷次的更新版本，不知道是那些快取資料卡住所導致沒有辦法正常更新，只需要把它移除之後，再更新就成功了。

JetBrains AI 體驗心得 (2026.02.02 update)

2026-02-02T14:04:00.000+08:00

2026.02.02

今天在更新 JetBrains 產品到 2025.3.2 後，發現到已經有支援 ACP 了。這表示如果你有訂閱Github Copilot 或是 Gemini ，那你就可以使用它們來進行工作

目前測試下使用 Github Coilot ，目前只支援 Ask 與 Agent Mode，在費用的部分體趕上是吃了一次的 Premiun Request，目前還沒辦法選擇模型，目前使用上可能還不如直接安裝 Github Copilot 的 Plugin。

2025.10.02

每次使用 JetBrains IDE，就會時不時去看一下目前有沒有更新，從今年五月到現在，終於有所更新。如果你有訂閱 JetBrains 全家餐（All Products Pack），每個月有一定的額度可以使用，等於不用額外付費就能試用 AI 功能，想想也沒有理由不試試看了。

JetBrains AI 提供多種訂閱方案，現在已經有明確定義每個方案的額度

AI Free : 3 Credits
AI Pro : 10 Credits
AI Ultimate : 35 Credits
AI Enterprise : max

IDE 已經可以顯示 Credit 用量，每次執行會依據上、下文來消耗 Credit，所以請養成習慣，每當完成一個任務就開新的 Chat。

今年五月使用時候，根本沒有留意到有額度上限，同一個 Chat 拼命聊，額度很快就滿了。現在有明確的 Credits 顯示，就可以很克制的使用，當使用額度快滿的時候，也會提醒你。

當使用額度滿了，就完全不能使用了。

UI 操作體驗上應該每一家都差不多，而這次最重要的更新，或許就是 Claude Agent in JetBrains IDEs，目前 Beta 的版本沒辦法手動選擇模型，使用上會有 Brave (YOLO)、Plan Mode，初次執行的時候會安裝 Claude Agent，之後就可以執行了。

我嘗試做一個 Chrome Extension，過程中會列出 TODO 然後依序執行，執行時間約 10 分鐘左右，一次做對，耗費大概 0.8 Credits，剩餘 UI 畫面的調整我就手動接手修改就好。

同樣的需求，使用 Junie by JetBrains 效果就沒那麼好，雖然大致上還是做出了一樣的東西，但是後續還需要加工處理，調整一些邏輯。

在現在這個時間點，各家 AI 廠商都在軍備競賽，提供不少優惠福利，如果現在只能訂閱一家 AI 服務，那 JetBrains AI 在這個時間點不會列入考量，不是效果不好，是其他家的優惠和功能都實在是讓人難以拒絕。

不過 AI 的發展很快，可能幾個月後又改變了也說不定。

※延伸閱讀

ReSharper for Visual Studio Code 初體驗：功能有限，尚待觀望

jQuery 4.0 改版：捨棄冗餘、擁抱原生 JS 與 ES6 標準

2026-01-23T15:46:00.000+08:00

沒有想過隔了這麼多年，jQuery 居然更新了。jQuery 4.0 的發布（這可是睽違近十年的大改版！）標誌著一個時代的轉移。這次更新的核心目標很明確：瘦身與現代化。它拔掉了許多為了相容老舊瀏覽器而存在的冗餘程式碼，並擁抱了現代 JavaScript (ES6+) 的標準。

1. Browser Support

最新版本僅支援 IE 11，過舊的版本就不再支援了。

Feature	jQuery 3.6	jQuery 4.0	Impact
Internet Explorer	Supports IE 9+	DSupports IE 11	Code becomes lighter; transpilation might be needed for very old legacy support.
Edge	Supports Edge Legacy	Drops Edge Legacy	Focus on modern Chromium-Edge.
iOS / MacOS	Older versions supported	Drops iOS < 11, macOS < 10.13	Aligns with vendor support cycles.

2. Removed utility methods

jQuery 捨棄既有函數，改採用原生 JavaScript。

Removed Method	Native Replacement (Use this in 4.0)	Example Migration
`jQuery.trim()`	`String.prototype.trim()`	`$.trim(str)` → `str.trim()`
`jQuery.isArray()`	`Array.isArray()`	`$.isArray(arr)` → `Array.isArray(arr)`
`jQuery.isFunction()`	`typeof === 'function'`	`$.isFunction(fn)` → `typeof fn === 'function'`
`jQuery.isNumeric()`	`typeof` check + `isNaN`	`$.isNumeric(n)` → `typeof n === 'number' && !isNaN(n)`
`jQuery.parseJSON()`	`JSON.parse()`	`$.parseJSON(str)` → `JSON.parse(str)`
`jQuery.now()`	`Date.now()`	`$.now()` → `Date.now()`
`jQuery.type()`	`typeof` / Generics	`$.type(obj)` → `typeof obj` (logic varies)

3. Event Behavior Changes

事件行為回歸 W3C 標準。

Feature	jQuery 3.6	jQuery 4.0
Focus Event Order	Custom order: `focusout` -> `blur` -> `focusin` -> `focus`	W3C Standard: `blur` -> `focusout` -> `focus` -> `focusin`

4. Internal & Prototype Changes

在 3.x 以前，jQuery 物件雖然不是真正的 Array，但它的 Prototype 裡偷塞了 push、sort 和 splice 這些方法。這讓你有一種錯覺，覺得 jQuery 物件可以直接當陣列來操作。現在這些操作全部改用原生 javascript 方式處理。

Feature	Change
Internal Array Methods	`push`, `sort`, `splice` are removed from the jQuery prototype. You can no longer treat a jQuery object exactly like an array for these modifications. Use `[].push.call($obj, item)` if strictly necessary.
Trusted Types	jQuery 4.0 adds support for Trusted Types, ensuring HTML wrapped in `TrustedHTML` works safely with manipulation methods.

5. Coding Style Recommendation

Legacy Style (jQuery 3.x)

Heavy reliance on jQuery wrappers for everything.

var  arr = [1, 2, 3];

$.each(arr, function(i, val) {

console.log(val);

});

var  json = $.parseJSON('{"a":1}');

Modern Style (jQuery 4.0+)

Use jQuery only for DOM selection/events; use Native JS for logic.

const  arr = [1, 2, 3];

for (const  val  of  arr) {

console.log(val);

}

const  json = JSON.parse('{"a":1}');
Summary

jQuery 4.0 是一次邁向現代化的重大發布。透過移除對過時瀏覽器的支援以及那些早就該淘汰的工具函數，它成功瘦身了約 3KB（經 gzipped 壓縮後）。這次改版的背後邏輯很清楚：它預設你已經在專案中同步使用現代 JavaScript (ES6+) 了。

Astro 部落格架設筆記(7) - 使用 astro-embed 嵌入 YouTube 影片

2026-01-19T08:30:00.003+08:00

撰寫部落格文章的時候，如果要嵌入 YouTube 影片應該要怎樣做？過往我們可能是透過 iframe 的方式來把 Youtube 影片嵌入。

而 Astro 上如果要嵌入影片，我們可以改用 astro-embed 來處理。

首先，請留意文章的格式為 mdx 格式，原本的 md 格式沒辦法支援。

安裝套件
```
npm install astro-embed
```

在 mdx 檔案加入以下內容

import { Tweet, Vimeo, YouTube, LinkPreview } from 'astro-embed';

<YouTube id="https://youtu.be/SWMOgOZVWP4"/>

這樣就可以嵌入 YouTube 了，除此之外還支援 Vimeo、Tweet 等其他之類的功能，可以參考官網的介紹。

※延伸閱讀

Astro 部落格架設筆記(5) - 程式碼語法高亮 Expressive-Code

Astro 部落格架設筆記(6) - 行號顯示與特定行數高亮 plugin-line-numbers

2026-01-14T17:27:00.001+08:00

前面一篇文章中，介紹了安裝 Expressive-Code 讓程式碼語法高亮的套件，可以讓程式碼更容易閱讀，而今天要介紹的套件可以進行程式碼行數的調整，讓閱讀更清楚。

安裝套件

npm install @expressive-code/plugin-line-numbers

設定 content.config.ts

expressiveCode({
	plugins: [
		pluginLineNumbers({
		startAt: 1,       // 行號從 1 開始
		style: 'decimal', // 數字格式（也可以是 'decimal-leading-zero'）
		gutterClass: 'line-number-gutter', // 可自訂 class
		lineClass: 'line-number'           // 可自訂每行的 class
		})
	],
	// 可設置主題、按鈕樣式等
	themes: ['dracula', 'github-dark'],
}),

這樣設定完畢後，文章只要寫 {1, 7-10} 這樣就會把第一、七到十行高亮

``` typescript title="content.config.ts" {1,7-10}
程式碼
```

Astro 部落格架設筆記(5) - 程式碼語法高亮 Expressive-Code

2026-01-05T17:32:00.008+08:00

技術類型的部落格，往往會在文章中貼上一些程式碼，而具備程式碼語法高亮算是一個很基本的功能，過往在 Google Blogger 就很難做到這件事情，或是做出來的效果很差。

如果想要在 Astro 部落格實現語法高亮，只需要安裝 Expressive Code 即可

安裝套件
```
npm install astro-expressive-code
```

設定 content.config.ts

import expressiveCode from 'astro-expressive-code';

export default defineConfig({
	site: 'https://rojerchen.github.io',
	base: '/',
	integrations: [
		expressiveCode({
			// 可設置主題、按鈕樣式等
			themes: ['dracula', 'github-dark'],
		}),
	],
  },
});

只要完成上述步驟，就可以達到最基本的程式碼語法高亮，而我自己又陸續安裝了以下幾個套件：

@expressive-code/plugin-line-numbers` (顯示行數)
@xt0rted/expressive-code-file-icons` (icon圖示)
expressive-code-fullscreen` (全螢幕)

最後的效果大概就是這樣，如果想要更進一步了解，可以參考官網 Expressive-Code

※延伸閱讀

Astro 部落格架設筆記(0) - 為什麼選擇 Astro 與 GitHub Pages

Astro 部落格架設筆記(4) - 支援 Emoji

Google Blogger 更新：利用 Google 服務創造更吸引人的閱讀體驗 (2025.11.21)

2025-11-21T16:43:00.001+08:00

Google Blogger 終於迎來久違的更新！今天使用時意外發現了新功能，畫面上跳出了這段提示訊息。

在編輯器的工具列上，多了一個 Google 圖示。

點下去後，只要輸入關鍵字，系統就會自動在文章中插入一段 iframe。

讀者在瀏覽文章時，只要點擊該區塊，就能直接連到 Google Search 進行搜尋，讓文章與搜尋功能做了更緊密的整合。

但這樣的服務實際上能帶來多少吸引人的體驗？我自己是相當存疑。你會覺得這樣就會讓文章吸引人嗎？

Astro 部落格架設筆記(4) - 支援 Emoji

2025-11-18T14:10:00.001+08:00

在撰寫文章的時候，有時候會用到一些表情符號，使用 md、mdx 撰寫文章，可以安裝 remark-emoji 來輔助，唯一的缺點就是不支援 .astro 。

安裝套件
```
npm install remark-emoji
```

設定

import remarkEmoji from 'remark-emoji';

export default defineConfig({
	site: 'https://rojerchen.github.io',
	base: '/',
	integrations: [
    ...
	],
	markdown: {
      remarkPlugins: [
        remarkEmoji,
      ],
  },
});

這樣只要在文章輸入:heart: 就可以直接轉換了。

如果想要支援 .astro 就必須要額外安裝別的套件才有辦法

安裝套件
```
npm install node-emoji
```

astro.config.mjs設定

import remarkEmoji from 'remark-emoji';

export default defineConfig({
  ...
  vite: {
    resolve: {
      alias: {
        "@emoji": new URL("./src/utils/emoji.ts", import.meta.url).pathname,
      },
    },
  },  
});

新增 src/utils/emoji.ts

import { get, emojify } from "node-emoji";

// 取得單一 emoji
export function emoji(name: string): string {
  return get(name) || name;
}

// 把字串裡的 :smile: 自動轉換
export function emojifyText(text: string): string {
  return emojify(text);
}

啟用方式

import { emojifyText } from "@emoji";

{emojifyText(":date:")}

這樣就可以讓 .astro 支援 Emoji 了。

※延伸閱讀

Astro 部落格架設筆記(3) - 透過壓縮提升傳輸效率

讓 GitHub Copilot CLI 每次啟動都顯示動畫

2025-10-22T18:09:00.003+08:00

最近使用 Github Copilot CLI，在使用的時候發現到啟動的動畫只有第一次執行的時候會顯示，之後就不會再顯示啟動動畫了。

如果想讓每次啟動都可以顯示動畫，可以修改 .copilot\config.json，將 banner 設定為 always 後，每次啟動都可以看到動畫了。

{
  "banner": "always",
  "last_logged_in_user": {
    "host": "https://github.com",
    "login": "RojerChen"
  },
  "logged_in_users": [
    {
      "host": "https://github.com",
      "login": "RojerChen"
    }
  ],
  "render_markdown": true,
  "screen_reader": false,
  "theme": "auto"
}

啟動動畫

Astro 部落格架設筆記(3) - 透過壓縮提升傳輸效率

2025-10-17T11:00:00.002+08:00

我們在瀏覽網頁的時候，HTML、CSS、圖片都會佔據不少空間，當檔案越大，傳輸所耗的頻寬與時間就越久，所以我們就需要透過壓縮的方式，提升傳輸效率。

執行以下指令安裝套件

npm install astro-compress

修改 `astro.config.mjs` 檔案

import compress from "astro-compress";

export default defineConfig({
	site: 'https://rojerchen.github.io',
	base: '/',
	integrations: [
		compress(),
	]
  },
});

執行編譯

npm run build

編譯後，我們可以發現到壓縮後的效果

網站架設初期，資料量雖然不大，壓縮帶來的效益可能有限，但這類基礎設置屬於一次性工作，及早完成後便能長期受益，之後也不必再費心處理。

Github Spec-Kit 與 Gemini 使用流程初體驗

2025-10-13T10:02:00.000+08:00

過往我們在開發軟體的時候，很容易發生文件跟不是程式碼的狀況，文件只是過往的傳說，往往只能參考而已。當有了 AI 以後，我們透過 AI 協作來產生規格，讓文件與程式碼更靠近了。而近期 Github 推出的 Spec-Kit，讓你也可以透過 Spec-Driven Development 的方式進行軟體開發，剛好最近連假有空，就來嘗試一下這種開發方式。

環境設定

首先就是要先安裝 SDD

uv tool install specify-cli --from git+https://github.com/github/spec-kit.git

安裝好後，建立新專案

specify init project_name #建立新專案

建立新專案的同時，順便選擇使用的 AI Assistant ，像我自己就是選用免費的 gemini 來做測試

切換到剛才建立的資料夾，啟動 gemini

我們可以透過輸入關鍵字，看看有沒有出現指令，如果沒有的話就表示當下資料夾的位置不對，或是 gemini 版本過舊需要更新。

像我自己前一次測試 gemini 是好幾個月前的事情了，舊版本根本吃不到操作 SDD 命令，當然也就無法執行。

npm install -g @google/gemini -cli to update #更新 Gemini 版本

SDD 命令

前置作業完畢後，我們再來了解一下各個命令的用途

Command	說明
/constitution	建立或更新專案的治理原則與開發規範
/specify	定義你要建置的內容（需求與使用者故事）
/clarify	在規劃前釐清未明確的部分（必須在 /plan 前執行，除非明確跳過；以前稱為 /quizme）
/plan	依照選定的技術堆疊建立技術實作計畫
/tasks	產出可執行的實作任務清單
/analyze	進行跨文件一致性與覆蓋率分析（在 /tasks 後、/implement 前執行）
/implement	依照計畫執行所有任務並建置功能

使用心得

在這些命令中，我自己的使用順序為：specify -> plan -> tasks -> implement

如果規格有需要釐清的部分，AI 可能會詢問你相關的問題，等你回答完畢後才會繼續進行下一個步驟，而你也可以透過 /clarify 來檢視需求是否明確。

由於我並沒有訂閱 Google AI 的服務，一開始使用的模型為 gemini-2.5-pro 但是用到一半，就會強迫切換到 gemini-2.5-flash 了。

雖然每個模型都可以完成任務，但是因為模型特性的關係，效果就會有很大的差異。

我使用同一份規格，模型使用 gemini-2.5-flash 多次測試的狀況下，沒有辦法每次都達到同樣的結果，有時候會東錯一點、西錯一點，錯到讓我都懷疑是我規格寫的有這麼差嗎？雖然是一個很好鍛練寫規格的方法，但是有聰明的模型幹嘛要用愚蠢的模型，實際要使用的話，課金用聰明的模型，才是最正確的選擇。

Astro 部落格架設筆記(2) - 實作回到頁首功能

2025-10-07T08:30:00.002+08:00

在前一篇文章 Astro 部落格架設筆記(1) - 系統環境初始化中，我們建立好 Astro 的開發環境後，接下來就可以從回到頁首 這個功能，熟悉一下整體環境。

我們就先從一個小功能來實踐，透過，來熟悉整個環境。當使用者滾動畫面後，會出現回到頁首的圖示，按下去後就自動滾到頁首。

首先，新增一個 BackToTop.astro 元件，來實作回到頁首的功能

<button id="back-to-top" class="back-to-top" aria-label="回到頁首">↑</button>

<style>
  .back-to-top {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    background-color: #0077ff;
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    display: none; /* 初始隱藏 */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 0.3s ease;
  }
  .back-to-top.show {
    display: flex;
  }
</style>

<script>
  const btn = document.getElementById('back-to-top');
  const showAfter = 300; // 滾動超過 300px 才顯示

  window.addEventListener('scroll', () => {
    if (window.scrollY > showAfter) {
      btn.classList.add('show');
    } else {
      btn.classList.remove('show');
    }
  });

  btn.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
</script>

接下來修改 BlogPost.astro 將我們前面寫好的元件 import 即可

---
 import BackToTop from "../components/BackToTop.astro";
---

<main>
    <article>
     ...
    </article>
    <BackToTop/>
</main>

每一個 astro 檔案就是一塊塊的積木，寫好的每一個元件可以在別的地方重複使用。

BlogPost.astro 這個檔案的用途是用來顯示文章內容以外的部分，除此之外還可以調整標題、外框等等資訊。

大致了解這樣的運作模式後，就可以做更進一步的開發了。

下一步來看看如何透過壓縮的方式節省頻寬，提升傳輸速度 Astro 部落格架設筆記(3) - 透過壓縮提升傳輸效率。

※延伸閱讀

Astro 部落格架設筆記(0) - 為什麼選擇 Astro 與 GitHub Pages

Astro 部落格架設筆記(1) - 系統環境初始化

2025-09-29T08:00:00.002+08:00

前言

前一篇文章 Astro 部落格架設筆記(0) - 為什麼選擇 Astro 與 GitHub Pages 我提到為什麼選擇 Astro 來架設部落格，接下來就準備環境開始動手架設，以下是我運行的版本資訊：

Node.js V20.19.4
Astro 5.13.5

1. 安裝 NVM

首先，請先安裝 Node Version Manager (NVM)，方便管理 Node.js 版本。

我自己平常是使用 Chocolatey 來管理 Windows 上的軟體套件，只不過在使用 NVM 的時候，切換 Node.js 會發生找不到對應 exe 的狀況，而我自己也不想要手動去修改環境變數，為了避免麻煩，還是直接使用 Windows 安裝檔比較方便。

2. 建立 Astro 專案

執行以下指令，建立 Astro 專案

npm  create  astro@latest

3. 選擇 Blog Template 樣板

官方一共有提供四種範本，不過其他範本都太簡略，不符合我架設部落格的需求，並且從零開始架設對我來說也不太符合經濟效益，有一點基礎的樣板我才知道要怎樣調整。

4. 環境設定

在 src/consts.ts 中設定網站的基本資訊

export  const  SITE_TITLE = 'Rojer 的網路學習筆記';

export  const  SITE_DESCRIPTION = '分享程式開發、Toastmasters 演講經驗、科技產品開箱與旅行心得，記錄學習與生活的點滴';
在 astro.config.mjs 中設定網站的網址
export  default {
    site:  'https://rojerchen.github.io',
}

5. 本機測試

想要在本機環境測試，可以執行以下指令，再開啟網址就可以測試了

npm  run  dev

6. 編譯

我自己平常是本機測試完畢無誤後，就透過 Github Action 來將程式部屬到 Github Page，所以我自己是不會使用下面這個指令。

npm  run  build

只不過有一件事情要留意

本機測試正常，編譯未必能成功

我就曾經發生過 Github Action 一直失敗，我以為是 Github 的問題，直到我本機測試後，才發現到問題。如果也發現到 Github Action 一直失敗，但是可以本機編譯看看。

接下來，我們可以從回到頁首這個功能來實作，了解一下系統的架構

Astro 部落格架設筆記(0) - 為什麼選擇 Astro 與 GitHub Pages

2025-09-24T08:00:00.002+08:00

前言

很久以前我就知道可以透過 GitHub Pages 架設部落格，但因為種種原因，一直沒有真正動手。一方面，我已經使用 Google Blogger 很多年了，加上自己寫文章的頻率並不高，當時覺得沒有必要特地更換平台。另一方面，我對前端的掌握度並不高，雖然我會改，但是改的不夠快，也就更沒有動力來去處理了。

Google Blogger 的缺點

今年我寫文章的次數增加，對於 Blogger 的一些缺點也就越來越難以忍受，剛好有 AI 的輔助，如果是自己架設的話，那前端畫面調整的阻力就大大降低，於是就興起了換家的念頭。

Github Page

我並沒有考慮使用其他的部落格平台，畢竟我已經有使用 Google Blogger 了，換個平台只是換湯不換藥，所以使用 Github Page 就是我的首選。

優點

自由

自己架設就不會被平台所綁架，不用擔心哪一天被下架，想要什麼功能，自己開發就好。

學習

平常在使用 Github 我只有使用 Git 的功能，其他的功能我都不熟悉，這剛好也是一個好機會來研究其他相關的功能。

缺點

沒有部落格平台的庇護，任何功能都要自己來實作，而現有架構下，有些功能就需要使用第三方服務才能做的到。

只支援靜態網站，無法使用後端程式。
動態功能與紀錄，如留言板、搜尋、流量分析只能依賴第三方服務。
SEO 需要自己額外處理。
流量與空間受限 100G、空間 1G。
每次更新必須 commit 推送程式。

選擇框架

確認好環境後，看看有那些合適的框架可以使用，從 ChatGPT 上的建議框下有以下幾項：

Jekyll

Github Page 預設支援最基礎的樣板畫面，畫面太過簡潔，沒有任何調整的空間。

Hexo

約略從 2012年推出，網路上還蠻多人分享的，只不過陸陸續續有看到有些人轉換到 Astro。

Hugo

約略從 2013年推出，程式語言為 GO，樣板

最多最豐富，只不過現階段我並沒有打算學習 GO。

Astro

既然有不少人從 Hexo、Hugo 轉換到 Astro，所以它就是我測試上的首選。

安裝並且嘗試改了幾個功能後，就決定是它了，選擇的理由大概是：

文章排版

我喜歡這文章排版的效果，比起 Google Blogger 真的是好太多了，看起來就是舒服。
看得懂，改的動

攤開程式碼，純粹的 HTML、CSS 會讓人產生一種『一看就懂』的錯覺，再加上架構簡單，降低了不少進入的門檻，只要稍有前端的開發經驗，馬上就可以開始開發了。

Next.js

由於我已經選擇 Astro 了，後續就沒有再研究 Next.js，從鐵人賽的文章中，兩者相比好像複雜了一點。

iT邦幫忙：從零開始學習 Astro, 打造個人Blog (部落格)

iT邦幫忙：從零開始學習Next.js 系列 - iT 邦幫忙

後記

在 Astro 的架設上，建議還是先參考官方文件。我曾多次偷懶想要直接照抄 ChatGPT 給的建議，它卻常常會瞎掰一些不存在或是無法使用的套件，導致我浪費不少時間在試錯。

接下來就陸續把原本 Google Blogger 的文章搬移過來。

接下來就準備開發環境，開始架設 Astro 部落格架設筆記(1) - 系統環境初始化

FFmpeg 轉檔影片，順利插入 PowerPoint 簡報

2025-08-31T08:30:00.008+08:00

在製作 PowerPoint 簡報時，使用影片往往能讓簡報更生動。尤其是在介紹旅遊景點或特定主題時，影片可以幫助聽眾快速融入，比單純口頭講解更有效。

許多時候，我們會使用 官方提供的介紹影片，例如旅遊局、景點官方頻道或授權素材，這些影片能確保資訊正確且合法。

不過，在簡報現場直接串流播放影片，最常遇到的問題就是 網路不穩。因此，很多人會選擇事先準備好影片檔案，並直接嵌入 PowerPoint，這樣就能確保播放過程順暢。

不是所有影片都能直接插入 PowerPoint

即使手上已有官方影片檔案，並不是每個影片格式都能被 PowerPoint 支援。有些影片插入後，可能會出現「無法播放」或「只有聲音沒有畫面」的問題。

遇到這種情況時，就可以透過 FFmpeg 這個工具，將影片轉換成相容的格式，讓它能在 PowerPoint 中順利播放。

⚠️ 請注意：本文僅適用於 官方影片或你擁有使用授權的影片。

使用 FFmpeg 轉檔官方影片

FFmpeg 是一款免費且功能強大的開源工具，可以將影片轉換成各種格式，確保 PowerPoint 能順利播放。

以下是常見的轉檔指令，能把影片轉換成 PowerPoint 支援的 MP4 格式：

ffmpeg -i sourcefile  -c:v libx264 -crf 23 -preset medium -c:a aac -b:a 192k outputfile

轉換後的影片就能順利插入 PowerPoint，不用再擔心無法播放的問題。

文章遭 Blogger 下架，究竟違反了什麼規範？

2025-08-18T08:30:00.001+08:00

2025.08.01 我收到了一封來自 Blogger 的來信，信中提到我的文章被檢舉下架，但是我從信件內容卻無法確切的得知是違反了哪一條規定。

下面為系統的來信

我自己猜測可能的原因：

著作權問題

這篇文章是單純記錄我是怎麼修改的，在文章的內容與結尾都有附上參考的連結，記錄我自己部落格程式碼修改前、修改後的結果。如果要說可能有抄襲的部分就屬這個程式碼的部分了，但是大家都使用同樣的平台，結構部分本來就一樣，照理說應該不會有著作權的問題。

我在網路上有看到其他人文章被系統判定下降的狀況，更糟糕的是審核通過後短時間內又被下架。也有人也有類似的狀況，附上參考連結然後被下架，申訴後又在恢復上架。

所以我猜我可能也是程式誤判吧？不過我還是稍微修改了一下文章，再特別標註參考來源，並且說明這篇文章已經過時。再次送出審核，幾個小時後就通過了。
過時的資訊

當然，文章也有可能被別人檢舉。如果剛好文章是發佈在 Google 的平台，是可以檢舉讓文章下架的。不過從選單中是沒有辦法選擇著作權這個項目，剩下有可能的項目大概就是垃圾訊息這一項了。

畢竟 Google Search Console 改規則是 2020 年的事情，而我是在 2023年看到才改的，改完順便紀錄一下，不過就資訊面來說，算是過時的資訊，如果真的被檢舉垃圾文章，那也真是沒有辦法。

Toastmasters Annual Business Meeting Designate Proxyholder 指定代理投票人設定教學

2025-08-11T10:30:00.002+08:00

每年，國際演講會（Toastmasters International）都會舉行世界年會（Annual Business Meeting），針對各項議案與重要事項進行討論與表決，比方說選出下一屆的幹部或是章程上的修改。

根據制度，每個分會有兩票，而分會的會長（Club President）與秘書長（Club Secretary）可以至系統上設定代理人。投票方式採用線上投票，如果沒有辦法出席，則可透過總會網站填寫代理申請表，將投票權授予給分會會員、其他分會會員，甚至是 District Director，由他們代為行使投票。

如果您能夠參加投票，也還是需要在系統上設定自己，才具備投票資格。今年的作業程序期間在2025年的7月10日至8月15日。

登入總會的官網後，進入「Club Proxy & Voting Instructions」頁面

接下來，選擇 Designate Proxyholder

選擇可以代為投票的人員

接下來按下繼續

因為我選擇的是 District Director，系統會自動帶出總會長的名字，如果想要更改，可以點選 Edit ，可以再更改成分會會員、其他分會會員。

最後就會看到報告，就表示已經設定完成。

如果想要更改代理人，再次進入「Club Proxy & Voting Instructions」頁面還可以再進行設定，不過也請記得在時限內處理完畢。

※延伸閱讀

2025.07.12 分會成功計畫 Club Success Plan 筆記

開箱文：Palladium Boot 來自法國品牌的靴子

2025-08-07T21:25:00.004+08:00

前一陣子在市區逛街，想說要買雙新的慢跑鞋來跑馬拉松，結果市區逛街晃一晃後發現到這個來法國的品牌的靴子 Palladium，一不小心就把這雙鞋給帶回家了！剛好配合最近這溼溼答答的天氣，這種天氣穿甚麼鞋子都不對，穿靴子就對啦！

在市區以前是唱片行競爭激烈，現在是鞋店競爭激烈，在這短短兩百公尺左右就有數十家鞋店，大部分品牌的鞋子在市區逛都買的到，只不過有賣 Palladium 這個品牌的店並不多，目前在市區我只發現到一家，即便是在台北有賣的專櫃也不多。

▼這是款能夠反摺的靴子，想要反摺的話旁邊有扣子可以扣起來

▼鞋底還頗高的，不過穿起來覺得非常舒適一點也不會覺得鞋底很硬

▼靴子正常的高度

▼正常高度

▼反摺後的高度

▼這款是靴子是防潑水的，鞋面上這片是縫起來一片的，所以不用擔心雨從鞋帶的縫隙中滲透進來

▼鞋底

※心得

目前這款鞋子筆者穿了幾天後覺得這款鞋子非常好穿，鞋墊非常的柔軟和舒適不會有新鞋要適應的感覺。鞋子的重量上也相當輕盈，不會像 Timberland 那樣厚重，在透氣上是不會有悶熱的感覺，不過最近也剛好比較冷所以可能要等到夏天才會知道。

除了這種皮的款式之外，也還有帆布的款式，不同的款式在中間這塊反摺的兩側會有不同的縫線方式，我買的這款在縫線上是比較細膩的，其他幾款會覺得縫線會有點隨便，不過我逛過三家門市都有發現到這樣的狀況，所以可能是不同的款式有不同的風格！

※延伸閱讀

開箱文：經典回歸 Palladium Water Proof IV 防水靴

Nike 慢跑鞋 Nike Lunarglide 5

無網路環境下，使用 Jenkins 編譯 .NET Core 並解決 NuGet 套件缺失問題

2025-08-07T08:30:00.006+08:00

近期需要在無網路的環境下透過 Jenkins 來編譯 Dotnet Core，在編譯的過程中發生了以下錯誤訊息，但是我卻又無法透過錯誤訊息得知到底是缺少了哪個 nuget package

會有這樣的問題，主因當然是缺少了必要的 nuget package，在執行 dotnet build 的時候，如果有缺少 package，就會連線到 api.nuget.org 來抓取，而我的環境又無法連外，所以當然會出現錯誤訊息。

warning NU1900: 取得套件弱點資料時發生錯誤: 無法載入來源 https://api.nuget.org/v3/index.json 的服務索引。

為了要得知到底是缺少了哪個 package，首先要先確認 Jenkins 執行時是使用哪個帳號執行，因為這會和你在命令列處理時使用的帳號不一樣，帳號不一樣，設定檔的位置也會有所不同。

先在 pipeline 來判斷是使用哪個帳號執行

stage('Debug NuGet Config') {
	steps {
		bat '''
			whoami
			echo %APPDATA%
			dir %APPDATA%\\NuGet
			dotnet nuget locals all --list
		'''
	}
}

像我自己 Jenkins 執行時使用的帳號是 nt authority\system ，而對應的 nuget.config 如下

C:\Windows\System32\config\systemprofile\AppData\Roaming\NuGet

接下來修改以下內容，加入 clear 的目的在於，我不想要讓他最後又連接到 api.nuget.org

<?xml version="1.0" encoding="utf-8"?>
<configuration>    
  <packageSources>
    <clear/>        
    <add key="offline" value="C:\nuget\packages" />
  </packageSources>
</configuration>

如果沒有加上 clear ，實際上在執行的時候，還會再去 %ProgramFiles(x86)%\NuGet\Config\ 檢查檔案是否存在，所以訊息上面會額外顯示 Microsoft Visual Studio Offline Packages ，而我自己的習慣是加上 clear 。

之後再執行 dotnet build 就會逐一列出缺少哪些項目，再把這些項目補齊就可以正常編譯了。

※延伸閱讀

Visual Sutdio 無法執行單元測試，未參考 .NET Nuget 配接器

無網路環境下，使用 Jenkins 編譯 .NET Core 並解決 NuGet 套件缺失問題

Google Blogger SEO 的困境 - 網站權重

2025-08-01T08:30:00.051+08:00

近期在研究 SEO 的時候，發現到有不少免費的檢測工具，我發現到 SEOptimer 這個檢測工具還挺方便的，不僅免費還不用註冊帳號，一天有免費幾次的額度可以使用，如果超過了就隔天再來嘗試。

使用上非常的簡單，只需要輸入網址即可。

從報告中，可以得知檢測會依據下面幾個項目來評分：

On-Page SEO
Links
Usability
Performance
Social

有一些項目是我們自己可以調整的，而其中最讓我最在意的，就是分數最低的 Link 這個項目

過往在撰寫文章的時候，有時候會附加外部連結的網址，通常 HTML 內容會是下面這個樣子

<a href="網址">文字</a>

這樣寫是正確的，只不過從 SEO 的角度來說，它會認為你信任這個網站的連結，對方網站的 SEO 會引此受益。如果是你信任、推薦、合作的網站，使用這樣的方式是沒問題的。

如果沒有透過工具檢測，我根本就不會知道有寫法上的差異。原本我使用這樣的方式添加了社群網站的連結，雖然我分享的權重給它，但是卻浪費了我的權重，最後就改用 nofollow 的方式。

如果想了解更多，可以參考 Google 搜尋中心的教學。

<a href="網址" rel="nofollow">不傳遞權重</a>
<a href="網址" rel="sponsored">贊助內容的連結</a>
<a href="網址" rel="ugc">表示使用者產生內容</a>

相反的，如果有越多的反向連結連到你的網站，除了可以增加流量，間接也會提升你網站的權重，像我自己最多反向連結的文章就是下面這兩篇。

My Toastmasters Journey (16)：我從『自動測試與 TDD 實務開發』學到的授課小技巧

『自動測試與 TDD 實務開發』課後心得

後來，我有發現到這套工具 ahref 可以來觀看歷史權重紀錄，免費版每個月有一定的額度可以瀏覽一些資料。

🔵 Referring Domains：外部連結網站數量

🟣 Domain Rating：整體網站權重

🟠 Organic Traffic：自然搜尋流量

有一段時間，整個 blogspot.com 的 Domain Rating 曾被調高，加上當時剛好某些關鍵字被搜尋引擎特別青睞，那段期間 SEO 表現和實際點擊幾乎是同步上升。

但好景不常，當 Google 不再推薦你的內容，流量很快就出現斷崖式下滑。即使後續幾年 Referring Domains 持續增加，卻沒能帶來實際的訪客。這也凸顯了，外部網站的推薦雖然重要，但要能真正「有效」，外部網站的品質與關聯性更關鍵。

更慘的是，後來整體的 Domain Rating 被調降，甚至低於最初起步的時候，不少文章也被移出搜尋索引，讓情況雪上加霜。一直以來我都沒買網域，或許課金綁個網域，更或者直接更換平台，也許可以改善這些問題。

不過說到底，還是回到最根本的，持續寫出有品質的文章，並且讓文章彼此有關聯繫，看看能否有所改善。

※延伸閱讀

Google Blogger SEO 的困境 - 行動版網頁重導向錯誤

Google Blogger SEO 的困境 - 消失的文章

Google Search Console 淘汰 data-vocabulary.org 的結構定義

Google Blogger 的困境 - 檢測你的網站，是否支援『複合式搜尋結果』

Web Deploy 已安裝卻不能用？快速排查與重新安裝

2025-07-28T11:18:00.002+08:00

最近接手一台 Windows Server 2022 的環境，想要安裝 Web Deploy 網站部屬工具，卻發生一個奇怪的狀況，就是系統顯示已經安裝，但是卻無法將網站透過 Web Deploy 的方式部屬到 IIS 上面。

嘗試安裝的時候，卻顯示電腦上面安裝較新的版本，但是控制台卻查詢不到，只能一步步盤查到底是哪裡出了問題。

檢查步驟：

檢查控制台

確認控制台沒有裝。
檢查安裝路徑 Program Files\IIS 是否有 Web Deploy 資料夾

有，而且版本顯示為 7.x

既然已經有安裝了，那 Web Deploy 的功能是否能夠正常執行嗎？

不行

實測後發現 Web Deploy 功能無法正常使用。

主要問題是系統中缺少以下兩個帳號：

WDeployAdmin
WDeployConfigWriter

這兩個帳號是 Web Deploy 進行授權與配置所需的角色帳號，若未建立，將無法透過 Web Deploy 將網站部署到 IIS 上。

安裝成功後，正常的情況會是下面這個樣子

既然如此，只能先移除再重新安裝了。

由於無法透過控制台移除，只能透過以下命令列方式來處理

首先，透過以下命令取得 id

wmic product get name,identifyingnumber

再來，透過以下命令反安裝

msiexec /x {identifyingnumber}

這樣處理完畢後，就可以安裝了。

2025.07.12 分會成功計畫 Club Success Plan 筆記

2025-07-17T11:50:00.003+08:00

今天參加了分會成功計畫（Club Success Plan）的說明會，簡單紀錄一下今年有哪些規則上的異動。

今年的變動如下：

Club Successful Plan 需要在 9/30 前提交

進入 Club Central 後，就可以看到 Club Successful Plan 的填寫項目。

我原本以為只需要填寫 Education 部分，沒想到還包含了 Membership、Training、Administration 等內容。稍微看了一下整體結構，覺得這份計畫其實跟以前我擔任 Area Director 時填寫的 Club Visit Report 有些相似，只是出發角度不同。

其中最重要的，當然還是 Education 區塊。能夠一開始就掌握分會會員的學習狀況，有助於提早安排大家的演講進度，避免年度結束前才臨時抱佛腳。
DCP 分數與條件異動
首先，今年必須先完成 Club Success Plan，才會開始計算 DCP（Distinguished Club Program）的積分。

以往達成 9 分或 10 分都被稱為 President's Distinguished，但今年 Toastmasters 將 10 分的等級改名為 Smedley Distinguished。

另外，9 分與 10 分的會員人數條件「達到固定人數門檻」也有所變更：
- 達到 20 人可取得 9 分
- 達到 25 人可取得 10 分（即 Smedley Distinguished）
Base Camp Manager

我印象中以前只有 President、VPE 和 Secretary 擁有 Base Camp Manager 的審核權限。不過今年開始，所有的 Officer 都具備 Base Camp Manager 權限，可以登入 Base Camp 處理學習進度審核事宜。

※延伸閱讀

Toastmasters Annual Business Meeting Designate Proxyholder 指定代理投票人設定教學

ReSharper for Visual Studio Code 初體驗：功能有限，尚待觀望

2025-06-12T11:10:00.007+08:00

ReSharper 是由 JetBrains 開發的一款強大的 Visual Studio 擴充工具，主要用於 .NET 開發（C#、VB.NET、ASP.NET 等），提供大量的程式碼輔助功能，幫助開發者提升生產力、改善程式碼品質。

我自己在使用 JetBrains IDE 工具的時候，最常就是用到重構、導覽與搜尋等功能，即便是現在 Visual Studio 2022 有了 Quick Action (參考文章)，使用上仍舊沒有 JetBrains 來的好用。有上過 Joey (91) 的極速開發，就知道帶來的效益到底有多大。

最近發現 ReSharper 居然上架到 Visual Studio Code ，想說來了解看看，看看原本在 JetBrains IDE 上面的那一套是否都可以搬過來使用。

那這個擴充套件好不好用呢？先說結論，目前產品仍不成熟，建議半年後再來觀望。

為什麼會這樣說呢？因為目前最關鍵的「重構」功能尚未支援。

我最想測試的，就是 ReSharper 的重構功能在 Visual Studio Code 上的實際表現。目前我的開發流程常常需要在 Visual Studio Code 和 Rider 之間來回切換：先透過 GitHub Copilot 在 VS Code 裡產生程式碼，然後再切回 Rider 進行重構與細節調整。

然而實際使用 ReSharper for VS Code 後發現，目前僅提供部分 Code Completion 功能，卻無法進行重構作業。若缺乏這項核心功能，這個擴充套件在開發上的價值就大打折扣，也就沒有急著投入使用的必要了。

一開始測試的時候，我還以為 ReSharper 的重構功能已經可以使用，因為操作起來和我原本安裝的其他擴充套件表現相似。後來我把那些既有的擴充套件全部停用後 (如 C# 和 C# Dev Kit) 才確認——目前這個版本的 ReSharper 並不支援重構功能。

透過 Commands 面板可以查看目前已支援的快捷鍵與操作指令，但可惜的是，最核心功能尚未移植過來。希望未來版本能陸續補上這些實用功能，讓整體體驗更完整。

截至目前測試的時間點（2025/6/12），ReSharper for VS Code 仍處於公開預覽版階段。未來正式版推出後將採取訂閱制，必須持有 ReSharper 的有效授權才能繼續使用。至於是否值得付費訂閱？就等功能更完整的新版本推出後再來評估吧。

※延伸閱讀

JetBrains AI 體驗心得

Visual Studio 2022 Quick Actions 程式碼重構體驗心得

ReSharper for VS Code is BAD from Nick Chapsas

Google Blogger 的困境 - 檢測你的網站，是否支援『複合式搜尋結果』

2025-05-29T14:34:00.005+08:00

當我們在網頁搜尋的時候，總是會看到有一些網站在搜尋結果底下，有非常詳細的說明，而這個東西就叫做「複合式搜尋結果」，而複合式搜尋結果有以下優點：

整合多個資料來源
進階多條件查詢（多重篩選）
提升資訊檢索效率
跨語言 / 跨格式搜尋
知識圖譜 / 結構化搜尋

對於 Google Blogger 來說，到底有沒有支援呢？我們就來看看到底有沒有支援，順便看看目前使用的網頁範本中，有沒有需要調整的地方。

檢測網址： https://search.google.com/test/rich-results

首先，輸入任何一個要檢查的網頁網址

接下來，發現到有一個項目需要修正

展開細項，會看到有3個非重大問題

看到細項說明後，可以知道缺少了一些標籤，而這些都是非必要性的

像是 datePublished 這個標籤，點選後就可以看到實際上顯示出來的結果是什麼

這次檢測有發現到兩個問題需要修正

問題一：headline 欄位未填

修改前

<h1 class='post-title entry-title' itemprop='name'>
  開箱文：Palladium Boot 來自法國品牌的靴子
</h1>

修改後

<h1 class='post-title entry-title' itemprop='headline'>
  開箱文：Palladium Boot 來自法國品牌的靴子
</h1>

問題二：datetimePublished 的 datetime 值無效

修改前

<abbr class='published updated' itemprop='datePublished' title='2012-12-08T10:20:00+08:00'>
12/08/2012
</abbr>

修改後

<abbr class='published updated' itemprop='datePublished' datetime='2012-12-08T10:20:00+08:00'>
12/08/2012
</abbr>

整個修改完畢後，再來檢測，已經把錯誤的地方給修正完畢了。

這樣就大致有問題的地方修改完畢了。只不過想要有更複雜的複合式搜尋結果，應該還要額外嵌入一段 JavaScript 並且符合 Schema.org 格式。只不過要等 Google 編入索引不知道要等多久，改天再來找篇文章試試看，看看在 Bing 上面呈現的效果是如何。

※延伸閱讀

Google Blogger SEO 的困境 - 消失的文章

Google Blogger SEO 的困境 - 行動版網頁重導向錯誤

Google Search Console 淘汰 data-vocabulary.org 的結構定義

Google Blogger SEO 的困境 - 網站權重

透過 Liber Office 將 WORD 轉成 PDF

2025-05-26T08:30:00.001+08:00

過去在執行專案的時候，客戶提了一個需求，需要把資料匯出成 WORD 和 PDF 檔案，由於要處理的畫面不少，又不想要針對 WORD、PDF 檔案各別花費不等的時間逐一處理，最終找到了 WORD 轉 PDF 的方案。

只需要處理好 WORD 資料的匯出，然後再透過 LiberOffice 協助將 WORD 轉換成 PDF，就可以滿足大致上的需求。

安裝 LiberOffice

由於要使用 Liber Office 來協助轉檔，所以安裝 Liber Office 是必須的。
LiberOffice SDK

由於我是使用 ProsessStartInfo 的方式呼叫 soffice.exe 來協助做轉檔，所以應該就不需要把 SDK 的檔案複製到專案底下。

執行轉檔

我是使用呼叫外部程式的方式來執行，大致上的方法如下

ProcessStartInfo procStartInfo = new ProcessStartInfo(libreOfficePath, $"--convert-to pdf --outdir {outPutPath} --nologo {officePath}");
procStartInfo.RedirectStandardOutput = true;
procStartInfo.UseShellExecute = false;
procStartInfo.CreateNoWindow = true;
procStartInfo.WorkingDirectory = Environment.CurrentDirectory;

Process process = new Process() { StartInfo = procStartInfo, };
process.Start();
process.WaitForExit();

IIS設定

使用上述的方式呼叫外部程式轉檔，在開發環境上測試沒有問題，但是將程式佈署到 IIS 上後，就會發現網頁沒有回應，如果觀看工作管理員，就會發現到 soffice.exe 持續在執行，沒有任何停下來的跡象。

會有這樣的狀況可能是權限的問題，目前我的處理方式是調整應用程式集區，將識別設定為 LocalSystem 後，就可以呼叫 LiberOffice 轉換成 PDF 了。

從 MSDN 上針對「識別」這個選項是這樣說明的

本機系統：完全受信任的帳戶，擁有更高的權限，也有存取網路資源。
網路服務：限制的網站或受限制的服務帳戶通常用來執行標準、最低權限的服務。此帳戶具有較少的權限比本機系統帳戶。此帳戶具有存取網路資源。
本機服務：限制或有限的服務帳戶是與網路服務非常類似，也提供給執行標準、最低權限的服務。這個帳戶沒有存取網路資源。
ApplicationPoolIdentity:，當您建立新的應用程式集區時，IIS 會建立新的應用程式集區名稱，並執行應用程式集區背景工作處理序，在 [這個帳戶] 下的虛擬帳戶。這也是最低權限帳戶。
自訂帳戶：除了這些內建的帳戶，您也可以使用自訂的帳戶藉由指定使用者名稱和密碼。