怎么優化文章的頁面排版

我沒有專業的網頁設計功底，所以現在聊優化文章的頁面排版，也僅僅只是從這幾年的使用經驗出發，來分享點自己的實際使用體驗。

并且，我沒做過專業的前端頁面開發工作（后端出生），所以現在我搭建網站，一般的步驟是先把網站搭建起來，再直接導入一個現成的網頁模板。然后再在模板的基礎上進行優化，基本上一個頁面設計精良的網頁也能很快就做好。

當然，中間有一些實在不會的裝修點，比如圖片的布局設計、網站 LOGO 的設計等等，就直接花點錢請人幫我弄好了。省得費那份心思，畢竟自己做的遠沒有別人做的好看。

即便這樣，將網站所有大的問題都解決掉，但在平時的運營過程，還是會發現一些需要優化的細節點需要注意。

這里就拿自己的博客為案例進行說明。

有沒有發現，同樣一篇文章里，將內容復制到 WordPress 的文章編輯區內，兩張圖片在加上圖片注釋之后，與下方文字的下邊距不一樣。且上面的圖片并沒有拉滿整個屏幕，從某種程度上講，有點影響整個文章頁面的布局美觀。

其實這里就涉及到一個新小的優化點，文章圖片的問題。這里簡單講講原理，再重點說說做法。

WordPress 系統會根據你上傳圖片尺寸的大小，來對圖片進行分類。比如你可以看看在網站設置區域的“圖片大小”設定，這是 WordPress 系統對圖片進行分類的依據。

比如像剛剛的那個案例，造成圖片下邊距不一樣的原因，就是因為兩張圖片的尺寸不一樣，上傳之后，WordPress 對圖片的分類自然就會不同。

第一張圖片的最大寬度（或者高度）并沒有超過 900 像素，所以會被分類為“中等大小圖片”，而第二張圖片的最大寬度（或者高度）有超過 900 像素，所以會被分類為“大尺寸圖片”。

正是因為這個原因，導致 WordPress 給圖片加的“類屬性”不一樣，自然就導致了不一樣的展示效果。

有沒有好的解決方案呢？

我這里簡單說兩種解決方案。

第一種，將網站文章所用到的圖片，采用統一的排版方式。比如，所有的圖片都經過 PS 加工，其寬度都是 1024 像素，或者是 1200 像素。這樣經過加工之后的圖片，上傳之后其展示效果自然也就一樣了，目前我的內容站都是采用的這種方式。

第二種，修改 WordPress 默認的大圖片尺寸的最大寬度值，比如系統默認值是 1024，但是我給修改成了 900。那只要下次我上傳 900 像素的圖片時，系統便會將圖片設置成大尺寸圖片（而非之前的中等圖片），從而達到優化效果。這種方式就適合那些不想自己做圖片的、想省點事的朋友。

以上這些頁面排版優化的內容，也是我今天碰到這樣的問題，經過與人交流溝通，再搜索相關技術原理而總結出來的。實話說，之前并沒有注意到這樣一些細節點，但也正是在不斷的實踐中、不斷的犯錯中，才會不斷成長。