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

图片路径说明

头像图片路径支持：

  1. 静态目录：放在 static/img/ 目录下

    1

    imageUrl: /img/avatar.png

  2. 外部链接：使用完整的 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