Files
trpic/web/templates/artwork_id/artwork_id_noscript.tmpl

187 lines
6.8 KiB
Cheetah

{{ define "artwork_id_noscript" }}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:site_name" content="trpic">
{{ if and .Artwork.Edges.Posts .Artwork.Edges.Socials }}
{{ $post := index .Artwork.Edges.Posts 0 }}
{{ $social := index .Artwork.Edges.Socials 0 }}
{{ if $post.Title }}
<title>{{ $post.Title }} - {{ $social.DisplayName }}</title>
<meta property="og:title" name="twitter:title" content="{{ $post.Title }} - {{ $social.DisplayName }}">
{{ else }}
<title>{{ $social.DisplayName }}'s artwork</title>
<meta property="og:title" name="twitter:title" content="{{ $social.DisplayName }}'s artwork">
{{ end }}
{{ if $post.Text }}
<meta property="og:description" name="description" content="{{ $post.Text }}">
<meta name="twitter:description" content="{{ $post.Text }}">
{{ else if gt (len .Artwork.Edges.Files) 1 }}
<meta property="og:description" name="description" content="with {{ len .Artwork.Edges.Files }} files">
<meta name="twitter:description" content="with {{ len .Artwork.Edges.Files }} files">
{{ end }}
{{ else if .Artwork.Edges.Posts }}
{{ $post := index .Artwork.Edges.Posts 0 }}
{{ if $post.Title }}
<title>{{ $post.Title }} - unknown author</title>
<meta property="og:title" name="twitter:title" content="{{ $post.Title }} - unknown author">
{{ else }}
<title>unknown author's artwork</title>
<meta property="og:title" name="twitter:title" content="unknown author's artwork">
{{ end }}
{{ if $post.Text }}
<meta property="og:description" name="description" content="{{ $post.Text }}">
<meta name="twitter:description" content="{{ $post.Text }}">
{{ else if gt (len .Artwork.Edges.Files) 1 }}
<meta property="og:description" name="description" content="with {{ len .Artwork.Edges.Files }} files">
<meta name="twitter:description" content="with {{ len .Artwork.Edges.Files }} files">
{{ end }}
{{ else if .Artwork.Edges.Socials }}
{{ $social := index .Artwork.Edges.Socials 0 }}
<title>{{ $social.DisplayName }}'s artwork</title>
<meta property="og:title" name="twitter:title" content="{{ $social.DisplayName }}'s artwork">
{{ if gt (len .Artwork.Edges.Files) 1 }}
<meta property="og:description" name="description" content="with {{ len .Artwork.Edges.Files }} files">
<meta name="twitter:description" content="with {{ len .Artwork.Edges.Files }} files">
{{ end }}
{{ else }}
<title>unknown author's artwork</title>
<meta property="og:title" name="twitter:title" content="unknown author's artwork">
{{ if gt (len .Artwork.Edges.Files) 1 }}
<meta property="og:description" name="description" content="with {{ len .Artwork.Edges.Files }} files">
<meta name="twitter:description" content="with {{ len .Artwork.Edges.Files }} files">
{{ end }}
{{ end }}
{{ if .Artwork.Edges.Files }}
{{ $file := index .Artwork.Edges.Files .PhotoIndex }}
<meta name="twitter:card" content="summary_large_image">
<meta property="og:image:width" content="{{ $file.Width }}">
<meta property="og:image:height" content="{{ $file.Height }}">
<meta property="twitter:image:width" content="{{ $file.Width }}">
<meta property="twitter:image:height" content="{{ $file.Height }}">
<meta property="og:image" name="twitter:image" content="{{ $.BaseURL }}/files/{{ $file.ID }}.{{ $file.Ext }}">
{{ end }}
<meta property="og:url" name="twitter:url" content="{{ .BaseURL }}/artworks/{{ .Artwork.ID }}">
<style>
body {
background: #222;
color: #fff;
margin: 0;
}
#info {
max-width: max(600px, 25vw);
min-width: 20vw;
padding: 1em;
max-height: fit-content;
line-break: anywhere;
}
@media (min-width: 720px) {
body {
display: flex;
position: relative;
}
#info {
position: sticky;
top: 0;
left: 0;
}
}
p {
margin: 0;
line-break: anywhere;
color: white;
}
#info a {
margin-right:.5em;
color: aquamarine;
text-decoration: none;
}
#info a:hover {
color: rgb(60, 190, 150);
}
.text, #info a, span::before {
font-size: .8em;
}
#img-author::before { content: "作者" }
#img-source::before { content: "来源" }
#img-tag::before { content: "标签" }
#img-source > div, #img-author > p {
margin-bottom: .5em;
}
#img-tag a {
white-space: pre;
}
span::before{
display: block;
color: #aaa;
}
span::after {
content: "";
display: block;
margin: 0 0 1.2em 0;
}
#files {
display: flex;
flex-wrap: wrap;
gap: .5em;
margin: 1em;
}
img {
max-width: min(500px, 85vw);
max-height: 90vh;
}
</style>
</head>
<body>
<div id="info">
{{ if .Artwork.Edges.Socials }}
<span id="img-author">
{{ range $index, $social := .Artwork.Edges.Socials }}
<p {{ if gt $index 0 }}style="border-top: 1px solid #777;"{{end}}><a href="{{ .URL }}" target="_blank">{{ .Platform }}/{{ .DisplayName }}</a><a href="/noscript/artworks?socials={{ .ID }}">[{{ .ID }}]</a></p>
{{ end }}
</span>
{{ else }}
<span id="img-author"><p>无作者</p></span>
{{ end }}
{{ if .Artwork.Edges.Posts }}
<span id="img-source">
{{ range $index, $post := .Artwork.Edges.Posts }}
<div {{ if gt $index 0 }}style="border-top: 1px solid #777;"{{end}}>
<a href="{{ .URL }}">{{ .Platform }}/{{ .PostID }}</a>
{{ if .Text }}<p class="text">{{ printf "%.19s" .Time }}</p>{{ end }}
{{ if .Title }}<p>{{ .Title }}</p>{{ end }}
{{ if .Text }}<p class="text">{{ .Text }}</p>{{ end }}
</div>
{{ end }}
</span>
{{ else }}
<span id="img-source"><p>无来源</p></span>
{{ end }}
{{ if .Artwork.Edges.Tags }}
<span id="img-tag">
{{ range .Artwork.Edges.Tags }}
<a href="/noscript/artworks/?tags={{ .ID }}">#{{ .Text }}</a>
{{ end }}
</span>
{{ else }}
<span id="img-tag"><p>无标签</p></span>
{{ end }}
</div>
<div id="files">
{{ range .Artwork.Edges.Files }}
<a href="/files/{{ .ID }}.{{ .Ext }}"><img src="/files/{{ .ID }}.{{ .Ext }}" loading="lazy" decoding="async" /></a>
{{ else }}
<p>没有找到图片</p>
{{ end }}
</div>
</body>
</html>
{{ end }}