Default Layout 使用说明 cover
Default Layout 使用说明 cover

Default Layout 使用说明

Default Layout 使用说明

Default Layout 使用说明

Default 布局使用说明

Default 布局是专门为游戏页面设计的布局，提供了游戏展示、信息展示和分享功能。

布局特性

  1. 游戏展示区域：

    • 使用 iframe 嵌入游戏
    • 响应式设计，自适应宽度
    • 支持全屏模式

  2. 信息展示区域：

    • 游戏标题
    • 游戏描述
    • 封面图展示
    • 分享按钮
    • 面包屑导航

Frontmatter 配置

---
title: 游戏标题        # 必填：显示在页面标题和游戏信息区
description: 描述     # 可选：游戏描述
game: 游戏链接        # 可选：游戏 iframe URL，如果不提供则不显示游戏区域
cover: 封面图片       # 可选：游戏封面图 URL，显示在信息区
date: 2024-03-20    # 可选：发布日期
tags:               # 可选：游戏标签
  - action
  - multiplayer
---

布局结构

  1. 顶部游戏区域：

    • 只有配置了 game 属性才会显示
    • 使用 GameFrame 组件展示
    • 支持自定义游戏封面（cover 属性）

  2. 内容卡片区域：

    • 白色背景卡片
    • 圆角和阴影效果
    • 支持深色模式

  3. 信息展示区域：

    • 左侧：封面图（如果提供）
    • 右侧：标题和分享按钮

  4. 文章内容区域：

    • 支持 Markdown/MDX 内容
    • 响应式排版
    • 适配深色模式

使用示例

1. 基础配置

最简单的配置，只需要标题：

---
title: 我的游戏
---

2. 完整配置

包含所有可选属性：

---
title: 街机游戏
description: 这是一个有趣的街机游戏
game: https://example.com/game-url
cover: /images/game-cover.jpg
date: 2024-03-20
tags:
  - arcade
  - multiplayer
---

3. 仅展示内容

如果不需要展示游戏，可以只配置基本信息：

---
title: 游戏说明
description: 游戏介绍和攻略
cover: /images/cover.jpg
---

注意事项

  1. title 是唯一必填属性
  2. game URL 必须支持 iframe 嵌入
  3. 建议提供 cover 图片以优化显示效果
  4. 内容区域支持完整的 Markdown 语法
  5. 分享按钮会自动使用当前页面 URL