PrimeEdge 主题教程

友情链接

展示友情链接

友情链接

PrimeEdge 提供友情链接页面，以卡片形式展示友链信息。

创建友链页面

创建 content/links.md：

---
title: "友情链接"
layout: "links"
type: "page"
description: "互联网上的邻居们"
---

添加友链

在 content/links.md 的 Front Matter 后添加 HTML：

<!-- 分类标题 -->
<h2 class="links-category" id="category-id">
  <i class="fa-solid fa-icon"></i>
  分类名称
</h2>

<!-- 友链列表 -->
<div class="links-list">
  <a href="https://friend-blog.com" class="link-item" target="_blank" rel="noopener">
    <div class="link-avatar">
      <img src="https://friend-blog.com/avatar.jpg" alt="" loading="lazy">
    </div>
    <div class="link-body">
      <h3 class="link-title">博客名称</h3>
      <p class="link-desc">博客描述或简介</p>
    </div>
  </a>
</div>

友链卡片结构

每个友链卡片包含：

  • 头像 — 博客或站点的头像图片
  • 标题 — 博客名称
  • 描述 — 简短介绍，建议控制在 30 字以内
  • 链接 — 点击在新标签页打开

分组展示

可以通过添加多个分类标题对友链进行分组，例如：

  • 技术博客
  • 生活随笔
  • 独立开发者

每个分组下的友链以网格形式排列，桌面端一行显示多个卡片。

Front Matter 字段

字段 必填 说明
title 是 页面标题
layout 是 固定为 links
type 否 设为 page 表示独立页面
description 否 页面描述

添加交换友链入口

可以在友链页面底部添加自己的博客信息，方便他人申请交换：

<div class="my-site-info">
  <h3>交换友链</h3>
  <p>站点名称：你的博客名</p>
  <p>站点地址：https://yourdomain.com</p>
  <p>站点描述：一句话介绍</p>
  <p>头像地址：https://yourdomain.com/avatar.jpg</p>
</div>

下一步

评论

0%