Hexo-NexT 新建友链页面

 title: "Hexo-NexT 新建友链页面"

slug: "hexo-new-page-links"
date: 2020-07-14T10:22:25+08:00
draft: false
toc: true
weight: false
categories: ["建站笔记"]
tags: ["hexo"]

1. 准备工作

开启fancybox，配置jquery的CDN。

fancybox: true

vendors:
​
  # FancyBox
  # jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
  # fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
  # fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
  jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
  fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
  fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css

2. 新建 links 页面

新建 links 页面，输入放置友链的 html 元素：

hexo new page links

这样会在 /source/ 下创建 links/index.md。在文档的 front matter 添加 type: links，编辑好自己需要的友链页面内容，然后输入放置友链的 html 元素。示例：

---
title: 友情链接
type: links
---
​
<style>.links-content{margin-top:1rem}.link-navigation::after{content:" ";display:block;clear:both}.card{width:130px;font-size:1rem;padding:0;border-radius:4px;transition-duration:.15s;margin-bottom:1rem;display:block;float:left;box-shadow:0 2px 6px 0 rgba(0,0,0,.12);background:#f5f5f5}.card{margin-left:16px}@media(max-width:567px){.card{margin-left:16px;width:calc((100% - 16px)/2)}.card:nth-child(2n+1){margin-left:0}.card:not(:nth-child(2n+1)){margin-left:16px}}@media(min-width:567px){.card{margin-left:16px;width:calc((100% - 32px)/3)}.card:nth-child(3n+1){margin-left:0}.card:not(:nth-child(3n+1)){margin-left:16px}}@media(min-width:768px){.card{margin-left:16px;width:calc((100% - 48px)/4)}.card:nth-child(4n+1){margin-left:0}.card:not(:nth-child(4n+1)){margin-left:16px}}@media(min-width:1200px){.card{margin-left:16px;width:calc((100% - 64px)/5)}.card:nth-child(5n+1){margin-left:0}.card:not(:nth-child(5n+1)){margin-left:16px}}.card:hover{transform:scale(1.1);box-shadow:0 2px 6px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.card .thumb{width:100%;height:0;padding-bottom:100%;background-size:100% 100%!important}.posts-expand .post-body img{margin:0;padding:0;border:0}.card .card-header{display:block;text-align:center;padding:1rem .25rem;font-weight:500;color:#333;white-space:normal}.card .card-header a{font-style:normal;color:#2bbc8a;font-weight:700;text-decoration:none;border:0}.card .card-header a:hover{color:#d480aa;text-decoration:none;border:0}</style><div><div class="links-content"><div class="link-navigation" id="links1"></div></div></div>
​
------
​
<div style="text-align:center;"><span class="with-love" id="animate1">
    <i class="fa fa-heart"></i>
  </span>留言添加友链<span class="with-love" id="animate2">
    <i class="fa fa-heart"></i>
  </span></div>
​
------
​
{% note success %}
​
## 友链格式
​
- 网站名称：Bore's Notes
- 网站地址：[https://bore.vip](https://bore.vip)
- 网站描述：博观而约取，厚积而薄发
- 网站头像：[点击获取](https://cdn.jsdelivr.net/gh/iwyang/pic/avatar.jpg)
​
{% endnote %}

3. 侧边栏添加友链页面链接

主题配置文件next.yml 中添加：

menu:
  home: / || fa fa-home
  categories: /categories/ || fa fa-th
  tags: /tags/ || fa fa-tags
  archives: /archives/ || fa fa-archive
  about: /about/ || fa fa-user
+  links: /links/ || fa fa-link

4. 添加友链的 json 文件

在页面目录 /source/links/ 中添加 linklist.json，示例：

[{
        "nickname": "ConstOwn",
        "avatar": "https://blog.juanertu.com/images/avatar.png",
        "site": "https://blog.juanertu.com"
    },
    {
        "nickname": "小丁的个人博客",
        "avatar": "https://tding.top/images/avatar.webp",
        "site": "https://tding.top"
    },
    {
        "nickname": "Xu’s Blog",
        "avatar": "https://hasaik.com/images/avatar.jpg",
        "site": "https://hasaik.com"
    }
]

5. 新建link.js

在根目录/source/js文件夹下新建link.js，输入：

link = {
  init: function() {
      var that = this;
      //这里设置的是刚才的 linklist.json 文件路径
      $.getJSON("/links/linklist.json",
      function(data) {
          that.render(data);
      });
  },
  render: function(data) {
      var html, nickname, avatar, site, li = "";
      for (var i = 0; i < data.length; i++) {
          nickname = data[i].nickname;
          avatar = data[i].avatar;
          site = data[i].site;
          li += '<div class="card">' + '<a href="' + site + '" target="_blank">' + '<div class="thumb" style="background: url( ' + avatar + ');">' + '</div>' + '</a>' + '<div class="card-header">' + '<div><a href="' + site + '" target="_blank">' + nickname + '</a></div>' + '</div>' + '</div>';
​
      }
      $(".link-navigation").append(li);
  }
}
link.init();

6. 加载 link.js

首先在next.yml中启用自定义文件body-end.njk，然后在 body-end.njk 中添加：

{# 友链设置 #}
{% if page.type === 'links' %}
  <script src="/js/link.js"></script>
{% else %}
​
{% endif %}

7. 参考链接

• Hexo-NexT 新增友链

•