游戏人生界面
参考1
参考2插件版
- [ ] 本blog采用插件实现（简单）（移动端样式有问题）
该内容需修改主题文件，本文操作步骤为 anzhiyu 主题
游戏作为第九艺术，是如今最具创意和影响力的艺术形式之一。
它不仅仅是一种娱乐方式，更是一种沉浸式的体验，通过精美的画面、动人的音乐、丰富的剧情和独特的玩法，将玩家带入一个充满想象力的世界。
在这个世界中，玩家可以扮演各种角色，体验不同的人生，感受各种情感。游戏不仅能够带给人们欢乐和刺激，还能够启发人们的创造力和思考能力。
如果你是一个热爱游戏的博客作者，或者是一个喜欢分享游戏的玩家，新建一个游戏页用于展示你喜爱的游戏，或是与读者分享你的游戏感悟，评测，经验。
本文提供为hexo博客新建一个游戏展示页的教程。基于主题“我的装备”页进行修改。
一、样式预览
游戏人生
二、实现步骤
- 在
\themes\anzhiyu\layout\page.pug中新增以下内容
1
2
3
4
5
6
| when 'music'
include includes/page/music.pug
+ when 'games'
+ include includes/page/games.pu
default
include includes/page/default-page.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
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
.games-card
img.card-img(src= i.games_card)
.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.games.concat(i.steam)
.games-item
h2.games-title= item.title
.team-item-description= item.description
.games-item
.games-item-content
each iten, index in item.games_list
.games-game
a.game-img(href=iten.link)
img(src= iten.img, alt= iten.name)
span.game-name= iten.name
span.en-name= iten.en_name
.play-time
span.total-time 总游戏时间
span= iten.totalTime
span.last-time 最后运行日期
span= iten.lastTime
.game-achievement
span.achievement-text 成就
span.achievement-num= iten.num
.progress(style=`width: ${iten.achievement}`)
|
- 新建
\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: 跟 xiaoze 一起探索世界
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
|
- 新建文件
\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
---
|
- 在
\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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
|
.games-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%
min-height: auto // 适应手机屏幕，可以考虑减少最小高度
.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: visible
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
+maxWidth768()
font-size: 12px // 适应手机屏幕，可以考虑减少字体大小
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
+maxWidth768()
height: 150px // 适应手机屏幕，可以考虑减少高度
img.games-item-content-item-image
object-fit: cover
height: 100%
width: 100%
.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;
#games
.card-content
.games-card
position: absolute
right: 15px
img.card-img
width: 500px
.goodsteam-item
.games-item
.playtime_forever
position: absolute
left: 15px
top: 15px
color: #fff
.rtime_last_played
position: absolute
right: 15px
top: 15px
color: #fff
.achievement
position: absolute
#header_canvas
z-index: 99
.games-game
box-sizing: border-box
height: 140px
width: 32%
padding: 10px
margin: 8px
background-color: #16202D
color: #fff
box-shadow: 3px 5px 11px #333333
border-radius: 10px
+maxWidth768()
width: 100% // 适应手机屏幕，可以考虑增加宽度
.en-name
font-weight: 300
font-size: 10px
position: absolute
margin-top: 35px
.game-img img
height: 100%
border-radius: 10px
width: 50%
.game-name
white-space: nowrap
font-size: 14px
display: inline-flex
flex-direction: column
justify-content: center
align-items: flex-start
height: 18px
font-weight: 900
position: absolute
margin: 1px 10px 10px
width: 200px
.play-time
flex-direction: row
white-space: nowrap
color: #B8BCBF
position: absolute
margin: 50px 10px 1px
display: inline-flex
.play-time .total-time, .last-time
display: inline-flex
flex-direction: column
font-size: 0.75rem
color: rgba(209, 211, 212, 0.8)
line-height: 1rem
width: 80px
.game-achievement
width: 200px
color: #B8BCBF
display: inline-block
margin-left: 8px
.achievement-text
font-weight: 700
font-size: 0.75rem
margin-right: 120px
color: inherit
letter-spacing: .03em
.achievement-num
font-size: 0.75rem
text-align: end
min-width: 2.5rem
.progress
height: 6px
border-radius: 2px
overflow: hidden
.progress::after
content: ""
display: block
height: 100%
background-color: #1A9FFF
|
三、大功告成
执行hexo三连查看效果吧~
