博客添加友情链接

halo 博客添加友情链接

• 需要安装【链接管理】插件
  源码仓库： https://github.com/halo-sigs/plugin-links

修改halo配置文件：config\halo2\themes\theme-Joe3\theme.yaml
description: 友链模板
screenshot:
file: page_links.html 修改为 file: links.html

修改halo配置文件：config\halo2\themes\theme-Joe3\templates\page_links.html
page_links.html 修改为 links.html

typecho 博客添加友情链接

• 进入typecho后台–>管理–>管理独立页面–>新增
  新建标题为【友情链接】的文章，输入以下内容

## 教程:
<ul class="flinks">

<li>凡凡小站</li>
<li>https://meimolihan.github.io</li>
<li>https://blog.org:666/mobufan/mobufan.gif</li>
<li></li>

</ul>

## GitHub
<ul class="flinks">

<li>GitHub</li>
<li>https://github.com/meimolihan</li>
<li>https://blog.mobufan.eu.org:666/mobufan/mobufan-01.jpg</li>
<li></li>

</ul>


!!!
<script>document.querySelectorAll('ul.flinks').forEach(function(e){let a=e;if(a){let ns=a.querySelectorAll("li");let str='<div style="display:inline-block;">';let bgid=0;const bgs=["bg-white","bg-grey","bg-deepgrey","bg-blue","bg-purple","bg-green","bg-yellow","bg-red","bg-orange"];for(let i=0;i<ns.length;i+=4){str+=(`<div class="flink-item ${bgs[Math.floor(Math.random() * 9)]}"><div class="flink-title"><a href="${ns[i+1].innerText}"target="_blank"rel="external nofollow ugc">${ns[i].innerText}</a></div><div class="flink-link"><div class="flink-link-ico"style="background: url(${ns[i+2].innerText});background-size: 42px auto;"></div><div class="flink-link-text">${ns[i+3].innerText}</div></div></div>`)}str+=`</div>`;let n1=document.createElement("div");n1.innerHTML=str;a.parentNode.insertBefore(n1,a);a.style="display: none;"}else{console.log('No such id "flinks"')}});</script>
<style>.flink-item{width:300px;height:100px;position:relative;margin:10px;background-color:#fff;border-radius:3px;float:left}.flink-title{left:25px;top:25px;position:absolute}.flink-title a{font-size:17px;color:#f1f1f1;line-height:17px;word-break:break-all;text-decoration:none;outline:0}.flink-link{right:0;bottom:0;padding:0 15px 15px;position:absolute;text-align:center}.flink-link-text{font-size:12px;color:#f1f1f1}.flink-link-ico{display:inline-block;width:42px;height:42px;border-radius:50%}.bg-white{background-color:#fff!important}.bg-grey{background-color:#f7f7f7!important}.bg-deepgrey{background-color:rgba(0,0,0,.5)!important}.bg-blue{background-color:#6fa3ef!important}.bg-purple{background-color:#bc99c4!important}.bg-green{background-color:#46c47c!important}.bg-yellow{background-color:#f9bb3c!important}.bg-red{background-color:#e8583d!important}.bg-orange{background-color:#f68e5f!important}</style>
!!!

Typecho-Butterfly 主题添加友链

• 进入typecho后台–>管理–>管理独立页面–>新增
  新建标题为【友情链接】的文章，输入以下内容

## <i class="fas fa-check-double" style="color:#f66;padding-right:.4rem"></i> 这是html友链示例

!!!
<div class="flink-list">

  <div class="flink-list-item">
    <a href="修改网址" title="修改标题" target="_blank">
      <div class="flink-item-icon">
        <img src="修改图标" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="修改标题"> 
      </div>
      <div class="flink-item-name">修改标题</div>
      <div class="flink-item-desc" title="修改描述">修改描述</div></a>
  </div>

  <div class="flink-list-item">
    <a href="修改网址" title="修改标题" target="_blank">
      <div class="flink-item-icon">
        <img src="修改图标" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="修改标题2"> 
      </div>
      <div class="flink-item-name">修改标题2</div>
      <div class="flink-item-desc" title="修改描述">修改描述2</div></a>
  </div>

</div>
!!!


## <i class="fas fa-fan" style="color:#0cc;padding-right:.4rem"></i> 这是html友链示例第二个分组

!!!
<div class="flink-list">

  <div class="flink-list-item">
    <a href="修改网址" title="修改标题" target="_blank">
      <div class="flink-item-icon">
        <img src="修改图标" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="修改标题"> 
      </div>
      <div class="flink-item-name">修改标题</div>
      <div class="flink-item-desc" title="修改描述">修改描述</div></a>
  </div>

  <div class="flink-list-item">
    <a href="修改网址" title="修改标题" target="_blank">
      <div class="flink-item-icon">
        <img src="修改图标" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="修改标题分组2"> 
      </div>
      <div class="flink-item-name">修改标题2</div>
      <div class="flink-item-desc" title="修改描述">修改描述分组2</div></a>
  </div>

</div>
!!!

## <i class="fas fa-font-awesome" style="color:#008000;padding-right:.4rem"></i> 友情提示：

[note type="success flat no-icon"]你好啊，想申请友链按如下格式填写
...网站名称
...网站链接
...网站头像
[/note]

## <i class="fas fa-font-awesome" style="color:#008000;padding-right:.4rem"></i> 友情提示：
修改图标网站地址：https://fontawesome.com/search?o=r&c=coding

hugo 博客添加友情链接

• hugo友情链接头像：content\page\links目录下
• hugo主目录创建content\page\links\index.md文件
  添加以下内容

---
hiddenFromSearch: true
readingTime: false
license: false
title: 友链
contentEnd: false
toc: false
image: "https://cdn.jsdelivr.net/gh/lqxhub/images@master/blog/54de3f8d81a4f97fb1ac4dc06eaf3fda335a5937.webp"

links:

  - title: GitHub
    description: 我的 GitHub
    website: https://github.com/meimolihan
    image: mobufan.gif

menu:
    main: 
        weight: -50
        params:
            icon: link

comments: false # 评论开关
---