Files
web_huangguo_web/app/templates/page/index.html
T
fish03andClaude Opus 5.5 bef9f8b4ed Initial commit
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-09-23 14:43:16 +07:00

215 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{template "seoCommon" .}}
<title>{{if .seoInfo.Title}}{{.seoInfo.Title}}{{else if .appConfig.SeoInfo.Title}}{{.appConfig.SeoInfo.Title}}{{else if .title}}{{.title}}{{else}}黄果短剧 - 热门短剧在线看{{end}}</title>
<meta name="description" content="{{if .seoInfo.Description}}{{.seoInfo.Description}}{{else if .appConfig.SeoInfo.Description}}{{.appConfig.SeoInfo.Description}}{{else}}黄果短剧汇集热门短剧、今日更新与精选推荐,免费在线观看高清短剧,剧情紧凑更新快。 - 黄果短剧{{end}}">
<meta name="keywords" content="{{if .seoInfo.Keywords}}{{joinStrings .seoInfo.Keywords ","}}{{else if .appConfig.SeoInfo.Keywords}}{{joinStrings .appConfig.SeoInfo.Keywords ","}}{{else}}黄果短剧,短剧,在线短剧,热门短剧,免费短剧,今日更新{{end}}">
<meta property="og:type" content="website">
<meta property="og:title" content="{{if .seoInfo.Title}}{{.seoInfo.Title}}{{else if .appConfig.SeoInfo.Title}}{{.appConfig.SeoInfo.Title}}{{else if .title}}{{.title}}{{else}}黄果短剧 - 热门短剧在线看{{end}}">
<meta property="og:description" content="{{if .seoInfo.Description}}{{.seoInfo.Description}}{{else if .appConfig.SeoInfo.Description}}{{.appConfig.SeoInfo.Description}}{{else}}黄果短剧汇集热门短剧、今日更新与精选推荐,免费在线观看高清短剧。{{end}}">
<meta property="og:image" content="{{absURL .siteURL "/favicon.png"}}">
<meta name="twitter:title" content="{{if .seoInfo.Title}}{{.seoInfo.Title}}{{else if .appConfig.SeoInfo.Title}}{{.appConfig.SeoInfo.Title}}{{else if .title}}{{.title}}{{else}}黄果短剧 - 热门短剧在线看{{end}}">
<meta name="twitter:description" content="{{if .seoInfo.Description}}{{.seoInfo.Description}}{{else if .appConfig.SeoInfo.Description}}{{.appConfig.SeoInfo.Description}}{{else}}黄果短剧汇集热门短剧、今日更新与精选推荐,免费在线观看高清短剧。{{end}}">
<meta name="twitter:image" content="{{absURL .siteURL "/favicon.png"}}">
{{if .jsonLD}}
<script type="application/ld+json">{{.jsonLD}}</script>
{{end}}
<link rel="stylesheet" href="/static/css/index.css?v=36">
{{/* PC 需要 Swiper 样式;H5 延后按需注入,避免首屏下载与强制重排 */}}
<link rel="stylesheet" href="/static/common/swiper-bundle.min.css" media="(min-width: 768px)">
<link rel="preload" href="/static/common/swiper-bundle.min.js" as="script" media="(min-width: 768px)">
<noscript><link rel="stylesheet" href="/static/common/swiper-bundle.min.css"></noscript>
{{if .homeBannerData}}{{with index .homeBannerData 0}}
{{$heroSrc := coverURL .Image ""}}
{{if $heroSrc}}<link rel="preload" as="fetch" href="{{$heroSrc}}" crossorigin="anonymous">{{end}}
{{end}}{{end}}
</head>
<body class="site-shell home-page has-h5-tabbar"{{if .authMode}} data-auth-mode="{{.authMode}}"{{end}}{{if .authRedirect}} data-auth-redirect="{{.authRedirect}}"{{end}}>
{{template "header" .}}
<main class="page-shell{{if not .homeBannerData}} page-shell--no-hero{{end}}">
<h1 class="home-page-title">{{if .seoInfo.Title}}{{.seoInfo.Title}}{{else if .appConfig.SeoInfo.Title}}{{.appConfig.SeoInfo.Title}}{{else if .title}}{{.title}}{{else}}黄果短剧 - 热门短剧在线看{{end}}</h1>
{{if .homeBannerData}}
<div class="hero-section">
<div class="hero-banner">
<div class="swiper hero-swiper" id="heroSwiper">
<div class="swiper-wrapper">
{{range $i, $banner := .homeBannerData}}
<div class="swiper-slide">
<a class="hero-card"{{if $banner.URL}} href="{{$banner.URL}}"{{if or (hasPrefix $banner.URL "http://") (hasPrefix $banner.URL "https://")}} target="_blank" rel="sponsored nofollow noopener noreferrer"{{end}}{{else}} aria-disabled="true"{{end}}>
<img src="/static/images/placeholder.png?v=2" class="hero-image lazy" data-src="{{coverURL $banner.Image ""}}"{{if eq $i 0}} fetchpriority="high" data-lazy-eager="1"{{end}} decoding="async" width="1920" height="710" alt="{{$banner.Name}}" />
<div class="hero-overlay"></div>
<div class="hero-info">
<div class="hero-kicker">今日推荐</div>
{{if $banner.Name}}<div class="hero-title">{{$banner.Name}}</div>{{end}}
<span class="hero-play-button">
<img class="hero-play-icon" src="/static/images/figma-home/hero-play.svg" width="29" height="32" alt="" aria-hidden="true" />
<span class="hero-play-text">点击查看</span>
</span>
</div>
</a>
</div>
{{end}}
</div>
<div class="swiper-pagination hero-dots"></div>
<div class="hero-thumbs" id="heroThumbs" aria-label="轮播图切换">
<button class="hero-thumb-nav hero-thumb-prev" type="button" aria-label="上一张">
<img src="/static/images/figma-home/hero-arrow-left.svg" alt="" />
</button>
{{range $i, $banner := .homeBannerData}}
<button class="hero-thumb{{if eq $i 0}} is-active{{end}}" type="button" data-index="{{$i}}" aria-label="查看{{$banner.Name}}">
<img class="hero-thumb-img lazy" src="/static/images/placeholder.png?v=2" data-src="{{coverURL $banner.VerticalImage $banner.Image}}" decoding="async" alt="" />
<span class="hero-thumb-overlay"></span>
</button>
{{end}}
<button class="hero-thumb-nav hero-thumb-next" type="button" aria-label="下一张">
<img src="/static/images/figma-home/hero-arrow-right.svg" alt="" />
</button>
</div>
</div>
</div>
</div>
{{end}}
{{if .announcements}}
<div class="home-announcement" role="note" aria-label="站内公告">
<div class="home-announcement-label">
<picture>
<source media="(min-width: 768px)" srcset="/static/images/figma-home/announcement-label-desktop.png" />
<img src="/static/images/figma-home/announcement-label.png" width="80" height="56" alt="公告" />
</picture>
</div>
<div class="home-announcement-content">
<div class="home-announcement-marquee">
<span class="home-announcement-copy">{{range $i, $announcement := .announcements}}{{if $i}}<span class="home-announcement-separator" aria-hidden="true"> · </span>{{end}}{{if $announcement.Title}}<span class="home-announcement-title">{{$announcement.Title}}</span>{{if $announcement.Content}}:{{end}}{{end}}{{$announcement.Content}}{{end}}</span>
<span class="home-announcement-copy" aria-hidden="true">{{range $i, $announcement := .announcements}}{{if $i}}<span class="home-announcement-separator"> · </span>{{end}}{{if $announcement.Title}}<span class="home-announcement-title">{{$announcement.Title}}</span>{{if $announcement.Content}}:{{end}}{{end}}{{$announcement.Content}}{{end}}</span>
</div>
</div>
</div>
{{end}}
{{template "squarePromo" dict "Ads" .appConfig.DetailTopList "SlotKey" "home_detail_top" "SlotName" "首页方块广告" "Label" "广告"}}
{{range $catIndex, $category := .homeCategoryData}}
{{if contains $category.Name "热榜"}}
<div class="content-section ranking-section">
<div class="section-header">
<div class="section-heading">
<h2 class="section-title">{{$category.Name}}</h2>
{{if $category.Desc}}<div class="section-subtitle">{{$category.Desc}}</div>{{end}}
</div>
<div class="flex-spacer"></div>
<a class="ghost-action-button" href="{{categoryDetailURL $category.Slug $category.ID}}">
<div class="ghost-action-text">查看全部</div>
<img class="chevron-icon-img" src="/static/images/figma-home/chevron-right.svg" alt="查看全部" />
</a>
</div>
<div class="card-grid ranking-list">
{{range $i, $item := $category.List}}
<a class="poster-card ranking-card" href="{{detailURL $item.Slug $item.ID}}">
<div class="poster-cover ranking-cover">
<img src="/static/images/placeholder.png?v=2" class="poster-cover-img ranking-cover-img lazy" data-src="{{coverURL $item.Cover $item.Banner}}" width="160" height="214" decoding="async" alt="{{$item.Title}}" title="{{$item.Title}}" />
{{template "posterCornerBadges" $item}}
{{template "posterLikeBadge" $item}}
{{with episodeLabel $item.TotalEpisode}}
<div class="episode-badge ranking-episode-badge"><div class="text-white-xs">{{.}}</div></div>
{{end}}
<div class="ranking-badge">
<div class="rank-bg-{{rankClass (add $i 1)}}"></div>
<div class="rank-text">{{add $i 1}}</div>
</div>
</div>
<div class="poster-card-body ranking-card-body">
<div class="poster-card-title ranking-card-title">{{$item.Title}}</div>
{{if $item.Desc}}<div class="poster-card-subtitle ranking-card-subtitle">{{$item.Desc}}</div>{{end}}
<div class="poster-card-meta ranking-card-meta">
{{template "rankingCardTag" $item}}
<div class="flex-spacer"></div>
<div class="poster-card-heat ranking-card-heat">{{formatCollect $item.CountCollect}}</div>
</div>
</div>
</a>
{{else}}
<div class="section-empty">暂无榜单数据</div>
{{end}}
</div>
</div>
{{else}}
<div class="content-section">
<div class="section-header">
<div class="section-heading">
<h2 class="section-title">{{$category.Name}}</h2>
{{if $category.Desc}}<div class="section-subtitle">{{$category.Desc}}</div>{{end}}
</div>
<div class="flex-spacer"></div>
<a class="ghost-action-button" href="{{categoryDetailURL $category.Slug $category.ID}}">
<div class="ghost-action-text">查看全部</div>
<img class="chevron-icon-img" src="/static/images/figma-home/chevron-right.svg" alt="查看全部" />
</a>
</div>
<div class="card-grid">
{{range $category.List}}
<a class="poster-card" href="{{detailURL .Slug .ID}}">
<div class="poster-cover">
<img src="/static/images/placeholder.png?v=2" class="poster-cover-img lazy" data-src="{{coverURL .Cover .Banner}}" width="160" height="214" decoding="async" alt="{{.Title}}" title="{{.Title}}" />
{{template "posterCornerBadges" .}}
{{template "posterLikeBadge" .}}
{{with episodeLabel .TotalEpisode}}
<div class="episode-badge"><div class="text-white-xs">{{.}}</div></div>
{{end}}
</div>
<div class="poster-card-body">
<div class="poster-card-title">{{.Title}}</div>
{{if .Desc}}<div class="poster-card-subtitle">{{.Desc}}</div>{{end}}
<div class="poster-card-meta">
{{template "posterCardTag" .}}
<div class="flex-spacer"></div>
<div class="poster-card-heat">{{formatHeat .HeatValue}}</div>
</div>
</div>
</a>
{{else}}
<div class="section-empty">暂无内容</div>
{{end}}
</div>
</div>
{{end}}
{{template "homeAdRow" dict "Ads" ($.appConfig.NineGridRow $catIndex) "SlotKey" "home_nine_grid" "SlotName" "首页横幅广告" "Label" "广告"}}
{{end}}
{{if .homeRecommendThemes}}
<div class="content-section topic-section">
<div class="section-header">
<div class="section-heading">
<h2 class="section-title">专题推荐</h2>
</div>
<div class="flex-spacer"></div>
<a class="ghost-action-button" href="/topic/">
<div class="ghost-action-text">查看更多</div>
<img class="chevron-icon-img" src="/static/images/figma-home/chevron-right.svg" alt="查看全部" />
</a>
</div>
<div class="topic-grid">
{{range $theme := .homeRecommendThemes}}
<a class="topic-card" href="{{categoryURL $theme.Slug $theme.ID}}">
<img class="topic-card-image lazy" src="/static/images/placeholder.png?v=2" data-src="{{coverURL $theme.Icon ""}}" decoding="async" alt="{{$theme.Name}}专题" title="{{$theme.Name}}专题" />
<span class="topic-card-overlay"></span>
<span class="topic-card-copy">
<span class="topic-card-label">{{$theme.PlayletCount}}部剧情</span>
<span class="topic-card-title">{{$theme.Name}}</span>
</span>
</a>
{{end}}
</div>
</div>
{{end}}
</main>
{{template "footer" .}}
<script defer src="/static/js/pages/index.js?v=7"></script>
</body>
</html>