OneBlog - Gridea Pro 主题简介

OneBlog - Gridea Pro 主题
高端个人博客主题,侧边栏固定布局,瀑布流文章卡片展示。
特性
- 侧边栏固定布局,响应式设计
- 瀑布流文章卡片展示
- 支持特色图片
- 标签云和归档页面
- 自定义主题色
- 闪念页面(含年度热力图)
- 友情链接页面
- 响应式设计,适配移动端
安装
-
将整个
oneblog文件夹复制到 Gridea Pro 的 themes 目录:C:\Users\zhong\Documents\Gridea Pro\themes\oneblog -
打开 Gridea Pro,在主题设置中选择
OneBlog
配置说明
基础设置
| 配置项 | 类型 | 说明 |
|---|---|---|
| 站点 Logo | 图片上传 | 侧边栏头像/站点 Logo,推荐正方形 |
| 作者名称 | 文本 | 作者/博主名称,留空则使用站点名称 |
| 站点图标 Favicon | 图片上传 | 浏览器标签图标,推荐 .ico 或 .png |
| 页脚信息 | 多行文本 | 支持 HTML,显示在页脚 |
注意: 友情链接请在 Gridea Pro 左侧导航的「友情链接」管理面板中添加,不需要在主题配置中设置。
社交链接
| 配置项 | 类型 | 说明 |
|---|---|---|
| GitHub | 文本 | GitHub 完整链接地址 |
| 文本 | Twitter 完整链接地址 | |
| 微博 | 文本 | 微博完整链接地址 |
| 微信 | 文本 | 微信完整链接地址 |
外观设置
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 主题强调色 | 文本 | #667eea | 主色调,影响链接、按钮、强调条等 |
| 主题强调色2 | 文本 | #764ba2 | 渐变色第二个颜色 |
| 显示特色图片 | 选择 | 显示 | 是否在文章卡片和文章详情显示特色图片 |
高级设置
| 配置项 | 类型 | 说明 |
|---|---|---|
| 自定义 CSS | 多行文本 | 追加到 <head> 中,覆盖主题默认样式 |
| 自定义 JavaScript | 多行文本 | 追加到页面底部 |
模板文件结构
oneblog/
├── config.json # 主题配置
├── README.md # 说明文档
├── assets/
│ ├── styles/
│ │ └── main.css # 样式文件
│ └── media/ # 媒体资源目录
└── templates/
├── includes/
│ ├── head.ejs # 页面头部
│ ├── sidebar.ejs # 侧边栏
│ └── footer.ejs # 页脚
├── index.ejs # 首页
├── blog.ejs # 博客列表页
├── post.ejs # 文章详情页
├── tags.ejs # 标签云
├── tag.ejs # 标签文章列表
├── archives.ejs # 归档页
├── about.ejs # 关于页
├── links.ejs # 友情链接页
├── memos.ejs # 闪念页
└── 404.ejs # 404 错误页
页面说明
首页 (/)
瀑布流文章卡片列表,每篇文章显示缩略图、标题、摘要、日期、阅读量和标签。
文章详情页 (/post/{slug}/)
显示文章完整内容,包括标题、元信息(日期、阅读量、标签)、正文、标签、上一篇/下一篇导航。
标签云 (/tags/)
展示所有文章标签及其文章数量,点击可跳转到对应标签的文章列表。
标签文章列表 (/tag/{tag}/)
展示指定标签下的所有文章。
归档页 (/archives/)
按时间线展示所有文章。
闪念页 (/memos/)
展示短文/灵感/片段,包含年度热力图和分页功能。
友情链接页 (/links/)
展示友情链接列表,包含交换友链信息。
关于页 (/post/about/)
展示关于页面内容(需要在 Gridea Pro 中创建 about 文章)。
404 页面
当访问不存在的页面时显示。
可用变量
全局变量
| 变量 | 说明 |
|---|---|
site |
站点配置信息 |
site.customConfig |
主题自定义配置 |
themeConfig |
主题配置(站点名称、描述等) |
themeConfig.siteName |
站点名称 |
themeConfig.siteDescription |
站点描述 |
themeConfig.domain |
站点域名 |
themeConfig.footerInfo |
页脚信息 |
menus |
导航菜单 |
tags |
标签列表 |
文章变量
| 变量 | 说明 |
|---|---|
post.title |
文章标题 |
post.link |
文章链接 |
post.content |
文章内容 |
post.brief |
文章摘要 |
post.dateFormat |
格式化日期 |
post.feature |
特色图片 |
post.tags |
文章标签 |
post.prevPost |
上一篇文章 |
post.nextPost |
下一篇文章 |
post.stats |
文章统计信息 |
分页变量
| 变量 | 说明 |
|---|---|
pagination.prev |
上一页链接 |
pagination.next |
下一页链接 |
友链变量
| 变量 | 说明 |
|---|---|
site.customConfig.links |
友情链接列表 |
link.url / link.siteLink |
友链地址 |
link.name / link.siteName |
友链名称 |
link.avatar |
友链头像 |
link.description |
友链描述 |
闪念变量
| 变量 | 说明 |
|---|---|
memos |
闪念列表 |
memo.content |
闪念内容 |
memo.createdAt |
创建时间 |
memo.tags |
闪念标签 |
许可
MIT License
主题预览地址:
https://zhongyishenghi.github.io/
https://zhiboyuan365.com/?theme=oneblog
主题下载地址:
0
0
评论区 (2)
发表评论
共有 2 条评论
瀑布流卡片展示确实好看,但侧边栏固定布局在手机上体验一般,建议加个自动折叠或隐藏选项。另外社交链接只有四个平台,能否做通用自定义字段?像很多博主还想挂B站或豆瓣呢。
瀑布流卡片展示确实很适合博客,视觉上很舒服。自定义主题色这点也很实用,不用改代码就能调出个人风格,对不熟悉CSS的朋友很友好。