思建的NLP之旅

沉淀自己

0%

2020-08-12-新页面添加友链

发表于 更新于 分类于 阅读次数： Valine： 7.1k 6 分钟
在新页面添加友链

前言

NexT 主题自带的友情链接的位置是在侧栏的 Social Link 中，位置不太明显，而且容量比较小，不美观。因此可以自定义一个特定的页面，单独显示友情链接

新建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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
{% block content %}
  {######################}
  {###  LINKS BLOCK   ###}
  {######################}
<div id="links">
    <style>
        .links-content{
            margin-top:1rem;
        }
        
        .link-navigation::after {
            content: " ";
            display: block;
            clear: both;
        }
        
        .card {
            width: 240px;
            font-size: 1rem;
            padding: 10px 20px;
            border-radius: 4px;
            transition-duration: 0.15s;
            margin-bottom: 1rem;
            display:flex;
        }
        @media (max-width: 767px) {
			.card:nth-child(odd) {
                float: left;
            }
            .card:nth-child(even) {
                float: left !important;
            }
		}
		
        .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: 100%;
        }
        .card .card-header a {
            font-style: normal;
            color: #2bbc8a;
            font-weight: bold;
            text-decoration: none;
        }
        .card .card-header a:hover {
            color: #a166ab;
            text-decoration: none;
        }
        .card .card-header .info {
            font-style:normal;
            color:#a3a3a3;
            font-size:14px;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
        }

        span.focus-links {
            font-style: normal;
            margin-left: 10px;
            position: unset;
            left: 0;
            padding: 0 7px 0 5px;
            font-size: 11px;
            border-color: #42c02e;
            border-radius: 40px;
            line-height: 24px;
            height: 22px;
            color: #fff !important;
            background-color: #42c02e;
            display: inline-block;
        }
        span.focus-links:hover{
            background-color: #318024;
        }

        .friends-btn{
            text-align: center;
            color: #555!important;
            background-color: #fff;
            border-radius: 3px;
            font-size: 15px;
            box-shadow: inset 0 0 10px 0 rgba(0,0,0,.35);
            border: none!important;
            transition-property: unset;
            padding: 0 15px;
            margin: inherit;
        }

        .friends-btn:hover{
            color: rgb(255, 255, 255) !important;
            border-radius: 3px;
            font-size: 15px;
            box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
            background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
            margin: inherit;
        }
    </style>
    <div class="links-content">
        <div class="link-navigation">

            {% for link in theme.mylinks %}
            
                <div class="card">
                    <img class="ava" src="{{ link.avatar }}"/>
                    <div class="card-header">
                    <div><a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a> <a href="{{ link.site }}"><span class="focus-links">关注</span></a></div>
                    <div class="info">{{ link.info }}</div>
                    </div>
                </div>
            
            {% endfor %}

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

可以根据喜好自己更改样式

修改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
{% 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 === 'links' and not page.title %}
+	{{- __('title.links') + page_title_suffix }}
{%- elif page.type === 'schedule' and not page.title %}
  {{- __('title.schedule') + page_title_suffix }}
{%- else %}
  {{- page.title + page_title_suffix }}
{%- endif %}
{% endblock %}

{% block content %}

  <div class="posts-expand">
    {##################}
    {### PAGE BLOCK ###}
    {##################}
    <div class="post-block" lang="{{ page.lang or page.language 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 === 'links' %}
+         {% include 'links.swig' %}
        {% elif page.type === 'schedule' %}
          <div class="event-list">
          </div>
          {% include '_scripts/pages/schedule.swig' %}
        {% else %}
          {{ page.content }}
        {%- endif %}
      </div>
      {#####################}
      {### END PAGE BODY ###}
      {#####################}
    </div>
    {% include '_partials/page/breadcrumb.swig' %}
    {######################}
    {### END PAGE BLOCK ###}
    {######################}
  </div>



{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(true) }}
{% endblock %}

新建page界面

新建名为links的page，具体可以参考我的另外一篇博客2020-08-08-hexo新建page

注意： 在links 文件夹，打开其中的 index.md 文件，在标题头中写入 type = "links" 这个属性头，如下：

1
2
3
title: 友情链接
date: 2020-08-10 13:08:43
type: "links"

修改主题配置文件

在主题配置文件 ~/themes/next/_config.yml 文件中按照以下格式添加友链：

1
2
3
4
5
6
7
8
9
10
11
mylinks:

  - nickname: # 昵称
    avatar: # 头像地址
    site: #友链地址
    info: #相关说明

  - nickname: # 昵称
    avatar: # 头像地址
    site: #友链地址
    info: #相关说明

参考

Hexo-NexT 主题个性优化 https://guanqr.com/tech/website/hexo-theme-next-customization/

-------------本文结束感谢阅读-------------
卑微博主，在线求赏