部落格主題更新
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>

**圖 3-1**:Militia 示意圖。[<來源>][photo of infantry]
結語
部落格主要是書寫下自己的近況和學習的筆記,能有一個良好的閱讀體驗是我所追求的。利用過年至今得閒餘時間,開始整頓部落格主題,也總算在今天算是告一段落,之後會把這些時間拿來繼續寫文章與筆記。也希望這樣的改變能讓訪客有良好的體驗囉。