我沒(méi)有專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)功底，所以現(xiàn)在聊優(yōu)化文章的頁(yè)面排版，也僅僅只是從這幾年的使用經(jīng)驗(yàn)出發(fā)，來(lái)分享點(diǎn)自己的實(shí)際使用體驗(yàn)。

并且，我沒(méi)做過(guò)專業(yè)的前端頁(yè)面開(kāi)發(fā)工作（后端出生），所以現(xiàn)在我搭建網(wǎng)站，一般的步驟是先把網(wǎng)站搭建起來(lái)，再直接導(dǎo)入一個(gè)現(xiàn)成的網(wǎng)頁(yè)模板。然后再在模板的基礎(chǔ)上進(jìn)行優(yōu)化，基本上一個(gè)頁(yè)面設(shè)計(jì)精良的網(wǎng)頁(yè)也能很快就做好。

當(dāng)然，中間有一些實(shí)在不會(huì)的裝修點(diǎn)，比如圖片的布局設(shè)計(jì)、網(wǎng)站 LOGO 的設(shè)計(jì)等等，就直接花點(diǎn)錢請(qǐng)人幫我弄好了。省得費(fèi)那份心思，畢竟自己做的遠(yuǎn)沒(méi)有別人做的好看。

即便這樣，將網(wǎng)站所有大的問(wèn)題都解決掉，但在平時(shí)的運(yùn)營(yíng)過(guò)程，還是會(huì)發(fā)現(xiàn)一些需要優(yōu)化的細(xì)節(jié)點(diǎn)需要注意。

這里就拿自己的博客為案例進(jìn)行說(shuō)明。

有沒(méi)有發(fā)現(xiàn)，同樣一篇文章里，將內(nèi)容復(fù)制到 WordPress 的文章編輯區(qū)內(nèi)，兩張圖片在加上圖片注釋之后，與下方文字的下邊距不一樣。且上面的圖片并沒(méi)有拉滿整個(gè)屏幕，從某種程度上講，有點(diǎn)影響整個(gè)文章頁(yè)面的布局美觀。

其實(shí)這里就涉及到一個(gè)新小的優(yōu)化點(diǎn)，文章圖片的問(wèn)題。這里簡(jiǎn)單講講原理，再重點(diǎn)說(shuō)說(shuō)做法。

WordPress 系統(tǒng)會(huì)根據(jù)你上傳圖片尺寸的大小，來(lái)對(duì)圖片進(jìn)行分類。比如你可以看看在網(wǎng)站設(shè)置區(qū)域的“圖片大小”設(shè)定，這是 WordPress 系統(tǒng)對(duì)圖片進(jìn)行分類的依據(jù)。

比如像剛剛的那個(gè)案例，造成圖片下邊距不一樣的原因，就是因?yàn)閮蓮垐D片的尺寸不一樣，上傳之后，WordPress 對(duì)圖片的分類自然就會(huì)不同。

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

正是因?yàn)檫@個(gè)原因，導(dǎo)致 WordPress 給圖片加的“類屬性”不一樣，自然就導(dǎo)致了不一樣的展示效果。

有沒(méi)有好的解決方案呢？

我這里簡(jiǎn)單說(shuō)兩種解決方案。

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

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

以上這些頁(yè)面排版優(yōu)化的內(nèi)容，也是我今天碰到這樣的問(wèn)題，經(jīng)過(guò)與人交流溝通，再搜索相關(guān)技術(shù)原理而總結(jié)出來(lái)的。實(shí)話說(shuō)，之前并沒(méi)有注意到這樣一些細(xì)節(jié)點(diǎn)，但也正是在不斷的實(shí)踐中、不斷的犯錯(cuò)中，才會(huì)不斷成長(zhǎng)。