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=30">


</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" 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" 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}}
            <a class="detail-episode detail-episode--locked" href="javascript:;" data-episode-locked data-ep="{{.CurrentEpisode}}" aria-label="第{{.CurrentEpisode}}集，下载APP观看">
                <span class="detail-episode-pc">第{{.CurrentEpisode}}集</span>
                <span class="detail-episode-lock" aria-hidden="true">APP</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>
        <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">
    <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" .}}
<script src="/static/js/pages/detail.js?v=15"></script>
</body>
</html>