好久没折腾了，都有些生疏了。这次想美化一下友链页面。原来就是一些带链接的文字堆在一起，现在想要改成每人一个方框，方框里面是博主的名字，鼠标悬停在方框上会显示博客的名字，点击博主名字在新窗口跳转到相应博客。
其实还蛮简单的。分别需要修改/links/index.md、创建link.ejs和link.styl。
index.md
修改如下：
---
title: "- 友情链接 -"
browser_title: "友链"
date: 2023-10-07 12:09:32
type: "links"
layout: "link"
links:
- name: "Hanlin"
url: "http://r64.i11r.com"
blogName: "蜈ｨ縺ｦ縺ゅ↑縺溘・謇轤ｺ縺ｧ縺吶・"
- name: "Ayu"
url: "https://ayu.land"
blogName: "~ — Ayu"
- name: "CosmoOri"
url: "https://dkn16.github.io"
blogName: "Kangning Diao"
- name: "Mokou"
url: "https://www.cnblogs.com/mokou/"
blogName: "莫多心情小站"
- name: "Origakid"
url: "https://origakid.top"
blogName: "抽象艺术大巴扎"
- name: "茨月"
url: "https://blog.zcy.moe"
blogName: "Chris Zhang"
---
|
这里的要点：layout要改成link，和之后要创建的link.ejs的名字匹配。然后在links里面添加数据，注意缩进要正确。
link.ejs
代码如下：
<div class="container">
<div class="post-wrap">
<h1 class="post-title">
<%= page.title %>
</h1>
<% for (var i=0; i < page.links.length; i++) { %>
<div class="friend-link">
<a href="<%= page.links[i].url %>" target="_blank" title="<%= page.links[i].blogName %>">
<div class="friend-name">
<%= page.links[i].name %>
</div>
</a>
</div>
<% } %>
</div>
</div>
|
很简单。在index.md里的links实际上创造了一个数组，这里遍历了数组里的全部元素，让它们一个个显示出来。“target=”_blank””的意思是在新标签页打开链接（而不是当前页面跳转）。title之后的是鼠标悬停时在旁边显示出来的东西。
link.styl
代码如下：
.friend-link {
margin-bottom: 10px;
display: inline-flex;
max-width: 100%;
flex-wrap: wrap;
}
.friend-name {
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
color: #777;
text-decoration: none;
transition: background-color 0.3s;
margin-right: 10px;
margin-bottom: 10px;
}
.friend-name:hover {
background-color: #f0f0f0;
}
.friend-link a {
text-decoration: none;
}
|
friend-link里的几项设定是为了让一行显示多个方框，并且自动换行。friend-name:hover是为了让鼠标悬停在方框上时，方框有一个变颜色的效果。
这里有一个坑，好吧其实也不是这里的坑，但是和CSS有关。我在调试的时候发现无论博客是日间模式还是夜间模式，悬停时显示的title都是夜间模式的背景色。然后调试了很久也没有效果。最后我灵机一动，想它是不是并非根据博客的主题来的，而是根据浏览器/系统的主题来的。于是把系统切换成日间模式。果然！现在无论博客是什么主题，title的背景色都是日间模式的背景色了。所以这个东西好像是无法修改的……
总之就是这样了，总体来讲还是比较简单的。
2024-3-9更新：友链乱序排列
原本友链是按照添加时间排序的，但是这样不利于后面的链接被点击（虽然本来也没几个……），所以想着改成随机排序，并且每次重新进入友链页面时，顺序都被打乱一遍。
原以为比较复杂，结果GPT一句话就搞定了。修改link.ejs代码如下：
<div class="container">
<div class="post-wrap">
<h1 class="post-title">
<%= page.title %>
</h1>
<% var shuffledLinks=page.links.sort(()=> Math.random() - 0.5); %>
<% for (var i=0; i < shuffledLinks.length; i++) { %>
<div class="friend-link">
<a href="<%= shuffledLinks[i].url %>" target="_blank" title="<%= shuffledLinks[i].blogName %>">
<div class="friend-name">
<%= shuffledLinks[i].name %>
</div>
</a>
</div>
<% } %>
</div>
</div>
|
……不行。刚进去的时候确实是乱序的，但是刷新之后没有反应。怀疑是缓存问题。调整了很久都没好，无奈只好让GPT换一种方式，让它每10分钟打乱一下顺序。GPT给的代码如下：
<div class="container">
<div class="post-wrap">
<h1 class="post-title">
<%= page.title %>
</h1>
<div id="friend-links">
<% for (var i=0; i < page.links.length; i++) { %>
<div class="friend-link" id="friend<%= i %>">
<a href="<%= page.links[i].url %>" target="_blank" title="<%= page.links[i].blogName %>">
<div class="friend-name">
<%= page.links[i].name %>
</div>
</a>
</div>
<% } %>
</div>
</div>
</div>
<script>
function shuffleLinks() {
var friendLinks = document.getElementById('friend-links');
var links = Array.from(friendLinks.children);
links.sort(() => Math.random() - 0.5);
for (var i = 0; i < links.length; i++) {
friendLinks.appendChild(links[i]);
}
}
shuffleLinks();
setInterval(function () {
shuffleLinks();
}, 600000);
</script>
|
结果，deploy之后，每刷新一次顺序都会被打乱了！误打误撞地成功了（？）。我感觉那个“每隔10分钟打乱一次顺序”后面的代码可以删掉，但我懒得试了，能跑就行。