极简（jijian）主题 Wiki：03-首页模式

jijian 主题提供三种首页展示模式，在原 PaperMod 主题基础上重新命名，更加直观易懂：

jijian 模式	原 PaperMod 模式	特点
Blog Mode（博客模式）	Regular Mode	首页直接显示文章列表
Portal Mode（门户模式）	Home-Info Mode	顶部显示个人信息卡片，下方显示文章列表
Card Mode（名片模式）	Profile Mode	居中显示个人头像、标题和社交图标，无文章列表

Blog Mode（博客模式）

适用场景：适合以内容为主的博客站点，希望访客一进入首页就能看到最新文章。

特点：

直接展示文章列表
支持分页显示
可指定显示的内容分区

配置方法

这是默认模式，无需特殊配置。如需指定首页显示的内容分区：

1
2
3
4
params:
  mainSections:
    - posts
    - docs

说明：

mainSections 指定首页显示的内容目录
如果不配置，默认显示所有文章

完整示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
baseURL: https://your-domain.com/
title: 我的博客
theme: jijian

menu:
  main:
    - identifier: posts
      name: 文章
      url: /posts/
      weight: 10

params:
  env: production
  
  # Blog Mode 是默认模式，无需特殊配置
  mainSections:
    - posts
  
  # 文章列表显示控制
  ShowReadingTime: true
  ShowWordCount: true
  ShowBreadCrumbs: true

Portal Mode（门户模式）

适用场景：适合希望在首页展示个人介绍或欢迎信息，同时保留文章列表的站点。

特点：

顶部显示自定义信息卡片
下方显示文章列表
可配置社交图标对齐方式

配置方法

1
2
3
4
5
6
params:
  portalMode:
    enabled: true                     # 启用门户模式
    Title: 你的名字                   # 标题
    Content: 欢迎来到我的小站...      # 内容描述（支持 Markdown）
    AlignSocialIconsTo: center        # 社交图标对齐方式

参数说明

参数	类型	必需	说明
`enabled`	boolean	是	是否启用门户模式
`Title`	string	是	显示的标题
`Content`	string	是	显示的内容描述，支持 Markdown
`AlignSocialIconsTo`	string	否	社交图标对齐方式：`left`、`center`、`right`

完整示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
params:
  portalMode:
    enabled: true
    Title: 莫莫先生
    Content: |
      👋 Hello! 欢迎来到我的小站
      
      这里是一名视频后期从业者的日常记录，分享建站经历、软件技巧、工作心得。
    AlignSocialIconsTo: center

  socialIcons:
    - name: bilibili
      url: https://space.bilibili.com/xxxxxx
    - name: github
      url: https://github.com/yourname
    - name: email
      url: mailto:your@email.com

Card Mode（名片模式）

适用场景：适合个人主页或作品集，希望给访客留下清晰的第一印象。

特点：

居中显示个人头像和标题
无文章列表，界面简洁
可添加快捷按钮
适合作为个人名片页

配置方法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
params:
  cardMode:
    enabled: true                     # 启用名片模式
    title: 你的名字                   # 主标题
    subtitle: 欢迎来到我的小站        # 副标题/签名
    imageUrl: /img/avatar.png         # 头像图片路径
    imageWidth: 120                   # 图片宽度（像素）
    imageHeight: 120                  # 图片高度（像素）
    imageTitle: 头像                  # 图片标题（alt 属性）
    buttons:                          # 可选按钮
      - name: 文章
        url: posts
      - name: 关于
        url: about

参数说明

参数	类型	必需	说明
`enabled`	boolean	是	是否启用名片模式
`title`	string	是	显示的主标题
`subtitle`	string	是	显示的副标题或签名
`imageUrl`	string	是	头像图片路径
`imageWidth`	integer	否	图片宽度（像素），默认 120
`imageHeight`	integer	否	图片高度（像素），默认 120
`imageTitle`	string	否	图片 alt 文本
`buttons`	array	否	快捷按钮列表

按钮配置

每个按钮支持以下参数：

参数	类型	必需	说明
`name`	string	是	按钮显示文字
`url`	string	是	跳转链接，支持相对路径和绝对路径

完整示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
params:
  cardMode:
    enabled: true
    title: 莫莫先生
    subtitle: 👋 Hello! 欢迎来到我的小站
    imageUrl: /img/avatar.png
    imageWidth: 120
    imageHeight: 120
    imageTitle: 莫莫先生
    buttons:
      - name: 📝 文章
        url: posts
      - name: 📂 归档
        url: archives
      - name: 🔍 搜索
        url: search
      - name: ℹ️ 关于
        url: about

  socialIcons:
    - name: bilibili
      url: https://space.bilibili.com/xxxxxx
      hoverImage: /img/bilibili-qr.png
    - name: github
      url: https://github.com/yourname

图片路径说明

头像图片路径支持：

静态目录：放在 static/img/ 目录下
1
imageUrl: /img/avatar.png

外部链接：使用完整的 URL

1
imageUrl: https://example.com/avatar.png

建议：

使用正方形图片，效果最佳
推荐尺寸：256x256 或 512x512 像素
支持 PNG、JPG、WebP、SVG 格式

模式切换

从 Blog Mode 切换到 Portal Mode

1
2
3
4
5
6
params:
  # 添加 portalMode 配置即可切换
  portalMode:
    enabled: true
    Title: 你的名字
    Content: 欢迎信息

从 Blog Mode 切换到 Card Mode

1
2
3
4
5
6
7
params:
  # 添加 cardMode 配置即可切换
  cardMode:
    enabled: true
    title: 你的名字
    subtitle: 签名
    imageUrl: /img/avatar.png

从 Portal Mode 切换到 Card Mode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
params:
  # 禁用 portalMode
  portalMode:
    enabled: false
  
  # 启用 cardMode
  cardMode:
    enabled: true
    title: 你的名字
    subtitle: 签名
    imageUrl: /img/avatar.png

模式对比

特性	Blog Mode	Portal Mode	Card Mode
文章列表	✅ 显示	✅ 显示	❌ 不显示
个人信息	❌ 无	✅ 顶部卡片	✅ 居中展示
社交图标	✅ 页脚	✅ 可配置位置	✅ 突出显示
适合场景	内容博客	个人博客	个人主页
界面复杂度	简洁	适中	极简

社交图标配置

三种模式都支持社交图标，配置方法相同：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
params:
  socialIcons:
    # 基本配置
    - name: github
      url: https://github.com/yourname
    
    # 带悬浮二维码
    - name: wechat
      url: "javascript:void(0);"
      hoverImage: /img/wechat-qr.png
      title: 微信二维码
    
    # 国内平台
    - name: bilibili
      url: https://space.bilibili.com/xxxxxx
      hoverImage: /img/bilibili-qr.png

支持的平台：

国内：bilibili、douyin、xiaohongshu、shipinhao、zhihu、douban、weibo、wechat
国际：github、twitter/x、linkedin、youtube、instagram、facebook、email