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

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

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

//文件位置：hexo/themes/next/layout


{% 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>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	var randnum = function(n) {
			return Math.round(Math.random() * n)
		},
		hexify = function(n) {
			return ("0" + parseInt(n).toString(16)).slice(-2)
		},
		randex = function() {
			return "#" + hexify(randnum(255)) + hexify(randnum(255)) + hexify(randnum(255))
		},
		blender = function() {
			return Math.round(Math.random()) ? "radial-gradient(circle at " + randnum(100) + "% " + randnum(100) + "%, " +
				randex() + ", " + randex() + ")" : "linear-gradient(" + randnum(360) + "deg, " + randex() + ", " + randex() + ")"
		};
	$(".card").each(function() {
		var n = blender();
		$(this).hover(function() {
			$(this).css("background-image", n);
		}, function() {
			$(this).css("background-image", "none");
		})
	}), $(".card").click(function() {
		var n = $(this).children(".card-header").children("div").children("a").attr("href");
		window.location.href = n
	});
</script>
  
  {##########################}
  {### END LINKS BLOCK ###}
  {##########################}
{% endblock %}

然后修改 hexo/themems/next/layout/page.swig 文件，在下面所示地方：

#}{% 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 }}{#

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

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

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

    {% 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根目录
hexo new page "links"

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

---
title: 友情链接
date: 2019-06-28 20:46:16
+ type: "links"
---

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

---
title: 友情链接
date: 2019-06-28 20:46:16
type: "links"
+ comments: false
---

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

# 友情链接
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 ：

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404
  top: 热门
+  links: 友链

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