小康的文档库

一个收藏文档与教程的地方!

示例:

更新日志:暂无

前言

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

各部分介绍

  1. 项目地址

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

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

  2. Friend的样式问题

    默认主题并不自带一些花里胡哨的功能,如果需要请自行添加CSS样式。

    CSS样式

    在线地址:https://unpkg.com/ifriend/friend.min.css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    /* 
    TAG 友链页CSS
    */
    /* 边框呼吸灯效果 */
    @keyframes link_custom {
    from {
    box-shadow: 0 0 5px var(--primary-color, grey),
    inset 0 0 5px var(--primary-color, grey),
    0 1px 0 var(--primary-color, grey);
    }

    to {
    box-shadow: 0 0 20px var(--primary-color, grey),
    inset 0 0 10px var(--primary-color, grey),
    0 1px 0 var(--primary-color, grey);
    }
    }
    /* 边框彩色呼吸灯 */
    @keyframes link_custom1 {
    0% {
    box-shadow: 0 0 4px #ca00ff;
    }

    25% {
    box-shadow: 0 0 16px #00b5e5;
    }

    50% {
    box-shadow: 0 0 4px #00f;
    }

    75% {
    box-shadow: 0 0 16px #b1da21;
    }

    100% {
    box-shadow: 0 0 4px #f00;
    }
    }
    /* 边框闪烁 */
    @keyframes borderFlash {
    from {
    border-color: transparent;
    }

    to {
    border-color: var(--primary-color, grey);
    }
    }
    /* 头像自动旋转 */
    @keyframes auto_rotate_left {
    from {
    transform: rotate(0);
    }
    to {
    transform: rotate(-360deg);
    }
    }
    @keyframes auto_rotate_right {
    from {
    transform: rotate(0);
    }
    to {
    transform: rotate(360deg);
    }
    }
    .flink#article-container .flink-list > .flink-list-item a:hover {
    color: #fff;
    }

    .flink .flink-list > .flink-list-item a {
    color: var(--primary-color, #49b1f5);
    text-decoration: none;
    }

    .flink .flink-list > .flink-list-item:hover {
    box-shadow: 0 2px 20px var(--primary-color, #49b1f5);
    animation-play-state: paused;
    }

    .flink#article-container .flink-list > .flink-list-item:before {
    background: var(--primary-color, #49b1f5);
    }

    .flink .flink-list > .flink-list-item {
    border: 0px solid var(--primary-color, #49b1f5);
    }
    .flink#article-container .flink-list > .flink-list-item:hover img {
    -webkit-transform: rotate(var(--primary-rotate));
    -moz-transform: rotate(var(--primary-rotate));
    -o-transform: rotate(var(--primary-rotate));
    -ms-transform: rotate(var(--primary-rotate));
    transform: rotate(var(--primary-rotate));
    }
    /* 头像自动旋转 */
    .flink#article-container .flink-list > .flink-list-item a .lauto {
    animation: auto_rotate_left var(--autotime) linear infinite;
    }
    .flink#article-container .flink-list > .flink-list-item a .rauto {
    animation: auto_rotate_right var(--autotime) linear infinite;
    }
    /* 友联字体颜色 */

    /* name与desc的颜色 */
    .flink#article-container .flink-list > .flink-list-item .customcolor {
    color: var(--namecolor, #1f2d3d);
    }
    /* name与des鼠标悬停的字体颜色 */
    .flink#article-container .flink-list > .flink-list-item .customcolor:hover {
    color: #fff;
    }
  3. Friend容器

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

  4. Friend对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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. 引入jQuery库

    由于Speak使用了jQuery的语法,因此需要引入jQuery。

    butterfly主题的jQuery在文章后边边引入的,因此我们需要在文章开头处再次引入。

    1
    <script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  2. 引入Friend对象

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <script>
    // 使用jQuery的方法,将容器放到全局最上方
    $('.flink').prepend('<div id="friend1"></div>')
    // 解决pjax问题
    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>
  1. 完成

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

码云issue格式

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
**标题请书写你的链接,不要写其他内容**
```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


1
2
3
4
5
6
7
8
9
10
11
12
13

**其他问题参考[Friend](https://docs.tzki.cn/Friend)**

## 常见问题

1. 没有样式

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    ---
    title: 友情链接
    date: 2020-02-02 10:00:00
    type: "link"
    top_img: https://tva1.sinaimg.cn/large/832afe33ly1gbi1rf2bppj21hc0jgwmw.jpg
    aside: false

    ---

    <script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src='https://unpkg.com/ifriend/index.js'></script>

    <script>
    $('.flink').prepend('<div id="friend1"></div>')
    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>


    ## 我的信息

    ```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"

评论