Ruibin_Ningh
辣么好看的星度主题竟然没有直接展示友链列表的地方???
那怎么能行,直接整上!!!
效果
右下角有小点可以直观检测对方博客的状态
同时加上了预览效果,可以提前看到对方的博客样式
适配了友链分类效果,可以更方便地展示
实操
建议使用困困鱼大佬开发的插件
安装并启用后可以在工具找到
首先打开文件theme.yaml ,添加这段代码,如右图所示
- name: 友链
description:
screenshot:
file: friends-all.html
然后点保存
在templates 文件夹中添加一个文件friends-all.html 内容如下
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
th:with="titleText=${'友链列表'}"
th:replace="~{modules/layout :: layout(_title = ${titleText},menu_site_title = ${'正在阅读：'+titleText},_content = ~{::content},
_head = ~{::head},page_js = ~{::page_js},body_class = 'page-template page-template-friends page wide-page')}">
<th:block th:fragment="head">
<th:block th:replace="~{modules/page-css}"/>
<link rel="stylesheet" th:href="@{/assets/css/pages.css?v={version}(version=${theme.spec.version})}">
<style>
/* 覆盖主题在朋友页面将分组容器隐藏的默认样式 */
.page-template-friends .linkcat { display: block; }
/* 放宽文本展示：名称2行，描述3行 */
.page-template-friends .link-name { -webkit-line-clamp: 2 !important; }
.page-template-friends .link-des { -webkit-line-clamp: 3 !important; }
/* 在线状态角标 */
.page-template-friends .status-badge { position: absolute; right: .5rem; bottom: .5rem; width: .6rem; height: .6rem; border-radius: 50%; box-shadow: 0 0 0 2px rgb(255 255 255 / .8); background: #bbb; }
.page-template-friends .status-badge.ok { background: #10b981; }
.page-template-friends .status-badge.fail { background: #ef4444; }
.page-template-friends .status-badge.checking { background: #a3a3a3; }
/* 调整卡片信息与背景的宽度比例（桌面端） */
@media (min-width: 1152px) {
.page-template-friends .link-info { width: 80% !important; }
.page-template-friends .link-bg { width: 70% !important; }
}
</style>
</th:block>
<th:block th:fragment="page_js">
<script>
document.addEventListener('DOMContentLoaded', function () {
const num = document.querySelectorAll('.friend-link .link-item').length;
const counter = document.getElementById('linkNum');
if (counter) counter.textContent = num;
// 在线状态检测（前端最佳努力，受 CORS 限制，无法读取真实状态码）
document.querySelectorAll('.friend-link .link-item').forEach(function(item){
const a = item.querySelector('a.link-card');
if(!a) return;
const badge = item.querySelector('.status-badge');
if (badge) badge.classList.add('checking');
// 使用提供的状态码 API 进行检测
const api = 'https://v2.xxapi.cn/api/status?url=' + encodeURIComponent(a.href);
fetch(api, { method: 'GET' })
.then(r => r.json())
.then(data => {
const code = (data && (data.data || data.code)) + '';
if (badge) {
badge.classList.remove('checking');
if (code === '200') {
badge.classList.add('ok');
} else {
badge.classList.add('fail');
}
}
})
.catch(() => {
if (badge) {
badge.classList.remove('checking');
badge.classList.add('fail');
}
});
});
});
</script>
</th:block>
<th:block th:fragment="content">
<main id="main" class="site-main" role="main" th:with="groups = ${#lists.isEmpty(groups)? linkFinder.groupBy() : groups}">
<header class="page-header">
<h1 class="page-title fade-before">友链列表<em class="num">共 <span id="linkNum"></span> 个友链</em></h1>
<div class="taxonomy-des fade-before" th:if="${not #strings.isEmpty(theme.config.links.description)}">
<p th:text="欢迎大家提交友链，我会尽快审核并添加到友链列表中。"></p>
</div>
<nav class="taxonomy-nav fade-before">
<ul class="taxonomy-sub no-scrollbar card-sub active">
<th:block th:each="group,iterStat : ${groups}">
<li th:if="${not #lists.isEmpty(group.spec.displayName)}">
<a th:href="'#'+${group.metadata.name}">[[${group.spec.displayName}]] <span class="taxonomy-num">([[${group.links.size}]])</span></a>
</li>
</th:block>
</ul>
</nav>
</header>
<article class="friend-tab page type-page hentry">
<section class="friend-link">
<th:block th:each="group,iterStat : ${groups}">
<div th:id="${group.metadata.name}"
th:if="${not #lists.isEmpty(group.links)}"
class="linkcat">
<hgroup class="link-nav">
<h3 class="link-title" th:if="${not #lists.isEmpty(group.spec.displayName)}"
th:text="${group.spec.displayName}"></h3>
<th:block th:with="desc = ${#annotations.get(group, 'thyuu_link_group_desc')}">
<span th:if="${not #lists.isEmpty(desc)}" th:text="${desc}"></span>
</th:block>
</hgroup>
<ul class="link-items">
<li th:each="link,iterStat : ${group.links}" th:id="${link.metadata.name}"
class="link-item">
<a class="link-card" th:href="${link.spec.url}"
th:title="${link.spec.description}" target="_blank" role="button">
<img th:alt="${link.spec.description}"
th:src="${'https://s0.wp.com/mshots/v1/'+link.spec.url+'?w=400&h=300'}"
class="link-bg" loading="lazy">
<div class="link-info">
<img class="avatar" th:src="${link.spec.logo}" alt=""
loading="lazy">
<div class="link-cont">
<h6 class="link-name"
th:text="${link.spec.displayName}"></h6>
<div class="link-des" th:text="${link.spec.description}"></div>
</div>
</div>
<span class="status-badge" aria-label="status"></span>
</a>
</li>
</ul>
</div>
</th:block>
</section>
</article>
</main>
<div th:if="${singlePage != null and singlePage.spec.allowComment}"
style="max-width:70%;margin:0 auto;">
<halo:comment group="content.halo.run" kind="SinglePage"
th:attr="name=${singlePage.metadata.name}"
th:attrappend="colorScheme=${theme.config.style.color_scheme}">
</halo:comment>
</div>
</th:block>
</html>
完成点击保存,清理模版缓存,重载主题配置
我们添加一个页面
标题和别名任意,模板选择新添加的"友链",保存
然后访问你的域名/别名 就可以看到这个页面了
最后关于友链分类功能,可以在链接内自行配置
