效果预览

站内链接
游戏人生
我的游戏世界

创建数据

新建 [blogRoot]/themes/solitude/layout/includes/page/games.pug 页面，并新增以下内容
（ + 号记得删除）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
include ../widgets/page/banner
#games
    if site.data.games
        each cls in site.data.games
            .game-group
                h2.game-group-title= cls.name
                .game-group-desc= cls.desc
                .game-group-content
                    each item in cls.list
                        .game-item
                            .game-item-cover
                                img.game-item-image(src=item.image, alt=item.name)
                            .game-item-info
                                .game-item-name(onclick='utils.copy("' + item.name + '")')= item.name
                                if item.score
                                    .game-item-score= "评分: " + item.score
                                .game-item-spec= item.spec
                                .game-item-desc= item.desc
                                if item.link
                                    .game-item-toolbar
                                        a.game-item-link(href=item.link, target="_blank") 详情
                                        a.bber-reply(onclick=`sco.toTalk('${item.name}\\n\\n${item.spec}\\n\\n${item.desc}')`)
                                            i.solitude.fa-solid.fa-comment(style="font-size: 1rem;")

修改 [blogRoot]/themes/solitude/layout/page.pug 来使页面匹配

1
2
3
4
5
6
7
8
block content
    main.layout#content-inner(class=page.aside ? '' : 'hide-aside')
        #page
            case page.type
                //- ...
+               when 'games'
+                   include includes/page/games
                //- ...

修改 [blogRoot]/themes/solitude/scripts/helper/stylus.js 文件，并新增以下内容

1
2
3
4
5
6
7
8
9
hexo.extend.filter.register('stylus:renderer', function (style) {
    // ...
    style.define('$equipment', !!(data && data.equipment))
+   style.define('$games', !!(data && data.games)) 

    // highlight
    const {syntax_highlighter: syntaxHighlighter, highlight, prismjs, shiki} = hexo.config
    // ...
});

新建 [blogRoot]/themes/solitude/source/css/_page/games.styl 样式文件，并新增以下内容

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
#games
  margin-top 26px

  .game-group
    .game-group-title
      line-height 1

    .game-group-desc
      line-height 1
      margin 4px 0 8px 0
      color var(--efu-secondtext)

    .game-group-content
      display flex
      flex-direction row
      flex-wrap wrap
      margin 0 -8px

      .game-item
        width calc(33% - 12px)
        border-radius 12px
        border var(--style-border-always)
        overflow hidden
        margin 8px 6px
        background var(--efu-card-bg)
        box-shadow var(--efu-shadow-border)
        min-height 400px
        position relative
        user-select none

        +maxWidth1200()
          width calc(50% - 12px)

        +maxWidth768()
          width 100%

        .game-item-cover
          width 100%
          height 200px
          background var(--efu-secondbg)
          display flex
          justify-content center

          .game-item-image
            object-fit cover
            width 100%

        .game-item-info
          padding 8px 16px 16px 16px

          .game-item-name
            font-size 18px
            font-weight 700
            line-height 1
            margin-bottom 8px
            white-space nowrap
            text-overflow ellipsis
            width fit-content
            display inline

            &:hover
              color var(--efu-vip)
              cursor pointer

          .game-item-score
            display inline
            position absolute
            right 1em
            font-size 0.8em
            color var(--efu-secondtext)

          .game-item-spec
            font-size 12px
            color var(--efu-secondtext)
            line-height 1
            margin-bottom 12px
            white-space nowrap
            overflow hidden
            text-overflow ellipsis

          .game-item-desc
            line-height 1.4em
            color var(--efu-secondtext)
            height 5.6em
            display -webkit-box
            overflow hidden
            -webkit-line-clamp 4
            -webkit-box-orient vertical
            font-size 14px

          .game-item-toolbar
            display flex
            justify-content space-between
            position absolute
            bottom 9px
            left 0
            width 100%
            padding 0 16px

            .game-item-link
              font-size 12px
              background var(--efu-gray-op)
              padding 4px 8px
              border-radius 8px
              cursor pointer

              &:hover
                background var(--efu-main)
                color var(--efu-white)

修改 [blogRoot]/themes/solitude/source/css/_page/index.styl 文件，并新增以下内容

1
2
3
4
5
6
7
8
// ...
if $about
  @import "_about/about"

+if $games
+  @import "games.styl"

// ...

创建 [blogRoot]/source/games/index.md/ 文件，并新增以下内容

1
2
3
4
5
6
7
8
9
10
---
title: 游戏人生
desc: 我的游戏世界
leftend: 游戏就只是为了游戏，仅此而已！
rightbtn: 查看更多
rightbtnlink: https://steamcommunity.com/profiles/76561199681113748/
cover: https://cdn.cloudflare.steamstatic.com/store/home/store_home_share.jpg
date: 2025-01-02 15:19:20
type: "games"
---

创建 [blogRoot]/source/_data/games.yml/ 文件，并新增以下内容

1
2
3
4
5
6
7
8
9
- name: 好游戏 # 分类名称
  desc: 比较喜欢的游戏 # 分类描述
  list: # 游戏列表
    - name: Counter-Strike 2 # 游戏名称
      score: 9.0 # 游戏评分，可选
      spec: Valve # 副标题
      desc: "二十多年来，在全球数百万玩家的共同铸就下，Counter-Strike 提供了精湛绝伦的竞技体验。而如今，CS 传奇的下一章即将揭开序幕，那就是 Counter-Strike 2。" # 游戏描述
      link: https://store.steampowered.com/app/730/CounterStrike_2/ # 游戏链接
      image: https://shared.st.dl.eccdnx.com/store_item_assets/steam/apps/730/header_schinese.jpg?t=1729703045 # 游戏封面

大功告成

执行hexo三连查看效果吧~