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>

友链卡片结构

每个友链包含：

  • 头像: 博主头像（建议 60x60px）
  • 标题: 博客名称
  • 描述: 简短介绍（建议 30 字以内）

完整示例

<h2 class="links-category" id="tech">
  <i class="fa-solid fa-laptop-code"></i>
  技术博客
</h2>
<div class="links-list">
  <a href="https://example1.com" class="link-item" target="_blank" rel="noopener">
    <div class="link-avatar">
      <img src="https://example1.com/avatar.jpg" alt="" loading="lazy">
    </div>
    <div class="link-body">
      <h3 class="link-title">技术大佬的博客</h3>
      <p class="link-desc">分享前后端开发经验</p>
    </div>
  </a>
  
  <a href="https://example2.com" class="link-item" target="_blank" rel="noopener">
    <div class="link-avatar">
      <img src="https://example2.com/avatar.jpg" alt="" loading="lazy">
    </div>
    <div class="link-body">
      <h3 class="link-title">前端小能手</h3>
      <p class="link-desc">Vue、React 实战教程</p>
    </div>
  </a>
</div>

分类建议

可以按以下方式分类友链：

分类 图标 说明
技术博客 fa-laptop-code 程序员、开发者
设计创意 fa-palette 设计师、创意工作者
生活随笔 fa-coffee 个人博客、生活记录
学习笔记 fa-book 知识分享、学习笔记
友邻推荐 fa-handshake 特别推荐的博客

交换友链

友链申请格式

建议访客按以下格式申请：

站点名称：我的博客
站点链接：https://myblog.com
站点描述：分享技术与生活
站点头像：https://myblog.com/avatar.jpg

添加到自己的友链页面

<a href="https://myblog.com" class="link-item" target="_blank" rel="noopener">
  <div class="link-avatar">
    <img src="https://myblog.com/avatar.jpg" alt="" loading="lazy">
  </div>
  <div class="link-body">
    <h3 class="link-title">我的博客</h3>
    <p class="link-desc">分享技术与生活</p>
  </div>
</a>

头像处理

使用对方头像

直接引用对方博客的头像链接。

本地存储头像

下载头像到本地，避免外链失效：

static/
└── images/
    └── links/
        ├── friend1.jpg
        └── friend2.jpg

<img src="/images/links/friend1.jpg" alt="" loading="lazy">

使用默认头像

如果对方没有提供头像，可以使用默认图：

<img src="https://picsum.photos/seed/blog1/60/60" alt="" loading="lazy">

响应式布局

友链卡片自适应：

  • 桌面端：3 列
  • 平板端：2 列
  • 手机端：1 列

友链管理建议

  1. 定期检查: 每月检查一次友链有效性
  2. 分类整理: 按内容类型分类，方便访客浏览
  3. 优先展示: 将活跃、优质的博客放在前面
  4. 互惠原则: 确保对方也添加了你的链接

友链页面模板

完整的友链页面示例：

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

<!-- 关于友链的说明 -->
<p>欢迎交换友链！请按以下格式留言：</p>
<ul>
  <li>站点名称：xxx</li>
  <li>站点链接：xxx</li>
  <li>站点描述：xxx</li>
  <li>站点头像：xxx</li>
</ul>

<!-- 技术博客 -->
<h2 class="links-category" id="tech">
  <i class="fa-solid fa-laptop-code"></i>
  技术博客
</h2>
<div class="links-list">
  <!-- 友链卡片 -->
</div>

<!-- 生活随笔 -->
<h2 class="links-category" id="life">
  <i class="fa-solid fa-coffee"></i>
  生活随笔
</h2>
<div class="links-list">
  <!-- 友链卡片 -->
</div>

自动化管理

可以使用数据文件管理友链：

创建 data/links.yml：

categories:
  - name: 技术博客
    icon: fa-laptop-code
    id: tech
    links:
      - name: 博客名称
        url: https://example.com
        desc: 博客描述
        avatar: https://example.com/avatar.jpg

然后在模板中循环渲染。

下一步

  • 书签 - 创建网站收藏页面
  • 相册 - 创建图片展示页面
  • 评论配置 - 配置评论系统接收友链申请

Comments

0%