OneBlog - Gridea Pro 主题简介

thum-f5e11778759522.png

OneBlog - Gridea Pro 主题

高端个人博客主题,侧边栏固定布局,瀑布流文章卡片展示。

特性

  • 侧边栏固定布局,响应式设计
  • 瀑布流文章卡片展示
  • 支持特色图片
  • 标签云和归档页面
  • 自定义主题色
  • 闪念页面(含年度热力图)
  • 友情链接页面
  • 响应式设计,适配移动端

安装

  1. 将整个 oneblog 文件夹复制到 Gridea Pro 的 themes 目录:

    C:\Users\zhong\Documents\Gridea Pro\themes\oneblog
  2. 打开 Gridea Pro,在主题设置中选择 OneBlog

配置说明

基础设置

配置项 类型 说明
站点 Logo 图片上传 侧边栏头像/站点 Logo,推荐正方形
作者名称 文本 作者/博主名称,留空则使用站点名称
站点图标 Favicon 图片上传 浏览器标签图标,推荐 .ico 或 .png
页脚信息 多行文本 支持 HTML,显示在页脚

注意: 友情链接请在 Gridea Pro 左侧导航的「友情链接」管理面板中添加,不需要在主题配置中设置。

社交链接

配置项 类型 说明
GitHub 文本 GitHub 完整链接地址
Twitter 文本 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

主题下载地址:

oneblog.zip

0 0

评论区 (2)

发表评论

共有 2 条评论

avatar
码农小陈1 个月前

瀑布流卡片展示确实好看,但侧边栏固定布局在手机上体验一般,建议加个自动折叠或隐藏选项。另外社交链接只有四个平台,能否做通用自定义字段?像很多博主还想挂B站或豆瓣呢。

avatar
像素控1 个月前

瀑布流卡片展示确实很适合博客,视觉上很舒服。自定义主题色这点也很实用,不用改代码就能调出个人风格,对不熟悉CSS的朋友很友好。