319 lines
18 KiB
HTML
319 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{.metaTitle}}</title>
|
||
{{template "seoCommon" .}}
|
||
<link rel="stylesheet" href="/static/css/base.css?v=3">
|
||
<link rel="stylesheet" href="/static/css/index.css?v=17">
|
||
</head>
|
||
<body>
|
||
{{template "header" .}}
|
||
<h1 class="visually-hidden">黄果短剧</h1>
|
||
|
||
<!-- Hero：homeBannerData -->
|
||
{{if .homeBannerData}}
|
||
{{$banners := .homeBannerData}}
|
||
{{$first := index $banners 0}}
|
||
<section class="hero" aria-label="本周主打" data-hero>
|
||
<img loading="lazy" class="hero__bg is-active lazy" src="/static/images/placeholder.png?v=2" data-src="{{if $first.Banner}}{{$first.Banner}}{{else}}{{$first.Cover}}{{end}}" decoding="async" alt="{{if $first.PlayName}}{{$first.PlayName}}{{else}}{{$first.Title}}{{end}}横幅" data-hero-bg>
|
||
<div class="hero__shade hero__shade--side" aria-hidden="true"></div>
|
||
<div class="hero__shade hero__shade--bottom" aria-hidden="true"></div>
|
||
<div class="hero__shade hero__shade--top" aria-hidden="true"></div>
|
||
|
||
<div class="hero__viewport">
|
||
{{range $i, $item := $banners}}
|
||
<article class="hero__slide{{if eq $i 0}} is-active{{end}}" data-hero-slide="{{$i}}"{{if ne $i 0}} hidden{{end}}>
|
||
<div class="hero__info">
|
||
<div class="hero__meta">
|
||
<p class="eyebrow">
|
||
<span class="eyebrow__bar" aria-hidden="true"></span>
|
||
{{if $item.IsNew}}本周主打 新剧速递{{else if $item.IsFeatured}}本周主打 独家首发{{else if $item.IsRecommend}}本周主打 热播推荐{{else}}本周主打 口碑佳作{{end}}
|
||
</p>
|
||
<span class="tag tag--dark">18+</span>
|
||
</div>
|
||
<h2 class="hero__title">{{if $item.PlayName}}{{$item.PlayName}}{{else}}{{$item.Title}}{{end}}</h2>
|
||
<p class="hero__attrs">
|
||
{{template "cardEpChip" $item}}
|
||
{{with $item.ThemeNames}}<span>{{range $ti, $t := .}}{{if $ti}} · {{end}}{{$t}}{{end}}</span>{{end}}
|
||
{{with usableAnchor $item.Anchor}}{{if and (ne . "原创") (ne . "已注销")}}<span>主演 {{.}}</span>{{end}}{{end}}
|
||
</p>
|
||
<p class="hero__desc">{{$item.Desc}}</p>
|
||
<div class="hero__actions">
|
||
<a class="btn btn--primary btn--lg" href="{{playURL $item.Slug $item.ID}}">
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/play_hollow.svg" alt="播放">
|
||
立即播放
|
||
</a>
|
||
<a class="btn btn--ghost btn--lg hero__trailer" href="{{playURL $item.Slug $item.ID}}" aria-label="播放">
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/film.svg" alt="影视详情">
|
||
<span class="only-pc">详情</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero__media">
|
||
<a href="{{playURL $item.Slug $item.ID}}">
|
||
<img class="hero__poster" src="/static/images/placeholder.png?v=2" data-src="{{if $item.HorizontalCover}}{{$item.HorizontalCover}}{{else if $item.Banner}}{{$item.Banner}}{{else}}{{$item.Cover}}{{end}}" data-hero-poster loading="lazy" decoding="async" data-hero-media="{{if $item.Banner}}{{$item.Banner}}{{else}}{{$item.Cover}}{{end}}" alt="{{if $item.PlayName}}{{$item.PlayName}}{{else}}{{$item.Title}}{{end}}">
|
||
</a>
|
||
<a class="hero__play" href="{{playURL $item.Slug $item.ID}}" aria-label="播放">
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/play.svg" alt="播放">
|
||
</a>
|
||
<span class="badge badge--hot">{{if eq $item.OperateType 2}}漫剧{{else}}短剧{{end}}</span>
|
||
</div>
|
||
</article>
|
||
{{end}}
|
||
</div>
|
||
|
||
<div class="hero__thumbs">
|
||
<div class="hero__thumb-list" role="tablist" aria-label="本周主打剧集">
|
||
{{range $i, $item := $banners}}
|
||
<button class="hero__thumb{{if eq $i 0}} is-active{{end}}" type="button" role="tab" aria-selected="{{if eq $i 0}}true{{else}}false{{end}}" data-hero-index="{{$i}}">
|
||
<img class="lazy" src="/static/images/placeholder.png?v=2" data-src="{{if $item.Cover}}{{$item.Cover}}{{else}}{{$item.Banner}}{{end}}" loading="lazy" decoding="async" alt="{{if $item.PlayName}}{{$item.PlayName}}{{else}}{{$item.Title}}{{end}}">
|
||
</button>
|
||
{{end}}
|
||
</div>
|
||
<div class="hero__pager">
|
||
<span class="hero__pager-label">本周主打 {{len $banners}} 部</span>
|
||
<span class="hero__pager-track" aria-hidden="true">
|
||
<span class="hero__pager-fill"></span>
|
||
</span>
|
||
<span class="hero__pager-index"><span data-hero-current>01</span> / {{printf "%02d" (len $banners)}}</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script src="/static/js/hero.js?v=8" defer></script>
|
||
{{end}}
|
||
|
||
<div class="page">
|
||
|
||
<main class="main">
|
||
<!-- 公告：GET /api/app/playlet/home → announcements，其后追加官方访问地址；两者都没有时不渲染 -->
|
||
{{$cfg := .appConfig}}
|
||
{{if or .announcements $cfg.ForeverURLAddr $cfg.NewURLAddr $cfg.NewURLAddr1 $cfg.NewURLAddr2}}
|
||
<section class="announce" aria-label="公告">
|
||
<div class="announce__label">
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/bell.svg" alt="更新提醒">
|
||
公告
|
||
</div>
|
||
<div class="announce__track">
|
||
<div class="announce__marquee">
|
||
<div class="announce__marquee-group">{{template "announceItems" .}}</div>
|
||
<div class="announce__marquee-group" aria-hidden="true">{{template "announceItems" .}}</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{end}}
|
||
|
||
{{template "appIcons" dict "Items" .appConfig.BList "Label" "首页小图标"}}
|
||
|
||
<!-- 短剧标签：GET /api/app/playlet/tag/options → /tags/{slug}/ → tags.html -->
|
||
<nav class="category" aria-label="短剧标签">
|
||
<a class="category__item is-active" href="/list">全部</a>
|
||
{{range .tagOptions}}
|
||
<a class="category__item" href="{{tagPageURL .Slug .ID 1 1}}">{{.Name}}</a>
|
||
{{end}}
|
||
</nav>
|
||
|
||
<!--
|
||
homeConfigData：按接口顺序渲染；type 1短剧 / 2视频 / 3题材；
|
||
名称为「热播榜」时用热播榜专用 UI；除 type=3 外下方插入 advitise.detailbannerList（每次 2 条）
|
||
-->
|
||
{{range $cfg := .homeConfigData}}
|
||
{{if and (eq $cfg.Type 1) (eq $cfg.Name "热播榜") $.hotRankPlaylets}}
|
||
<section class="block block--rank" data-id="{{$cfg.ID}}" data-type="{{$cfg.Type}}" aria-label="热播榜">
|
||
<header class="block__head">
|
||
<div class="block__titles">
|
||
<h2 class="block__title">{{$cfg.Name}}</h2>
|
||
</div>
|
||
<a class="block__more" href="/rank">
|
||
完整榜单
|
||
<img decoding="async" loading="lazy" class="icon icon--sm" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
|
||
</a>
|
||
</header>
|
||
|
||
<div class="grid grid--rank">
|
||
{{range $i, $item := $.hotRankPlaylets}}
|
||
{{$rank := add $i 1}}
|
||
<article class="rank-card{{if ge $i 6}} only-pc{{end}}">
|
||
<div class="rank-card__rank">
|
||
<span class="rank-card__no{{if le $rank 3}} is-top{{end}}">{{rankNo $rank}}</span>
|
||
</div>
|
||
<div class="rank-card__body">
|
||
<a class="rank-card__cover lazy" href="{{playURL $item.Slug $item.ID}}" style="{{cssCoverPlaceholder}}" data-src="{{$item.Cover}}">
|
||
{{if eq $item.UpdateStatus 1}}
|
||
<span class="card__ep">连载中</span>
|
||
{{else if $item.TotalEpisode}}
|
||
<span class="card__ep">全 {{$item.TotalEpisode}} 集</span>
|
||
{{else}}
|
||
<span class="card__ep">{{updateStatusText $item.UpdateStatus}}</span>
|
||
{{end}}
|
||
</a>
|
||
<h3 class="rank-card__title"><a href="{{playURL $item.Slug $item.ID}}">{{playletDisplayName $item.PlayName $item.Title}}</a></h3>
|
||
<p class="rank-card__meta">
|
||
{{$tags := cardTags $item}}
|
||
{{range $ti, $tag := $tags}}{{if $ti}} {{end}}{{$tag.Name}}{{end}}
|
||
{{if and $tags $item.TotalEpisode}}<span class="only-pc"> 全 {{$item.TotalEpisode}} 集</span>{{else if $item.TotalEpisode}}<span class="only-pc">全 {{$item.TotalEpisode}} 集</span>{{end}}
|
||
</p>
|
||
</div>
|
||
</article>
|
||
{{end}}
|
||
</div>
|
||
</section>
|
||
|
||
{{else if eq $cfg.Type 1}}
|
||
<section class="block block--featured" data-id="{{$cfg.ID}}" data-type="{{$cfg.Type}}">
|
||
<header class="block__head">
|
||
<div class="block__titles">
|
||
<h2 class="block__title">{{$cfg.Name}}</h2>
|
||
{{if $cfg.Desc}}<p class="block__subtitle">{{$cfg.Desc}}</p>{{end}}
|
||
</div>
|
||
<a class="block__more" href="{{moreListURL $cfg.Slug $cfg.ID 0 "" 0 1}}">
|
||
查看全部
|
||
<img decoding="async" loading="lazy" class="icon icon--sm" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
|
||
</a>
|
||
</header>
|
||
{{if $cfg.List}}
|
||
<div class="grid grid--6">
|
||
{{range $item := $cfg.List}}
|
||
<article class="card">
|
||
<a class="card__cover lazy" href="{{playURL $item.Slug $item.ID}}" style="{{cssCoverPlaceholder}}" data-src="{{$item.Cover}}">
|
||
{{if $item.IsFeatured}}<span class="badge badge--hot">爆剧</span>{{else if eq $item.Anchor "原创"}}<span class="badge badge--original">原创</span>{{end}}
|
||
</a>
|
||
<h3 class="card__title"><a href="{{playURL $item.Slug $item.ID}}">{{if $item.PlayName}}{{$item.PlayName}}{{else}}{{$item.Title}}{{end}}</a></h3>
|
||
<p class="card__meta card__meta--ep">{{template "cardEpChip" $item}}<span class="card__meta-tags">{{range $ti, $tag := cardTags $item}}{{if $ti}} {{end}}{{if $tag.URL}}<a href="{{$tag.URL}}" {{externalLinkAttrs $tag.URL}}>{{$tag.Name}}</a>{{else}}{{$tag.Name}}{{end}}{{end}}</span></p>
|
||
</article>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
</section>
|
||
|
||
{{else if eq $cfg.Type 2}}
|
||
<section class="block block--series" data-id="{{$cfg.ID}}" data-type="{{$cfg.Type}}">
|
||
<header class="block__head">
|
||
<div class="block__titles">
|
||
<h2 class="block__title">{{$cfg.Name}}</h2>
|
||
{{if $cfg.Desc}}<p class="block__subtitle">{{$cfg.Desc}}</p>{{end}}
|
||
</div>
|
||
<a class="block__more" href="{{moreSeriesListURL $cfg.Slug $cfg.ID 0 "" 0 1}}">
|
||
查看全部
|
||
<img decoding="async" loading="lazy" class="icon icon--sm" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
|
||
</a>
|
||
</header>
|
||
{{if $cfg.VideoList}}
|
||
<div class="grid grid--series">
|
||
{{range $item := $cfg.VideoList}}
|
||
<article class="series-card">
|
||
<a class="series-card__cover lazy" href="{{videoPlayURL $item.Slug $item.ID}}" style="{{cssCoverPlaceholder}}" data-src="{{$item.CoverImg}}">
|
||
{{if $item.VideoTime}}<span class="card__ep">{{$item.VideoTime}}分钟</span>{{end}}
|
||
<span class="badge badge--hot">影集</span>
|
||
<span class="series-card__play" aria-hidden="true">
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/play.svg" alt="播放">
|
||
</span>
|
||
</a>
|
||
<h3 class="card__title"><a href="{{videoPlayURL $item.Slug $item.ID}}">{{$item.Title}}</a></h3>
|
||
<p class="card__meta">{{$item.CreatorName}}</p>
|
||
</article>
|
||
{{end}}
|
||
</div>
|
||
{{else if $cfg.List}}
|
||
<div class="grid grid--series">
|
||
{{range $item := $cfg.List}}
|
||
<article class="series-card">
|
||
<a class="series-card__cover lazy" href="{{playURL $item.Slug $item.ID}}" style="{{cssCoverPlaceholder}}" data-src="{{if $item.HorizontalCover}}{{$item.HorizontalCover}}{{else if $item.Banner}}{{$item.Banner}}{{else}}{{$item.Cover}}{{end}}">
|
||
{{if $item.TotalEpisode}}<span class="card__ep">全 {{$item.TotalEpisode}} 集</span>{{else}}<span class="card__ep">{{updateStatusText $item.UpdateStatus}}</span>{{end}}
|
||
<span class="badge badge--hot">{{if eq $item.OperateType 2}}漫剧{{else}}短剧{{end}}</span>
|
||
<span class="series-card__play" aria-hidden="true">
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/play.svg" alt="播放">
|
||
</span>
|
||
</a>
|
||
<h3 class="card__title"><a href="{{playURL $item.Slug $item.ID}}">{{if $item.PlayName}}{{$item.PlayName}}{{else}}{{$item.Title}}{{end}}</a></h3>
|
||
<p class="card__meta">{{range $ti, $tag := cardTags $item}}{{if $ti}} {{end}}{{if $tag.URL}}<a href="{{$tag.URL}}" {{externalLinkAttrs $tag.URL}}>{{$tag.Name}}</a>{{else}}{{$tag.Name}}{{end}}{{end}}</p>
|
||
</article>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
</section>
|
||
|
||
{{else if eq $cfg.Type 3}}
|
||
<section class="block block--topic" data-id="{{$cfg.ID}}" data-type="{{$cfg.Type}}">
|
||
<header class="block__head">
|
||
<div class="block__titles">
|
||
<h2 class="block__title">{{$cfg.Name}}</h2>
|
||
{{if $cfg.Desc}}<p class="block__subtitle">{{$cfg.Desc}}</p>{{end}}
|
||
</div>
|
||
<a class="block__more" href="/topic">
|
||
全部专题
|
||
<img decoding="async" loading="lazy" class="icon icon--sm" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
|
||
</a>
|
||
</header>
|
||
{{if $cfg.ThemeList}}
|
||
<div class="topic-grid">
|
||
{{range $theme := $cfg.ThemeList}}
|
||
<article class="topic-card">
|
||
<div class="topic-card__info">
|
||
<p class="eyebrow">
|
||
<span class="eyebrow__bar" aria-hidden="true"></span>
|
||
专题
|
||
</p>
|
||
<h3 class="topic-card__title"><a href="{{categoryURL $theme.Slug $theme.ID}}">{{$theme.Name}}</a></h3>
|
||
{{if $theme.Desc}}<p class="topic-card__desc">{{$theme.Desc}}</p>{{end}}
|
||
<p class="topic-card__count">{{if $theme.PlayletCount}}{{$theme.PlayletCount}} 部 持续更新{{else}}持续更新{{end}}</p>
|
||
</div>
|
||
<a class="topic-card__stack" href="{{categoryURL $theme.Slug $theme.ID}}" aria-hidden="true">
|
||
{{range $ci, $c := $theme.List}}{{if lt $ci 3}}
|
||
<img class="lazy" src="/static/images/placeholder.png?v=2" data-src="{{$c.Cover}}" loading="lazy" decoding="async" alt="{{$c.Title}}封面">
|
||
{{end}}{{end}}
|
||
</a>
|
||
</article>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
</section>
|
||
{{end}}
|
||
{{end}}
|
||
|
||
<!-- App 下载 -->
|
||
<section class="app-cta">
|
||
<div class="app-cta__copy">
|
||
<p class="eyebrow">
|
||
<span class="eyebrow__bar" aria-hidden="true"></span>
|
||
黄果短剧 App
|
||
</p>
|
||
<h2 class="block__title">在 App 上继续追剧，离线缓存随时看</h2>
|
||
<p class="block__subtitle">竖屏沉浸播放 离线缓存 弹幕互动</p>
|
||
<p class="app-cta__hint">点击后前往黄果短剧下载页，手机打开会自动识别设备并推荐安装方式</p>
|
||
</div>
|
||
{{$appAddr := .appConfig.AppAddr}}
|
||
<a class="app-cta__download" href="{{if $appAddr}}{{$appAddr}}{{else}}/download-app{{end}}"{{if $appAddr}} target="_blank" rel="sponsored nofollow noopener"{{end}}>
|
||
<img decoding="async" loading="lazy" class="app-cta__download-icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/download.svg" alt="">
|
||
点击下载
|
||
</a>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
{{template "footer" .}}
|
||
|
||
</body>
|
||
</html>
|
||
|
||
{{/* 跑马灯内容：后台公告在前，随后是官方访问地址（以胶囊链接展示） */}}
|
||
{{define "announceItems"}}{{$cfg := .appConfig}}
|
||
{{range $i, $a := .announcements}}
|
||
{{if $i}}<span class="announce__sep" aria-hidden="true"></span>{{end}}
|
||
<p>{{if $a.Title}}{{$a.Title}}：{{end}}{{$a.Content}}</p>
|
||
{{end}}
|
||
{{if or $cfg.ForeverURLAddr $cfg.NewURLAddr $cfg.NewURLAddr1 $cfg.NewURLAddr2}}
|
||
{{if .announcements}}<span class="announce__sep" aria-hidden="true"></span>{{end}}
|
||
<p class="announce__addrs">
|
||
<span>官方地址</span>
|
||
{{if $cfg.ForeverURLAddr}}<a class="announce__addr" href="{{$cfg.ForeverURLAddr}}" target="_blank" rel="sponsored nofollow noopener">永久 · {{navDisplayURL $cfg.ForeverURLAddr}}</a>{{end}}
|
||
{{if $cfg.NewURLAddr}}<a class="announce__addr" href="{{$cfg.NewURLAddr}}" target="_blank" rel="sponsored nofollow noopener">最新 · {{navDisplayURL $cfg.NewURLAddr}}</a>{{end}}
|
||
{{if $cfg.NewURLAddr1}}<a class="announce__addr" href="{{$cfg.NewURLAddr1}}" target="_blank" rel="sponsored nofollow noopener">备用 · {{navDisplayURL $cfg.NewURLAddr1}}</a>{{end}}
|
||
{{if $cfg.NewURLAddr2}}<a class="announce__addr" href="{{$cfg.NewURLAddr2}}" target="_blank" rel="sponsored nofollow noopener">备用 · {{navDisplayURL $cfg.NewURLAddr2}}</a>{{end}}
|
||
<span>收藏防迷路</span>
|
||
</p>
|
||
{{end}}
|
||
<span class="announce__sep" aria-hidden="true"></span>
|
||
{{end}}
|