文档

PrimeEdge 功能介绍

PrimeEdge 主题完整功能说明

PrimeEdge 功能介绍

PrimeEdge 是一个功能丰富的 Hugo 主题,专为个人博客和内容创作者设计。本文档详细介绍主题的各项功能。

核心特性

1. 现代化设计

  • 玻璃拟态效果 - 使用 backdrop-filter 实现的毛玻璃效果
  • 渐变色彩 - 精心设计的色彩方案,支持浅色/深色模式
  • 流畅动画 - 页面过渡、悬停效果等微交互动画
  • 响应式布局 - 完美适配桌面、平板、手机各种设备

2. 深色模式

  • 自动检测系统主题偏好
  • 手动切换按钮
  • 平滑的过渡动画
  • 本地存储用户偏好

3. 内置搜索

基于 Fuse.js 实现的客户端全文搜索:

  • 实时搜索,无需后端
  • 支持标题、内容、标签搜索
  • 快捷键触发(Ctrl/Cmd + K)
  • 搜索结果高亮

4. 多种内容类型

文章 (Posts)

  • 封面图片支持
  • 分类和标签
  • 阅读时间估算
  • 目录自动生成
  • 上一篇/下一篇导航
  • 相关文章推荐

笔记 (Notes)

  • 简洁的短内容形式
  • 适合记录灵感、想法
  • 支持标签

文档 (Docs)

  • 侧边栏导航
  • 适合技术文档、教程
  • 支持多级目录

投资笔记 (Investing)

  • 记录每日投资收益
  • 自动计算收益率
  • 支持盘后笔记和盘前计划

好物推荐 (Good Things)

  • 产品展示页面
  • 支持精选标记
  • 适合分享购物心得

5. 特殊页面

相册 (Photos)

  • 瀑布流布局
  • 灯箱查看
  • 键盘导航(左右箭头、ESC)
  • 图片懒加载

书签 (Bookmarks)

  • 分类管理
  • 网格卡片展示
  • 支持筛选
  • 图标+名称简洁展示
  • 分类展示
  • 卡片式布局
  • 支持头像和描述

留言板 (Comments)

  • 独立的评论页面
  • 集成 Twikoo 评论系统

6. 评论系统

集成 Twikoo 评论系统:

  • 基于腾讯云开发
  • 支持 Markdown
  • 邮件通知
  • 管理员后台
  • 反垃圾

7. 归档页面

自动生成归档页面:

  • 按年份分组
  • 显示文章数量
  • 支持所有内容类型

8. SEO 优化

  • Open Graph 标签
  • Twitter Cards
  • 结构化数据
  • 规范 URL
  • 站点地图

9. 性能优化

  • 图片懒加载
  • CSS/JS 压缩
  • 资源预加载
  • 字体优化

10. 其他功能

  • 滚动进度条 - 顶部显示阅读进度
  • 运行时间 - 显示博客运行时长
  • 访问统计 - 集成不蒜子统计
  • 代码高亮 - 自动代码语法高亮
  • 数学公式 - 支持 KaTeX 数学公式

配置选项

站点配置

[params]
  # 作者信息
  [params.author]
    name = "作者名"
    bio = "作者简介"
    avatar = "/images/avatar.jpg"
  
  # 站点标题
  [params.header]
    site_name = "站点名称"
  
  # 横幅配置
  [params.banner]
    subtitle = ["副标题1", "副标题2", "副标题3"]
    [params.banner.images]
      light = "/images/banner-light.webp"
      dark = "/images/banner-dark.webp"
  
  # 导航菜单
  [[params.nav]]
    name = "首页"
    url = "/"
    icon = "fa-solid fa-house"
  
  # 社交链接
  [[params.social]]
    name = "GitHub"
    url = "https://github.com/username"
    icon = "fa-brands fa-github"
  
  # 评论配置
  [params.comments]
    enabled = true
    envId = "https://your-twikoo.vercel.app"
  
  # 页脚配置
  [params.footer]
    since = 2020
    icp = "备案号"
    beian = "公安备案号"

内容前置参数

文章

---
title: "文章标题"
date: 2024-01-01T00:00:00+08:00
draft: false
categories: ["分类"]
tags: ["标签1", "标签2"]
cover: "/images/cover.jpg"
excerpt: "文章摘要"
toc: true  # 是否显示目录
comments: true  # 是否开启评论
---

投资笔记

---
title: "盘后笔记"
date: 2024-01-01
note_type: "post-market"  # post-market 或 pre-market
daily_pnl_percent: 2.5  # 日收益率
---

好物推荐

---
title: "产品名称"
date: 2024-01-01
cover: "/images/product.jpg"
featured: true  # 是否精选
price: "¥999"
link: "https://example.com"
---

使用技巧

1. 自定义样式

创建 assets/css/custom.css

/* 自定义主题色 */
:root {
  --primary: #your-color;
}

2. 自定义脚本

创建 assets/js/custom.js

// 自定义 JavaScript
console.log('Hello PrimeEdge!');

3. 覆盖模板

在站点 layouts/ 目录下创建同名文件即可覆盖主题模板。

4. 多语言支持

[languages]
  [languages.zh]
    languageName = "中文"
    weight = 1
  [languages.en]
    languageName = "English"
    weight = 2

更新日志

v1.0.0

  • 初始版本发布
  • 支持文章、笔记、文档等内容类型
  • 集成搜索、评论、相册等功能
  • 深色模式支持

更多详细配置请参考各功能的具体文档。

Comments

0%