前端问题

怎么优化文章的页面排版

我没有专业的网页设计功底,所以现在聊优化文章的页面排版,也仅仅只是从这几年的使用经验出发,来分享点自己的实际使用体验。

并且,我没做过专业的前端页面开发工作(后端出生),所以现在我搭建网站,一般的步骤是先把网站搭建起来,再直接导入一个现成的网页模板。然后再在模板的基础上进行优化,基本上一个页面设计精良的网页也能很快就做好。

当然,中间有一些实在不会的装修点,比如图片的布局设计、网站 LOGO 的设计等等,就直接花点钱请人帮我弄好了。省得费那份心思,毕竟自己做的远没有别人做的好看。

即便这样,将网站所有大的问题都解决掉,但在平时的运营过程,还是会发现一些需要优化的细节点需要注意。

这里就拿自己的博客为案例进行说明。

前端问题
前端问题

有没有发现,同样一篇文章里,将内容复制到 WordPress 的文章编辑区内,两张图片在加上图片注释之后,与下方文字的下边距不一样。且上面的图片并没有拉满整个屏幕,从某种程度上讲,有点影响整个文章页面的布局美观。

其实这里就涉及到一个新小的优化点,文章图片的问题。这里简单讲讲原理,再重点说说做法。

图片设置
图片设置

WordPress 系统会根据你上传图片尺寸的大小,来对图片进行分类。比如你可以看看在网站设置区域的“图片大小”设定,这是 WordPress 系统对图片进行分类的依据。

比如像刚刚的那个案例,造成图片下边距不一样的原因,就是因为两张图片的尺寸不一样,上传之后,WordPress 对图片的分类自然就会不同。

第一张图片的最大宽度(或者高度)并没有超过 900 像素,所以会被分类为“中等大小图片”,而第二张图片的最大宽度(或者高度)有超过 900 像素,所以会被分类为“大尺寸图片”。

问题原因
问题原因

正是因为这个原因,导致 WordPress 给图片加的“类属性”不一样,自然就导致了不一样的展示效果。

有没有好的解决方案呢?

我这里简单说两种解决方案。

第一种,将网站文章所用到的图片,采用统一的排版方式。比如,所有的图片都经过 PS 加工,其宽度都是 1024 像素,或者是 1200 像素。这样经过加工之后的图片,上传之后其展示效果自然也就一样了,目前我的内容站都是采用的这种方式。

第二种,修改 WordPress 默认的大图片尺寸的最大宽度值,比如系统默认值是 1024,但是我给修改成了 900。那只要下次我上传 900 像素的图片时,系统便会将图片设置成大尺寸图片(而非之前的中等图片),从而达到优化效果。这种方式就适合那些不想自己做图片的、想省点事的朋友。

以上这些页面排版优化的内容,也是我今天碰到这样的问题,经过与人交流沟通,再搜索相关技术原理而总结出来的。实话说,之前并没有注意到这样一些细节点,但也正是在不断的实践中、不断的犯错中,才会不断成长。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

滚动至顶部