改进 Next 主题友链书写方式

发表于 分类于

声明：友链的设计源于主题 handsome，主题链接：https://www.ihewro.com/archives/489/ 本文仅模仿了其风格，若造成侵权，请联系我删除。

首先在 next主题文件夹/layout/ 下新建 links.njk，写入以下内容：

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
    {##################}
    {### LINKS BLOCK ###}
    {##################}

<style>
    @media (min-width: 768px) {
        .link-card {
            width: 50%;
            float: left;
        }
    }
    .link-card{
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        box-sizing: border-box;
    }
    .link-user-list{
        margin-bottom: 5px;
        border-radius: 3px;
        padding: 15px;
        display: block;
        box-shadow: 0 2px 6px rgba(0,0,0,.1);
        position: relative;
    }
    .link-user-list:hover{
        background-color: #f6f8f8;
        text-decoration: none;
    }
    #link-container a{
        border: none;
    }
    .user-avatar img{
        border: 2px solid #fff;
        height: auto;
        vertical-align: middle;
        width: 100%;
        border-radius: 20%;
        max-width: 100%!important;
        margin: 0px !important;
    }
    .clearfix:after{
        content: ' '; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    .text-ellipsis{
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 13px;
    }
    .user-message{
        display: block;
        overflow: hidden;
    }
    .user-description{
        color: #a0a0a0;
    }
    .user-avatar{
        display: inline-block;
        width: 52px;
        height: auto;
        float: left !important;
        margin-right: 15px;
        position: relative;
        white-space: nowrap;
    }
</style>
<div id="link-container">
    {% for link_config in site.data.links -%}
    {% if link_config.class_name -%}
    <h2 id="{{ link_config.class_name }}">
        <a href="#{{ link_config.class_name }}" class="headerlink" title="{{ link_config.class_name }}"></a>
        {{ link_config.class_name }}
    </h2>
    {% else %}
    <hr>
    {%- endif %}
    <div class="clearfix">
    {% for link in link_config.link_list -%}
    <div class="link-card">
        <a href="{{ link.site }}" target="_blank" class="link-user-list">
            <span class="user-avatar">
                <img src="{{ link.avatar }}" class="nofancybox">
            </span>
            <span class="user-message">
                <span class="text-ellipsis">{{ link.nickname }}</span>
                <span class="user-description text-ellipsis">{{ link.info }}</span>
            </span>
        </a>
    </div>
    {%- endfor %}
    </div>
    {%- endfor %}

    <div>
    {{ page.content }}
    </div>
</div>
    {######################}
    {### END LINKS BLOCK ###}
    {######################}

接下来打开 next主题文件夹/layout/page.njk，在 block title 区域中某个 elif 语句后添加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% 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 %}

接下来在下面的 PAGE BODY 中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{### PAGE BODY ###}
      {#################}
      <div class="post-body{% if page.direction and page.direction.toLowerCase() === 'rtl' %} rtl{% endif %}">
        {%- if page.type === 'tags' %}
          {%- include '_partials/page/tags.njk' -%}
        {% elif page.type === 'categories' %}
          {%- include '_partials/page/categories.njk' -%}
        {% elif page.type === 'schedule' %}
          {%- include '_partials/page/schedule.njk' -%}
+        {% elif page.type === 'links' %}
+          {%- include 'links.njk' -%}
        {% else %}
          {{ page.content }}
        {%- endif %}
      </div>
      {#####################}
      {### END PAGE BODY ###}
      {#####################}

接下来就是创建 source/links/index.md，配置好里面的友链申请信息了（注意 front-matter 的 type 的值必须为 links！）。

然后打开 _config.next.yml，在 menu 中添加

1
2
menu:
  links: /links/ || fas fa-link

打开 hexo/themes/next/languages/zh-CN.yml，在 menu 中添加

1
2
menu:
  links: 友链

最后在 hexo根目录/source/_data/ 下创建 links.yml 并填入以下内容：

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
# 参数说明
# class_name 选填，可以理解为友链组的名字，如果不填则会在顶部生成一个分割线
# nickname 博客名称
# site 博客地址
# info 博客简介
# avatar 博客logo
# 填写时注意缩进！

- class_name:
  link_list:
    - nickname:
      site:
      info:
      avatar:
    - nickname:
      site:
      info:
      avatar:

- class_name:
  link_list:
    - nickname:
      site:
      info:
      avatar:
    - nickname:
      site:
      info:
      avatar:

参考