Anzhiyu-游戏录功能的实现

做这个页面的原因

其实我一直想做一个记录自己玩过的游戏的页面了，就像用豆瓣记录自己看过的电影那样。之所以不直接使用Steam运行库，是因为我玩游戏的平台太多了，很多都没有上架Steam。我希望可以通过这个页面，让大家了解我在游戏上的喜好，更希望可以因此找到爱好相近的人。

这个页面其实可以通过一些调整，来记录看过的电影、影视剧和读过的书。

游戏封面图源来自SteamGridDB

魔改步骤大致如下(css根据自己的需要进行调整，不通用)：


1. 新建pug文件

在 /themes/anzhiyu/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
24
25
26
27
28
29
30
31
32
33
34
35
36
#games
  if site.data.games
    each i in site.data.games
      .author-content.author-content-item.GamesPage.single(style = `background: url(${i.top_background}) left 37% / cover no-repeat !important;`)
        .card-content
          .author-content-item-tips=i.class_name
          span.author-content-item-title=i.description
          .content-bottom
            .tips=i.tip
          .banner-button-group
            a.banner-button(href=i.buttonLink)
              i.anzhiyufont.anzhiyu-icon-arrow-circle-right(style='font-size: 1.3rem')
              span.banner-button-text=i.buttonText
      each item in i.good_games
        .goodgames-item
          h2.goodgames-title= item.title
          .goodgames-item-description= item.description
          .games-item
            .games-item-content
              each iten, indey in item.games_list
                .games-item-content-item
                  .games-item-content-item-cover
                    img.games-item-content-item-image(data-lazy-src=url_for(iten.image) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=iten.name)
                  .games-item-content-item-info
                    .games-item-content-item-name(onclick=`rm.rightmenuCopyText("${iten.name}");anzhiyu.snackbarShow("${_p('Snackbar.copy_games_name') + " 【" + iten.name + "】"}");` title=iten.name)= iten.name
                    .games-item-content-item-specification= iten.specification
                    .games-item-content-item-description= iten.description
                    .games-item-content-item-toolbar
                      if iten.link.includes('https://') || iten.link.includes('http://')
                        a.games-item-content-item-link(href= iten.link, target='_blank') 详情
                        .bber-reply(onclick="rm.rightMenuCommentText(" + `'${iten.name + " " + iten.specification + " " + iten.description}'` + ")")
                          i.anzhiyufont.anzhiyu-icon-message
                      else  
                        a.games-item-content-item-link(href= iten.link, target='_blank') 查看文章
                        .bber-reply(onclick="rm.rightMenuCommentText(" + `'${iten.name + " " + iten.specification + " " + iten.description}'` + ")")
                          i.anzhiyufont.anzhiyu-icon-message

2. 引入pug文件

在 /themes/anzhiyu/layout/page.pug 文件中引入创建的页面，注意对齐。

1
2
3
4
5
6
7
    case page.type
      when 'music'
        include includes/page/music.pug
      when 'equipment'
        include includes/page/equipment.pug
+      when 'games'
+        include includes/page/games.pug

3. 引入styl文件

在 /themes/anzhiyu/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
// 游戏记忆
.goodgames-title
  margin: 1rem 0
  line-height: 1;
.games-item
  .games-item-content
    display: flex
    flex-direction: row
    flex-wrap: wrap
    margin: 0 -8px
    .games-item-content-item
      width: calc(25% - 12px)
      border-radius: 12px
      border: var(--style-border-always)
      overflow: hidden
      margin: 8px 6px
      background: var(--anzhiyu-card-bg)
      box-shadow: var(--anzhiyu-shadow-border)
      min-height: 400px
      position: relative
      +maxWidth1200()
        width: calc(50% - 12px)
      +maxWidth768()
        width: 100%
      
      .games-item-content-item-info
        padding: 8px 16px 16px 16px
        margin-top: 12px

      .games-item-content-item-name
        font-size: 18px
        font-weight: bold
        line-height: 1
        margin-bottom: 8px
        white-space: nowrap
        overflow: visable
        text-overflow: ellipsis
        width: fit-content
        cursor pointer
        &:hover
          color: var(--anzhiyu-main)

      .games-item-content-item-specification
        font-size: 12px
        color: var(--anzhiyu-secondtext)
        line-height: 16px
        margin-bottom: 5px
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis

      .games-item-content-item-description
        line-height: 20px
        color: var(--anzhiyu-secondtext)
        height: 60px
        display: -webkit-box
        overflow: hidden
        -webkit-line-clamp: 3
        -webkit-box-orient: vertical
        font-size: 14px

      a.games-item-content-item-link
        font-size: 12px
        background: var(--anzhiyu-gray-op)
        padding: 4px 8px
        border-radius: 8px
        cursor: pointer

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

      .games-item-content-item-cover
        width: 100%
        height: 200px
        background: var(--anzhiyu-secondbg)
        display: flex
        justify-content: center
        align-items: center;

      img.games-item-content-item-image
        object-fit: cover
        height: 100%
        width: 100%
       // border-radius: 0 
       // 若需要去除图片圆角可以将这里的注释去掉

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

body[data-type="games"] #web_bg
  background: var(--anzhiyu-background);
body[data-type="games"] #page
  border: 0;
  box-shadow: none !important;
  padding: 0 !important;
  background: 0 0 !important;
body[data-type="games"] #page .page-title
  display: none;

4. 新建md页面文件

在博客根目录打开终端，输入以下指令：

1
hexo new page games

打开 /source/games/index.md ，修改为以下形式：

1
2
3
4
5
6
7
---
title: 游戏记忆
date: 2024-03-17 21:07:54
type: games
aside: false
comments: true
---

5. 添加yml文件

在 /source/_data/ 新建 games.yml 文件，如果 _data 文件夹也没有的话需要自己创建。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- class_name: 游戏记忆
  description: 我的游戏记忆
  tip: 跟 石头 一起探索世界
  top_background: https://th.bing.com/th/id/R.13a97ef4830efa5e0b87134d622719f3?rik=G7RaJFpxg5PtkA&riu=http%3a%2f%2fupload.techweb.com.cn%2fs%2f640%2f2019%2f0530%2f1559208230699.jpg&ehk=j1G8rMX98TRX52EkLgI5jW1p7lIQp4I8Si1nqEggFRs%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1
  buttonText: Steam
  buttonLink: https://steamcommunity.com/
  good_games:
    - title: 风景一绝
      description: 不会错过的风景
      games_list:
        - name: 怪物猎人：世界
          specification: CAPCOM Co., Ltd.
          description: "在新建构的「Monster Hunter: World」中, 可以体验到你一直期盼的极致猎人生活。"
          image: https://cdn.max-c.com/heybox/dailynews/img/94376ca41326836587a137d5999733e5.jpg
          link: https://www.xiaoheihe.cn/games/detail/582010

    - title: 我的最爱
      description: 我不能没有它了
      games_list:
        - name: GTA:5
          specification: Rockstar Games
          description: 谁还在买GTA5
          image: https://imgheybox.max-c.com/heybox/game/header/271590_dXCCk.jpg
          link: https://www.xiaoheihe.cn/games/detail/271590

6. 启用游戏页面

修改 /_config.anzhiyu.yml （先挑选好图标，再更新ali_iconfont_js）：

1
2
3
menu:
+  分享:
+    游戏记忆: /games/ || icon-game

1. 安装插件

安装插件,在博客根目录下打开终端，运行以下指令：

1
npm install hexo-butterfly-games --save

2. 填写配置信息

在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加：

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
# Game Page
# see https://akilar.top/posts/e2d3c450/
games:
  enable: true
  name: 游戏记忆
  description: 我的游戏记忆
  tip: 跟 小屋屋主 一起探索世界 
  top_background: https://th.bing.com/th/id/R.13a97ef4830efa5e0b87134d622719f3?rik=G7RaJFpxg5PtkA&riu=http%3a%2f%2fupload.techweb.com.cn%2fs%2f640%2f2019%2f0530%2f1559208230699.jpg&ehk=j1G8rMX98TRX52EkLgI5jW1p7lIQp4I8Si1nqEggFRs%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1
  buttonText: Steam 
  buttonLink: https://steamcommunity.com/
  css: https://jsd.cdn.sininno.eu.org/npm/hexo-butterfly-games/lib/games.css
  good_games:
    - title: 风景一绝
      description: 不会错过的风景
      games_list:
        - name: 怪物猎人：世界
          specification: CAPCOM Co., Ltd.
          description: "在新建构的「Monster Hunter: World」中, 可以体验到你一直期盼的极致猎人生活。"
          image: https://cdn.max-c.com/heybox/dailynews/img/94376ca41326836587a137d5999733e5.jpg
          link: https://www.xiaoheihe.cn/games/detail/582010

    - title: 我的最爱
      description: 我不能没有它了
      games_list:
        - name: GTA:5
          specification: Rockstar Games
          description: 谁还在买GTA5
          image: https://imgheybox.max-c.com/heybox/game/header/271590_dXCCk.jpg
          link: https://www.xiaoheihe.cn/games/detail/271590
  path: games
  front_matter: #【可选】games页面的 front_matter 配置
    title: 游戏人生
    comments: true
    top_img: false
    type: games
    aside: false

参数定义

参数 备选值/类型 释义
enable true/false 控制开关
name text 顶部标题
description text 顶部副标题
tip text 顶部小标题
top_background URL 顶部背景链接
buttonText text 按钮文字
buttonLink URL 按钮对应链接
good_games.title text 分类标题
good_games.description text 分类副标题
good_games.games_list.name text 游戏名字
good_games.games_list.specification text 游戏产商
good_games.games_list.description text 游戏简介
good_games.games_list.image URL 游戏图片链接
good_games.games_list.link URL 游戏对应链接
css URL 【可选】开发者接口，自定义css链接
path comments 【可选】games 的路径名称。默认为 games，生成的页面为 games/index.html
front_matter object 【可选】games 页面的 front_matter 配置,写法见上文示例

3. 启用游戏页面

修改 /_config.anzhiyu.yml （先挑选好图标，再更新ali_iconfont_js）：

1
2
3
menu:
+  分享:
+    游戏记忆: /games/ || icon-game

问题解决

我刚刚搭好时，出现了无法显示图片的问题，一开始还以为是开启了 lazyload 图片懒加载，后来发现其实关系不大，主要是需要安装hexo-asset-img插件

安装插件,在博客根目录下打开终端，运行以下指令：

1
npm install hexo-asset-img --save

参考资料

https://blog.kouseki.cn/posts/e7dd.html

https://blog.sinzmise.top/posts/10045/