PrimeEdge 主题教程

书签页面

创建网站收藏页面

书签页面

PrimeEdge 提供分类书签页面，支持按分类筛选和图标展示。

创建书签页面

创建 content/bookmarks.md：

---
title: "书签"
description: "收藏有用的网站和工具"
layout: "bookmarks"
---

书签分类

默认包含以下分类：

分类 ID 图标 说明
全部 all - 显示所有书签
技术开发 tech fa-code 开发相关网站
实用工具 tools fa-toolbox 在线工具
设计资源 design fa-palette 设计相关
阅读学习 read fa-book-open 学习平台
其他 other fa-miscellaneous 其他收藏

添加书签

编辑 layouts/page/bookmarks.html，在对应分类下添加：

<a href="https://example.com" target="_blank" rel="noopener" class="bookmark-link-card">
  <div class="bookmark-card-icon">
    <i class="fa-brands fa-github"></i>
  </div>
  <div class="bookmark-card-content">
    <h3 class="bookmark-card-title">网站名称</h3>
    <p class="bookmark-card-desc">网站描述</p>
  </div>
</a>

书签卡片结构

每个书签卡片包含：

  • 图标: Font Awesome 图标
  • 标题: 网站名称
  • 描述: 简短介绍（建议 20 字以内）

完整示例

技术开发分类

<section class="bookmark-group" id="tech" data-category="tech">
  <h2 class="bookmark-group-title">
    <span class="bookmark-group-icon"><i class="fa-solid fa-code"></i></span>
    <span>技术开发</span>
  </h2>
  <div class="bookmark-cards">
    <a href="https://github.com" target="_blank" rel="noopener" class="bookmark-link-card">
      <div class="bookmark-card-icon">
        <i class="fa-brands fa-github"></i>
      </div>
      <div class="bookmark-card-content">
        <h3 class="bookmark-card-title">GitHub</h3>
        <p class="bookmark-card-desc">全球最大的代码托管平台</p>
      </div>
    </a>
    
    <a href="https://stackoverflow.com" target="_blank" rel="noopener" class="bookmark-link-card">
      <div class="bookmark-card-icon">
        <i class="fa-brands fa-stack-overflow"></i>
      </div>
      <div class="bookmark-card-content">
        <h3 class="bookmark-card-title">Stack Overflow</h3>
        <p class="bookmark-card-desc">程序员问答社区</p>
      </div>
    </a>
  </div>
</section>

分类导航

页面顶部有分类导航栏，点击可筛选显示：

<nav class="bookmarks-categories">
  <a href="#all" class="bookmark-cat-item active" data-category="all">全部</a>
  <a href="#tech" class="bookmark-cat-item" data-category="tech">技术开发</a>
  <a href="#tools" class="bookmark-cat-item" data-category="tools">实用工具</a>
  ...
</nav>

添加新分类

如需添加新分类：

  1. 在导航中添加链接：
<a href="#newcat" class="bookmark-cat-item" data-category="newcat">新分类</a>
  1. 添加对应的内容区块：
<section class="bookmark-group" id="newcat" data-category="newcat">
  <h2 class="bookmark-group-title">
    <span class="bookmark-group-icon"><i class="fa-solid fa-icon"></i></span>
    <span>新分类</span>
  </h2>
  <div class="bookmark-cards">
    <!-- 书签卡片 -->
  </div>
</section>

图标选择

使用 Font Awesome 图标：

<!-- 品牌图标 -->
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-google"></i>

<!-- 固体图标 -->
<i class="fa-solid fa-code"></i>
<i class="fa-solid fa-wrench"></i>
<i class="fa-solid fa-paint-brush"></i>

响应式布局

书签卡片自适应不同屏幕：

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

使用数据文件

如需更方便管理，可使用数据文件：

创建 data/bookmarks.yml：

categories:
  - id: tech
    name: 技术开发
    icon: fa-code
    bookmarks:
      - title: GitHub
        url: https://github.com
        desc: 全球最大的代码托管平台
        icon: fa-brands fa-github
      - title: Stack Overflow
        url: https://stackoverflow.com
        desc: 程序员问答社区
        icon: fa-brands fa-stack-overflow

然后在模板中遍历渲染。

搜索功能

如需添加书签搜索，可以：

  1. 添加搜索输入框
  2. 使用 JavaScript 过滤显示
  3. 或使用 Fuse.js 实现模糊搜索

导入导出

可以编写脚本将浏览器书签导入：

# 将浏览器导出的 HTML 书签转换为 YAML
python bookmarks-import.py bookmarks.html > data/bookmarks.yml

同步更新

建议定期检查和更新书签：

  • 移除失效链接
  • 更新描述信息
  • 添加新发现的优质网站

下一步

Comments

0%