PrimeEdge 主题教程

首页配置

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

首页配置

PrimeEdge 主题提供 5 种首页风格，可通过配置轻松切换。

首页风格选择

在 config.toml 中设置首页风格：

[params.homepage]
  style = "personal"  # 可选值: personal, minimal, tech, studio, grid

可选风格

风格说明
personal个人生活风格（默认）— 横幅 + 文章卡片 + 侧边栏
minimal简洁笔记风格 — 年份筛选 + 两栏文章列表，适合纯写作博客
tech技术博客风格 — 精选文章置顶 + 文章列表 + 侧边栏
studio卡片风格 — 多模块卡片展示，适合多功能站点
grid多栏风格 — 文章卡片网格 + 侧边栏，类似门户布局

个人生活风格 (personal)

默认风格，包含：

  • 全宽横幅区域（支持浅色/深色背景图）
  • 打字机动画副标题
  • 文章卡片列表（带封面图、摘要、标签）
  • 侧边栏（作者信息、热门文章）

简洁笔记风格 (minimal)

极简设计，年份标签筛选 + 两栏文章列表（复用归档页样式），适合专注内容输出的博客。

[params.homepage]
  style = "minimal"

技术博客风格 (tech)

面向技术写作者：

  • 最新 3 篇文章以卡片形式置顶展示
  • 下方为标准文章列表（带封面缩略图）
  • 侧边栏（作者信息、热门文章）

卡片风格 (studio)

适合功能丰富的站点，首页分区展示多个模块：

  • 最新文章网格（4 篇文章卡片）
  • 笔记 + 好物双栏展示
  • 投资 + 文档双栏展示

卡片风格直接以内容区块为核心，没有独立的 Hero 区域，与顶部导航配合更加紧凑。

多栏风格 (grid)

参考门户型博客布局：

  • 文章卡片网格展示（带封面图、标题、摘要、日期）
  • 右侧边栏（作者信息卡片、热门文章、分类标签）
  • 分页导航

横幅配置

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

[params.banner]
  title = "KOK.PLUS"                                # 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> 换行

热门文章

首页侧边栏可以展示热门文章推荐（适用于 personal 和 tech 风格）。

[[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 字符）
  • 发布日期
  • 分类和标签
  • 阅读时间估算

演示预览

开启演示预览后，可以在 /demo/ 路径下查看所有首页风格的效果，方便对比选择。

[params.homepage]
  style = "personal"
  demo = true  # 开启演示预览

开启后访问以下地址查看各风格效果：

  • /demo/personal/ - 个人生活风格预览
  • /demo/minimal/ - 简洁笔记风格预览
  • /demo/tech/ - 技术博客风格预览
  • /demo/studio/ - 卡片风格预览
  • /demo/grid/ - 多栏风格预览

在后台管理的"配置管理"页面，“首页风格"区域可以一键开启/关闭演示预览，并提供各风格的预览链接。

演示预览仅用于开发时对比风格效果，正式发布时建议关闭。

后台管理

在 PrimeEdge Admin 后台管理中，进入"配置管理"页面，可以直接通过下拉菜单选择首页风格，修改后保存即可生效。

完整配置示例

[params.header]
  logo = ""              # 导航栏 Logo 图片路径（有值则显示图片）
  title = "KOK.PLUS"    # 导航栏文字（logo为空时显示，留空则显示站点标题）

[params.homepage]
  style = "personal"
  demo = true

[params.banner]
  title = "KOK.PLUS"    # 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/"

[pagination]
  pagerSize = 10

下一步

评论

0%