205 lines
11 KiB
HTML
205 lines
11 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=2">
|
|
<link rel="stylesheet" href="/static/css/list.css?v=3">
|
|
<link rel="stylesheet" href="/static/css/topic.css?v=2">
|
|
<link rel="stylesheet" href="/static/css/topicDetail.css?v=2">
|
|
</head>
|
|
<body class="page-topic-detail">
|
|
{{template "header" .}}
|
|
|
|
<section class="topic-detail-hero" aria-label="专题头图">
|
|
<img decoding="async" loading="lazy" class="topic-detail-hero__bg lazy" src="/static/images/placeholder.png?v=2"{{if .heroCover}} data-src="{{.heroCover}}"{{end}} alt="{{if .name}}{{.name}}{{else}}专题{{end}}背景">
|
|
<div class="topic-detail-hero__mask" aria-hidden="true"></div>
|
|
|
|
<header class="page-subheader page-subheader--overlay only-h5" aria-label="专题详情顶栏">
|
|
<a class="page-subheader__btn" href="javascript:history.back()" aria-label="返回">
|
|
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-left.svg" alt="返回">
|
|
</a>
|
|
<div class="page-subheader__title">专题</div>
|
|
<button class="page-subheader__btn" type="button" aria-label="分享" data-share-page>
|
|
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/share.svg" alt="分享">
|
|
</button>
|
|
</header>
|
|
|
|
<div class="page topic-detail-hero__inner">
|
|
<div class="topic-detail-hero__content">
|
|
<nav class="breadcrumb only-pc" aria-label="面包屑">
|
|
<a class="breadcrumb__item" href="/">首页</a>
|
|
<img decoding="async" loading="lazy" class="breadcrumb__sep" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
|
|
<a class="breadcrumb__item" href="{{topicListURL 1 1}}">专题</a>
|
|
<img decoding="async" loading="lazy" class="breadcrumb__sep" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
|
|
<span class="breadcrumb__item is-current">{{if .name}}{{.name}}{{else}}专题{{end}}</span>
|
|
</nav>
|
|
<p class="eyebrow only-h5">
|
|
<span class="eyebrow__bar" aria-hidden="true"></span>
|
|
专题
|
|
</p>
|
|
<h1 class="topic-detail-hero__title">{{if .name}}{{.name}}{{else}}专题剧单{{end}}</h1>
|
|
{{if or .desc .seoInfo.Description}}
|
|
<p class="topic-detail-hero__desc">{{if .desc}}{{.desc}}{{else}}{{.seoInfo.Description}}{{end}}</p>
|
|
{{end}}
|
|
<p class="topic-detail-hero__meta only-pc">{{if .playletCount}}{{.playletCount}} 部作品{{else if .totalCount}}{{.totalCount}} 部作品{{else}}专题作品{{end}} 持续更新</p>
|
|
<p class="topic-detail-hero__meta only-h5">{{if .playletCount}}{{.playletCount}} 部{{else if .totalCount}}{{.totalCount}} 部{{else}}0 部{{end}} 持续更新</p>
|
|
<div class="topic-detail-hero__actions">
|
|
{{if .list}}
|
|
{{$first := index .list 0}}
|
|
<a class="btn btn--primary btn--lg topic-detail-hero__play" href="{{playURL $first.Slug $first.ID}}">
|
|
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/play_hollow.svg" alt="播放">
|
|
从第 1 部开始看
|
|
</a>
|
|
{{else}}
|
|
<a class="btn btn--primary btn--lg topic-detail-hero__play" href="{{topicListURL 1 1}}">
|
|
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/play_hollow.svg" alt="播放">
|
|
浏览专题
|
|
</a>
|
|
{{end}}
|
|
<!--<button class="btn btn--ghost btn--lg topic-detail-hero__collect only-pc" type="button">
|
|
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/bookmark.svg" alt="收藏">
|
|
收藏专题
|
|
</button>-->
|
|
</div>
|
|
</div>
|
|
{{if .covers}}
|
|
<div class="topic-detail-hero__stack" aria-hidden="true">
|
|
{{range .covers}}
|
|
<img decoding="async" loading="lazy" class="lazy" src="/static/images/placeholder.png?v=2" data-src="{{.}}" alt="{{if $.name}}{{$.name}}{{else}}专题{{end}}封面">
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
|
|
<div class="page">
|
|
<main class="main">
|
|
<section class="topic-detail-section" aria-label="专题作品">
|
|
<div class="topic-detail-section__head">
|
|
<div class="topic-detail-section__left">
|
|
<h2 class="topic-detail-section__title">专题作品</h2>
|
|
<span class="topic-detail-section__count">{{if .playletCount}}{{.playletCount}} 部{{else if .totalCount}}{{.totalCount}} 部{{else}}0 部{{end}}</span>
|
|
<nav class="topic-detail-sort only-pc" aria-label="排序">
|
|
<a class="topic-detail-sort__item{{if eq .sortType 1}} is-active{{end}}" href="{{topicDetailURL .slug .topicId 1 1}}">编辑排序</a>
|
|
<a class="topic-detail-sort__item{{if eq .sortType 2}} is-active{{end}}" href="{{topicDetailURL .slug .topicId 2 1}}">最新</a>
|
|
<a class="topic-detail-sort__item{{if eq .sortType 3}} is-active{{end}}" href="{{topicDetailURL .slug .topicId 3 1}}">最热</a>
|
|
</nav>
|
|
</div>
|
|
<div class="topic-detail-sort-dropdown only-h5" data-sort-dropdown>
|
|
<button class="topic-detail-sort-link" type="button" aria-expanded="false" aria-haspopup="listbox" data-sort-dropdown-toggle>
|
|
{{if .sortLabel}}{{.sortLabel}}{{else}}编辑排序{{end}}
|
|
<img decoding="async" loading="lazy" class="icon icon--sm topic-detail-sort-link__caret" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="">
|
|
</button>
|
|
<div class="topic-detail-sort-menu" role="listbox" hidden data-sort-dropdown-menu>
|
|
<a class="topic-detail-sort-menu__item{{if eq .sortType 1}} is-active{{end}}" href="{{topicDetailURL .slug .topicId 1 1}}" role="option"{{if eq .sortType 1}} aria-selected="true"{{end}}>编辑排序</a>
|
|
<a class="topic-detail-sort-menu__item{{if eq .sortType 2}} is-active{{end}}" href="{{topicDetailURL .slug .topicId 2 1}}" role="option"{{if eq .sortType 2}} aria-selected="true"{{end}}>最新</a>
|
|
<a class="topic-detail-sort-menu__item{{if eq .sortType 3}} is-active{{end}}" href="{{topicDetailURL .slug .topicId 3 1}}" role="option"{{if eq .sortType 3}} aria-selected="true"{{end}}>最热</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{if .list}}
|
|
<div class="grid--list">
|
|
{{range .list}}
|
|
<article class="card card--list">
|
|
<a class="card__cover lazy" href="{{playURL .Slug .ID}}" style="{{cssCoverPlaceholder}}" data-src="{{.Cover}}">
|
|
{{if eq .UpdateStatus 1}}
|
|
<span class="card__ep">连载中</span>
|
|
{{else if .TotalEpisode}}
|
|
<span class="card__ep">全 {{.TotalEpisode}} 集</span>
|
|
{{else}}
|
|
<span class="card__ep">{{updateStatusText .UpdateStatus}}</span>
|
|
{{end}}
|
|
{{if .IsFeatured}}<span class="badge badge--hot">爆剧</span>{{else if eq .Anchor "原创"}}<span class="badge badge--original">原创</span>{{end}}
|
|
</a>
|
|
<h3 class="card__title"><a href="{{playURL .Slug .ID}}">{{if .PlayName}}{{.PlayName}}{{else}}{{.Title}}{{end}}</a></h3>
|
|
<p class="card__meta">{{range $ti, $tag := cardTags .}}{{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>
|
|
{{template "pagination" .}}
|
|
{{else}}
|
|
<p class="list-count">暂无作品</p>
|
|
{{end}}
|
|
</section>
|
|
|
|
{{if .moreTopics}}
|
|
<section class="topic-detail-section topic-detail-section--more" aria-label="更多专题">
|
|
<div class="topic-detail-section__head topic-detail-section__head--padded">
|
|
<div class="topic-detail-section__left">
|
|
<h2 class="topic-detail-section__title">更多专题</h2>
|
|
</div>
|
|
<a class="block__more" href="{{topicListURL 1 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>
|
|
</div>
|
|
<div class="topic-grid--list topic-grid--more">
|
|
{{range .moreTopics}}
|
|
<a class="topic-card" href="{{categoryURL .Slug .ID}}">
|
|
<div class="topic-card__info">
|
|
<p class="eyebrow">
|
|
<span class="eyebrow__bar" aria-hidden="true"></span>
|
|
专题
|
|
</p>
|
|
<h3 class="topic-card__title">{{.Name}}</h3>
|
|
{{if .Desc}}<p class="topic-card__desc">{{.Desc}}</p>{{end}}
|
|
<p class="topic-card__count">{{if .PlayletCount}}{{.PlayletCount}} 部 持续更新{{else}}持续更新{{end}}</p>
|
|
</div>
|
|
<div class="topic-card__stack" aria-hidden="true">
|
|
{{range topicCoverURLs .}}
|
|
<img decoding="async" loading="lazy" class="lazy" src="/static/images/placeholder.png?v=2" data-src="{{.}}" alt="专题封面">
|
|
{{end}}
|
|
</div>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
</main>
|
|
</div>
|
|
|
|
{{template "footer" .}}
|
|
|
|
<script>
|
|
(function () {
|
|
var bar = document.querySelector(".page-topic-detail .page-subheader--overlay");
|
|
if (bar) {
|
|
var onScroll = function () {
|
|
bar.classList.toggle("is-scrolled", window.scrollY > 8);
|
|
};
|
|
onScroll();
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
}
|
|
|
|
var dropdown = document.querySelector("[data-sort-dropdown]");
|
|
if (!dropdown) return;
|
|
var toggle = dropdown.querySelector("[data-sort-dropdown-toggle]");
|
|
var menu = dropdown.querySelector("[data-sort-dropdown-menu]");
|
|
if (!toggle || !menu) return;
|
|
|
|
function setOpen(open) {
|
|
dropdown.classList.toggle("is-open", open);
|
|
menu.hidden = !open;
|
|
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
|
}
|
|
|
|
toggle.addEventListener("click", function (event) {
|
|
event.stopPropagation();
|
|
setOpen(menu.hidden);
|
|
});
|
|
|
|
document.addEventListener("click", function (event) {
|
|
if (!dropdown.contains(event.target)) setOpen(false);
|
|
});
|
|
|
|
document.addEventListener("keydown", function (event) {
|
|
if (event.key === "Escape") setOpen(false);
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|