web_huangguo_web/app/templates/page/detail.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {{template "seoCommon" .}}
    {{$siteTitle := "黄果短剧"}}{{if and .detail .detail.SeoInfo.WebSiteName}}{{$siteTitle = .detail.SeoInfo.WebSiteName}}{{else if .seoInfo.WebSiteName}}{{$siteTitle = .seoInfo.WebSiteName}}{{else if .appConfig.SeoInfo.WebSiteName}}{{$siteTitle = .appConfig.SeoInfo.WebSiteName}}{{end}}
    {{$pageTitle := "短剧详情"}}{{if .detail}}{{if .detail.SeoInfo.Title}}{{$pageTitle = .detail.SeoInfo.Title}}{{else}}{{$pageTitle = .detail.Title}}{{end}}{{else if .title}}{{$pageTitle = .title}}{{end}}
    <title>{{$pageTitle}} - {{$siteTitle}}</title>
  <meta name="description" content="{{if .seoInfo.Description}}{{.seoInfo.Description}}{{else if .detail}}{{if .detail.Desc}}{{.detail.Desc}} - 黄果短剧{{else}}在线观看《{{.detail.Title}}》，高清短剧全集免费看。 - 黄果短剧{{end}}{{else}}短剧详情页，在线观看高清短剧全集。 - 黄果短剧{{end}}">
  <meta name="keywords" content="{{if .detail}}{{.detail.Title}}{{range .detail.ThemeNames}},{{.}}{{end}}{{range .detail.TagNames}},{{.}}{{end}},短剧,在线观看,黄果短剧{{else if .seoInfo.Keywords}}{{joinStrings .seoInfo.Keywords ","}}{{else}}短剧详情,在线短剧,黄果短剧{{end}}">
  <meta property="og:type" content="video.tv_show">
  <meta property="og:title" content="{{$pageTitle}} - {{$siteTitle}}">
  <meta property="og:description" content="{{if .seoInfo.Description}}{{.seoInfo.Description}}{{else if .detail}}{{if .detail.Desc}}{{.detail.Desc}}{{else}}在线观看《{{.detail.Title}}》{{end}}{{else}}短剧详情页，在线观看高清短剧全集。{{end}}">
  {{if .detail}}{{if .detail.Cover}}<meta property="og:image" content="{{.detail.Cover}}">
  <meta name="twitter:image" content="{{.detail.Cover}}">{{end}}
  <meta name="twitter:title" content="{{$pageTitle}} - {{$siteTitle}}">
  <meta name="twitter:description" content="{{if .seoInfo.Description}}{{.seoInfo.Description}}{{else if .detail}}{{if .detail.Desc}}{{.detail.Desc}}{{else}}在线观看《{{.detail.Title}}》{{end}}{{else}}短剧详情页，在线观看高清短剧全集。{{end}}">{{end}}
  {{if .jsonLD}}
  <script type="application/ld+json">{{.jsonLD}}</script>
  {{end}}
    <link rel="stylesheet" href="/static/css/index.css?v=27">
    <link rel="stylesheet" href="/static/css/detail.css?v=29">


</head>
<body class="site-shell is-detail-page">
{{template "header" .}}
{{if .detail}}
{{with .detail}}
<div class="detail-h5-bg" aria-hidden="true">
    <img class="detail-h5-bg-img lazy" src="/static/images/placeholder.png?v=2" data-src="{{coverURL .Cover .Banner}}" alt="{{.Title}}背景图" title="{{.Title}}" />
    <div class="detail-h5-bg-mask"></div>
</div>
<div class="detail-h5-top">
    <a class="detail-h5-back" href="/" data-nav-back data-nav-fallback="/" aria-label="返回">
        <img src="/static/images/back.svg" alt="返回" />
    </a>
    <div class="detail-h5-top-actions">
        <button class="detail-h5-top-btn detail-h5-top-btn--like{{if eq .IsLike 1}} detail-h5-top-btn--active{{end}}" type="button" data-detail-like data-playlet-id="{{.ID}}" data-liked="{{.IsLike}}" data-count-like="{{.CountLike}}" aria-label="点赞">
            <img src="/static/images/{{if eq .IsLike 1}}h5_liked.svg{{else}}like.svg{{end}}" alt="点赞" data-h5-like-icon />
            <span class="detail-h5-top-like-count" data-detail-like-label>{{.CountLike}}</span>
        </button>
        <button class="detail-h5-top-btn" type="button" data-detail-share data-playlet-id="{{.ID}}" aria-label="分享">
            <img src="/static/images/h5_share.svg" alt="分享" />
        </button>
        <a class="detail-h5-top-btn" href="/feedback/" aria-label="反馈">
            <img src="/static/images/feedback.svg" alt="反馈" />
        </a>
    </div>
</div>
<main class="page-shell detail-page">
    <nav class="detail-breadcrumb" aria-label="面包屑">
        <a class="detail-breadcrumb-link" href="/">首页</a>
        <span class="detail-breadcrumb-sep">/</span>
        <a class="detail-breadcrumb-link" href="/list/ai-short-play/">短剧</a>
        <span class="detail-breadcrumb-sep">/</span>
        <span class="detail-breadcrumb-current">{{.Title}}</span>
    </nav>
    <div class="detail-layout">
    <div class="detail-main">
    <section class="detail-hero">
        <img class="detail-cover lazy" src="/static/images/placeholder.png?v=2" data-src="{{coverURL .Cover .Banner}}" alt="{{.Title}}" title="{{.Title}}" />
        <div class="detail-hero-main">
            <div class="detail-hero-info">
                {{$detailTags := namedTags .TagIDs .TagNames .TagSlugs}}
                {{if $detailTags}}
                <div class="detail-tags">
                    {{range $detailTags}}
                    {{if .URL}}
                    <a class="detail-tag" href="{{.URL}}" data-tag-href="{{.URL}}">{{.Name}}</a>
                    {{else}}
                    <span class="detail-tag">{{.Name}}</span>
                    {{end}}
                    {{end}}
                </div>
                {{end}}
                <h1 class="detail-title">{{.Title}}</h1>
                <div class="detail-meta">
                    <span class="detail-meta-pc">
                        <span>集数：{{if .TotalEpisode}}{{.TotalEpisode}}集{{else}}更新中{{end}}</span>
                        <span>上线时间 : {{playletDateText .OnlineAt .MediaCreatedAt .CreatedAt}}</span>
                    </span>
                    <span class="detail-meta-h5">
                        <span>{{if .TotalEpisode}}全{{.TotalEpisode}}集{{else}}短剧{{end}}</span>
                        <span class="detail-meta-dot">·</span>
                        <span>{{browseText .CountBrowse}}</span>
                    </span>
                </div>
            </div>
            <div class="detail-intro-block">
                <h2 class="detail-intro-title">简介</h2>
                <p class="detail-intro"><span class="detail-intro-prefix-pc">简介:</span>{{if .Desc}}{{.Desc}}{{else}}暂无简介{{end}}</p>
            </div>
            <div class="detail-actions">
                <a class="detail-play-btn" href="{{playURL .Slug .ID}}"><img src="/static/images/player.svg" alt="" />立即播放</a>
                <div class="detail-action-group">
                    <button class="detail-action{{if eq .IsLike 1}} detail-action--active{{end}}" type="button" data-detail-like data-playlet-id="{{.ID}}" data-liked="{{.IsLike}}" data-count-like="{{.CountLike}}" data-like-label-mode="state">
                        <span class="detail-action-icon">
                            <img src="/static/images/like.svg" alt="点赞" />
                        </span>
                        <span data-detail-like-label>{{if eq .IsLike 1}}已点赞{{else}}点赞{{end}}</span>
                    </button>
                    <span class="detail-action-sep"></span>
                    <button class="detail-action{{if eq .IsCollect 1}} detail-action--active{{end}}" type="button" data-detail-collect data-playlet-id="{{.ID}}" data-collected="{{.IsCollect}}" data-count-collect="{{.CountCollect}}">
                        <span class="detail-action-icon">
                            <img src="/static/images/collect.svg" alt="收藏" />
                        </span>
                        <span data-detail-collect-label>{{if eq .IsCollect 1}}已收藏{{else}}收藏{{end}}</span>
                    </button>
                    <span class="detail-action-sep"></span>
                    <button class="detail-action" type="button" data-detail-share data-playlet-id="{{.ID}}">
                        <span class="detail-action-icon">
                            <img src="/static/images/share.svg" alt="分享" />
                        </span>
                        <span>分享</span>
                    </button>
                    <span class="detail-action-sep"></span>
                    <a class="detail-action" href="/feedback/">
                        <span class="detail-action-icon">
                            <img src="/static/images/feedback.svg" alt="反馈" />
                        </span>
                        <span>反馈</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{template "contentPromo" $}}

    <section class="detail-episodes">
        <div class="detail-episodes-head">
            <h2 class="detail-section-label">剧集</h2>
            <div class="detail-episodes-status">
                <span>{{updateStatusText .UpdateStatus}}{{if .TotalEpisode}} 共{{.TotalEpisode}}集{{end}}</span>
                <img class="detail-episodes-status-icon" src="/static/images/arrow_right.svg" alt="查看选集" />
            </div>
        </div>
        {{with $.episodeRanges}}
        <div class="detail-episode-ranges">
            {{range $i, $r := .}}
            <button class="detail-episode-range{{if eq $i 0}} detail-episode-range--active{{end}}" type="button" data-range-start="{{$r.Start}}" data-range-end="{{$r.End}}">{{$r.Label}}</button>
            {{end}}
        </div>
        {{end}}
        <div class="detail-episode-list">
            {{$playletID := .ID}}
            {{$playletSlug := .Slug}}
            {{range .PlayletChapterInfo}}
            {{if .AllowWatch}}
            <a class="detail-episode" href="{{chapterPlayURL $playletSlug $playletID .ID}}" data-ep="{{.CurrentEpisode}}">
                <span class="detail-episode-pc">第{{.CurrentEpisode}}集</span>
            </a>
            {{else if .NeedCoinGate}}
            <a class="detail-episode" href="javascript:;" data-coin-dialog-open data-ep="{{.CurrentEpisode}}" data-playlet-id="{{$playletID}}" data-playlet-slug="{{$playletSlug}}" data-chapter-id="{{.ID}}" data-single-coins="{{.UnlockCost}}" aria-label="第{{.CurrentEpisode}}集，金币解锁">
                <span class="detail-episode-pc">第{{.CurrentEpisode}}集</span>
                <span class="detail-episode-coin" aria-hidden="true">
                    <img src="/static/images/coin.png?v=2" alt="" />
                </span>
            </a>
            {{else if .NeedVipGate}}
            <a class="detail-episode" href="javascript:;" data-vip-dialog-open data-ep="{{.CurrentEpisode}}" data-chapter-id="{{.ID}}" aria-label="第{{.CurrentEpisode}}集，VIP专享">
                <span class="detail-episode-pc">第{{.CurrentEpisode}}集</span>
            </a>
            {{else}}
            <a class="detail-episode" href="{{chapterPlayURL $playletSlug $playletID .ID}}" data-ep="{{.CurrentEpisode}}">
                <span class="detail-episode-pc">第{{.CurrentEpisode}}集</span>
            </a>
            {{end}}
            {{else}}
            <div class="section-empty">暂无剧集</div>
            {{end}}
        </div>
    </section>

    {{template "contentOfficialInfo" $}}
    {{template "contentAds" $}}

    <section class="detail-comments"
        data-comment-object-id="{{.ID}}"
        data-comment-object-type="10"
        data-comment-size="10">
        <div class="detail-comments-head">
            <h2 class="detail-comments-title" data-comment-title>评论</h2>
            <div class="detail-comments-sort">
                <button class="detail-sort-btn detail-sort-btn--active" type="button" data-comment-sort="1">热门</button>
                <button class="detail-sort-btn" type="button" data-comment-sort="2">最新</button>
            </div>
        </div>
        {{if $.isLoggedIn}}
        <div class="detail-comment-composer">
            {{if $.avatar}}
            <img class="detail-comment-composer-avatar lazy" src="/static/images/placeholder.png?v=2" data-src="{{$.avatar}}" alt="我的头像" />
            {{else}}
            <img class="detail-comment-composer-avatar" src="/static/images/avatar.png" alt="默认用户头像" />
            {{end}}
            <div class="detail-comment-composer-main">
                <textarea class="detail-comment-composer-input" maxlength="200" placeholder="说说你对这部剧的看法…" rows="2"></textarea>
                <div class="detail-comment-composer-footer">
                    <div class="detail-comment-composer-status">
                        <span class="detail-comment-composer-logged">已登录</span>
                        {{if $.userName}}<span class="detail-comment-composer-user">{{$.userName}}</span>{{end}}
                        <span class="detail-comment-composer-count">0 / 200</span>
                    </div>
                    <button class="detail-comment-composer-submit" type="button" data-comment-send>发表评论</button>
                </div>
            </div>
        </div>
        {{else}}
        <div class="detail-comments-login">
            <a class="detail-comments-login-link" href="#login" data-login-dialog-open>登录</a>
            <span class="detail-comments-login-hint"> 后参与讨论</span>
        </div>
        {{end}}
        <div class="detail-comment-list" data-comment-list>
            <div class="section-empty" data-comment-loading>评论加载中…</div>
        </div>
        <button class="detail-comments-more" type="button" data-comment-more hidden>加载更多</button>
    </section>
    </div>
    <div class="content-column-divider" aria-hidden="true"></div>
    <aside class="detail-sidebar">
        {{template "contentHotSidebar" .}}
    </aside>
    </div>
</main>
<div class="detail-h5-bar">
    <button class="detail-h5-like{{if eq .IsLike 1}} detail-h5-like--active{{end}}" type="button" data-detail-like data-playlet-id="{{.ID}}" data-liked="{{.IsLike}}" data-count-like="{{.CountLike}}" data-like-label-mode="state" aria-label="点赞" aria-pressed="{{if eq .IsLike 1}}true{{else}}false{{end}}">
        <img src="/static/images/{{if eq .IsLike 1}}h5_liked.svg{{else}}like.svg{{end}}" alt="" data-h5-like-icon />
        <span data-detail-like-label>{{if eq .IsLike 1}}已点赞{{else}}点赞{{end}}</span>
    </button>
    <a class="detail-h5-play" href="{{playURL .Slug .ID}}">开始播放</a>
</div>
{{end}}
{{else}}
<main class="page-shell detail-page">
    <h1 class="seo-visually-hidden">{{$pageTitle}} - {{$siteTitle}}</h1>
    {{template "empty" .}}
</main>
{{end}}
{{template "footer" .}}
{{template "vipDialog" .}}
{{template "coinDialog" .}}
<script src="/static/js/pages/detail.js?v=14"></script>
</body>
</html>