文章内页增加一组按钮

食用教程

Zibll主题设置 - 文章内页 - 文章插入内容

放入以下代码

<style>
        .hoayue_button_container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            padding: 20px 0;
            width: 100%;
            box-sizing: border-box;
        }

        .hoayue_button_block {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            font-weight: 500;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #333;
            text-align: center;
            user-select: none;
            background: #f2f2f2;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: 1px solid #ddd;
            text-decoration: none;
            gap: 6px;
            text-decoration: none;
            flex: 1 0 22%;
            box-sizing: border-box;
        }

        .hoayue_button_block:hover {
            background: #e0e0e0;
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }

        .hoayue_button_icon {
            width: 18px;
            height: 18px;
        }

        @media (min-width: 1025px) {
            .hoayue_button_container {
                justify-content: space-between;
            }
            .hoayue_button_block {
                flex: 1 0 calc(25% - 20px);
                max-width: 23%;
                font-size: 14px;
                padding: 6px 14px;
            }
            .hoayue_button_icon {
                width: 16px;
                height: 16px;
            }
        }

        @media (min-width: 768px) and (max-width: 1024px) {
            .hoayue_button_block {
                flex: 1 0 calc(25% - 20px);
                max-width: 23%;
                font-size: 16px;
                padding: 8px 16px;
            }
            .hoayue_button_icon {
                width: 18px;
                height: 18px;
            }
        }

        @media (max-width: 767px) {
            .hoayue_button_block {
                flex: 1 0 calc(50% - 10px);
                font-size: 14px;
                padding: 8px 14px;
            }
            .hoayue_button_icon {
                width: 16px;
                height: 16px;
            }
        }
    </style>
<div class="hoayue_button_container">
        
        <a href="https://qm.qq.com/q/mtF1PTYeCA" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
            <img src="https://www.hoayue.com/beauty/img/in_article_button/qq.png" alt="加入QQ群图标" class="hoayue_button_icon" /> <!-- 图标替换为图片 -->
            加入QQ群
        </a>
        <a href="https://hoayue.com/beauty/turn/index.html" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
            <img src="https://hoayue.com/beauty/img/in_article_button/wechat.png" alt="微信公众号图标" class="hoayue_button_icon" /> <!-- 图标替换为图片 -->
            关注微信公众号
        </a>
        <a href="https://wpa.qq.com/msgrd?v=3&uin=1727801289&site=qq&menu=yes" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
            <img src="https://hoayue.com/beauty/img/in_article_button/about.png" alt="联系我们图标" class="hoayue_button_icon" /> <!-- 联系我们图标 -->
            联系我们
        </a>
        <a href="https://hoayue.com/posts-edit?plate_id=973" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
            <img src="https://hoayue.com/beauty/img/in_article_button/updata.png" alt="请求更新图标" class="hoayue_button_icon" /> <!-- 图标替换为图片 -->
            请求更新
        </a>
    </div>

注意

自行替换里面的图标和链接

版权声明

站内部分内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请 联系我们 一经核实，立即删除。并对发布账号进行永久封禁处理。

---

本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。