适用 Google Blogger 网站文章页响应式友链（友情链接）模块代码

适用于 Google Blogger 网站文章页的四列响应式友链（友情链接）模块代码片段。

本站效果展示：https://www.chzi.eu.org/p/friend.html

该代码与本站主题风格完美契合，采用了 Tailwind CSS、圆角卡片设计、悬停升起特效，并原生支持主题的暗黑模式（Dark Mode）。在移动端下会自动适配为单列或双列排布，保证极致的浏览体验。

友链代码片段

代码展示

<!-- 友情链接区块开始 -->
<div class='my-8 p-5 bg-gray-50 dark:bg-surface-gray-dark border border-border-color dark:border-border-color-dark rounded-xl'>
    <h3 class='text-base font-bold mb-4 flex items-center gap-2 border-l-4 border-primary pl-3 text-text-main dark:text-text-main-dark'>
        <span class='material-icons text-primary text-lg'>link</span> 友情链接
    </h3>
    <!-- 4列网格排布：移动端1列，平板2列，桌面端4列 -->
    <div class='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3'>
        
        <!-- 友链项 1 -->
        <a class='flex items-center gap-3 p-3 rounded-lg bg-white dark:bg-surface-dark border border-border-color dark:border-border-color-dark hover:border-primary dark:hover:border-primary hover:shadow-md transition-all group' href='https://example.com' target='_blank' rel='noopener noreferrer'>
            <img class='w-8 h-8 rounded-full object-cover flex-shrink-0 bg-gray-100 dark:bg-gray-800' src='https://wsrv.nl/?url=https://www.google.com/s2/favicons?domain=example.com&amp;w=64&amp;h=64' alt='网站图标'/>
            <div class='min-w-0 flex-1'>
                <div class='text-sm font-bold text-text-main dark:text-text-main-dark truncate group-hover:text-primary transition-colors'>示例网站</div>
                <div class='text-xs text-text-light dark:text-text-light-dark truncate'>记录生活与技术</div>
            </div>
        </a>

        <!-- 友链项 2 -->
        <a class='flex items-center gap-3 p-3 rounded-lg bg-white dark:bg-surface-dark border border-border-color dark:border-border-color-dark hover:border-primary dark:hover:border-primary hover:shadow-md transition-all group' href='https://example.com' target='_blank' rel='noopener noreferrer'>
            <img class='w-8 h-8 rounded-full object-cover flex-shrink-0 bg-gray-100 dark:bg-gray-800' src='https://wsrv.nl/?url=https://www.google.com/s2/favicons?domain=example.com&amp;w=64&amp;h=64' alt='网站图标'/>
            <div class='min-w-0 flex-1'>
                <div class='text-sm font-bold text-text-main dark:text-text-main-dark truncate group-hover:text-primary transition-colors'>示例网站二</div>
                <div class='text-xs text-text-light dark:text-text-light-dark truncate'>技术分享与折腾</div>
            </div>
        </a>

        <!-- 友链项 3 -->
        <a class='flex items-center gap-3 p-3 rounded-lg bg-white dark:bg-surface-dark border border-border-color dark:border-border-color-dark hover:border-primary dark:hover:border-primary hover:shadow-md transition-all group' href='https://example.com' target='_blank' rel='noopener noreferrer'>
            <img class='w-8 h-8 rounded-full object-cover flex-shrink-0 bg-gray-100 dark:bg-gray-800' src='https://wsrv.nl/?url=https://www.google.com/s2/favicons?domain=example.com&amp;w=64&amp;h=64' alt='网站图标'/>
            <div class='min-w-0 flex-1'>
                <div class='text-sm font-bold text-text-main dark:text-text-main-dark truncate group-hover:text-primary transition-colors'>示例网站三</div>
                <div class='text-xs text-text-light dark:text-text-light-dark truncate'>独立博客</div>
            </div>
        </a>

        <!-- 友链项 4 -->
        <a class='flex items-center gap-3 p-3 rounded-lg bg-white dark:bg-surface-dark border border-border-color dark:border-border-color-dark hover:border-primary dark:hover:border-primary hover:shadow-md transition-all group' href='https://example.com' target='_blank' rel='noopener noreferrer'>
            <img class='w-8 h-8 rounded-full object-cover flex-shrink-0 bg-gray-100 dark:bg-gray-800' src='https://wsrv.nl/?url=https://www.google.com/s2/favicons?domain=example.com&amp;w=64&amp;h=64' alt='网站图标'/>
            <div class='min-w-0 flex-1'>
                <div class='text-sm font-bold text-text-main dark:text-text-main-dark truncate group-hover:text-primary transition-colors'>示例网站四</div>
                <div class='text-xs text-text-light dark:text-text-light-dark truncate'>古典文学与诗词</div>
            </div>
        </a>

    </div>
</div>

设计亮点与适配说明：

1.四列与响应式网格：利用 Tailwind 的 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 实现大屏 3 列、平板 2 列、手机端 1 列的平滑自适应切换。

2.免维护 Favicon 加载：内置利用 Google 官方图标获取接口配合您主题原有的 wsrv.nl 镜像加速服务 ([https://wsrv.nl/?url=https://www.google.com/s2/favicons?domain=](https://wsrv.nl/?url=https://www.google.com/s2/favicons?domain=)...)，在国内访问时也能秒开且不会卡顿。

3.完美融入暗黑模式：使用了您主题中现成的 bg-surface-gray-dark、dark:bg-surface-dark 以及 dark:text-text-main-dark 等样式变量，切换深色/浅色模式时无需额外写适配代码。

4.精美交互：卡片带有微小的悬停边框高亮与阴影上浮效果（hover:border-primary hover:shadow-md transition-all），文字超长时会自动显示省略号（truncate），保持整体排版整洁大方。

适用 Google Blogger 网站文章页响应式友链（友情链接）模块代码

copyright 版权声明

相关文章