本文最后更新于 2024-07-27，文章内容可能已经过时。

前言

最近刚闲下来，玩玩友链自助提交插件，最新版本 V2 支持了悬浮弹窗提交友链，于是结合 theme-hao 主题对自助提交插件进行了适配，效果如下：

修改教程

1 、增加模版内容

找到 theme-hao/templates/macro/content-links.html 文件，找到如下内容

<th:block th:if="${not #strings.isEmpty(theme.config.link.linksArticle)}"
                      th:utext="${theme.config.link.linksArticle}"> </th:block>

在该位置之后添加如下内容：

<!-- 友链自助提交插件兼容 start -->
<th:block th:if="${theme.config.link.adaptLinkSubmitPlugin}">
    <div id="friends-link-self-submit">
        <div class="left-link-info">
            <h3 class="headline">
                <i class="haofont hao-icon-tongxunlu07"></i> 本站友链信息
            </h3>
            <div class="personal-links-info">
                <div class="inline-msg">
                    <i class="haofont hao-icon-zhanghao1"> 站点标题</i>  
                    <span class="siteTitle">[[${site.title}]]</span>
                    <button onclick="copyLinkItemMsg('siteTitle', this)" class="copy-btn"><i class="haofont hao-icon-copy"></i></button>
                </div>
                <div class="inline-msg ">
                    <i class="haofont hao-icon-link"> 站点地址</i>  
                    <span class="siteUrl">[[${site.url}]]</span>
                    <button onclick="copyLinkItemMsg('siteUrl', this)" class="copy-btn"><i class="haofont hao-icon-copy"></i></button>
                </div>
                <div class="inline-msg logo-inline">
                    <i class="haofont hao-icon-images"> 站点logo</i>  
                    <span class="sitelogo" th:text="${ #strings.contains(site.logo, 'http') ? site.logo : site.url + site.logo }"></span>
                    <button onclick="copyLinkItemMsg('sitelogo', this)" class="copy-btn"><i class="haofont hao-icon-copy"></i></button>
                </div>
                <div class="inline-msg">
                    <i class="haofont hao-icon-circle-info"> 站点描述</i>  
                    <span class="siteDescription" th:text="${ #strings.isEmpty(theme.config.link.siteDescription) ? site.seo.description : theme.config.link.siteDescription}"></span>
                    <button onclick="copyLinkItemMsg('siteDescription', this)" class="copy-btn"><i class="haofont hao-icon-copy"></i></button>
                </div>
                <div class="inline-msg" th:if="${not #strings.isEmpty(theme.config.link.rssSubcribeUrl)}">
                    <i class="haofont hao-icon-cnblogs"> RSS订阅</i>
                    <span class="rssSubcribeUrl">[[${theme.config.link.rssSubcribeUrl}]]</span>
                    <button onclick="copyLinkItemMsg('rssSubcribeUrl', this)" class="copy-btn"><i class="haofont hao-icon-copy"></i></button>
                </div>
            </div>
        </div>
        <div class="right-select-condition">
            <div class="tips"><i class="haofont hao-icon-check-circle"></i> 请勾选你符合的条件，以进行自助友链添加</div>

            <div id="friendlink_checkboxs">

                <div class="self-submit-checkbox">
                    <input type="checkbox" id="checkbox1" class="origin-checkbox" onclick="linkSubmit()" />
                    <span>我已添加 <b>[[${site.title}]]</b> 的友情链接</span>
                </div>
                <div class="self-submit-checkbox">
                    <input type="checkbox" id="checkbox2" class="origin-checkbox" onclick="linkSubmit()" />
                    <span>我的链接主体为<b>个人</b>，网站类型为<b>博客</b></span>
                </div>
                <div class="self-submit-checkbox">
                    <input type="checkbox" id="checkbox3" class="origin-checkbox" onclick="linkSubmit()" />
                    <span>我的网站现在可以在中国大陆区域正常访问</span>
                </div>
                <div class="self-submit-checkbox">
                    <input type="checkbox" id="checkbox4" class="origin-checkbox" onclick="linkSubmit()" />
                    <span>网站内容符合中国大陆法律法规</span>
                </div>
            </div>
        </div>
   
    </div>
    <script data-pjax type="text/javascript">
        function linkSubmit() {
           var checkbox1 = document.getElementById("checkbox1");
           var checkbox2 = document.getElementById("checkbox2");
           var checkbox3 = document.getElementById("checkbox3");
           var checkbox4 = document.getElementById("checkbox4");
           if (checkbox1.checked && checkbox2.checked && checkbox3.checked && checkbox4.checked) {
               openOverlay();
          }
        }
        function copyLinkItemMsg(targetNode, operationBtn){
            const copyText = document.querySelector("#friends-link-self-submit ." + targetNode).innerText;
            navigator.clipboard.writeText(copyText);

            var tipElement = document.createElement("p");
            tipElement.id = targetNode + '-tips';
            tipElement.classList.add("copy-tips-box")
            tipElement.innerHTML = "复制成功";
            operationBtn.parentNode.insertBefore(tipElement, operationBtn.nextSibling);
            setTimeout(()=>{
                document.getElementById(targetNode + '-tips').style.display = "none";
            },1500)
        }
    </script>
</th:block>
<!-- 友链自助提交插件兼容 end -->

为顶部的申请友链按钮添加定位锚点：将如下代码中 a 标签的 href 属性替换为 #friends-link-self-submit 即可！

<a class="banner-button" href="#friends-link-self-submit" rel="external nofollow">
     <i class="haofont hao-icon-link"></i>
     <span class="banner-button-text">申请友链</span>
</a>

2、增加配置项

为了便于修改一些友链自助提交插件兼容模版的一些信息，增加一些配置项，找到主题根目录下的 settings.yaml 文件，在友链设置 (group为link的配置项) 下增加以下配置：

- $formkit: radio
  name: adaptLinkSubmitPlugin
  label: 兼容友链自助提交插件
  id: adaptLinkSubmitPlugin
  key: adaptLinkSubmitPlugin
  value: false
  options:
    - label: 启用
      value: true
    - label: 禁用
      value: false
- $formkit: url
  if: $get(adaptLinkSubmitPlugin).value
  name: rssSubcribeUrl
  value: 
  label: rss订阅地址
  help: 如不填写则不显示
- $formkit: text
  if: $get(adaptLinkSubmitPlugin).value
  name: siteDescription
  value:
  label: 站点描述
  help: 区分与系统设置中seo选项的站点描述，如不填写，则默认为系统设置中seo选项的站点描述

3、增加模版样式

找到 theme-hao/templates/assets/zhheo/zhheoblog.css 文件，在文件最后变添加如下样式：

/*友链自助提交插件适配样式 start*/

#friends-link-self-submit{
    margin: -15px 0 8px;
    padding: 5px 0 8px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
@media screen and (max-width: 500px) {
    #friends-link-self-submit .right-select-condition #friendlink_checkboxs{
        width: 100% !important;
    }
    #friends-link-self-submit .left-link-info .personal-links-info .logo-inline span{
        width: 210px;
        height: 30px;
        overflow-x: scroll;
        overflow-x: hidden;
    }
}
#friends-link-self-submit .left-link-info .headline{
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--heo-fontcolor);
}
#friends-link-self-submit .left-link-info .personal-links-info{
    width: fit-content;
    padding: 2px 16px 4px;
    margin: 0 0 15px;
    border: 1px solid var(--style-border-always);
    box-shadow: var(--heo-shadow-border);
    border-radius: 12px;
    background: var(--heo-card-bg);
}

#friends-link-self-submit .left-link-info .personal-links-info .inline-msg{
    display: flex;
    height: 28px;
    margin: 16px 0;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    transition: .8s;
}
#friends-link-self-submit .left-link-info .personal-links-info .inline-msg span{
    font-size: 13px;
    margin-left: 6px;
    background: var(--heo-secondbg);
    padding: 2px 8px;
    border-radius: 12px;
}
#friends-link-self-submit .left-link-info .personal-links-info .inline-msg:hover{
    color: var(--heo-theme);
    transition: .8s;
}
#friends-link-self-submit .left-link-info .personal-links-info .inline-msg .copy-btn{
    width: 28px;
    height: 28px;
    padding: 5px;
    margin-left: 6px;
    background: var(--heo-secondbg);
    border-radius: 50%;
    box-shadow: var(--heo-shadow-border);
    vertical-align: middle;
    appearance: none;
    transition: .7s;
}
#friends-link-self-submit .left-link-info .personal-links-info .inline-msg .copy-btn:hover{
    color: var(--heo-theme);
    cursor: pointer;
}

#friends-link-self-submit .left-link-info .personal-links-info .inline-msg .copy-tips-box{
    font-size: 14px;
    transition: .8s;
}

/*右侧自助提交选择框样式*/
#friends-link-self-submit .right-select-condition{
    margin-left: 20px;
    margin-top: 0;
}

#friends-link-self-submit .right-select-condition .tips{
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: bold;
    margin: 20px 0 14px;
}
#friends-link-self-submit .right-select-condition #friendlink_checkboxs{
    width: fit-content;
    padding: 6px 16px;
    margin: 0 0 15px;
    border: 1px solid var(--style-border-always);
    box-shadow: var(--heo-shadow-border);
    border-radius: 8px;
    background: var(--heo-card-bg);
}
#friends-link-self-submit  #friendlink_checkboxs .self-submit-checkbox{
    display: flex;
    height: 28px;
    justify-content: flex-start;
    align-items: center;
    margin: 16px 0;
}
#friends-link-self-submit  #friendlink_checkboxs .self-submit-checkbox .origin-checkbox{
   display: block;
   border-radius: 3px;
   border: 1px solid var(--style-border);
}
#friends-link-self-submit  #friendlink_checkboxs .self-submit-checkbox span{
    margin-left: 8px;
    font-size: 14px;
    background-color: var(--heo-secondbg);
    border-radius: 12px;
    padding: 0 8px;
}

/*友链自助提交插件适配样式 end*/

至此，已完成所有修改，在上传了主题文件夹后请重载主题配置，启用相关配置项才能生效！如果在修改过程中遇到了问题，欢迎评论区讨论，让教程变得更完善，希望我的修改对你有所帮助。