hexo博客next主题自定义友情链接页面 - Sanarous的博客

hexo博客next主题自定义友情链接页面

| | ℃
| 1.2k

很多博客放友情链接都是放在 Next 主题配置文件下的 Social Link 下面，其实还是挺实用的，但是如果想要更美观一些的话，完全可以自定义一个友情链接页面，最近也有小伙伴问我的友链是怎么做的，下面我就分享一下我的友链界面制作教程。如果你喜欢的话可以在文章末尾给个五星好评或者留言点赞哦~

在 hexo/themes/next/layout 目录下新建一个 link.swig文件，并写入以下内容：

文件位置： hexo/themes/next/layout
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
145
146
{% block content %}
  {######################}
  {### LINKS BLOCK ###}
  {######################}
  
    <div id="links">
        <style>
            .container .main-inner {
                width: 1100px;
            }
            .links-content{
                margin-top:1rem;
            }
            
            .link-navigation::after {
                content: " ";
                display: block;
                clear: both;
            }
            
            .card {
                width: 45%;
                font-size: 1rem;
                padding: 10px 20px;
                border-radius: 4px;
                transition-duration: 0.15s;
                margin-bottom: 1rem;
                display:flex;
            }

            @media(max-width: 1400px){
                .card{
                    width: 40% !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: #d480aa;
                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 %}

然后修改 hexo/themems/next/layout/page.swig 文件，在

文件位置：hexo/themems/next/layout/page.swig
1
2
#}{% elif page.type === "tags" and not page.title %}{#
    #}{{ __('title.tag') + page_title_suffix }}{#

位置添加如下代码：

1
2
3
<!-- 友情链接-->
#}{% elif page.type === 'links' and not page.title %}{#
  #}{{ __('title.links') + page_title_suffix }}{#

然后还是在这个 page.swig 文件中，引入刚才新建的 swig 页面：

1
2
3
<!-- 友情链接-->
{% elif page.type === 'links' %}
    {% include 'links.swig' %}

这个代码位置可以放到下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    {% 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' %}
    {% else %}
      {{ page.content }}
    {% endif %}
  </div>

然后我们使用 GitBash 新建一个菜单栏：

命令位置：hexo根目录
1
hexo new page "links"

这样在 hexo/source 目录下会生成一个 links 文件夹，打开其中的 index.md 文件，在标题头中写入 type = "links" 这个属性头，如下：

1
2
3
4
5
---
title: 友情链接
date: 2019-06-28 20:46:16
+ type: "links"
---

如果需要关闭这个页面的评论的话，可以设置如下：

1
2
3
4
5
6
---
title: 友情链接
date: 2019-06-28 20:46:16
type: "links"
+ comments: false
---

最后，我们添加友链的话，需要在主题配置文件 hexo/themes/next/_config.xml 文件末尾添加：

1
2
3
4
5
6
7
8
9
10
11
# 友情链接
mylinks:
  - nickname: Sanarous     # 昵称
    avatar: https://bestzuo.cn/images/touxiang.jpeg    # 头像地址
    site: https://bestzuo.cn  #友链地址
    info: 码农人生
    
  - nickname: Sanarous     # 昵称
    avatar: https://bestzuo.cn/images/touxiang.jpeg    # 头像地址
    site: https://bestzuo.cn  #友链地址
    info: 码农人生

保持这个格式就行，然后就会从上往下渲染到 links 页面，当然，菜单栏汉化需要在 next 主题目录下 languages 文件中找到 zh-CN 或者 zh-Hans.yml 文件，新增 links ：

文件位置：hexo/themes/next/languages/zh-CN.yml
1
2
3
4
5
6
7
8
9
10
11
12
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404
  top: 热门
+  links: 友链

然后就可以使用了！如果小伙伴们觉得好用记得在文章末尾点个赞或者留个言哦😄 ~

📚  相关文章
如果这篇文章对您很有帮助，不妨
-------------　　　　本文结束　　感谢您的阅读　　　　-------------
0%