7

Hexo NexT 添加友链页面

 3 years ago
source link: https://wangjiezhe.com/posts/2021-03-30-add-link-page/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

关于如何给 NexT 主题添加友链页面，在网上能够搜到很多，但是基本上都已经过时了。

要么是没有把数据文件和主题分离，还在修改主题中的文件（而且是旧版的文件，新版的主题结构和内容都有变化）；要么是给出的代码还依赖 jQuery。

而新版的 NexT 主题除了 Fancybox 外，其它功能都已经不再依赖 jQuery 了。由于 Fancybox 和我的 WebP 检测代码冲突，所以我切换到了 medium-zoom，这样就不再引入 jQuery 了。

因此，网上找到的代码就不能拿过来直接用了。

这里主要需要修改的是 link.js 文件。

1. 涉及到的文件

.
├── _config.next.yml
└── source
    ├── _data
    │   └── body-end.njk
    ├── css
    │   └── link.css
    ├── js
    │   └── link.js
    └── links
        ├── index.md
        └── linklist.json

2.1. 建立页面

hexo new page links

这会创建 source/links/index.md 文件。

文件示例：

---
title: 友情链接
type: links
toc:
  enable: false
---

<link rel="stylesheet" href="/css/link.css">

{% note info %}

排名不分先后，每次刷新会随机排列。

{% endnote %}

<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>
  留言互换友链 o ((>ω<)) o
  <span class="with-love" id="animate2"><i class="fa fa-heart"></i></span>
</div>

------

{% note success %}

## 友链格式

- 名称：如鱼饮水，冷暖自知
- 网址：[https://wangjiezhe.com](https://wangjiezhe.com)
- 头像：[https://gravatar.loli.net/avatar/e09cf54e933e5a690716e68961ff3b1c?s=512](https://gravatar.loli.net//avatar/e09cf54e933e5a690716e68961ff3b1c?s=512)

{% endnote %}

注意在 Front-Matter 里一定要有 type: links。

这里我还关闭了侧边栏的目录。

2.2. 存储数据

所有友链的数据都放在 source/links/linklist.json 里，其格式为：

[
  {
    "name": "",
    "site": "",
    "avatar": ""
  },
  {
    "name": "",
    "site": "",
    "avatar": ""
  }
]

其中 name 为网站的名字，site 为网址，avatar 为头像。

头像可以使用 Gravatar，这样可以保证始终可用的。

2.3. 渲染页面

在 source/_data/body-end.njk 中，引入 link.js：

{% if page.type === 'links' %}
  {{- next_js('link.js', true) }}
{% endif %

其中 source/js/link.js 的内容为

// 随机排列
function shuffle(arr) {
  let i = arr.length;
  while (i) {
    let j = Math.floor(Math.random() * i--);
    [arr[j], arr[i]] = [arr[i], arr[j]];
  }
}

// 渲染数据
function renderlink(data) {
  var name, avatar, site, li = "";
  shuffle(data);
  for (var i = 0; i < data.length; i++) {
    name = data[i].name;
    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">' + name + '</a></div>' + '</div>' + '</div>';
  }
  document.querySelector(".link-navigation").innerHTML = li;
}

// 获取 json 文件
fetch('/links/linklist.json')
  .then(response => response.json())
  .then(res => renderlink(res));

2.4. 创建样式

创建 source/css/link.css，其内容为（这个文件完全来自于网络）：

.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
}

2.5. 添加侧栏

在主题的配置文件（目前默认为 _config.next.yml）中，添加

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

大功告成！


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK