本文系Joe再续前缘主题魔改类第三篇教程，前置教程请见.
这一期讲讲新增友人帐页面新增延迟展示。
具体部署教程详见Joe再续前缘魔改（一）
部署完成后，请修改博客文件夹中的/usr/themes/joe/friends.php文件
复制以下代码全部替换即可
<?php
/**
* 友链
*
* @package custom
*
**/
if (!defined('__TYPECHO_ROOT_DIR__')) {
http_response_code(404);
exit;
}
$this->need('module/single/pjax.php');
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<?php $this->need('module/head.php') ?>
<link rel="stylesheet" href="<?= joe\theme_url('assets/css/joe.friend.css') ?>">
<style>
.status-tag {
position: absolute;
top: 0px;
right: 0px;
padding: 3px 8px;
border-radius: 0px 12px 0px 12px;
font-size: 12px;
color: white;
font-weight: bold;
transition: font-size 0.3s ease-out, width 0.3s ease-out, opacity 0.3s ease-out;
z-index: 1;
}
.joe_detail__friends-item:hover .status-tag {
font-size: 0px;
opacity: 0;
}
/* 固态颜色 */
.status-tag-green {
background-color: #005E00; /* 绿色 */
}
.status-tag-light-yellow {
background-color: #FED101; /* 浅黄色 */
}
.status-tag-dark-yellow {
background-color: #F0B606; /* 深黄色 */
}
.status-tag-red {
background-color: #B90000; /* 红色 */
}
/* 修改卡片样式，使用头像作为背景 */
.joe_detail__friends-item .contain {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border-radius: 12px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.joe_detail__friends-item .contain::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--bg-image);
background-size: cover;
background-position: center;
opacity: 0.5;
z-index: -1;
border-radius: 12px;
}
.joe_detail__friends-item .contain:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.joe_detail__friends-item .content {
position: relative;
z-index: 2;
}
.joe_detail__friends-item .title {
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
font-weight: bold;
}
.joe_detail__friends-item .desc {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.joe_detail__friends-item .avatar {
border: 2px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<?php $this->need('module/header.php'); ?>
<div id="Joe">
<div class="joe_container">
<main class="joe_main">
<div class="joe_detail" data-cid="<?= $this->cid ?>">
<?php $this->need('module/single/batten.php'); ?>
<?php $this->need('module/single/article.php'); ?>
<?php
$friends = think\facade\Db::name('friends')->where('status', 1)->whereFindInSet('position', 'single')->order('order', 'desc')->select()->toArray();
?>
<?php if (sizeof($friends) > 0 && ($this->options->JFriendsSpiderHide != 'on' || !joe\detectSpider())) : ?>
<style>
.joe_detail__article {
margin-bottom: 0px;
}
</style>
<ul class="joe_detail__friends">
<?php
if ($this->options->JFriends_shuffle == 'on') shuffle($friends);
foreach ($friends as $item) :
?>
<li class="joe_detail__friends-item">
<a class="contain" href="<?= $item['url'] ?>" target="_blank" rel="<?= $item['rel'] ?>" referrer="unsafe-url" style="--bg-image: url('<?= $item['logo'] ?>')">
<span class="title"><?= $item['title'] ?></span>
<div class="content">
<div class="desc"><?= $item['description'] ?></div>
<img referrerpolicy="no-referrer" rel="noreferrer" width="40" height="40" class="avatar lazyload" onerror="Joe.avatarError(this)" src="<?= joe\getAvatarLazyload(); ?>" data-src="<?= $item['logo'] ?>" alt="<?= $item['title'] ?>" />
</div>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php
if ($this->options->JFriends_Submit == 'on') $this->need('module/friends/submit.php');
?>
<?php $this->need('module/single/handle.php'); ?>
<?php $this->need('module/single/copyright.php'); ?>
</div>
<?php $this->need('module/single/comment.php'); ?>
</main>
<?php joe\isPc() ? $this->need('module/aside.php') : null ?>
</div>
<?php $this->need('module/bottom.php'); ?>
</div>
<?php $this->need('module/footer.php') ?>
<script>
function addStatusTagsWithCache(jsonUrl) {
const cacheKey = "statusTagsData";
const cacheExpirationTime = 30 * 60 * 1000; // 半小时
function applyStatusTags(data) {
const linkStatus = data.link_status;
document.querySelectorAll('.joe_detail__friends-item').forEach(card => {
const linkAnchor = card.querySelector('a.contain');
if (!linkAnchor) return;
const link = linkAnchor.href.replace(/\/$/, '');
const statusTag = document.createElement('div');
statusTag.classList.add('status-tag');
let matched = false;
// 查找链接状态
const status = linkStatus.find(item => item.link.replace(/\/$/, '') === link);
if (status) {
let latencyText = '未知';
let className = 'status-tag-red'; // 默认红色
if (status.latency === -1) {
latencyText = '未知';
} else {
latencyText = status.latency.toFixed(2) + ' s';
if (status.latency <= 2) {
className = 'status-tag-green';
} else if (status.latency <= 5) {
className = 'status-tag-light-yellow';
} else if (status.latency <= 10) {
className = 'status-tag-dark-yellow';
}
}
statusTag.textContent = latencyText;
statusTag.classList.add(className);
matched = true;
}
if (matched) {
card.style.position = 'relative';
card.appendChild(statusTag);
}
});
}
function fetchDataAndUpdateUI() {
fetch(jsonUrl)
.then(response => response.json())
.then(data => {
applyStatusTags(data);
const cacheData = {
data: data,
timestamp: Date.now()
};
localStorage.setItem(cacheKey, JSON.stringify(cacheData));
})
.catch(error => console.error('Error fetching test-flink result.json:', error));
}
const cachedData = localStorage.getItem(cacheKey);
if (cachedData) {
const { data, timestamp } = JSON.parse(cachedData);
if (Date.now() - timestamp < cacheExpirationTime) {
applyStatusTags(data);
return;
}
}
fetchDataAndUpdateUI();
}
setTimeout(() => {
addStatusTagsWithCache('https://你的部署地址/result.json');
}, 0);
</script>
</body>
</html>
前端效果预览
每日精选
评论加载中...