Skip to content
llb555
CachGame
Public

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository
BranchesTags

Repository files navigation

llgame Portal (Vue 3)

llgame — quiz and games portal built with Vue 3 + Vite, using data/quiz.js and data/games.js as data sources. Brand constants live in src/config/site.js.

Pages

Route Description
/quiz Quiz card grid (23 quizzes)
/quiz/:id Quiz play — questions, 2×2 options, progress bar
/games Games home — carousel, HOT/Popular, category grids
/games/category/:type Filter by game type
/games/play/:path Game detail + play (iframe)
/articles Articles list (Editor's Choice)
/articles/:slug Article detail
* 404 page

Features: Per-route SEO meta, quiz search/topic filters, iframe error UI, route lazy-loading, page skeletons, AppImage lazy load, game preview (blurred gameplay video loop + preview card → Play), list preview modal, Popular Games from click stats (popular.json + optional Worker).

Run

npm install
npm run dev

Open http://localhost:5173 (defaults to /games)

移动端

  • 全局样式：src/styles/mobile.css（≤768px / ≤430px、安全区、触控 44px、防 iOS 输入缩放）
  • 断点常量（JS）：src/config/breakpoints.js（768 / 430 / 1335）
  • index.html：viewport-fit=cover、theme-color、状态栏样式
  • 窄屏与横滑列表防溢出见各组件内 @media，首页布局在 GamesHome.vue（≤768 显示 Mobile Hero + Trending）
  • 文章配图：data/articles/media.js（Unsplash 等远程图库 URL，与站内游戏资源无关）

游戏通过 iframe 从 games.hhxzhd.xyz 加载，可在 .env 中设置：

VITE_GAME_EMBED_BASE=https://games.hhxzhd.xyz

加载体验：默认 30 秒超时；超过 12 秒仍 loading 会提示「较大游戏可能较慢」。开发模式下加载失败会在控制台打印 embed URL。可选：

VITE_GAME_LOAD_TIMEOUT_MS=30000
VITE_GAME_LOAD_SLOW_HINT_MS=12000

Popular Games（点击量排序）

  • 用户 打开预览（权重 1）或 点 Play（权重 3）时，前端向 {VITE_STATS_API_BASE}/api/stats/event 上报（sendBeacon）。
  • 首页 fetchPopularConfig() 读取 {VITE_STATS_API_BASE}/popular.json（未配置则用同源 /popular.json）；失败回退 games.js 策展。
  • 本地：npm run dev 自带统计 API（vite-stats-plugin），数据在 data/game-stats.json。

部署 + 联调（Cloudflare Worker）

  1. KV：Dashboard → Workers & Pages → KV → Create，把 namespace id 写入 wrangler.toml 的 REPLACE_WITH_KV_NAMESPACE_ID。
  2. 部署 Worker： 
    npm install
npx wrangler login
npm run deploy:stats
    记下输出 URL，例如 https://llgame-popular-stats.xxx.workers.dev。
  3. 联调 API（另开终端可先 npm run dev 测本地）： 
    npm run test:stats
STATS_API=https://llgame-popular-stats.xxx.workers.dev npm run test:stats
STATS_ORIGIN=https://llgame.xyz npm run test:stats
    通过即：/api/stats/health → POST preview/play → GET /popular.json 结构正确。
  4. 前端生产环境变量（复制 .env.production.example → .env.production）： 
    VITE_SITE_URL=https://llgame.xyz
VITE_STATS_API_BASE=https://llgame-popular-stats.xxx.workers.dev
    然后 npm run build 并部署 dist/。
  5. 验收：打开线上首页 → DevTools Network 应有对 Worker 的 POST .../api/stats/event（预览/Play 后）和 GET .../popular.json；Popular 区块 source 为 stats / config 且非常驻策展。

可选：

  • wrangler secret put ADMIN_TOKEN + PUT /api/stats/pins（Bearer）固定 HOT / 轮播置顶。
  • POPULAR_SEED（wrangler.toml [vars]）KV 无数据时的初始列表。
  • 静态兜底：STATS_API=... npm run sync:popular 把 Worker 榜单写入 public/popular.json 再部署（无 Worker 时前端仍可读静态文件）。
npm run build:popular          # 从 hotPage 生成初始 popular.json
npm run sync:popular           # 等同 aggregate:popular
STATS_API=https://your-worker.workers.dev npm run sync:popular

Optional — replace generated icons with originals from the live site:

npm run fetch:icons

从 localhost 到线上可访问网站

本地 npm run dev 只在你的电脑上跑；线上需要：域名 + 静态托管 + 生产构建产物 dist/。

流程概览

配置 .env.production → npm run build → 上传 dist/ → 绑定域名 →（可选）部署统计 Worker

1. 准备域名与环境变量

  1. 购买/准备一个域名（例如 llgame.xyz），DNS 交给托管商（Cloudflare、阿里云等）。
  2. 复制生产配置并改成你的真实地址：
cp .env.production.example .env.production

编辑 .env.production（构建时 Vite 会读入并打进前端）：

VITE_SITE_URL=https://你的域名.com          # 不要末尾斜杠
VITE_GAME_EMBED_BASE=https://games.hhxzhd.xyz   # 游戏 CDN，有自有 CDN 再改

# AdSense 发布商 ID（Account → Account information，格式 ca-pub-…）
VITE_ADSENSE_CLIENT=ca-pub-XXXXXXXXXXXXXXXX

# 若已部署 Popular 统计 Worker（见上文 Popular Games 章节）：
VITE_STATS_API_BASE=https://llgame-popular-stats.xxx.workers.dev

npm run build 会根据 VITE_ADSENSE_CLIENT 自动生成 public/ads.txt（部署后访问 https://你的域名/ads.txt）。未配置时可临时 ADS_TXT_SKIP=1 npm run build，但提审 AdSense 前必须填真实 ID。

没有 Worker 也可以先上线：首页 Popular 会用 public/popular.json 静态文件。

2. 本地验证生产包

npm install
npm run build
npm run preview

构建会自动 预渲染（SSR）以下路由为静态 HTML，便于搜索引擎与 AdSense 抓取正文与 meta：

  • /games（首页，含轮播 / Latest / Popular / 分类预览；dist/index.html 同步为同一份 HTML，便于 / 回退）
  • /about、/privacy、/terms
  • /articles、/articles/:slug（全部文章）
  • /games/play/:path（全部游戏详情，共 118+ 页）

测验等其余路由仍为 SPA，依赖 dist/_redirects 回退。

生产构建请设置站点根 URL（用于 canonical / Open Graph）：

VITE_SITE_URL=https://llgame.xyz npm run build

浏览器打开终端里提示的地址（多为 http://localhost:4173），点几条路由确认：

  • /games、/quiz、/games/play/xxx 刷新不 404
  • 查看页面源代码：/about 或 /games/play/ttt 应能看到完整正文，而非仅 boot 骨架
  • http://localhost:4173/ads.txt 含你的 pub-… 行（需已配置 VITE_ADSENSE_CLIENT）
  • 游戏预览 / Play 能打开 iframe

3. 部署 dist/（任选一种托管）

构建结果在 dist/ 目录（整包上传，不是源码）。

方式 适合 要点
Cloudflare Pages 已用 CF Worker 统计 连 GitHub 自动构建，或 npx wrangler pages deploy dist
Netlify 简单静态站 拖放 dist 或连 Git，publish directory = dist
Vercel 连 Git 一键 Framework: Vite，Output: dist
Nginx / 对象存储 自有服务器 根目录指向 dist，见下方 Nginx

项目已包含 public/_redirects（构建后进 dist/），用于 SPA 路由：直接访问 /games/category/action 时仍返回 index.html，由 Vue Router 接管。

Cloudflare Pages（推荐，与 Worker 同账号）

A. 仪表盘（连 Git）

  1. Cloudflare → Workers & Pages → Create → Pages → Connect Git。
  2. Build command: npm run build
  3. Build output directory: dist
  4. Environment variables：填入与 .env.production 相同的 VITE_*
  5. 保存后每次 push 自动发布；Custom domains 里绑定你的域名。

B. 命令行只传 dist

npm run build
npx wrangler pages deploy dist --project-name=llgame

再到 Pages 项目里绑定自定义域名。

Netlify

  • Build: npm run build，Publish: dist
  • 或本地：npm run build 后把 dist 拖到 Netlify Drop

Nginx 示例

server {
    listen 80;
    server_name 你的域名.com;
    root /var/www/llgame/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

HTTPS 用 Certbot 或 Cloudflare 代理均可。

4. DNS

  • Cloudflare 代理（橙云）：A/CNAME 指到 Pages 给的地址。
  • 生效后访问 https://你的域名.com/games 应能打开首页。

5. 上线后检查

  • 首页、分类、测验、游戏详情可打开，刷新子路径不 404
  • https://你的域名.com/sitemap.xml、/robots.txt 可访问
  • 随便玩一个游戏，iframe 能加载（依赖 VITE_GAME_EMBED_BASE）
  • 若配置了 Worker：Network 里有 POST .../api/stats/event

常见问题

现象 原因
子路径刷新 404 未配置 SPA 回退（_redirects / try_files）
sitemap 仍是 localhost / 旧域名 构建前未设 VITE_SITE_URL，改后重新 npm run build
Popular 不随点击变 未设 VITE_STATS_API_BASE 或未部署 Worker
游戏黑屏 CDN 地址错或游戏源站不可用

Build

Set your production origin (sitemap + robots.txt):

# .env.production 或 shell
VITE_SITE_URL=https://your-domain.com
npm run build
npm run preview

npm run build runs generate:sitemap first and writes:

  • public/sitemap.xml — home, categories, all game play URLs, all quiz URLs, legal pages
  • public/robots.txt — Sitemap: https://your-domain.com/sitemap.xml

Regenerate only:

VITE_SITE_URL=https://your-domain.com npm run generate:sitemap

Images

# 测验真实图片（从 hhxzhd.xyz 素材库下载 .jpg，并更新 quiz.js 路径）
npm run fetch:quiz-images

# 游戏真实图标（从 games.hhxzhd.xyz 下载）
npm run fetch:icons

# 首次初始化：测验图 + 游戏图标
npm run setup:assets

注意：不要用 npm run generate:quiz-images 除非需要临时占位图（AI 生成）。正式素材请用 fetch:quiz-images。不要对游戏跑 generate:images --games，会覆盖已下载图标。

Data

  • data/quiz.js — 23 quiz topics, 540 questions
  • data/games.js — 118 HTML5 games

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages