深藏若虛

部落格主題更新

Update Blog Theme on Feb. 2017

本部落格從 2017-01-31 開始，陸續針對主題（Theme）的程式碼進行重構、除蟲，也稍微更動了版面設計的部分。

更新要點

外觀
  • 更動文章發佈日期的格式。
  • 更動表格（Table）的樣式風格。
  • 更動強調（Emphasis）文字的樣式風格。
  • 更動行內程式碼的樣式風格。
  • 更動網站頁腳（Foooter）作者文字的樣式風格。
  • 更動列印頁面時，程式碼區塊的風格樣式。
  • 新增圖片（Figure）和表格（Table）的標題樣式。
  • 新增 Facebook 至網站頁腳（Foooter）社交平台選項。
程式
  • 修復已發布非公開文章會在首頁頭條文章出現的漏洞。
  • 重構程式碼，將 HTML 與 PHP 邏輯分離。
  • 重構網站頁腳（Foooter）社交平台引入的程式碼。
  • 建立主題專用模型（Model）取代直接呼叫 WordPress API。
  • 更新 Disqus 的引入程式碼。
  • 更動 Disqus 文章頁面參數的定義。
  • 更動 Disqus 的引入時機，只有文章屬於公開發布狀態時才會引入 Disqus。
  • 更動 Disqus ID 的取得方式，由寫死在程式碼中改為從主題的欄位讀取。
  • 申請新的 Disqus ID ，以分離 Production 和 Development 環境的留言空間。

文章樣式更動展示

文章發佈日期格式

首頁文章顯示的日期格式原為F j, Y H:i:s，如「February 14, 2017 02:01:17」、「二月 14, 2017 02:01:17」；文章頁面的顯示日期為Y 年 m 月 j 日，如「2017 年 02 月 14 日」。現在統一改為由文章模型輸出，格式為Y-m-d H:i:s，顯示如「2017-02-04 02:01:17」，並在 title 屬性設置為 Y 年 n 月 j 日 H:i:s，顯示如「2017 年 2 月 4 日 02:01:17」。

表格、圖片、程式碼

表格標題列的背景色做了調整，由#e0e0e0 加深至 #cccccc，並修正偶數列會沒有背景色的錯誤。

另外新增了如論文寫作圖片與表格會有用來作為編號與說明的標題。但因為本身是使用 Markdown 進行寫作，如果 Markdown 語法包在 HTML 語法中，就會視為一般來說文字，不會轉換成 HTML 標籤。所以這邊利用 CSS 技巧繞果以實現這個功能。只要在圖片、表格、程式碼前分別加入 class 有 figure、table 和 code 的空 div 標籤即可達到效果，如下：

圖 2-1：圖片標題示例

表 2-1：表格標題示例

原文 傳統 HD 工作坊
Militia 民兵 民兵 民兵
Man-at-Arms 裝甲步兵 劍士 裝甲步兵
Long Swordsman 長劍兵 長劍士 長劍兵
Two-Handed Swordsman 雙手劍兵 雙手劍士 雙手劍兵
Champion 劍兵勇士 冠軍劍士 劍兵勇士

程式碼的展示效果請見 2.5 節。

強調（Emphasis）文字

在修飾字句的方法上，有分為強調（emphasis）和重點（strong），這兩種方法預設的表現方式為斜體（Italic）和粗體（bold）。強調表示內容的著重點（stress emphasis），通常代表該字句語氣加重，隨著放置的位置不同，可能會改變所在句子的含義。重點用以凸顯內容的重要性（strong importance），且不會改變所在句子的語意。

而本部落格有採用漢字標準格式，所以修飾中文字的強調（emphasis）是使用著重號來呈現。本次更新則稍微更動了顏色，讓樣式風格從黑色調整為深紅色。如下：

我想知道這件事是怎麼發生的？

行內程式碼

原本的行內程式碼是灰底黑字，和一般文字相比較無能明顯辨別不同的特徵，所以在本次更新中，將字體改為紅色，且調淡灰底保持其為程式碼的象徵。如 code。

列印模式下的程式碼

原本並沒有針對這部份做調整，導致本來是暗底亮字的程式碼到了列印後會失去底色，導致顯示不清。這次更新則是將列印模式下的程式碼，採用 Visual Studio 亮底的程式碼高亮風格，也讓過長的程式碼會自動換行。如此更動希望能讓有需要將部落格文章列印或存成 PDF 離線備讀的訪客，在程式碼依然能有良好體驗。可用下方程式碼作為範例：

程式碼 2-1：圖片標題程式碼暨程式碼標題示例

<div class="figure"></div>

![](http://s14.directupload.net/images/141110/dsufth2l.png)

**圖 3-1**：Militia 示意圖。[<來源>][photo of infantry]

結語

部落格主要是書寫下自己的近況和學習的筆記，能有一個良好的閱讀體驗是我所追求的。利用過年至今得閒餘時間，開始整頓部落格主題，也總算在今天算是告一段落，之後會把這些時間拿來繼續寫文章與筆記。也希望這樣的改變能讓訪客有良好的體驗囉。

General , ,