PrimeEdge 主题教程

快速开始

5 分钟搭建 PrimeEdge 博客

快速开始 #

本指南将帮助你在 5 分钟内搭建一个基于 PrimeEdge 主题的 Hugo 博客。

如果你要一次性部署博客、PrimeEdge Admin 后台和 Waline On EdgeOne 评论服务，请优先阅读 快速安装指南。本页更适合只想先在本地跑起 Hugo 博客主题的场景。

环境准备 #

安装 Hugo #

PrimeEdge 需要 Hugo Extended 0.124.0 或更高版本。

macOS:

brew install hugo

Windows:

winget install Hugo.Hugo.Extended

Linux (Ubuntu/Debian):

sudo apt install hugo

验证安装:

hugo version
# 应该显示 hugo v0.124.0 或更高版本

创建博客 #

1. 创建新站点 #

hugo new site my-blog
cd my-blog
git init

2. 添加主题 #

方式一：Git Submodule（推荐）

git submodule add https://github.com/kok777/PrimeEdge.git themes/PrimeEdge

方式二：直接克隆

git clone https://github.com/kok777/PrimeEdge.git themes/PrimeEdge

3. 基础配置 #

创建 config.toml（也可以使用 Hugo 默认支持的 hugo.toml）：

baseURL = 'https://yourdomain.com'
languageCode = 'zh-CN'
defaultContentLanguage = 'zh'
title = '我的博客'
theme = 'PrimeEdge'

[params]
  # 作者信息
  [params.author]
    name = "你的名字"
    bio = "一句话介绍自己"
    avatar = "/images/avatar.jpg"
  
  # 导航栏配置
  [params.header]
    logo = ""
    title = "我的博客"
  
  # 导航菜单
  [[params.nav]]
    name = "首页"
    url = "/"
    icon = "fa-solid fa-house"
  
  [[params.nav]]
    name = "文章"
    url = "/posts/"
    icon = "fa-solid fa-pen-nib"
  
  [[params.nav]]
    name = "关于"
    url = "/about/"
    icon = "fa-solid fa-user"
  
  # 首页横幅
  [params.banner]
    title = "我的博客"
    light = "/images/banner-light.webp"
    dark = "/images/banner-dark.webp"
    subtitle = ["记录生活", "分享技术", "探索世界"]

  # 评论系统
  [params.comments]
    provider = "waline"

  [params.waline]
    enable = false
    serverURL = ""

4. 创建内容 #

# 创建关于页面
hugo new content about.md

# 创建第一篇文章
hugo new content posts/hello-world.md

5. 本地预览 #

hugo server -D

打开浏览器访问 http://localhost:1313

🎉 恭喜！你的博客已经运行起来了！

目录结构 #

my-blog/
├── archetypes/          # 内容模板
├── assets/              # 资源文件
├── content/             # 网站内容
│   ├── posts/          # 文章目录
│   ├── about.md        # 关于页面
│   └── _index.md       # 首页配置
├── static/              # 静态文件
│   └── images/         # 图片目录
├── themes/              # 主题目录
│   └── PrimeEdge/      # PrimeEdge 主题
└── config.toml         # 站点配置

常见问题 #

Q: 提示 "hugo: command not found"

A: Hugo 没有正确安装或未添加到 PATH。请重新安装并确保安装的是 Extended 版本。

Q: 样式没有生效，页面显示异常

A: 确保安装的是 Hugo Extended 版本，它支持 SCSS/SASS 编译。

hugo version
# 应该包含 "extended" 字样

Q: 如何更新主题？

A: 如果使用 submodule：

git submodule update --remote themes/PrimeEdge

Q: 如何修改主题？

A: 在你的站点目录下创建同名文件即可覆盖主题默认文件：

  • layouts/ - 覆盖布局模板
  • static/css/custom.css - 添加自定义样式
  • assets/js/custom.js - 添加自定义脚本

下一步 #

评论

0%