深藏若虛

部落格主題更新

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 技巧繞果以實現這個功能。只要在圖片、表格、程式碼前分別加入 classfiguretablecode 的空 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 , ,