设计

有时候别人一句评论可能会给当下的你带来一些感触与思考，将这些评论整理出来，时不时的看看或许会有新的感悟，于是制作了基于WordPress完成走心评论。

WordPress响应式博客主题，自适应PC端和手机端，没有花哨的界面，同样也没有复杂的操作与设置，经典耐看，上手非常简单，适合安心写文章的博友。

最近给博客启用了WebP格式图片，如果有WebP格式的图片就展示WebP图片，没有就展示原来的图片。经过比较，最后选择了Images to WebP来实现这个功能。WebP是一种由 Google 开发的现代图像格式，与 PNG 和 JPEG 相比，图像格式能够将文件大小减少30%左右。目前webp可以通过PhotoShop或者Imagine来转换。

WordPress升级到5.9版，在页面head里面被添加了id='global-styles-inline-css'，里面定义了一大段颜色和字体大小样式，看着好像是WordPress的Gutenberg编辑器或者默认主题相关，我自己两个都不用，索性把那大段的样式去掉。

一转眼就要过年了，支付宝一年一度的集五福活动正在如火如荼的进行中，博客怎么的也得添加点喜庆元素。于是就在iconfont里面找了一些福字，来完善喜庆氛围。前些日子研究了波纹扩散的动画，正好结合福字来做一些改变。最终使用的效果如下，鼠标hover上去之后，福字顺时针180°，同时稍微放大一些，寓意“福到家了”。也祝大家新年快乐，福到博友家！

最近将博客上面的小图标都换成了阿里的iconfont字体图标，在替换字体图标的时候我主要体验了Font Awesome和iconfont。本来想使用Font Awesome，它的免费版中有些我想要的图标没有，Pro版虽然多了很多，但是还不全，远没有使用iconfont来的随意，不过Font Awesome搭配了CSS框架，可以更加方便的使用一些css效果，比如：动画、旋转与翻转、组合使用等。总的来说Font Awesome适合快速使用，iconfont适合DIY。

有朋友问我，我博客的logo“威”怎么做的。当然是PhotoShop做的，不过不同的地方使用时用的大小不一样，如果都用PhotoShop去做的话效率有点低，那么使用矢量图进行伸缩同时有能保持清晰度。那么就需要将PS图层转换为AI矢量图。

懒加载或者延迟加载是我们优化前端页面展示常用的手段，网上有很多关于懒加载的js代码，或多或少都不是那么完美，其实从chrome 76之后，支持原生懒加载特性，使用 loading="lazy" 语法就可以实现。

Gravatar头像被墙或者打开缓慢已经是一个老问题了，网上也有很多方法去解决这个问题。通过之前替换secure.gravatar.com的方式使得头像扩大了一倍。从WordPress4.2版开始，引入了scrset，但是原来代码没有考虑这个问题导致的。srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。

在网页设计过程中经常会有一些容易被我们忽略的细节，大部分主流的浏览器会为我们提供一些形如自动完成、自动更正、自动大写、拼写检查、语音输入等人性化特性，但是并不是任何场景下我们都需要这些特性，比如对于电子邮件地址的输入，我们就不需要自动更正、自动大写、拼写检查等特性，而对于用户登录表单，为安全考虑则不希望自动完成的特性存在，今天要介绍的就是这些特性以及如何禁止这些特性的存在。

谷歌对外宣布采用全新的Logo标识，新的Logo仍然为”GOOGLE”六个字母，但字体经过了重新设计，采用了无衬线风格，字体更加圆滑、现代。”GOOGLE”的简化Logo”g”也随之更换，变成了由四种颜色拼接的”G”,这也是Google 1998年诞生以来风格变化最大的一次。

在WordPress后台添加很多一级分类和二级分类之后，后台的分类默认是按照名称排序的，我添加分类的时候就是按照我理想的主次优先顺序添加的，通过修改代码实现后台分类的默认排序按照添加的顺序id排序。