为了方便使用Halo的博主们更好地管理和展示友链（友情链接），柳意梧情 大佬开发了一款 <友链自助提交插件>，旨在简化友链的申请和管理过程，提升博客的互动性和用户体验。本文将介绍在Halo博客的walker主题中适配和使用这款插件，让您的博客更具吸引力和互动性。

效果演示

请参考本站: https://www.wxy97.com/links

本文教程和示例代码仅针对walker主题，如果你使用的其他主题也可将本文作为参考并自行修改一些代码即可使用!

安装友链自助提交插件

该插件目前暂未上架官方应用市场

这款插件是限时免费，可以获取临时授权，当然永久授权也不贵，只需一杯饮料（￥5）即可永久授权

具体获取方式和安装请参考官方提供的文档:https://blog.muyin.site/docs/linksSubmit/getting-started/install

想要继续下面的流程你至少需要已经安装好这两个插件并完成简单的配置

主题配置-插件适配

找到插件适配设置项 粘贴如下代码, 如果你有html css基础可根据自己需求进行一些修改。

svg图标可参考:

• https://icon-sets.iconify.design/mdi/link-variant-plus/

• https://www.wxy97.com/archives/db6a126c-1d93-4f7f-8eb6-0cea684b62ff

<!--友链提交按钮 start-->
<button type="button" onclick="openOverlay()" class="duration-300 fixed bottom-5 right-5 flex items-center justify-center rounded-full bg-neutral p-3 opacity-0 shadow transition-all hover:opacity-70 hover:shadow-lg lg:bottom-10 lg:right-10" style="opacity: 1;margin-bottom:4rem">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#C1C8CF" d="M10.6 13.4a1 1 0 0 1-1.4 1.4a4.8 4.8 0 0 1 0-7l3.5-3.6a5.1 5.1 0 0 1 7.1 0a5.1 5.1 0 0 1 0 7.1l-1.5 1.5a6.4 6.4 0 0 0-.4-2.4l.5-.5a3.2 3.2 0 0 0 0-4.3a3.2 3.2 0 0 0-4.3 0l-3.5 3.6a2.9 2.9 0 0 0 0 4.2M23 18v2h-3v3h-2v-3h-3v-2h3v-3h2v3m-3.8-4.3a4.8 4.8 0 0 0-1.4-4.5a1 1 0 0 0-1.4 1.4a2.9 2.9 0 0 1 0 4.2l-3.5 3.6a3.2 3.2 0 0 1-4.3 0a3.2 3.2 0 0 1 0-4.3l.5-.4a7.3 7.3 0 0 1-.4-2.5l-1.5 1.5a5.1 5.1 0 0 0 0 7.1a5.1 5.1 0 0 0 7.1 0l1.8-1.8a6 6 0 0 1 3.1-4.3"/></svg>
</button>
<!--友链提交按钮 end-->

插件配置

找到自助友链插件，高级设置，把以下内容粘贴到提交框头部

<style>
    .site-info {
        max-width: 600px; /* 最大宽度 */
        margin: 5px auto; /* 自动水平居中 */
        padding: 20px; /* 内边距 */
        border: 1px solid #ddd; /* 边框 */
        border-radius: 8px; /* 圆角边框 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
        font-family: Arial, sans-serif; /* 字体样式 */
        background-color: #f9f9f9; /* 背景颜色 */
        text-align: center; /* 居中对齐 */
        font-size: 14px; /* 整体字体大小 */
    }

    .site-info h1 {
        font-size: 22px; /* 标题字体大小 */
        margin-bottom: 20px; /* 标题底部外边距 */
        color: #333; /* 标题颜色 */
        border-bottom: 2px solid #ddd; /* 标题下方边框 */
        padding-bottom: 10px; /* 标题下方内边距 */
    }

    .site-info img {
        width: 80px; /* 图片宽度 */
        height: 80px; /* 图片高度 */
        border-radius: 50%; /* 圆形图片 */
        margin-bottom: 20px; /* 图片底部外边距 */
        display: none; /* 隐藏图片 */
    }

    .site-info p {
        font-size: 14px; /* 正文字体大小 */
        line-height: 1.5; /* 行高 */
        color: #555; /* 正文颜色 */
        margin: 10px 0; /* 段落外边距 */
        cursor: pointer; /* 鼠标悬停时显示手形光标 */
        transition: background-color 0.3s ease; /* 过渡效果 */
    }

    .site-info p:hover {
        background-color: #f0f0f0; /* 悬停时背景颜色 */
    }

    .site-info a {
        color: #0073e6; /* 链接颜色 */
        text-decoration: none; /* 去掉下划线 */
        font-weight: bold; /* 链接加粗 */
    }

    .site-info a:hover {
        text-decoration: underline; /* 鼠标悬停时显示下划线 */
    }

    .wxy-friend-link {
        font-size: 14px; /* 红字字体大小 */
        color: #d9534f !important; /* 红字颜色 */
        font-weight: bold; /* 红字加粗 */
        margin-top: 20px; /* 红字顶部外边距 */
        cursor: default; /* 鼠标悬停时不显示手形光标 */
    }
</style>

<div class="site-info">
    <h1>本站信息</h1>
    <img src="https://www.wxy97.com/logo" alt="人生若只如初见头像" />
    <p id="wxy-name" onclick="copyText('人生若只如初见')"><strong>名称：</strong>人生若只如初见</p>
    <p id="wxy-address" onclick="copyText('https://www.wxy97.com')"><strong>地址：</strong><a href="https://www.wxy97.com" target="_blank" rel="noopener noreferrer">https://www.wxy97.com</a></p>
    <p id="wxy-logo" onclick="copyText('https://www.wxy97.com/logo')"><strong>头像：</strong><a href="https://www.wxy97.com/logo" target="_blank" rel="noopener noreferrer">https://www.wxy97.com/logo</a></p>
    <p id="wxy-description" onclick="copyText('全栈工程师一枚, Java, Golang, Python, Web, 运维技术分享。')"><strong>简介：</strong>全栈工程师一枚, Java, Golang, Python, Web, 运维技术分享。</p>
    <p class="wxy-friend-link">申请前请先添加本站为友链！然后认真填写下面信息</p>
</div>

<script>
    // 添加点击复制功能
    function copyText(text) {
        // 创建一个隐藏的文本域来复制文本
        var textToCopy = document.createElement('textarea');
        textToCopy.value = text; // 获取点击的文本内容
        document.body.appendChild(textToCopy);
        textToCopy.select();
        document.execCommand('copy'); // 执行复制命令
        document.body.removeChild(textToCopy);

        // 提示复制成功
        alert('已复制: ' + text);
    }
</script>

仅针对walker主题

日间模式选择器为： [data-theme=light]

夜间模式选择器为: .color-scheme-dark, .dark, [data-color-scheme=dark]

配色请自行修改或者使用默认。

其他配置如图不做改动即可。

到此配置完成~ 可以实现和本站一样的效果了!

如遇到问题欢迎在评论区交流