为 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.js
themes\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.jsx
themes\icarus\source\js\getLinks.js
新建友情链接页面文件
随后你需要在 Hexo 目录下建立 source/about
文件夹,並在其中新建 index.md
文件,再依照以下格式填写内容即可:
1 |
|
务必注意 layout
应为 links
属性。
配置友链信息及个性化定制
你需要於文件中更改些许配置:
- 位于
<div class="card-content">
中的提示信息:themes\icarus\layout\links.jsx
themesicarus\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.jsx
themes\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.js
themes\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.js
themes\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