听说都在好奇Halo Hao主题的友链下方那些是怎么做到的 你们想要的来啦🤖🤖

操作方法

  1. 打开主题设置
  2. 选择友链
  3. 将下面代码填入底部显示内容即可
<details>
                  <summary>友情链接页免责声明</summary>
                  <h2 id="免责声明"><a href="#免责声明" class="headerlink" title="免责声明" data-pjax-state=""></a>免责声明</h2>
                  <p>
                    本博客遵守中华人民共和国相关法律。本页内容仅作为方便学习而产生的快速链接的链接方式,对与友情链接中存在的链接、好文推荐链接等均为其他网站。我本人能力有限无法逐个甄别每篇文章的每个字,并无法获知是否在收录后原作者是否对链接增加了违反法律甚至其他破坏用户计算机等行为。因为部分友链网站甚至没有做备案、域名并未做实名认证等,所以友链网站均可能存在风险,请你须知。
                  </p>
                  <p>所以在我力所能及的情况下,我会包括但不限于:</p>
                  <ol>
                    <li>针对收录的博客中的绝大多数内容通过标题来鉴别是否存在有风险的内容</li>
                    <li>在收录的友链好文推荐中检查是否存在风险内容</li>
                  </ol>
                  <p>但是你在访问的时候,仍然无法避免,包括但不限于:</p>
                  <ol>
                    <li>作者更换了超链接的指向,替换成了其他内容</li>
                    <li>作者的服务器被恶意攻击、劫持、被注入恶意内容</li>
                    <li>作者的域名到期,被不法分子用作他用</li>
                    <li>作者修改了文章内容,增加钓鱼网站、广告等无效信息</li>
                    <li>不完善的隐私保护对用户的隐私造成了侵害、泄漏</li>
                  </ol>
                  <p>最新文章部分为机器抓取,本站作者未经过任何审核和筛选,本着友链信任原则添加的。如果你发现其中包含违反中华人民共和国法律的内容,请及时联系和举报。该友链会被拉黑。</p>
                  <p>如果因为从本页跳转给你造成了损失,深表歉意,并且建议用户如果发现存在问题在本页面进行回复。通常会很快处理。如果长时间无法得到处理,建议联系<strong>1977629053@qq.com</strong>。
                  </p>
</details>
<details class="folding-tag">
                  <summary>出现问题的友链</summary>
                  <h2 id="出现问题的友链"><a href="#出现问题的友链" class="headerlink" title="出现问题的友链" data-pjax-state=""></a>出现问题的友链</h2>
                  <p>如果友链出现问题会展示在这里,不再进行友链相关审查,如果已解决问题还请主动告知。</p>
                  
</details>
<h2 id="友情链接申请"><a href="#友情链接申请" class="headerlink" title="友情链接申请" draggable="false" data-pjax-state=""></a>友情链接申请</h2>
<p>很高兴能和非常多的朋友们交流,如果你也想加入友链,可以在下方留言,我会在不忙的时候统一添加。</p>
<details>
                    <summary>🧀 友链申请方式</summary>
          
                    <h2 id="本站添加的友链要求"><a href="#本站添加的友链要求" class="headerlink" title="本站添加的友链要求" data-pjax-state=""></a>本站添加的友链要求
                    </h2>
                    <ol>
                      <li>能够正常访问</li>
                      <li>含本站友链</li>
                      <li>网站类型为<strong>个人博客</strong></li>
                    </ol>
                    <p>请(<a onclick="addFriendLink()" href="#post-comment" data-pjax-state="anchor">点击这里快速添加</a>)
                      站点信息申请友情链接,申请后在我不忙的时候会统一添加,即使不通过也会给予邮件回复。</p>
                    <h2 id="你提交的信息有可能被修改"><a href="#你提交的信息有可能被修改" class="headerlink" title="你提交的信息有可能被修改" data-pjax-state=""></a>你提交的信息有可能被修改</h2>
                    <p>如果有修改,我会将修改内容进行告知</p>
                    <ol>
                      <li>为了友链相关页面和组件的统一性和美观性,可能会对你的昵称进行缩短处理,例如昵称包含<strong>博客</strong>、<strong>XX的XX</strong>等内容或形式将被简化。
                      </li>
                      <li>为了图片加载速度和内容安全性考虑,头像实际展示图片均使用博客自己图床,所以无法收到贵站自己的头像更新,如果有迫切的更改信息需求,请在本页的评论中添加。</li>
                      <!-- <li>为了保证鱼塘能够正确抓取文章,所有的友链链接要求为博客主页链接,而不是个人主页链接。</li> -->
                    </ol>
                    <h2 id="我的友链信息"><a href="#我的友链信息" class="headerlink" title="我的友链信息" data-pjax-state=""></a>我的友链信息</h2>
                    <p>为了避免图床问题,建议你将头像存储到贵站图床。</p>
                    <ol>
                      <li>我的名称: <code>小林的小破站</code></li>
                      <li>网站地址: <code>https://blog.lucksss.com/</code></li>
                      <li>描述: <code>我们总是在相同的路上 却看到了不同的风景</code></li>
                      <li>头像: <code>https://blog.lucksss.com/upload/headimg_dl_yuan.png</code></li>
                    </ol>
                    <h2 id="友链申请格式如下">
                      <strong>
                        友链申请格式如下🥳
                      </strong>
                    </h2>
<div class="code-toolbar"><pre class="line-numbers language-bash" tabindex="0"><code class="hljs language-bash">昵称(请勿包含博客等字样):
网站地址(要求博客地址,请勿提交个人主页):
头像图片url(请提供尽可能清晰的图片,我会上传到我自己的图床):
描述:
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><div class="toolbar c-title c-hr"><div class="toolbar-item"><span>Bash</span></div><div class="custom-item absolute top-0"><i class="haofont hao-icon-paste copy-button code-copy cursor-pointer"></i><i class="fa-sharp fa-solid haofont hao-icon-angle-down code-expander cursor-pointer"></i></div><div class="custom-item absolute top-0"><i class="haofont hao-icon-paste copy-button code-copy cursor-pointer"></i><i class="fa-sharp fa-solid haofont hao-icon-angle-down code-expander cursor-pointer"></i></div></div></div>
                    
                    <h2 id="友链申请格式如下">
                      <strong>
                        示例 📢:
                      </strong>
                    </h2>
<div class="code-toolbar"><pre class="line-numbers language-bash" tabindex="0"><code class="hljs language-bash">昵称:小林的小破站
网站地址:https://blog.lucksss.com/
头像图片url:https://blog.lucksss.com/upload/headimg_dl_yuan.png
描述:我们总是在相同的路上 却看到了不同的风景
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><div class="toolbar c-title c-hr"><div class="toolbar-item"><span>Bash</span></div><div class="custom-item absolute top-0"><i class="haofont hao-icon-paste copy-button code-copy cursor-pointer"></i><i class="fa-sharp fa-solid haofont hao-icon-angle-down code-expander cursor-pointer"></i></div><div class="custom-item absolute top-0"><i class="haofont hao-icon-paste copy-button code-copy cursor-pointer"></i><i class="fa-sharp fa-solid haofont hao-icon-angle-down code-expander cursor-pointer"></i></div></div></div>
</details>
<ol>
                    <li>我的名称: <code>小林的小破站</code></li>
                    <li>网站地址: <code>https://blog.lucksss.com/</code></li>
                    <li>描述: <code>我们总是在相同的路上 却看到了不同的风景</code></li>
                    <li>头像: <code>https://blog.lucksss.com/upload/headimg_dl_yuan.png</code></li>
</ol>
<p>请<strong>勾选</strong>你符合的条件:</p>
<div id="friendlink_checkboxs">
                  <p>
                    <label class="checkbox"><input type="checkbox" id="checkbox1" onclick="checkForm()">我已添加 <b>小林</b> 博客的友情链接</label>
                  </p>
                  <p>
                    <label class="checkbox"><input type="checkbox" id="checkbox2" onclick="checkForm()">我的链接主体为 <b>个人</b>,网站类型为<b>博客</b></label>
                  </p>
                  <p>
                    <label class="checkbox"><input type="checkbox" id="checkbox3" onclick="checkForm()">我的网站现在可以在中国大陆区域正常访问</label>
                  </p>
                  <p>
                    <label class="checkbox"><input type="checkbox" id="checkbox4" onclick="checkForm()">网站内容符合中国大陆法律法规</label>
                  </p>
</div>

<script>var twikooSubmit = document.getElementsByClassName("tk-submit")[0];
                      if(twikooSubmit) {
                        twikooSubmit.style.opacity = "0";
                      }
                      function checkForm() {
                          var checkbox1 = document.getElementById("checkbox1");
                          var checkbox2 = document.getElementById("checkbox2");
                          var checkbox3 = document.getElementById("checkbox3");
                          var checkbox4 = document.getElementById("checkbox4");
                          var twikooSubmit = document.getElementsByClassName("tk-submit")[0];
                          if (checkbox1.checked && checkbox2.checked && checkbox3.checked && checkbox4.checked) {
                              twikooSubmit.style.opacity = "1";
                              twikooSubmit.style.height = "auto";
                              twikooSubmit.style.overflow = "auto";
                              var input = document.getElementsByClassName('el-textarea__inner')[0];
                              let evt = document.createEvent('HTMLEvents');
                              evt.initEvent('input', true, true);
                              input.value = '昵称(请勿包含博客等字样):\n网站地址(要求博客地址,请勿提交个人主页):\n头像图片url(请提供尽可能清晰的图片,我会上传到我自己的图床):\n描述:\n';
                              input.dispatchEvent(evt);
                              input.focus();
                              input.setSelectionRange(-1, -1);
                          } else {
                              twikooSubmit.style.opacity = "0";
                              twikooSubmit.style.height = "0";
                              twikooSubmit.style.overflow = "hidden";
                          }
                      }</script>

<style>.tk-comments>.tk-submit{opacity:0;height:0;transition:opacity .5s,height .5s;overflow:hidden}
                        .checkbox {
                        display: -webkit-box;
                        display: -moz-box;
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: box;
                        display: flex;
                        -webkit-box-align: center;
                        -moz-box-align: center;
                        -o-box-align: center;
                        -ms-flex-align: center;
                        -webkit-align-items: center;
                        align-items: center;
                      }
                      .checkbox input {
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        -ms-appearance: none;
                        -o-appearance: none;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        appearance: none;
                        position: relative;
                        height: 16px;
                        width: 16px;
                        -webkit-transition: all 0.15s ease-out 0s;
                        -moz-transition: all 0.15s ease-out 0s;
                        -o-transition: all 0.15s ease-out 0s;
                        -ms-transition: all 0.15s ease-out 0s;
                        transition: all 0.15s ease-out 0s;
                        cursor: pointer;
                        display: inline-block;
                        outline: none;
                        border-radius: 2px;
                        -webkit-flex-shrink: 0;
                        flex-shrink: 0;
                        margin-right: 8px;
                        border: 2px solid #2196f3;
                        pointer-events: none;
                      }
                      .checkbox input[type="checkbox"]:before {
                        left: 1px;
                        top: 5px;
                        width: 0;
                        height: 2px;
                        -webkit-transition: all 0.2s ease-in;
                        -moz-transition: all 0.2s ease-in;
                        -o-transition: all 0.2s ease-in;
                        -ms-transition: all 0.2s ease-in;
                        transition: all 0.2s ease-in;
                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -o-transform: rotate(45deg);
                        -ms-transform: rotate(45deg);
                        transform: rotate(45deg);
                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -ms-transform: rotate(45deg);
                        -o-transform: rotate(45deg);
                      }
                      .checkbox input[type="checkbox"]:after {
                        right: 7px;
                        bottom: 3px;
                        width: 2px;
                        height: 0;
                        -webkit-transition: all 0.2s ease-out;
                        -moz-transition: all 0.2s ease-out;
                        -o-transition: all 0.2s ease-out;
                        -ms-transition: all 0.2s ease-out;
                        transition: all 0.2s ease-out;
                        -webkit-transform: rotate(40deg);
                        -moz-transform: rotate(40deg);
                        -o-transform: rotate(40deg);
                        -ms-transform: rotate(40deg);
                        transform: rotate(40deg);
                        -webkit-transform: rotate(40deg);
                        -moz-transform: rotate(40deg);
                        -ms-transform: rotate(40deg);
                        -o-transform: rotate(40deg);
                        -webkit-transition-delay: 0.25s;
                        -moz-transition-delay: 0.25s;
                        -o-transition-delay: 0.25s;
                        -ms-transition-delay: 0.25s;
                        transition-delay: 0.25s;
                      }
                      .checkbox input[type="checkbox"]:checked {
                        background: #2196f3;
                      }
                      .checkbox input[type="checkbox"]:checked:before {
                        left: 0;
                        top: 7px;
                        width: 6px;
                        height: 2px;
                      }
                      .checkbox input[type="checkbox"]:checked:after {
                        right: 3px;
                        bottom: 1px;
                        width: 2px;
                        height: 10px;
                      }

                      .checkbox.minus input[type="checkbox"]:after {
                        -webkit-transform: rotate(0);
                        -moz-transform: rotate(0);
                        -o-transform: rotate(0);
                        -ms-transform: rotate(0);
                        transform: rotate(0);
                        left: 1px;
                        top: 5px;
                        width: 0;
                        height: 2px;
                      }
                      .checkbox.minus input[type="checkbox"]:checked:before {
                        left: 1px;
                        top: 5px;
                        width: 10px;
                        height: 2px;
                      }
                      .checkbox.minus input[type="checkbox"]:checked:after {
                        left: 1px;
                        top: 5px;
                        width: 10px;
                        height: 2px;
                      }
                      .checkbox.plus input[type="checkbox"]:before {
                        -webkit-transform: rotate(0);
                        -moz-transform: rotate(0);
                        -o-transform: rotate(0);
                        -ms-transform: rotate(0);
                        transform: rotate(0);
                        left: 1px;
                        top: 5px;
                        width: 0;
                        height: 2px;
                      }
                      .checkbox.plus input[type="checkbox"]:after {
                        -webkit-transform: rotate(0);
                        -moz-transform: rotate(0);
                        -o-transform: rotate(0);
                        -ms-transform: rotate(0);
                        transform: rotate(0);
                        left: 5px;
                        top: 1px;
                        width: 2px;
                        height: 0;
                      }
                      .checkbox.plus input[type="checkbox"]:checked:before {
                        left: 1px;
                        top: 5px;
                        width: 10px;
                        height: 2px;
                      }
                      .checkbox.plus input[type="checkbox"]:checked:after {
                        left: 5px;
                        top: 1px;
                        width: 2px;
                        height: 10px;
                      }
                      .checkbox.times input[type="checkbox"]:before {
                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -o-transform: rotate(45deg);
                        -ms-transform: rotate(45deg);
                        transform: rotate(45deg);
                        left: 3px;
                        top: 1px;
                        width: 0;
                        height: 2px;
                      }
                      .checkbox.times input[type="checkbox"]:after {
                        -webkit-transform: rotate(135deg);
                        -moz-transform: rotate(135deg);
                        -o-transform: rotate(135deg);
                        -ms-transform: rotate(135deg);
                        transform: rotate(135deg);
                        right: 3px;
                        top: 1px;
                        width: 0;
                        height: 2px;
                      }
                      .checkbox.times input[type="checkbox"]:checked:before {
                        left: 1px;
                        top: 5px;
                        width: 10px;
                        height: 2px;
                      }
                      .checkbox.times input[type="checkbox"]:checked:after {
                        right: 1px;
                        top: 5px;
                        width: 10px;
                        height: 2px;
                      }
                      .checkbox input[type="radio"] {
                        border-radius: 50%;
                      }
                      .checkbox input[type="radio"]:before {
                        content: "";
                        display: block;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        margin: 2px;
                        -webkit-transform: scale(0);
                        -moz-transform: scale(0);
                        -o-transform: scale(0);
                        -ms-transform: scale(0);
                        transform: scale(0);
                        -webkit-transition: all 0.25s ease-out;
                        -moz-transition: all 0.25s ease-out;
                        -o-transition: all 0.25s ease-out;
                        -ms-transition: all 0.25s ease-out;
                        transition: all 0.25s ease-out;
                      }
                      .checkbox input[type="radio"]:checked:before {
                        -webkit-transform: scale(1);
                        -moz-transform: scale(1);
                        -o-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);
                        background: var(--text-bg-hover);
                      }
                      .checkbox.red input {
                        border-color: #fe5f58;
                      }
                      .checkbox.red input[type="checkbox"]:checked {
                        background: #fe5f58;
                      }
                      .checkbox.red input[type="radio"]:checked:before {
                        background: #fe5f58;
                      }
                      .checkbox.green input {
                        border-color: #3dc550;
                      }
                      .checkbox.green input[type="checkbox"]:checked {
                        background: #3dc550;
                      }
                      .checkbox.green input[type="radio"]:checked:before {
                        background: #3dc550;
                      }
                      .checkbox.yellow input {
                        border-color: #ffbd2b;
                      }
                      .checkbox.yellow input[type="checkbox"]:checked {
                        background: #ffbd2b;
                      }
                      .checkbox.yellow input[type="radio"]:checked:before {
                        background: #ffbd2b;
                      }
                      .checkbox.cyan input {
                        border-color: #1bcdfc;
                      }
                      .checkbox.cyan input[type="checkbox"]:checked {
                        background: #1bcdfc;
                      }
                      .checkbox.cyan input[type="radio"]:checked:before {
                        background: #1bcdfc;
                      }
                      .checkbox.blue input {
                        border-color: #2196f3;
                      }
                      .checkbox.blue input[type="checkbox"]:checked {
                        background: #2196f3;
                      }
                      .checkbox.blue input[type="radio"]:checked:before {
                        background: #2196f3;
                      }
                      .checkbox p {
                        display: inline-block;
                        margin-top: 2px !important;
                        margin-bottom: 0 !important;
                      }
                      .checkbox input[type="checkbox"]:before,
                      .checkbox input[type="checkbox"]:after {
                        position: absolute;
                        content: "";
                        background: #fff;
                      }
                      
                      </style>