添加一个游戏收藏页

注意：该内容需修改主题文件

实现步骤

  • 在 \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
  • 在 \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
  • 新建 \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
  • 新建文件 \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
// 游戏世界  
.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;

一键三连

1
hexo clean; hexo g; hexo s