PrimeEdge 主题教程

首页配置

配置首页横幅、打字机效果和文章列表

首页配置

PrimeEdge 首页包含横幅区域、打字机动画副标题和最新文章列表。

横幅配置

横幅是首页的视觉焦点，支持浅色/深色模式切换。

[params.banner]
  light = "/images/wallhaven-wqery6-light.webp"  # 浅色模式横幅
  dark = "/images/wallhaven-wqery6-dark.webp"    # 深色模式横幅

横幅图片建议

  • 尺寸: 建议 1920x600 像素或更宽
  • 格式: WebP 格式最佳，兼顾质量和体积
  • 内容: 选择简洁、不干扰文字阅读的图片
  • 双版本: 准备浅色和深色两个版本，确保在两种模式下都有良好视觉效果

图片存放位置

将横幅图片放入 static/images/ 目录：

static/
└── images/
    ├── wallhaven-wqery6-light.webp
    └── wallhaven-wqery6-dark.webp

打字机副标题

首页横幅下方会显示打字机动画效果的多行副标题。

[params.banner]
  subtitle = [
    "Say what's on my mind, read books I enjoy",
    "Discuss what's around me, walk my own path",
    "An independent blog since 2007"
  ]

配置说明

  • 每行文字会依次显示，带有打字机效果
  • 支持任意数量的行数
  • 建议使用简短有力的句子
  • 可以使用 HTML 标签，如 <br> 换行

示例配置

[params.banner]
  subtitle = [
    "记录生活点滴",
    "分享技术心得",
    "探索未知世界",
    "与你共同成长"
  ]

热门文章

首页侧边栏可以展示热门文章推荐。

[[params.popularPosts]]
  title = "文章标题1"
  url = "/posts/article-1/"

[[params.popularPosts]]
  title = "文章标题2"
  url = "/posts/article-2/"

[[params.popularPosts]]
  title = "文章标题3"
  url = "/posts/article-3/"

配置要点

  • 建议配置 3-5 篇精选文章
  • 选择最具代表性或最受欢迎的内容
  • 文章 URL 需要与实际的 slug 一致

文章列表

首页文章列表自动展示最新发布的文章，受分页配置控制。

[pagination]
  pagerSize = 10  # 每页显示文章数量

列表显示内容

每篇文章卡片显示：

  • 封面图（如有）
  • 文章标题
  • 摘要（前 150 字符）
  • 发布日期
  • 分类和标签
  • 阅读时间估算

完整配置示例

[params]
  [params.banner]
    light = "/images/banner-light.webp"
    dark = "/images/banner-dark.webp"
    subtitle = [
      "记录生活点滴",
      "分享技术心得",
      "探索未知世界"
    ]

  [[params.popularPosts]]
    title = "如何搭建 Hugo 博客"
    url = "/posts/hugo-blog-setup/"

  [[params.popularPosts]]
    title = "PrimeEdge 主题使用指南"
    url = "/posts/primeedge-guide/"

  [[params.popularPosts]]
    title = "我的 2024 年度总结"
    url = "/posts/2024-summary/"

[pagination]
  pagerSize = 10

自定义首页

如需深度定制首页，可以创建 layouts/index.html 覆盖默认模板。

下一步

Comments

0%