做SEO这六年，我见过太多站长在友链上栽跟头。很多人觉得友链就是换个链接，其实大错特错。友链不仅是权重的传递，更是你网站门面的一部分。如果友链列表乱成一锅粥，不仅用户体验差，百度蜘蛛爬取的时候也会觉得你这站不专业。
最近有个做建材站的兄弟找我，说他的emlog友链模块全是竖着排的，手机上看简直灾难。他之前自己百度找代码，结果要么样式冲突，要么加载慢得一批。今天我就把压箱底的emlog友情链接分栏代码分享出来，纯手工整理，没有那些花里胡哨的插件，直接改模板文件就能用。
先说下背景，emlog自带的友链模块默认是列表形式，如果友链多了，页面会显得特别长。我们要做的，是用CSS把那些链接变成网格状或者分栏显示。这样不仅整齐，而且显得网站很有条理。
第一步，找到你的友链模板文件。通常在 content/templates/你的模板名/ 目录下，有个 module.php 或者 sidebar.php，具体看你模板怎么写的。找到输出友链的那个循环代码。
第二步，插入分栏容器。别急着写CSS，先改HTML结构。把原来的
- 标签外面包一个
- 加个类名，比如
- 。这一步很关键，很多新手直接改CSS，结果因为结构不对，怎么调都乱。
第三步，写CSS样式。这里才是重头戏。我用的是Flex布局，兼容性比Grid好，毕竟emlog用户群体里还有不少老浏览器用户。代码大概长这样：
.friend-links-wrap {
display: flex;
flex-wrap: wrap;
gap: 10px; / 这个属性比较新，老浏览器不支持可以用margin代替 /
}
.link-item {
flex: 1 1 30%; / 每行大概三个，根据需求调整 /
min-width: 200px;
background: #f9f9f9;
padding: 10px;
border-radius: 4px;
transition: all 0.3s;
}
.link-item:hover {
background: #eef;
transform: translateY(-2px);
}
注意，这里的 flex: 1 1 30% 意思是每个项目尽量占30%宽度，如果放不下就换行。你可以根据自己友链的数量调整这个百分比。比如你只有5个友链，改成 45% 可能更美观。
第四步，处理移动端适配。这一步很多教程都忽略了。在手机屏幕上，分栏可能显得太挤。你需要加个媒体查询：
@media (max-width: 768px) {
.link-item {
flex: 1 1 100%; / 手机上变回单列 /
}
}
这样在电脑上显示分栏，手机上自动变回单列，用户体验瞬间提升。
我有个做外贸B2B的朋友，用了这套emlog友情链接分栏代码后，页面加载速度感觉快了不少，因为CSS比图片加载快，而且结构更清晰。他说百度收录的友链页面速度评分从C提到了B。虽然这不能直接带来排名，但能减少跳出率，间接利于SEO。
再说说细节。有些模板的友链链接是带图片的，有些是纯文字。如果你的友链是文字链接，建议给 标签加个 display: block; 这样点击区域更大，方便用户操作。如果是图片链接，记得设置 max-width: 100%; 防止图片撑破布局。
还有，别为了美观加太多阴影和渐变，那样会拖慢加载速度。简洁、干净才是王道。百度喜欢干净的结构，用户也喜欢清爽的页面。
最后，给个真实建议。友链质量比数量重要。与其搞几十个分栏，不如精选20个高质量、相关性强的友链。定期清理死链和降权友链，保持友链池的健康。如果你不知道怎么筛选友链，或者改了代码发现样式乱了，可以来找我聊聊。毕竟，折腾模板是小事，网站安全和大局稳定才是大事。
本文关键词：emlog友情链接分栏代码