[BlogEngine.NET] 改造工程 - 整合 FunP 推推王

問題與答案 (FAQ)

Q&A 類別 A: 概念理解類

Q1: 什麼是 BlogEngine.NET？

• A簡: 開源 ASP.NET 部落格引擎，支援文章、分類與主題，易於客製化擴充。
• A詳: BlogEngine.NET 是以 ASP.NET 為基礎的開源部落格引擎，提供文章發佈、分類、標籤、評論與佈景主題等功能。它以可擴充、可自訂為核心價值，使用者可透過 Themes、User controls（如 PostView.ascx）和程式擴充點，快速加上外部服務（如社群書籤）或調整版面與功能，符合多數 .NET 開發者的工作流程。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q22, B-Q10

Q2: 什麼是 FunP 推推王？

• A簡: 台灣社群書籤／推文服務，提供按鈕、提交頁面與推薦統計。
• A詳: FunP 推推王是一個社群書籤與推文平台，使用者可將文章連結、標題與摘要提交至 FunP，並透過推薦按鈕統計社群人氣。它提供官方工具（腳本與 IFRAME 方案）可嵌入部落格頁面顯示「推」按鈕與推薦次數，並支援以加參數方式預填提交資訊，簡化作者與讀者推文流程。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q5, A-Q17, B-Q1

Q3: 為何在 BlogEngine.NET 中整合 FunP？

• A簡: 取代原 Rating，簡化流程、提升速度與穩定性，強化社群互動。
• A詳: 文章選擇整合 FunP，是因為官方按鈕簡潔、執行快且穩定性較佳，能避免腳本拖慢或破壞版面；同時以 FunP 推薦數取代 BlogEngine 既有 Rating，統一互動訊號。FunP 的提交頁也可預帶標題、摘要與標籤，降低推文成本。整體目標是簡化 UI、改善效能並集中使用單一社群書籤。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q6, A-Q13, B-Q7

Q4: FunP 與黑米（HemiDemi）有何差異？

• A簡: 文中體驗顯示 FunP 較快、相容性佳；黑米卡較慢且易影響版面。
• A詳: 作者試用黑米提供的「黑米卡」發現速度偏慢、同頁多個元件時更慢，與 BlogEngine 所用樣板偶有不合，會導致載入中版面毀損。相較下 FunP 工具程式碼風格簡潔，執行快速且沒遇到破版問題。最終僅保留 FunP，一方面簡化功能，一方面提升穩定性與使用體驗。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q13, B-Q8

Q5: 什麼是社群書籤／推文按鈕？

• A簡: 將文章提交到社群平台的入口，顯示推薦與分享動作。
• A詳: 社群書籤／推文按鈕是網站頁面上的互動元件，讓讀者可一鍵將內容推送到社群平台（如 FunP）。按鈕通常會顯示推薦數、引導至提交頁，並可透過參數預填標題、摘要與標籤。它提供社群曝光與內容推薦的橋樑，對部落格作者是關鍵的成效指標之一。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q17, A-Q18, B-Q6

Q6: 為什麼捨棄內建 Rating 機制改用推文？

• A簡: 統一互動指標，簡化界面，利用社群平台的推薦數據。
• A詳: 內建 Rating 與社群推文會造成重複指標與界面雜訊。改用 FunP 推薦數作為主要互動信號，能減少 UI 元件、提升一致性，且社群推薦更具外部網絡效應。於是作者移除 Rating，改在文章與封存頁以 FunP 推薦數取代，讓讀者與作者都能專注單一互動形式。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q7, C-Q3

Q7: 什麼是 IFRAME？本案例中用途為何？

• A簡: 內嵌外部網頁的容器；用來嵌入 FunP 按鈕與推薦數。
• A詳: IFRAME 是 HTML 中用以在頁面中嵌入另一個文件的框架。本文直接建立 IFRAME 並指向 FunP 提供的按鈕資源 URL，省略官方腳本層，能更穩定地載入推薦按鈕。它透過 query string 指定文章 URL 與樣式參數，最終呈現為固定尺寸的嵌入式推薦元件。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q2, B-Q15

Q8: Client-side 腳本與 Server-side 直接輸出的差異？

• A簡: 前端動態插入較不穩定；伺服端直輸較可控且除錯容易。
• A詳: 官方工具多以 document.write/eval 動態插入 HTML，遇到網路延遲或腳本錯誤時，容易阻塞或破壞版面。本文改為伺服端直接輸出 IFRAME/連結，避免前端腳本依賴，讓錯誤範圍與網頁結構更可控，除錯更直觀，亦可依頁面載入情境調整參數與排版。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q8, C-Q1

Q9: 什麼是 URL 編碼？為何需要？

• A簡: 將特殊字元轉為安全形式，避免破壞查詢字串。
• A詳: URL 編碼會將空白、斜線、中文字等特殊字元轉成百分比編碼，確保參數安全地附在查詢字串中。本文使用 Server.UrlEncode 對文章連結、標題與摘要進行編碼，避免因未編碼導致 FunP 接收錯誤、亂碼或截斷。這是組合推文提交連結的必要步驟。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q12, C-Q2

Q10: 什麼是使用 Regex 去除 HTML？

• A簡: 用正則移除標籤，取得純文字摘要供預填。
• A詳: 文章內容含 HTML 標籤，不適合直接作為摘要參數。本文採用 Regex 模式「<[^>]*>」移除所有標籤，獲得純文字，再做長度截斷與編碼。雖簡便，但遇到複雜 HTML 可能有邊界情況，必要時可改用 HTML parser 以提升準確性與安全性。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q13, C-Q4

Q11: Tags 與 Categories 差異為何？為何取捨？

• A簡: Tags自由標記、分類層次化；本文選分類，移除標籤。
• A詳: 一般來說，分類具階層結構、數量較少，有助導覽；標籤自由彈性、數量多，利於橫向檢索。本文為簡化介面與導覽，選擇以分類為主，移除左下的 Tags，並在推文參數中以分類名稱作為 tags[] 帶出，兼顧簡潔與可用性。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: C-Q7, B-Q5

Q12: 為何將分類移到右上？

• A簡: 右上較不礙眼、突顯主內容，優化閱讀焦點。
• A詳: 版位調整旨在提升閱讀動線與內容聚焦。作者覺得分類放右下過於顯眼且干擾主體，故移至右上，讓文章內容與推文按鈕更集中於視覺黃金區域，並配合移除多餘元件，提升整體清爽度與穩定性。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: C-Q7, A-Q13

Q13: 為何僅保留一種社群書籤？

• A簡: 減少雜訊與衝突，提升載入速度與一致性。
• A詳: 同頁放入多種書籤（FunP、黑米、MyShare 等）會造成版面雜亂、腳本衝突與效能問題。本文選擇只保留 FunP，一來讀者動作更明確，二來減少外部依賴來源，降低失敗點與延遲，讓呈現與互動更穩定一致。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q8, D-Q2

Q14: 推文按鈕取代計數器有何意義？

• A簡: 以社群互動數據取代單純瀏覽量，提升價值感。
• A詳: 計數器僅反映流量，未必代表內容價值。用推文按鈕與推薦數取代原有計數器，能表達社群認同程度，對外有擴散效益，對內也提供更有意義的回饋指標。這與移除 Rating 的策略一致，聚焦單一、可社交化的互動信號。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q6, A-Q16

Q15: 為何加上智財權聲明？

• A簡: 防盜文、明確授權範圍，降低內容被濫用風險。
• A詳: 在版面調整同時，作者加入智財權聲明，目的在告知授權界線、降低全文抓取與未註明出處的風險。此舉雖非技術面，但與社群擴散並行，有助建立正確的使用規範，保護作者權益並引導合法分享。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: C-Q8

Q16: 在封存頁用推文取代 Rating 的價值？

• A簡: 一致化列表指標，讓大量文章呈現更有意義。
• A詳: 封存頁一次列出大量文章，原 Rating 指標與文章互動脈絡不一致。改以 FunP 推薦數呈現，可讓讀者一眼判斷哪些文章更受歡迎，且與單篇頁面的互動一致，提升選讀效率與體驗連續性。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q7, C-Q3

Q17: FunP 按鈕參數由哪些組成？

• A簡: 至少含目標 URL 與樣式 s；提交連結還含標題、摘要與 tags[]。
• A詳: IFRAME 版按鈕 URL 至少包含 url（文章連結）與 s（樣式大小）等參數。提交連結（add.php）則會帶上 url、s（標題）、t（摘要）與 tags[] 多個值，以預填 FunP 的提交表單。所有參數需先 URL 編碼，以確保正確傳遞。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q1, B-Q6, C-Q2

Q18: 什麼是「自動帶出文章預設資訊」？

• A簡: 將標題、內文摘要、分類標籤預先填入提交頁。
• A詳: 為降低推文門檻，本文組合一個指向 FunP add.php 的超連結，並以 query string 預填標題（s）、摘要（t）與標籤（tags[]，以分類代替）。讀者點擊後，FunP 提交頁自動填好表單，大幅縮短提交時間，提高互動率。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: C-Q2, B-Q6

Q19: 何謂「版面掛掉」？可能原因？

• A簡: 載入中結構破壞或布局錯位，多因外部腳本阻塞。
• A詳: 版面掛掉常見於外部資源載入緩慢或腳本錯誤，導致 DOM 尚未成形即寫入、或 CSS/JS 衝突破壞布局。本文指出黑米卡在多元件同頁時較易引發此類問題，因此改採伺服端直接輸出與 IFRAME 隔離來提升穩定度。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q8, D-Q2

Q20: 同頁多個 IFRAME 的效能問題是什麼？

• A簡: 多重連線與重繪負擔增大，瀏覽器易卡頓。
• A詳: IFRAME 是獨立文件，每個都需建立連線、解析與繪製。封存頁一次載入四五百個 IFRAME 會造成大量 HTTP 請求與渲染負載，特別在 IE 上明顯卡頓。需以分頁、延遲載入或改用輕量呈現策略降低負擔。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: D-Q1, C-Q10

Q21: 為何選 IFRAME 而非官方腳本？

• A簡: IFRAME 隔離影響、結構穩定；腳本則易阻塞與衝突。
• A詳: 官方腳本以 document.write/eval 注入 HTML，排錯困難且受載入時序影響。IFRAME 具天然隔離，對主頁 DOM 與 CSS 影響小；伺服端直接輸出 IFRAME 也讓參數生成更可控，整體穩定性與除錯性更佳。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q2, B-Q8

Q22: 什麼是 PostView.ascx？

• A簡: 顯示單篇文章的佈景 User Control，可插入自訂標記。
• A詳: PostView.ascx 是 BlogEngine 主題中的使用者控制項，負責渲染單篇文章內容與周邊元素。本文在此處以內嵌 C# 產生 FunP 需要的參數與 IFRAME/連結，將推文按鈕加入文章模板，是整合外部服務的關鍵點。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: C-Q1, B-Q10

Q23: 什麼是 archive.aspx？

• A簡: 封存頁，按分類列出歷史文章，本文改顯示推文次數。
• A詳: archive.aspx 用於顯示部落格的文章封存清單，通常按日期或分類列出多篇文章。本文將其原本的 Rating 呈現改為 FunP 推薦次數，並以 IFRAME 方式嵌入，讓列表與單篇一致使用社群互動指標。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: C-Q3, B-Q7

Q24: FunP 的 s 參數作用為何？

• A簡: 控制按鈕樣式或尺寸，依需求選用不同值。
• A詳: 文中示例使用 s=1 與 s=12，對應 FunP 提供的不同按鈕樣式或尺寸設定。作者在單篇頁與封存頁採不同 s 值，以配合可用寬高與呈現密度。實際可參考 FunP 工具頁的樣式定義來選擇適當值。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q16, C-Q3

Q25: 為何封存頁使用較小樣式的推文按鈕？

• A簡: 列表密度高需節省空間，降低版面負擔與干擾。
• A詳: 封存頁同時顯示大量文章，若使用較大按鈕，會增加佈局壓力與渲染成本。選擇較小樣式（如 s=12）搭配較小 width/height，有助維持列表可讀性與效能，並避免過度搶眼影響閱讀主線。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q20, B-Q15

Q26: 什麼是 Post.AbsoluteLink？

• A簡: 指向文章的絕對 URL，用於組合推文目標連結。
• A詳: 在 BlogEngine 的 Post 物件中，AbsoluteLink 提供可公開訪問的文章完整網址。本文以它來填入 FunP 的 url 參數，確保推文與推薦按鈕正確地對應到該文章頁面。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q11, C-Q1

Q27: 為何摘要長度限制在 70 字？

• A簡: 控制提交欄位長度與可讀性，避免過長冗贅。
• A詳: 提交至 FunP 的摘要有限長度，且過長會影響讀者判斷。本文將純文字內文截斷為最多 70 字並加上省略號，取得精簡摘要，既保資訊量又避免截斷不當造成可讀性下降。實作上於伺服端完成再編碼。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q4, C-Q9

Q28: 為何將分類轉換成 tags[] 帶到 FunP？

• A簡: 以現有分類當作標籤，簡化維護與提交流程。
• A詳: 作者決定不再顯示 Tags，以分類為主。為仍能在 FunP 提交時具備標籤語意，將每個分類名稱依序加入 query string 的 tags[] 參數，達到「以分類代替標籤」的折衷，兼顧簡潔介面與社群分類能力。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q5, C-Q2

Q&A 類別 B: 技術原理類

Q1: FunP 官方按鈕腳本如何運作？

• A簡: 以前端腳本動態插入 HTML/IFRAME，呈現推薦按鈕。
• A詳: 官方工具提供一段 script，於瀏覽器端執行 document.write 或 eval 等方式，產生含參數的 HTML 片段，最終多為 IFRAME 指向 FunP 的按鈕服務。流程：頁面載入→執行腳本→插入按鈕→與 FunP 溝通顯示數據。組件：script 標籤、FunP 按鈕服務、IFRAME 容器。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q8, B-Q2

Q2: 直接輸出 IFRAME 的工作原理是什麼？

• A簡: 伺服端直接產生 IFRAME HTML，指向 FunP 服務。
• A詳: 以伺服端組合 url 與樣式參數後，直接輸出 IFRAME 標籤，讓瀏覽器載入外部按鈕頁。流程：伺服端生成參數→輸出 IFRAME→瀏覽器載入 FunP→顯示推薦元件。組件：伺服端程式、IFRAME、FunP 按鈕頁。優點是結構穩定、除錯簡單，避開前端腳本風險。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q7, A-Q21

Q3: PostView.ascx 中推文參數如何準備？

• A簡: 先取純文字、截斷與編碼，再組合 url、s、t、tags[]。
• A詳: 步驟：1) Regex 去除 HTML 得純文字；2) 取前 70 字加省略；3) 分別對連結、標題、摘要 URL 編碼；4) 遍歷分類，組 tags[]=分類名（亦需編碼）；5) 在頁面輸出 IFRAME 與提交連結。組件：Regex、Server.UrlEncode、BlogEngine Post 屬性。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q10, C-Q1

Q4: EncodedPostBody 生成流程與字數控制？

• A簡: 去標籤→截斷 70 字→加「…」→URL 編碼。
• A詳: 技術流程：使用 Regex 移除 HTML 標籤，以避免標籤破壞摘要；以 Substring 取前 70 字，若超長則結尾加「…」；最後用 Server.UrlEncode 轉為可傳輸形式。重點是順序：先清洗再截斷，避免 HTML 殘片導致長度與可讀性問題。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q27, C-Q9

Q5: TagsQueryString 的生成規則是什麼？

• A簡: 迭代分類，為每個分類加入「&tags[]=名稱」。
• A詳: 根據 Post.Categories 集合，逐一以 URL 編碼加入 tags[] 參數，形如「&tags[]=Dev&tags[]=ASP.NET」。流程：遍歷→編碼→串接。核心組件：BlogEngine.Core.Category、Server.UrlEncode。注意避免多餘與錯誤分隔。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q28, C-Q2

Q6: 以超連結提交（add.php）的運作機制？

• A簡: 將資料以 query string 預填表單，導向 FunP 提交頁。
• A詳: 以 導向到 FunP 的 add.php，帶入 url、s（標題）、t（摘要）與 tags[]，FunP 解析後自動填入提交表單。流程：使用者點擊→跳轉 FunP→預填成功→使用者確認送出。關鍵是正確編碼與參數名稱。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q18, C-Q2

Q7: 在 archive.aspx.cs 替換 Rating 的原理？

• A簡: 以 IFRAME HTML 取代原 Rating 欄位，嵌入 FunP。
• A詳: 在生成列表的程式流程中，建立 HtmlTableCell，指定 InnerHtml 為 IFRAME 字串，src 指向 FunP 按鈕 URL 並帶文章連結與樣式參數，最後加入表格列。關鍵步驟：判斷啟用 Rating→建 cell→填 IFRAME HTML→加入 row。組件：HtmlTableCell、InnerHtml、IFRAME。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: C-Q3, A-Q16

Q8: 為何避免 document.write/eval 等前端插入？

• A簡: 阻塞渲染、錯誤不明、相容性差，易破壞版面。
• A詳: document.write 會在解析過程插入字串，遇到慢速或中斷會卡住，eval 又增加安全與除錯困難。多個外部腳本同頁更易衝突。伺服端直輸與 IFRAME 隔離能降低時序依賴與衝突面，提升穩定性與可維護性。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q8, D-Q2

Q9: 多 IFRAME 的資源與渲染行為如何影響效能？

• A簡: 觸發大量請求與重繪，受瀏覽器連線數限制影響。
• A詳: 每個 IFRAME 是獨立文件，會建立 HTTP 請求、解析 DOM、繪製內容。瀏覽器對單一網域並行數有限，過量 IFRAME 導致排隊與延遲，還會增加重排重繪次數。IE 尤甚。需控制數量、延遲載入或改為暫位圖示。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: A-Q20, D-Q1

Q10: 如何在 Theme 中插入自訂 HTML/程式碼？

• A簡: 於 ascx 內嵌 C# 生成字串，輸出 HTML 片段。
• A詳: 在 PostView.ascx 等模板透過 <% %> 內嵌 C#，可使用 Regex、UrlEncode 等 API 組合參數，最後以標準 HTML（如 IFRAME、A）輸出。流程：準備資料→組合參數→輸出標記。組件：ASCX、Code-behind/inline、BlogEngine API。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: C-Q1, C-Q2

Q11: BlogEngine.Core.Post 常用屬性有哪些？

• A簡: Title、Content、Categories、AbsoluteLink 等。
• A詳: 整合外部服務時，常用 Post.Title（標題）、Post.Content（含 HTML 的內文）、Post.Categories（分類集合）、Post.AbsoluteLink（文章完整網址）。搭配伺服端工具（UrlEncode、Regex）即可生成推文所需參數。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q26, C-Q1

Q12: Server.UrlEncode 對查詢字串的影響？

• A簡: 安全轉碼特殊字元，防止解析錯誤與亂碼。
• A詳: 查詢字串中空白、中文、符號需轉成 %HH 格式。Server.UrlEncode 提供可靠編碼，避免 FunP 端解析失敗或鍵值錯位。用於 url、標題、摘要與 tags[] 值。注意重複編碼與字元集一致性。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q9, D-Q4

Q13: 用正則剝離 HTML 的限制與替代？

• A簡: 正則易遇邊界案例；可改用 HTML Parser。
• A詳: 簡單模式可剝離大多標籤，但對嵌套、註解、script/style 內容不精準。若摘要品質要求更高，建議採 HTML 解析器取得純文字與解碼實體，或先移除特定區塊再正則處理，降低破碎風險。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: D-Q5, C-Q4

Q14: 版面調整與功能取捨的架構考量？

• A簡: 聚焦單一互動、簡化元素、保障穩定與效能。
• A詳: 架構上應以使用情境為核心：保留能帶來明確價值的元件（FunP），移除重複或干擾性元件（Rating、Tags），調整資訊架構（分類位置）並加入必要的法務訊息（智財權），最終同時兼顧體驗與效能。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q12, A-Q13

Q15: IFRAME 的 width/height/scrolling 等參數作用？

• A簡: 控制顯示尺寸與滾動行為，匹配版位需求。
• A詳: width/height 決定框尺寸；frameBorder=0 去邊框；scrolling=no 禁滾動；marginWidth/Height 控制內距。這些參數讓嵌入按鈕在各版位（單篇與封存）都能精準對齊與不干擾其他元素。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q25, C-Q5

Q16: s 參數如何影響 FunP 按鈕顯示？

• A簡: 切換按鈕樣式或大小，應依官方工具對照。
• A詳: 文中示例使用 s=1 與 s=12。不同 s 值對應 FunP 定義的按鈕樣式集合，可能包含尺寸、字樣或佈局差異。實作時需按版面密度與可讀性選擇相符樣式，並與 IFRAME 寬高協同配置。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q24, C-Q3

Q17: 生成精簡摘要的策略與風險？

• A簡: 固定字數截斷簡單快速，但可能截斷多位元字。
• A詳: 固定長度截斷配省略號能確保字數控制，但對多位元字（例如表情、合字）或語句完整性有風險。可考慮以詞邊界或 Unicode 感知的截斷、或先解碼再以語句切割，平衡簡易與品質。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: D-Q5, C-Q9

Q18: 多頁載入與網路層面的影響？

• A簡: 大量外部請求受併發限制，延遲與失敗機率上升。
• A詳: 同網域連線存在上限，大量 IFRAME 指向同服務會造成排隊；網路抖動下易超時或慢速，影響整體渲染。可透過分頁、合併請求（如改輕量 API）、或延遲載入策略改善。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: A-Q20, D-Q1

Q19: 推文按鈕擺放的資訊架構考量？

• A簡: 靠近標題或摘要，提高可見性與操作意圖。
• A詳: 將推文按鈕放於文章標題附近或摘要區，能讓讀者在判斷價值後立即操作，配合一致的樣式與尺寸策略（單篇大、列表小），提升轉換率並減少干擾。與減項策略（只留 FunP）相輔相成。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q14, C-Q5

Q20: 伺服端生成與前端渲染的取捨？

• A簡: 伺服端穩定可控，前端彈性高但風險高。
• A詳: 伺服端生成可確保輸出穩定、參數可控、除錯簡單；前端渲染可延遲載入與動態控制，但受外部腳本時序與相容性影響大。本文選擇伺服端輸出 IFRAME/連結，以穩定與簡化為優先，符合部落格場景。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q21, B-Q8

Q&A 類別 C: 實作應用類

Q1: 如何在 PostView.ascx 加入 FunP 推文按鈕？

• A簡: 於 ascx 內嵌 C# 組參數，直接輸出 IFRAME 標籤。
• A詳: 步驟：1) 以 Regex 去 HTML 得純文字；2) 截斷摘要至 70 字；3) 對 AbsoluteLink、Title、摘要做 UrlEncode；4) 生成 tags[] 查詢字串；5) 輸出 IFRAME src 指向 funp.com/tools/buttoniframe.php?url=…&s=1。程式碼要點：使用 Post.Title、Post.Content、Post.AbsoluteLink、Post.Categories 取得資料。注意：確認寬高與樣式一致。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q3, B-Q2

Q2: 如何生成預填資訊的 FunP 提交連結？

• A簡: 組合 url、s、t、tags[] 參數，輸出 。
• A詳: 步驟：1) 先產出 EncodedAbsoluteLink、EncodedPostTitle、EncodedPostBody、TagsQueryString；2) 組 href 指向 funp.com/push/submit/add.php?url={}&s={}&t={}{}&via=tools；3) 以圖示或文字做為連結內容。關鍵片段：<a href="...">貼到funP</a>。注意：所有值需 UrlEncode，tags[] 多值正確串接。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q6, A-Q18

Q3: 如何在 archive.aspx.cs 以推文取代 Rating？

• A簡: 在表格列新增儲存格，InnerHtml 放入 IFRAME。
• A詳: 步驟：1) 在生成列表時判斷是否顯示評分欄；2) 建立 HtmlTableCell rating；3) 指定 rating.InnerHtml 為 FunP IFRAME HTML，src 帶 post.AbsoluteLink 與 s=12；4) 設定 CSS 類別與寬高；5) 加入列。注意：批量 IFRAME 數量大，評估分頁或延遲載入。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q7, A-Q25

Q4: 如何以 Regex 去除文章 HTML 取得純文字？

• A簡: 使用模式「<[^>]*>」替換為空字串。
• A詳: 步驟：1) 建立 Regex(@”<[^>]*>”, Compiled)；2) var text = regex.Replace(Post.Content, "");；3) 視需要 HtmlDecode；4) 截斷長度與加省略；5) UrlEncode。注意：正則對複雜 HTML 有風險，必要時改 Parser。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q13, D-Q5

Q5: 如何設定按鈕尺寸與對齊版面？

• A簡: 選擇合適 s 值，搭配 IFRAME 寬高與 CSS 對齊。
• A詳: 步驟：1) 依版位選 s（單篇大、列表小）；2) 設定 IFRAME width/height 與 scrolling=no；3) 設定容器 CSS（如 class=”rating”）控制對齊與間距；4) 測試各瀏覽器呈現。注意：避免寬高不符造成裁切或空白。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q15, A-Q24

Q6: 如何移除其他社群書籤僅保留 FunP？

• A簡: 刪除主題中其他外掛標記與腳本，只輸出 FunP。
• A詳: 步驟：1) 檢視 Themes 模板（Master、ascx）移除黑米、MyShare 等程式碼；2) 清除相關 CSS 與 JS；3) 保留 FunP IFRAME 與提交連結；4) 驗證版面與載入時間。注意：避免殘留無用資源影響載入與維護。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q13, D-Q2

Q7: 如何將分類移至右上並移除標籤顯示？

• A簡: 調整主題版位，刪除 Tags 區塊，搬移 Categories 區塊。
• A詳: 步驟：1) 在 Master/SideBar 控制項中找到 Tags/Category 控制項；2) 移除 Tags 標記；3) 將 Categories 控制項移至右上目標容器；4) 調整 CSS 以符合新位置；5) 驗證各頁一致性。注意：避免動到資料層，只變更視圖。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q11, A-Q12

Q8: 如何加入智財權聲明區塊？

• A簡: 在頁尾或文章區塊加自訂 HTML，註明授權與出處。
• A詳: 步驟：1) 於主題頁尾或 Post 模板加入自訂 DIV；2) 填寫版權與授權說明；3) 加上原文連結與禁止未授權轉載說明；4) 設計易見但不干擾的樣式。注意：內容清晰、位置一致，可搭配 rel 属性。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q15

Q9: 如何控制摘要長度並加省略號？

• A簡: 判斷長度大於門檻時字串截斷並加「…」。
• A詳: 步驟：1) 取得純文字；2) 設定 maxLength=70；3) 若 text.Length>70，取 text.Substring(0,70)+”…“；4) UrlEncode；5) 帶入提交參數。注意：考慮 Unicode 邊界，避免截斷 surrogate pair。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q4, B-Q17

Q10: 封存頁大量推文按鈕如何最佳化？

• A簡: 分頁、延遲載入或簡化呈現，降低 IFRAME 數量。
• A詳: 實作：1) 啟用分頁或按月份展開；2) 以 IntersectionObserver 延遲載入 IFRAME（進階可改為點擊載入）；3) 列表以輕量圖示替代，即點即開提交頁；4) 伺服端/快取合併；5) 測試 IE 等瀏覽器效能。注意：避免同時載入數百 IFRAME。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: D-Q1, B-Q9

Q&A 類別 D: 問題解決類

Q1: 多個 IFRAME 導致 IE 卡頓怎麼辦？

• A簡: 降低同頁 IFRAME 數，分頁或延遲載入改善。
• A詳: 症狀：封存頁載入慢、滾動卡、頁面未回應。原因：大量 IFRAME 造成連線與渲染壓力。解法：列表分頁、按分類/月份展開；延遲載入 IFRAME；以輕量圖示替換；調小樣式與尺寸。預防：限制上限、壓測不同瀏覽器。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q20, C-Q10

Q2: 使用官方 script 造成版面掛掉怎麼處理？

• A簡: 改採伺服端輸出 IFRAME/連結，避免 document.write。
• A詳: 症狀：載入半途版面錯位、空白或卡住。原因：外部腳本阻塞、相容性差或錯誤。解法：移除官方 script，改伺服端組參數輸出 IFRAME/超連結；加載失敗備援（顯示文字連結）。預防：減少外掛來源，統一使用 FunP。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q8, C-Q6

Q3: 推文按鈕不顯示或顯示錯誤網址？

• A簡: 檢查 url 參數與編碼，確認 IFRAME src 正確。
• A詳: 症狀：按鈕空白、連到錯誤頁。原因：url 未編碼、絕對連結錯誤、引號或 & 轉義不當。解法：用 Server.UrlEncode；檢查 AbsoluteLink；確認 HTML 轉義；測試單一樣式值（s）。預防：封裝共用函式與單元測試參數。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q12, C-Q1

Q4: 預填標題或摘要出現亂碼怎麼辦？

• A簡: 確認編碼一致並對值做 URL 編碼。
• A詳: 症狀：提交頁出現問號或亂碼。原因：未 UrlEncode、編碼不一致、重複編碼。解法：確保以同一編碼（如 UTF-8）與 Server.UrlEncode；避免雙重編碼；檢查伺服器/頁面宣告。預防：建立編碼規範與工具函式。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q9, C-Q2

Q5: Regex 去 HTML 導致文字破碎如何改善？

• A簡: 改用 HTML Parser 或先解碼再智能截斷。
• A詳: 症狀：摘要殘缺、字元被切斷。原因：正則對複雜標籤不精準；多位元字被截斷。解法：用 HTML 解析器取純文字；用 Unicode-aware 截斷；先 HtmlDecode 再處理。預防：設定最小完整詞長與標點優先截斷。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q13, B-Q17

Q6: 點擊提交連結後參數未帶入 FunP？

• A簡: 檢查參數名稱（url/s/t/tags[]）與串接順序。
• A詳: 症狀：提交頁未自動填表。原因：參數名錯誤、& 與 ? 錯位、未編碼或遺漏 tags[]。解法：校對 href 結構：add.php?url=…&s=…&t=…&tags[]=…；確保每個值 UrlEncode。預防：以模板函式統一產生連結。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q6, C-Q2

Q7: 封存頁載入過慢如何改善？

• A簡: 分頁、延遲載入、縮小樣式或改為按需載入。
• A詳: 症狀：列表載入時間長。原因：數百 IFRAME 同步載入。解法：分頁或分段展開；用懶載入；將按鈕簡化為點擊才載入 IFRAME 或直接連 add.php。預防：限制每頁文章數量、快取渲染結果。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q20, C-Q10

Q8: 外部腳本或 IFRAME 影響 CSS 版面怎麼辦？

• A簡: 使用 IFRAME 隔離與嚴謹容器樣式控制。
• A詳: 症狀：按鈕擠壓文本、溢出。原因：容器尺寸與外部內容不匹配。解法：設定固定 width/height、overflow 隱藏；使用 class 控制對齊；確保 scrolling=no；必要時在小螢幕改為文字連結。預防：各瀏覽器測試與響應式樣式。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q15, C-Q5

Q9: 替換 Rating 後樣式錯位如何修正？

• A簡: 調整原 rating CSS 或新增對應類別與尺寸。
• A詳: 症狀：欄位寬度不符、對齊跑掉。原因：原 CSS 為星等評分設計。解法：保留/重用 class=”rating”，重設寬高、行高與內距；針對 IFRAME 設 display 與 margin；逐行驗證表格佈局。預防：設計可替換的通用容器樣式。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: C-Q3, B-Q15

Q10: tags[] 帶入多語系名稱不生效怎麼辦？

• A簡: 確認正確 UrlEncode 與多值格式，避免編碼混亂。
• A詳: 症狀：非 ASCII 標籤消失或錯亂。原因：未編碼或伺服器編碼不一致。解法：對每個 tags[] 值單獨 UrlEncode；檢查字元集與回應標頭；測試中文、符號案例。預防：統一 UTF-8 與建立自動化測試。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q12, A-Q28

學習路徑索引

• 初學者：建議先學習哪 15 題
  • A-Q1: 什麼是 BlogEngine.NET？
  • A-Q2: 什麼是 FunP 推推王？
  • A-Q5: 什麼是社群書籤／推文按鈕？
  • A-Q6: 為什麼捨棄內建 Rating 機制改用推文？
  • A-Q7: 什麼是 IFRAME？本案例中用途為何？
  • A-Q8: Client-side 腳本與 Server-side 直接輸出的差異？
  • A-Q9: 什麼是 URL 編碼？為何需要？
  • A-Q10: 什麼是使用 Regex 去除 HTML？
  • A-Q11: Tags 與 Categories 差異為何？為何取捨？
  • A-Q12: 為何將分類移到右上？
  • A-Q13: 為何僅保留一種社群書籤？
  • A-Q14: 推文按鈕取代計數器有何意義？
  • A-Q16: 在封存頁用推文取代 Rating 的價值？
  • A-Q22: 什麼是 PostView.ascx？
  • A-Q23: 什麼是 archive.aspx？
• 中級者：建議學習哪 20 題
  • B-Q1: FunP 官方按鈕腳本如何運作？
  • B-Q2: 直接輸出 IFRAME 的工作原理是什麼？
  • B-Q3: PostView.ascx 中推文參數如何準備？
  • B-Q4: EncodedPostBody 生成流程與字數控制？
  • B-Q5: TagsQueryString 的生成規則是什麼？
  • B-Q6: 以超連結提交（add.php）的運作機制？
  • B-Q7: 在 archive.aspx.cs 替換 Rating 的原理？
  • B-Q8: 為何避免 document.write/eval 等前端插入？
  • B-Q10: 如何在 Theme 中插入自訂 HTML/程式碼？
  • B-Q11: BlogEngine.Core.Post 常用屬性有哪些？
  • B-Q12: Server.UrlEncode 對查詢字串的影響？
  • C-Q1: 如何在 PostView.ascx 加入 FunP 推文按鈕？
  • C-Q2: 如何生成預填資訊的 FunP 提交連結？
  • C-Q3: 如何在 archive.aspx.cs 以推文取代 Rating？
  • C-Q4: 如何以 Regex 去除文章 HTML 取得純文字？
  • C-Q5: 如何設定按鈕尺寸與對齊版面？
  • D-Q3: 推文按鈕不顯示或顯示錯誤網址？
  • D-Q4: 預填標題或摘要出現亂碼怎麼辦？
  • D-Q9: 替換 Rating 後樣式錯位如何修正？
  • A-Q24: FunP 的 s 參數作用為何？
• 高級者：建議關注哪 15 題
  • A-Q20: 同頁多個 IFRAME 的效能問題是什麼？
  • B-Q9: 多 IFRAME 的資源與渲染行為如何影響效能？
  • B-Q17: 生成精簡摘要的策略與風險？
  • B-Q18: 多頁載入與網路層面的影響？
  • B-Q20: 伺服端生成與前端渲染的取捨？
  • C-Q10: 封存頁大量推文按鈕如何最佳化？
  • D-Q1: 多個 IFRAME 導致 IE 卡頓怎麼辦？
  • D-Q2: 使用官方 script 造成版面掛掉怎麼處理？
  • D-Q5: Regex 去 HTML 導致文字破碎如何改善？
  • D-Q6: 點擊提交連結後參數未帶入 FunP？
  • D-Q7: 封存頁載入過慢如何改善？
  • D-Q8: 外部腳本或 IFRAME 影響 CSS 版面怎麼辦？
  • D-Q10: tags[] 帶入多語系名稱不生效怎麼辦？
  • A-Q21: 為何選 IFRAME 而非官方腳本？
  • A-Q28: 為何將分類轉換成 tags[] 帶到 FunP？