hexo-tag-friends v0.3.4

Hexo-Tag-Friends

Friends' cards tag plugins for Hexo.

If the styles can't satisfy you, you can let me create a specific style for you. Or you can add a style, and let me merge it into repository.

中文文档

Online Demo

Install

npm install hexo-tag-friends --save

Usage

Creat a new page, then put the friendsgrid tag like below.

{% friendsgrid style:[1/2/3/4] shuffle:[true/false] %}
...
{% endfriendsgrid %}

option

• style : the style of friends' cards, it can be 1/2/3/4
• shuffle : should the friends' cards be random, it can be true/false

Style1 Example

{% friendsgrid style:1 shuffle:true %}
枫糖1 | https://blog.maplesugar.space | https://cdn.jsdelivr.net/gh/maplesugarr/blog-assets@master/imgs/maple-leaf-avatar.jpg
枫糖2 | https://blog.maplesugar.space | https://cdn.jsdelivr.net/gh/maplesugarr/blog-assets@master/imgs/maple-leaf-avatar.jpg
枫糖3 | https://blog.maplesugar.space | https://cdn.jsdelivr.net/gh/maplesugarr/blog-assets@master/imgs/maple-leaf-avatar.jpg
{% endfriendsgrid %}

Style2 Example

{% friendsgrid style:2 shuffle:true %}
枫糖1 | https://blog.maplesugar.space | https://cdn.jsdelivr.net/gh/maplesugarr/blog-assets@master/imgs/maple-leaf-avatar.jpg |
枫糖2 | https://blog.maplesugar.space | https://cdn.jsdelivr.net/gh/maplesugarr/blog-assets@master/imgs/maple-leaf-avatar.jpg | From rookie to master
枫糖3 | https://blog.maplesugar.space | https://cdn.jsdelivr.net/gh/maplesugarr/blog-assets@master/imgs/maple-leaf-avatar.jpg | From rookie to master
{% endfriendsgrid %}

Style3 Example

{% friendsgrid style:3 shuffle:true %}
枫糖1 | https://blog.maplesugar.space | https://cdn.jsdelivr.net/gh/maplesugarr/blog-assets@master/imgs/maple-leaf-avatar.jpg | From rookie to master | 个人小站
枫糖2 | https://blog.maplesugar.space | https://cdn.jsdelivr.net/gh/maplesugarr/blog-assets@master/imgs/maple-leaf-avatar.jpg | From rookie to master | 个人小站
枫糖3 | https://blog.maplesugar.space | https://cdn.jsdelivr.net/gh/maplesugarr/blog-assets@master/imgs/maple-leaf-avatar.jpg | From rookie to master | 个人小站
{% endfriendsgrid %}

Style4 Example

{% friendsgrid style:4 shuffle:true %}
枫糖1 | https://blog.maplesugar.space | https://cdn.jsdelivr.net/gh/maplesugarr/blog-assets@master/imgs/maple-leaf-avatar.jpg |
枫糖2 | https://blog.maplesugar.space | https://cdn.jsdelivr.net/gh/maplesugarr/blog-assets@master/imgs/maple-leaf-avatar.jpg | From rookie to master
枫糖3 | https://blog.maplesugar.space | https://cdn.jsdelivr.net/gh/maplesugarr/blog-assets@master/imgs/maple-leaf-avatar.jpg | From rookie to master
{% endfriendsgrid %}

Customize media query

Style1 and style2 uses media query to determine friend cards' width. It queries browser window width, not the DOM contains friend cards. So some hexo themes need to adjust slightly.

@media(max-width:567px) {
    /* friend cards width */
    .link-grid-2 .link-item {
        width: calc((100% - 32px) / 2);
    }
}

@media(min-width:567px) {
    .link-grid-2 .link-item {
        width: calc((100% - 48px) / 3);
    }
}

@media(min-width:768px) {
    .link-grid-2 .link-item {
        width: calc((100% - 64px) / 4);
    }
}

@media(min-width:991px) {
    .link-grid-2 .link-item {
        width: calc((100% - 80px) / 5);
    }
}

@media(min-width:1200px) {
    .link-grid-2 .link-item {
        width: calc((100% - 96px) / 6);
    }
    /* friend cards intro's font */
    .link-grid-2 .link-intro p {
        padding: 16px 12px;
        font-size: 12px;
        line-height: 12px;
    }
}