前言
其实一直蛮喜欢好看的设计，就像艺术品一样让人着迷，像身材优雅又波涛汹涌的女人一样让人动心。今天终于静下心来尝试一下把B2的文章模块彻底改造一下，把它变成自己想要的样子。源码均为加密，也都是抄袭了自己喜欢网站的设计。但是请尊重每一份辛勤的付出。以便后续能有更好的作品奉献。
设计计划
柒比贰(7B2)主题的文章模块还是比较强大的，给出了很多需要调用到的钩子函数，剩下的就是如何用这些参数组合出来自己想要的样子。首先，网格模式我复刻了优设网的首页设计，组合模式相较于原版生硬的设计，我觉得美团企业官网的设计更合适，瀑布流选择的是花瓣。列表模式同样选择了美团的新闻中心样式。
文章样式之网格模式
优设网的设计一直是我比较喜爱的，干净整洁。间距，字体大小都控制的刚刚好（美团企业官网也是）。在看完优设的设计，开始着手改造。而且还要考虑到文章分多种不同类型，以及标签的调用。当然还要合理设计文章题目长短带来的影响。总之一句话，每个你看到的结果前都是一段疯狂的代码整理。
使用建议：宽度大于1300px的网页，如果想加入右侧的小工具模块，则可以参考本站的7B2文章聚合模块样式优化。这个模块优化是基于此样式的宽高设计的。可放心使用
文章样式之瀑布流
瀑布流的设计之前尝试过无间距设计。但是由于JS插件的缘故有个小小的BUG导致首次进入页面有大小不等的交错，所以改用间距样式。设计难点在于既要要保留原版的图片懒加载还要保证加载完没有误差。并且加上hover样式把文章的特色数据展示出来。引导用户登录，注册等操作。
二更。在浏览了大量瀑布流的网站以后，发现现在大量的AI素材网站，图片素材网站都是使用的瀑布流，所以考虑把下载功能加上去。说是下载其实就是跳转，或提示登录，或跳转文章详情。
使用建议：建议全宽网站使用，而且在源码设计中也考虑直接放弃了wapper布局，直接让网页全宽，瀑布流的设计初衷就是展示更多的内容给用户。提升用户的浏览量和兴趣。
文章样式之列表模式
相较于原版列表模式的改动不是很大。仅仅做了字体调整，左右样式调整。分类的时候把分类色值调取出来。相较于美图官网的设计，这样式更适合放在跳转后的分页页面。后续也在考虑做分类页面样式优化，把分类列表放在网页的左侧。
使用建议：网页宽度不受限制，任何网站都可以使用。
文章样式之组合模式
相信组合模式的使用几率不会很高。原版的设计适合宽度较小的网站，因为首篇文章会把宽度全部占完。这样的样式偶尔在个人博客里面看到过，而且还是有右侧slider的情况下。在看了美团的设计以后突然发现这个模块稍微改造一番，也可以作为企业网站的一部分展示也挺好。所以也尝试动手做了。
后续遇到的问题
在实际开发中还是有很多问题需要解决的。就比如各种文字颜色，或者新增按钮。尤其是瀑布流的下载和点赞功能，按照比较人性话的用户体验来说，应该直接下载或者弹窗登录，由于能力有限，仅在最大的能力范围内做了调整。当然做了跳转同时，对站长而言增加了用户流量，如果有挂的谷歌推广广告也间接的增加了展示，个有取舍把。然后说下移动端，既然做了PC，移动端肯定不能拉下，由于结构做了大量调整，再加上7B2一直未引入rem，所以调整上已经尽可能的做到了最优。
终极建议
网页设计的最终目的还是为了提高用户体验，好的结构可以更好的留住用户，虽然每个样式拿出来都是不错的设计，但是一定要保证网站整体的设计一直。不然做成了四不像，那就背道而驰了。源码均为作者亲自改动，直接做成了子主题。直接上传主题即可使用不影响后续版本升级，作者联系方式在文章声明处。因为源码提供了较为详细的教程，源码不建议新手随意改动。如需调试，请本着一分劳动一分汗水的原则，适当打赏。
下期就是对7B2幻灯片的大型改版了，有好的项目地址可以联系作者共同学习进步。