Hexo之添加友链

添加友链

  1. 新建 links 页面

    1. hexo new page links

    2. 修改:/source/links/index.md

      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
      ---
      title: 友链
      date: 2021-08-22 23:37:48
      type: "links"

      ---

      ### 申请要求:

      1. 和本人是好朋友QAQ
      2. 网页整洁、无推广
      3. 网站内容积极向上

      ### 友链声明:

      1. 本站会定期清理无法访问的友链,如果更换了链接信息请及时与本人联系,谢谢合作!
      2. 本站会定期查看双方是否互为友链,如果取消本站友链,本站也会将您的友链移除

      ### 申请方式:

      先将本站的友链添加到您的友链,相关信息如下
      然后按照以下格式与本人联系,待博主为您添上友链

      >名 称:ducknew
      >头像链接:https://cdn.jsdelivr.net/gh/cheungducknew/cdn@latest/img/avatar.jpg
      >
      >主页链接:https://cheungducknew.github.io/
      >说明信息:关注我→关注我←关注我
      • 添加 title,是为了标题中出现 title
      • 添加 type,是为了显示友链的对象,不添加不显示
  2. 新建 links.swig 文件

    \themes\next\layout新建links.swig

    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
    112
    113
    114
    115
    116
    117
    118
    119
    120
    {% block content %}
    {######################}
    {### LINKS BLOCK ###}
    {######################}

    <div id="links">
    <style>

    #links{
    margin-top: 5rem;
    }

    .links-content{
    margin-top:1rem;
    }

    .link-navigation::after {
    content: " ";
    display: block;
    clear: both;
    }

    .card {
    width: 300px;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 4px;
    transition-duration: 0.15s;
    margin-bottom: 1rem;
    display:flex;
    }
    .card:nth-child(odd) {
    float: left;
    }
    .card:nth-child(even) {
    float: right;
    }
    .card:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    }
    .card a {
    border:none;
    }
    .card .ava {
    width: 3rem!important;
    height: 3rem!important;
    margin:0!important;
    margin-right: 1em!important;
    border-radius:4px;

    }
    .card .card-header {
    font-style: italic;
    overflow: hidden;
    width: 236px;
    }
    .card .card-header a {
    font-style: normal;
    color: #2bbc8a;
    font-weight: bold;
    text-decoration: none;
    }
    .card .card-header a:hover {
    color: #d480aa;
    text-decoration: none;
    }
    .card .card-header .info {
    font-style:normal;
    color:#a3a3a3;
    font-size:14px;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    }
    </style>
    <div class="links-content">

    <div class="no-icon note warning"><div class="link-info">👨‍🎓 大佬们~ </div></div>
    <div class="link-navigation">
    {% for link in theme.defaultlinks %}

    <div class="card">
    <img class="ava nofancybox" src="{{ link.avatar }}"/>
    <div class="card-header">
    <div><a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a> </div>
    <div class="info">{{ link.info }}</div>
    </div>
    </div>

    {% endfor %}

    </div>

    <div class="no-icon note primary"><div class="link-info">🍭 好朋友们~</div></div>

    <div class="link-navigation">
    {% for link in theme.friendslinks %}

    <div class="card">
    <img class="ava nofancybox" src="{{ link.avatar }}"/>
    <div class="card-header">
    <div><a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a> </div>
    <div class="info">{{ link.info }}</div>
    </div>
    </div>

    {% endfor %}

    </div>

    {{ page.content }}
    </div>
    </div>

    {##########################}
    {### END LINKS BLOCK ###}
    {##########################}
    {% endblock %}
  3. 修改 page.swig 文件

    修改 /themes/next/layout/page.swig

    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
    {% extends '_layout.swig' %}
    {% import '_macro/sidebar.swig' as sidebar_template with context %}

    {% block title %}
    {%- set page_title_suffix = ' | ' + title %}

    {%- if page.type === 'categories' and not page.title %}
    {{- __('title.category') + page_title_suffix }}
    {%- elif page.type === 'tags' and not page.title %}
    {{- __('title.tag') + page_title_suffix }}
    {%- elif page.type === 'schedule' and not page.title %}
    {{- __('title.schedule') + page_title_suffix }}
    + {% elif page.type === 'links' and not page.title %}
    + {{ __('title.links') + page_title_suffix }}
    {%- else %}
    {{- page.title + page_title_suffix }}
    {%- endif %}
    {% endblock %}

    {% block class %}page posts-expand{% endblock %}

    {% block content %}

    {##################}
    {### PAGE BLOCK ###}
    {##################}
    <div class="post-block" lang="{{ page.lang or config.language }}">
    {% include '_partials/page/page-header.swig' %}
    {#################}
    {### PAGE BODY ###}
    {#################}
    <div class="post-body{%- if page.direction and page.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}">
    {%- if page.type === 'tags' %}
    <div class="tag-cloud">
    <div class="tag-cloud-title">
    {{ _p('counter.tag_cloud', site.tags.length) }}
    </div>
    <div class="tag-cloud-tags">
    {{ tagcloud({
    min_font : theme.tagcloud.min,
    max_font : theme.tagcloud.max,
    amount : theme.tagcloud.amount,
    color : true,
    start_color: theme.tagcloud.start,
    end_color : theme.tagcloud.end})
    }}
    </div>
    </div>
    {% elif page.type === 'categories' %}
    <div class="category-all-page">
    <div class="category-all-title">
    {{ _p('counter.categories', site.categories.length) }}
    </div>
    <div class="category-all">
    {{ list_categories() }}
    </div>
    </div>
    {% elif page.type === 'schedule' %}
    <div class="event-list">
    </div>
    {% include '_scripts/pages/schedule.swig' %}
    {% elif page.type === 'links' %}
    {% include 'links.swig' %}
    {% else %}
    {{ page.content }}
    {%- endif %}
    </div>
    {#####################}
    {### END PAGE BODY ###}
    {#####################}
    </div>
    {% include '_partials/page/breadcrumb.swig' %}
    {######################}
    {### END PAGE BLOCK ###}
    {######################}

    {% endblock %}

    {% block sidebar %}
    {{ sidebar_template.render(true) }}
    {% endblock %}
  1. 修改_config.yml 文件

    在结尾处添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # 友情链接
    defaultlinks:
    - nickname: XXX # 昵称
    avatar: http://XXX.png # 头像地址
    site: https://www.XXX.com #友链地址
    info: XXX


    friendslinks:
    - nickname: XXX # 昵称
    avatar: http://XXX.png # 头像地址
    site: https://www.XXX.com #友链地址
    info: XXX

细节处理

  1. 无法对齐

    0904-4

修改links.swig中的.card-width

0904-5

修改后:

0904-6

  1. 其他
不要打赏,只求关注呀QAQ