为博客添加一个游戏收藏页

注意，该内容需修改主题文件，本文操作步骤为 anzhiyu 主题 1.6.5版本

游戏作为第九艺术，是如今最具创意和影响力的艺术形式之一。它不仅仅是一种娱乐方式，更是一种沉浸式的体验，通过精美的画面、动人的音乐、丰富的剧情和独特的玩法，将玩家带入一个充满想象力的世界。在这个世界中，玩家可以扮演各种角色，体验不同的人生，感受各种情感。游戏不仅能够带给人们欢乐和刺激，还能够启发人们的创造力和思考能力。

如果你是一个热爱游戏的博客作者，或者是一个喜欢分享游戏的玩家，新建一个游戏页用于展示你喜爱的游戏，或是与读者分享你的游戏感悟，评测，经验。

本文提供为hexo博客新建一个游戏展示页的教程。基于主题“我的装备”页进行修改。

一、样式预览

前往预览页面：游戏人生

二、实现步骤

1、修改文件

在\themes\anzhiyu\layout\page.pug中新增以下内容

1
2
3
4
5
6
      when 'music'
        include includes/page/music.pug
+     when 'games'
+       include includes/page/games.pug
      default
        include includes/page/default-page.pug

2、新建文件

  • 新建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
  • 新建yml文件
  • 新建\source\_data\games.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
- 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
  • 新建md页面文件
  • 新建文件\source\games\index.md并按以下格式填写
1
2
3
4
5
6
7
---
title: 游戏世界
date: 2023-05-07 21:07:54
type: games
aside: false
comments: true
---
  • 新建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;

三、大功告成

执行hexo三连查看效果吧~