为 ICARUS 而生的友情链接页面
Icarus 是个好主题，但加上友链界面就更棒啦，所以适当的魔改亦十分重要。那么，如何利用 Icarus 原有的素材拼凑出一个友链界面呢？
启发
针对 Icarus 主题並未设计独立的友链页面，我在迁移之初就已经思考如何设计了。最终，我决定现学现卖，用 Icarus 归档页面重新拼凑一个友链页面。因为我非常欣赏这种时间线的展现模式。
同时受 苏卡卡的友链页面 的启发，我最终抛弃了静态编写的执念，转而采用 JavaScript 动态解析 JSON 的模式实现。
具体效果可於 Kitcham的友链页面 预览，项目亦已於 Github 仓库 Kitcham/hexo-theme-icarus/links分支 开源。本仓库亦包含我个人对 Icarus 主题的一些魔改配置，有关本文提到的友链相关文件请切换到 links 分支。
注意，本文仅专注於 JSON 的获取及前端样式设计，有关 JSON 的转换及生成请参阅我另一篇文章 没人比我更懂方便 —— 透过 Github Action 优雅生成友链数据。
原理
实际上原理並不十分复杂，本项目的解析 JavaScript 脚本亦是大体借鉴 苏卡卡的友链页面 ，並在此基础上进行了 URL 的格式改写等操作。
本项目大致思想是通过设立标签 apps-links-info 负责显示友链信息，apps-links-load-tips 负责显示提示信息，並於 JSON 加载解析完成前保持 apps-links-info 标签的隐藏 display='none' 属性及 apps-links-load-tips 标签的展示 display='block' 属性。当 JSON 解析完毕后，二者属性分别反转，这样友链信息页面就展示出来了。
同时，本项目还对以下三种情况做出判断：
- 用户是否开启
JavaScript的判断，如用户未开启JavaScript则提示其开启后再度尝试 JSON文件是否能够获取，若不能获取，提示加载失败themes\icarus\source\js\getLinks.jsthemes\icarus\source\js\getLinks.js 1
2
3
4
5
6
7
8
9
10
11
12loadwerror = function() {
targetTemp.innerHTML = '<p class="title tips">加载失败，请 <a href="/links/">刷新</a> 重试！</p>'
},
(load = new XMLHttpRequest).open("GET", encodeURI(jsonTarget), !0),
load.onload = function() {
var e;
200 <= load.status && load.status < 300 || 304 === load.status ? (e = JSON.parse(load.responseText), name(e)) : loadwerror()
},
load.timeout = 4500,
load.ontimeout = blogLink,
load.onerror = blogLink,
load.send()
- 对 URL 进行格式化
如何食用
下载相关文件
将 Kitcham/hexo-theme-icarus/links分支 仓库的 links 分支 Fork 到自己的 Github Repo 中，随后你可对其进行一些自己的个性化修改（如你自己的友链信息、展现风格等）。然后下载到本地依照对应路径存放在主题文件夹中。
本修改主要涉及下述两个文件：
themes\icarus\layout\links.jsxthemes\icarus\source\js\getLinks.js
新建友情链接页面文件
随后你需要在 Hexo 目录下建立 source/about 文件夹，並在其中新建 index.md 文件，再依照以下格式填写内容即可：
1 |
|
务必注意 layout 应为 links 属性。
配置友链信息及个性化定制
你需要於文件中更改些许配置：
- 位于
<div class="card-content">中的提示信息：themes\icarus\layout\links.jsxthemesicarus\layout\links.jsx 1
2
3
4
5<div class="card">
<div class="card-content">
<p>这里是我永远膜拜的奆佬们~~</p>
</div>
</div>
- 位于
<div class="card" id="my-links-info">中的个人网站友链信息：themes\icarus\layout\links.jsxthemes\icarus\layout\links.jsx 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<div class="card-content" >
<p>若果希望贵站出现在此，敬请依照下面的方法交换吧~二者任一皆可</p>
<ul class=".content ul" style=>
<li>敬请阅读 <a href="https://github.com/Kitcham/Friends">Kitcham/Friends</a> 此 GitHub 仓库的 README，然后依照操作指引提交 PR 即可完成交换啦！</li>
<li>於评论区依照如下格式留言，由我提交到 Github 仓库进行 PR，这样也是可以的~</li>
</ul>
<br/><p>本站信息胪列如下（亦是参考格式）：</p>
<ul class=".content ul" style=>
<li><strong>网站图标：</strong><a href="https://example.com/example.png">https://example.com/example.png</a></li>
<li><strong>Gravatar：</strong><a href="https://example.com/example.png">https://example.com/example.png</a></li>
<li><strong>网站名称：</strong>你的网站名称</li>
<li><strong>网站地址：</strong><a href="https://example.com/">https://example.com/</a></li>
<li><strong>网站简介/Slogan：</strong>Hello, world</li>
</ul>
<br/><p>Some information…</p>
</div>- 你亦可於标签
<ul class=".content ul" style={{……}}>内更换为你的CSS样式
JSON的获取地址：themes\icarus\source\js\getLinks.jsthemes\icarus\source\js\getLinks.js 1
2
3
4
5
6
7
8
9
10!function links(target, getFor ) {
var load, loadwerror, jsonTarget, name, blogLink, imageUrl, targetTemp = target.getElementById("app-links");
jsonTarget = "https://example.com/links.json", // Your JSON URL 此处填写你的 JSON 发布地址
name = function(e) {
……
}
getFor(function() {
……
})
},
JSON的解析结果调整及友链信息显示：themes\icarus\source\js\getLinks.jsthemes\icarus\source\js\getLinks.js 1
2
3
4
5
6
7
8
9
10
11
12
13!function links(target, getFor ) {
……
for (var o in e) {
var count = e[o];
blogLink = count.url;
blogLink = blogLink.replace('https://', ''); // remove http(s) 去除 http(s)
if (blogLink.endsWith("/")) {
blogLink = blogLink.substring(0,blogLink.length - 1);
}
content += (name = o, blogLink, imageUrl = count.img, slogan = count.text, '<article class="media"><a class="media-left" href="' + count.url + '"><p class="image is-64x64"><img class="thumbnail" src="' + imageUrl + '" alt="' + name + '"></p></a><div class="media-content size-small"><p class="is-uppercase"><a class="link-muted" href="' + count.url + '">' + blogLink + '</a></p><p class="title is-6"><a class="link-muted" href="' + count.url + '">' + name + '</a></p><p class="is-uppercase"><a class="link-muted" href="' + count.url + '">' + slogan + '</a></p></div></article>')
}
……
},- 你可於该部分修改
JSON解析结果及前端展示信息的样式 - 该部分的去除
http(s)未来将修改为正则匹配
请务必注意各 div 的 class，id等信息的匹配
JSON 哪里来？
本文仅专注於 JSON 的获取及前端样式设计，有关 JSON 的转换及生成请参阅我另一篇文章 没人比我更懂方便 —— 透过 Github Action 优雅生成友链数据。
结语
该方案只是经我个人思考后，认为普适性较高的方案。如果你有更优雅的方案，欢迎交流~
参考资料
为 ICARUS 而生的友情链接页面
https://blog.uiharu.top/archives/feat-icarus-links-page.html
