本文最后更新于 2024-04-26，文章内容可能已经过时。
游戏作为第九艺术，是如今最具创意和影响力的艺术形式之一。它不仅仅是一种娱乐方式，更是一种沉浸式的体验，通过精美的画面、动人的音乐、丰富的剧情和独特的玩法，将玩家带入一个充满想象力的世界。在这个世界中，玩家可以扮演各种角色，体验不同的人生，感受各种情感。游戏不仅能够带给人们欢乐和刺激，还能够启发人们的创造力和思考能力。
如果你是一个热爱游戏的博客作者，或者是一个喜欢分享游戏的玩家，新建一个游戏页用于展示你喜爱的游戏，或是与读者分享你的游戏感悟，评测，经验。
本文提供为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、新建文件
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
|
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
|
1
2
3
4
5
6
7
| ---
title: 游戏世界
date: 2023-05-07 21:07:54
type: games
aside: false
comments: true
---
|
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三连查看效果吧~
微信