Moderna Theme

介绍

起初是看到 bearblog 的博客平台创始人的博客页， 对这种极简风格毫无抵抗力

但是找了一圈发现 hexo 里找不到与之类似又比较满意的主题，加上有 cursor，就开始了自己动手写 moderna 之路

功能

• 极简风格，大片留白
• 夜间模式一键切换
• 代码块无高亮，极简风格展示(这算是 bug ...)
• 支持标签、分类
• 支持分页展示
• 支持 Gallery 画册风格，灵活的多宫格展示
• 适配移动端/桌面端

演示站

没有专门写一个 demo 站点，就以我个人的来做展示吧 枫晓の地

安装

进入博客的 themes 目录

• github 方式： git clone https://github.com/saitolerr/moderna.git
• cnb 方式: git clone https://cnb.cool/saitolers/moderna

进入 themes/moderna, 执行 npm install

配置

hexo 配置

将 theme 的设置修改为 moderna

主题配置

进入 your-blog/themes/moderna/， 编辑 _config.yml， 各项配置如下：

# 站点信息
# 站点标题 显示在网站页面及标题栏
site_title: "Your Blog"
# 站点副标题 显示在网站首页
subtitle: "舍得一身剐，敢把皇帝拉下马"
# 作者, 用于网站 SEO 优化
author: "Saitoler"

# 个人介绍 显示在网站首页(理念是去掉 About 页， 当然你也可以创建 About 页来介绍自己)
bio: |
  我是一名技术爱好者，专注于AI、机器学习和全栈开发。
  喜欢探索新技术，分享学习心得，记录生活点滴。
  
  在这里你可以看到我的技术文章、项目展示和生活感悟。
  欢迎与我交流讨论！

# 导航菜单 默认给出如下配置，但仅 Home 页有默认页面，其他页面需要 hexo new page 来生成
menu:
  Home: /
  Blogs: /blogs
  Gallery: /gallery
  Now: /now
  Projects: /projects

# 社交链接（未在模板中使用）
social:
  rss: /atom.xml

# 页脚信息
footer:
  powered_by: true
  theme_link: true

# 字体
fonts:
  enable: true
  host: fonts.googleapis.com

# 代码高亮（实际未生效）
highlight:
  enable: true
  theme: github

# 分页设置
# Blogs 页, 标签(Tags)页, 分类(Categories)页
# 均使用 pagination.posts_per_page 设置每页显示的文章数量
pagination:
  enable: true
  posts_per_page: 10

# 首页设置
homepage:
  recent_posts_count: 5  # 首页显示的最近文章数量

页面

分类、标签页

已默认支持，文章中在前面添加即会展示

• 分类会在 Blogs 页面文章列表中展示
• 标签仅会在文章中展示 体现在文章结尾处
• 以上两者都可通过点击进入到对应的分类、标签页

归档页

在此博客中称为 Blogs 页面，请执行 hexo new page blogs 添加
无需在 _config.yml 中登记， 已默认支持

此页面支持分页

文章页 - 插入图片

文章中插入图片当然可以按常规的 markdown 语法。但如果要进行排版，请按如下的语法进行编辑

二列展示

<div class="gallery gallery-2">

  ![漠上人](/file/1756999445048_漠上人.jpg)

  ![漠上人](/file/1756999445048_漠上人.jpg)

  ![漠上人](/file/1756999445048_漠上人.jpg)

  ![漠上人](/file/1756999445048_漠上人.jpg)

  ![漠上人](/file/1756999445048_漠上人.jpg)

  ![漠上人](/file/1756999445048_漠上人.jpg)

</div>

三列展示

<div class="gallery gallery-3">

  ![漠上人](/file/1756999445048_漠上人.jpg)

  ![漠上人](/file/1756999445048_漠上人.jpg)

  ![漠上人](/file/1756999445048_漠上人.jpg)

  ![漠上人](/file/1756999445048_漠上人.jpg)

  ![漠上人](/file/1756999445048_漠上人.jpg)

  ![漠上人](/file/1756999445048_漠上人.jpg)

</div>

注意：

• div 的 class 中数字表示你需要展示成几列，设置为几就行
• div 中的图片 markdown 每行都要有空行，否则渲染效果可能不如你所愿

当然，应该也支持4列展示的，再多的话，可能展示效果就不好了

画册页

在此博客中称为 Gallery 页面，请执行 hexo new page gallery 添加
无需在 _config.yml 中登记，已默认支持

创建后需要 index.md 页面中添加内容，否则可能打开时加载到的是首页内容。。(Edgeone pages 实测效果)

以下面的示例作为 index.md 的配置示例

### 这里添加 Gallery 页面的描述文字  


## 相册一
![封面](https://img.saitoler.cn/file/1756999445048_漠上人.jpg "这里添加相册一的描述")

![纪实1](https://img.saitoler.cn/file/1756999445048_漠上人.jpg)
![纪实2](https://img.saitoler.cn/file/1756999445048_漠上人.jpg)
![纪实3](https://img.saitoler.cn/file/1756999445048_漠上人.jpg)

## 相册二  
![封面](https://cnbpic.saitoler.cn/saitolers/pubPics/-/git/raw/main/wallpaper/飞行编队.jpeg "这里添加相册二的描述")

![黑白1](https://cnbpic.saitoler.cn/saitolers/pubPics/-/git/raw/main/wallpaper/飞行编队.jpeg)
![黑白2](https://cnbpic.saitoler.cn/saitolers/pubPics/-/git/raw/main/wallpaper/飞行编队.jpeg)

## 相册三
![封面](https://cnbpic.saitoler.cn/saitolers/pubPics/-/git/raw/main/wallpaper/飞行编队.jpeg "这里添加相册三的描述")

![黑白1](https://cnbpic.saitoler.cn/saitolers/pubPics/-/git/raw/main/wallpaper/飞行编队.jpeg)
![黑白2](https://cnbpic.saitoler.cn/saitolers/pubPics/-/git/raw/main/wallpaper/飞行编队.jpeg)

按以上配置后，页面展示效果如图下图

Gallery 页：

相册详情页：

其他页

其他页就没特殊的了， 你需要按照 hexo 的方式，使用 hexo new page xx 来生成页面，然后在 your-blog/themes/moderna/_config.yml 中 menu 部分登记后即可

LICENSE

采用 MIT License

其他

本来是给自己捣鼓出来玩的， 有几个朋友看到了也想用，索性就开源出来了

肯定有很多不完善，如果有人使用了轻喷哈

也欢迎大家提 issue 或提 pr

更新日志

v1.0.0

• ✅ 基础主题框架
• ✅ 响应式设计
• ✅ 代码复制功能
• ✅ 图片查看器
• ✅ Gallery 画廊功能，支持折叠
• ✅ 分类标签系统