# 前言

  1. 此项目目的为了解决每次添加友链而频繁 deploy 博客的问题
  2. idea 参考于 xaoxuu
  3. 使用此方式可能会导致一些问题,请谅解。

# 各部分介绍

  1. 项目地址

    https://unpkg.com/ifriend/dist/index.js

    为了方便的自动更新,因此选择了 unpkg,如果你觉得慢可以自行下载上传到 GitHub 并使用 jsd 连接。

  2. Friend 容器

    容器可以通过 js 添加到友链顶部,也可以直接在 markdown 里面写。如果写在 markdown 里那么是放在所有友链的最后边。关于具体容器名称是什么,可以通过创建对象时指定。

  3. Friend 对象

    new Friend({
        // 需要指定的容器可以是 id 或者 class
        el: "#friend1",
        // 你的 gitee id
        owner: "antmoe",
        // 你的 gitee 仓库
        repo: "friend",
    	// 排序规则 asc 或 desc
        direction_sort: "asc",
        // 标签排序,这样表示乐特专属在最上边,大佬们在其之后。可以不写全,未写部分则在之后按时间顺序排序
        sort_container: ["乐特专属", "大佬们"],
        // 每个分组 (标签) 的描述
        // 标签:描述
        labelDescr: {
            大佬们: "<span style='color:red;'>这是一群大佬哦!</span>",
            菜鸡们: "<span style='color:red;'>这是一群菜鸡哦!</span>",
        },
    });

# 修改友链页面

打开我们的友链页面。

  1. 引入 Friend 对象

    <script src='https://unpkg.com/ifriend/dist/index.js'></script>
  2. 创建容器并初始化对象

    <script>
        let fElement = document.createElement("div");
        fElement.id = "friend1";
        document.querySelector(".flink").prepend(fElement);
        if(typeof(Friend)=='undefined'){
            location.href='/friends'
        }
        new Friend({
            el: "#friend1",
            owner: "antmoe",
            repo: "friend",
            direction_sort: "asc",
            sort_container: ["乐特专属", "大佬们"],
            labelDescr: {
                大佬们: "<span style='color:red;'>这是一群大佬哦!</span>",
                菜鸡们: "<span style='color:red;'>这是一群菜鸡哦!</span>",
            },
        });
    </script>
  3. 完成

    接下来便可以显示你的码云小伙伴了

# 码云 issue 格式

可以将以下内容添加到你的模板

**标题请书写你的链接,不要写其他内容**
​```yaml
# 显示名称
name: 你的名称
# 跳转地址
link: 你的链接
# 你的头像
avatar: 你的头像
# 你的描述
descr: 你的描述
# 边框及鼠标悬停的背景颜色,允许设置渐变色
--primary-color: #49b1f5
# 边框大小
border-width: 0px
# 边框样式
border-style: solid
# 鼠标悬停头像旋转角度
--primary-rotate: 0deg
# 边框动画 参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
# 内置动画:borderFlash(边框闪现)、link_custom1(跑马灯)、link_custom(主颜色呼吸灯)
animation: borderFlash 0s infinite alternate
# 头像动画 参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
# 内置动画:auto_rotate_left(左旋转)、auto_rotate_right(右旋转)
img_animation: auto_rotate_right 0s linear infinite
​```

其他问题参考 Friend

# 常见问题

  1. 没有样式

    请手动引入示例样式或魔改样式,并在主题配置 inject->head 里引入。例如:

    inject:
      head:
        - <link rel="stylesheet" href="https://unpkg.com/ifriend/friend.min.css">
  2. 小康的 Friend 页示例

    如果你对我上文中描述不清楚,可以参考我的页面在琢磨琢磨!

    ---
    title: 友情链接
    date: 2020-02-02 10:00:00
    type: "link"
    top_img: https://tva1.sinaimg.cn/large/832afe33ly1gbi1rf2bppj21hc0jgwmw.jpg
    aside: false
    description: 快点和小康交朋友吧!
    ---
    <script src='https://unpkg.com/ifriend/dist/index.js'></script>
    <script>
        let fElement = document.createElement("div");
    	fElement.id = "friend1";
        document.querySelector(".flink").prepend(fElement);
        if(typeof(Friend)=='undefined'){
            location.href='/friends'
        }
        new Friend({
            el: "#friend1",
            owner: "antmoe",
            repo: "friend",
            direction_sort: "asc",
            sort_container: ["乐特专属","同校PY", "大佬们"],
            labelDescr: {
                大佬们: "<span style='color:red;'>这是一群大佬哦!</span>",
                菜鸡们: "<span style='color:red;'>这是一群菜鸡哦!</span>",
                同校PY: "<span style='color:red;'>同校好友</span>"
            },
        });
    </script>
    ## 我的信息
    ​```yaml
    name: 小康博客
    link: https://www.antmoe.com/
    avatar: https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg
    descr: 一个收藏回忆与分享技术的地方!
    #以下内容如果存在的情况下
    width: 1px (代表边框的大小border-width)
    color: "#881B12"
    ​```
更新于

请我喝[茶]~( ̄▽ ̄)~*

Dreamy.TZK 微信支付

微信支付

Dreamy.TZK 支付宝

支付宝