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

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

本文提供为hexo博客新建一个游戏展示页的教程。基于主题“我的装备”页进行修改。
内容转载自铭心石刻

引用站外地址

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

铭心石刻

一、样式预览

前往预览页面：游戏人生

---

二、实现步骤

1、修改文件

在\themes\anzhiyu\layout\page.pug中新增以下内容,+记得删除

      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并增加以下内容

  #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并参考以下格式输入内容

  - 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并按以下格式填写

  ---
  title: 游戏世界
  date: 2023-05-07 21:07:54
  type: games
  aside: false
  comments: true
  ---

• 新建styl文件
• 在\themes\anzhiyu\source\css\_page\中新建文件games.styl并增加以下内容

  // 游戏世界
  .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预览三连查看效果吧~

hexo clean; hexo g; hexo s