2
2
{{ .Scratch.Set "scope" "single" }}
3
3
4
4
< article >
5
- {{ if .Params.showHero | default (.Site.Params.article.showHero | default false) }}
6
- {{ $heroStyle := .Params.heroStyle }}
7
- {{ if not $heroStyle }}{{ $heroStyle = .Site.Params.article.heroStyle }}{{ end }}
8
- {{ $heroStyle := print "partials/hero/" $heroStyle ".html" }}
9
- {{ if templates.Exists $heroStyle }}
10
- {{ partial $heroStyle . }}
11
- {{ else }}
12
- {{ partial "partials/hero/basic.html" . }}
13
- {{ end }}
14
- {{ end }}
15
-
16
- < header id ="single_header " class ="mt-5 max-w-prose ">
17
- {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
18
- {{ partial "breadcrumbs.html" . }}
19
- {{ end }}
20
- < h1 class ="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral ">
21
- {{ .Title }}
22
- </ h1 >
23
-
24
- < div class ="mt-1 mb-6 text-base text-neutral-500 dark:text-neutral-400 print:hidden ">
25
- {{ partial "article-meta/basic.html" (dict "context" . "scope" "single") }}
26
- </ div >
27
-
28
- </ header >
29
-
30
- < noscript >
31
- Please enable JavaScript to view the Album page.
32
- </ noscript >
33
-
34
- < section class ="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row ">
35
-
36
- < div class ="min-w-0 min-h-0 max-w-fit ">
37
-
38
- < div class ="article-content max-w-full mb-20 ">
39
- {{ .Content }}
40
-
41
- < div id ="album " class ="w-full col-gap-2 m-0 p-0 relative box-border mb-4 columns-3 min-h-20 ">
42
- {{- $mastodon_tag_album_api := "https://e5n.cc/api/v1/accounts/111136231674527355/statuses?only_media=true&tagged=ealbum&limit=40&exclude_replies=true&exclude_reblogs=true&max_id=" -}}
43
- {{- with resources.GetRemote $mastodon_tag_album_api }}
44
- {{- with .Err }}
45
- Album page build failed. API is invalid or unauthorized.
46
- {{- else -}}
47
- {{- $album := . | transform.Unmarshal -}}
48
- {{- range $album }}
49
- {{ $createdAt := .created_at }}
50
- {{ $statusesUrl := .url }}
51
- {{ $content := .content | markdownify }}
52
- {{ $target := `< a href ="https://e5n.cc/tags/ealbum " class ="mention hashtag " rel ="tag "> #< span > ealbum</ span > </ a > ` }}
53
- {{ $replacement := `` }}
54
- {{ $content = replace $content $target $replacement }}
55
- {{ $attachments := .media_attachments }}
56
- {{ if gt (len $attachments) 0 }}
57
- {{- $firstAttachment := index $attachments 0 -}}
58
- {{- $type := $firstAttachment.type -}}
59
- {{- $length := len .media_attachments }}
60
- {{ if eq $type "image" }}
61
- {{ range .media_attachments }}
62
- < div class ="album_wrapper group m-0 overflow-hidden rounded relative break-inside-avoid transition-transform duration-300 w-[33%] ">
63
- < figure class ="my-0 ">
64
- < img
65
- class ="my-0 rounded-md block w-full cursor-pointer object-cover h-full scale-100 hover:scale-110 transition-all duration-400 ease-in-out animate-fadeIn lazy "
66
- loading ="lazy "
67
- srcset ="
68
- {{.url}},
69
- {{.url}} 1.5x,
70
- {{.url}} 2x "
71
- src ="{{.url}} "
72
- alt ="{{.id}} "
73
- />
74
- </ figure >
75
- < div class ="absolute w-full bg-neutral-500 text-neutral text-sm hidden animate-fadeIn px-2 py-2 bottom-0 text-left overflow-hidden group-hover:block "> {{ $content | markdownify }}</ div >
76
- < a href ="{{ $statusesUrl }} " target ="_blank " class ="absolute bg-neutral-900 hidden animate-fadeIn right-0 px-1 rounded-bl top-0 group-hover:block " rel ="noreferrer noopener nofollow ">
77
- < span class ="photo-title text-neutral text-sm "> {{ $createdAt }}</ span >
78
- </ a >
79
- < div class ="gutter-sizer w-[1%] "> </ div >
80
- </ div >
81
- {{ end }}
82
- {{ end }}
83
- {{ end }}
84
- {{- end -}}
85
- {{- end -}}
86
- {{- end -}}
87
- </ div >
88
-
89
- </ div >
90
-
91
- </ div >
92
-
93
- </ section >
5
+ {{ if .Params.showHero | default (.Site.Params.article.showHero | default false) }}
6
+ {{ $heroStyle := .Params.heroStyle }}
7
+ {{ if not $heroStyle }}{{ $heroStyle = .Site.Params.article.heroStyle }}{{ end }}
8
+ {{ $heroStyle := print "partials/hero/" $heroStyle ".html" }}
9
+ {{ if templates.Exists $heroStyle }}
10
+ {{ partial $heroStyle . }}
11
+ {{ else }}
12
+ {{ partial "partials/hero/basic.html" . }}
13
+ {{ end }}
14
+ {{ end }}
15
+
16
+ < header id ="single_header " class ="mt-5 max-w-prose ">
17
+ {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
18
+ {{ partial "breadcrumbs.html" . }}
19
+ {{ end }}
20
+ < h1 class ="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral ">
21
+ {{ .Title }}
22
+ </ h1 >
23
+
24
+ < div class ="mt-1 mb-6 text-base text-neutral-500 dark:text-neutral-400 print:hidden ">
25
+ {{ partial "article-meta/basic.html" (dict "context" . "scope" "single") }}
26
+ </ div >
27
+
28
+ </ header >
29
+
30
+ < noscript >
31
+ Please enable JavaScript to view the Album page.
32
+ </ noscript >
33
+
34
+ < section class ="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row ">
35
+
36
+ < div class ="min-w-0 min-h-0 max-w-fit ">
37
+
38
+ < div class ="article-content max-w-full mb-20 ">
39
+ {{ .Content }}
40
+
41
+ < div id ="album " class ="w-full col-gap-2 m-0 p-0 relative box-border mb-4 columns-3 min-h-20 ">
42
+ {{- $mastodon_tag_album_api := "https://e5n.cc/api/v1/accounts/111136231674527355/statuses?only_media=true&tagged=ealbum&limit=40&exclude_replies=true&exclude_reblogs=true&max_id=" -}}
43
+ {{- with resources.GetRemote $mastodon_tag_album_api }}
44
+ {{- with .Err }}
45
+ Album page build failed. API is invalid or unauthorized.
46
+ {{- else -}}
47
+ {{- $album := . | transform.Unmarshal -}}
48
+ {{- range $album }}
49
+ {{ $createdAt := .created_at }}
50
+ {{ $statusesUrl := .url }}
51
+ {{ $content := .content | markdownify }}
52
+ {{ $target := `< a href ="https://e5n.cc/tags/ealbum " class ="mention hashtag " rel ="tag "> #< span > ealbum</ span > </ a > ` }}
53
+ {{ $replacement := `` }}
54
+ {{ $content = replace $content $target $replacement }}
55
+ {{ $attachments := .media_attachments }}
56
+ {{ if gt (len $attachments) 0 }}
57
+ {{- $firstAttachment := index $attachments 0 -}}
58
+ {{- $type := $firstAttachment.type -}}
59
+ {{- $length := len .media_attachments }}
60
+ {{ if eq $type "image" }}
61
+ {{ range .media_attachments }}
62
+ < div class ="album_wrapper group m-0 overflow-hidden rounded relative break-inside-avoid transition-transform duration-300 w-[33%] ">
63
+ < figure class ="my-0 ">
64
+ < img
65
+ class ="my-0 rounded-md block w-full cursor-pointer object-cover h-full scale-100 hover:scale-110 transition-all duration-400 ease-in-out animate-fadeIn lazy "
66
+ loading ="lazy "
67
+ srcset ="
68
+ {{.url}},
69
+ {{.url}} 1.5x,
70
+ {{.url}} 2x "
71
+ src ="{{.url}} "
72
+ alt ="{{.id}} "
73
+ />
74
+ </ figure >
75
+ < div class ="absolute w-full bg-neutral-500 text-neutral text-sm hidden animate-fadeIn px-2 py-2 bottom-0 text-left overflow-hidden group-hover:block "> {{ $content | markdownify }}</ div >
76
+ < a href ="{{ $statusesUrl }} " target ="_blank " class ="absolute bg-neutral-900 hidden animate-fadeIn right-0 px-1 rounded-bl top-0 group-hover:block " rel ="noreferrer noopener nofollow ">
77
+ < span class ="photo-title text-neutral text-sm "> {{ $createdAt }}</ span >
78
+ </ a >
79
+ < div class ="gutter-sizer w-[1%] "> </ div >
80
+ </ div >
81
+ {{ end }}
82
+ {{ end }}
83
+ {{ end }}
84
+ {{- end -}}
85
+ {{- end -}}
86
+ {{- end -}}
87
+ </ div >
88
+
89
+ </ div >
90
+
91
+ </ div >
92
+
93
+ </ section >
94
94
95
95
</ article >
96
96
@@ -104,89 +104,89 @@ <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
104
104
< script type ="text/javascript " src ="{{ $imagesloadedJS.RelPermalink }} " integrity ="{{ $imagesloadedJS.Data.Integrity }} "> </ script >
105
105
106
106
< script >
107
- var galleryDom = document . querySelector ( "#album" ) ;
108
- // 初始化 Masonry
109
- var pckry = new Packery ( galleryDom , {
110
- itemSelector : ".album_wrapper" ,
111
- columnWidth : ".album_wrapper" ,
112
- gutter : ".gutter-sizer" ,
113
- percentPosition : true ,
114
- } ) ;
115
-
116
- pckry . getItemElements ( ) . forEach ( function ( itemElem ) {
117
- var draggie = new Draggabilly ( itemElem ) ;
118
- pckry . bindDraggabillyEvents ( draggie ) ;
119
- } ) ;
120
-
121
- // 图片加载完成后触发
122
- imagesLoaded ( galleryDom ) . on ( "progress" , function ( ) {
123
- // 定义块状网格尺寸
124
- galleryDom . classList . add ( "grid" ) ;
125
-
126
- // 重排布局
127
- pckry . layout ( ) ;
128
-
129
- // Images done loading
130
- pckry . options . itemSelector = ".album_wrapper" ;
131
- } ) ;
132
-
133
- // 相对时间插件 2.5.2 https://tokinx.github.io/lately/
134
- ( ( ) => {
135
- let location = window . location . href ;
136
- let isEnglish = location . indexOf ( "/en/" ) !== - 1 ;
137
- window . Lately = new function ( ) {
138
- this . lang = isEnglish ? {
139
- 'second' : ' Seconds' ,
140
- 'minute' : ' Minutes' ,
141
- 'hour' : ' Hours' ,
142
- 'day' : ' Days' ,
143
- 'month' : ' Months' ,
144
- 'year' : ' Years' ,
145
- 'ago' : ' Ago' ,
146
- 'error' : 'NaN'
147
- } : {
148
- second : " 秒" ,
149
- minute : " 分钟" ,
150
- hour : " 小时" ,
151
- day : " 天" ,
152
- month : " 个月" ,
153
- year : " 年" ,
154
- ago : "前" ,
155
- error : "NaN"
156
- } ;
157
- const format = ( date ) => {
158
- date = new Date ( _val ( date ) ) ;
159
- const floor = ( num , _lang ) => Math . floor ( num ) + _lang ,
160
- obj = new function ( ) {
161
- this . second = ( Date . now ( ) - date . getTime ( ) ) / 1000 ;
162
- this . minute = this . second / 60 ;
163
- this . hour = this . minute / 60 ;
164
- this . day = this . hour / 24 ;
165
- this . month = this . day / 30 ;
166
- this . year = this . month / 12
167
- } ,
168
- key = Object . keys ( obj ) . reverse ( ) . find ( _ => obj [ _ ] >= 1 ) ;
169
- return ( key ? floor ( obj [ key ] , this . lang [ key ] ) : this . lang . error ) + this . lang . ago ;
170
- } ,
171
- _val = ( date ) => {
172
- date = new Date ( date && ( typeof date === 'number' ? date : date . replace ( / - / g, '/' ) . replace ( 'T' , ' ' ) ) ) ;
173
- return isNaN ( date . getTime ( ) ) ? false : date . getTime ( ) ;
174
- } ;
175
- return {
176
- init : ( { target = "time" , lang } = { } ) => {
177
- if ( lang ) this . lang = lang ;
178
- for ( let el of document . querySelectorAll ( target ) ) {
179
- const date = _val ( el . dateTime ) || _val ( el . title ) || _val ( el . innerHTML ) || 0 ;
180
- if ( ! date ) return ;
181
- el . title = new Date ( date ) . toLocaleString ( ) ;
182
- el . innerHTML = format ( date ) ;
183
- }
184
- } ,
185
- format
186
- }
187
- }
188
- } ) ( ) ;
189
- window . Lately && Lately . init ( { target : ".photo-title" } ) ;
107
+ var galleryDom = document . querySelector ( "#album" ) ;
108
+ // 初始化 Masonry
109
+ var pckry = new Packery ( galleryDom , {
110
+ itemSelector : ".album_wrapper" ,
111
+ columnWidth : ".album_wrapper" ,
112
+ gutter : ".gutter-sizer" ,
113
+ percentPosition : true ,
114
+ } ) ;
115
+
116
+ pckry . getItemElements ( ) . forEach ( function ( itemElem ) {
117
+ var draggie = new Draggabilly ( itemElem ) ;
118
+ pckry . bindDraggabillyEvents ( draggie ) ;
119
+ } ) ;
120
+
121
+ // 图片加载完成后触发
122
+ imagesLoaded ( galleryDom ) . on ( "progress" , function ( ) {
123
+ // 定义块状网格尺寸
124
+ galleryDom . classList . add ( "grid" ) ;
125
+
126
+ // 重排布局
127
+ pckry . layout ( ) ;
128
+
129
+ // Images done loading
130
+ pckry . options . itemSelector = ".album_wrapper" ;
131
+ } ) ;
132
+
133
+ // 相对时间插件 2.5.2 https://tokinx.github.io/lately/
134
+ ( ( ) => {
135
+ let location = window . location . href ;
136
+ let isEnglish = location . indexOf ( "/en/" ) !== - 1 ;
137
+ window . Lately = new function ( ) {
138
+ this . lang = isEnglish ? {
139
+ 'second' : ' Seconds' ,
140
+ 'minute' : ' Minutes' ,
141
+ 'hour' : ' Hours' ,
142
+ 'day' : ' Days' ,
143
+ 'month' : ' Months' ,
144
+ 'year' : ' Years' ,
145
+ 'ago' : ' Ago' ,
146
+ 'error' : 'NaN'
147
+ } : {
148
+ second : " 秒" ,
149
+ minute : " 分钟" ,
150
+ hour : " 小时" ,
151
+ day : " 天" ,
152
+ month : " 个月" ,
153
+ year : " 年" ,
154
+ ago : "前" ,
155
+ error : "NaN"
156
+ } ;
157
+ const format = ( date ) => {
158
+ date = new Date ( _val ( date ) ) ;
159
+ const floor = ( num , _lang ) => Math . floor ( num ) + _lang ,
160
+ obj = new function ( ) {
161
+ this . second = ( Date . now ( ) - date . getTime ( ) ) / 1000 ;
162
+ this . minute = this . second / 60 ;
163
+ this . hour = this . minute / 60 ;
164
+ this . day = this . hour / 24 ;
165
+ this . month = this . day / 30 ;
166
+ this . year = this . month / 12
167
+ } ,
168
+ key = Object . keys ( obj ) . reverse ( ) . find ( _ => obj [ _ ] >= 1 ) ;
169
+ return ( key ? floor ( obj [ key ] , this . lang [ key ] ) : this . lang . error ) + this . lang . ago ;
170
+ } ,
171
+ _val = ( date ) => {
172
+ date = new Date ( date && ( typeof date === 'number' ? date : date . replace ( / - / g, '/' ) . replace ( 'T' , ' ' ) ) ) ;
173
+ return isNaN ( date . getTime ( ) ) ? false : date . getTime ( ) ;
174
+ } ;
175
+ return {
176
+ init : ( { target = "time" , lang } = { } ) => {
177
+ if ( lang ) this . lang = lang ;
178
+ for ( let el of document . querySelectorAll ( target ) ) {
179
+ const date = _val ( el . dateTime ) || _val ( el . title ) || _val ( el . innerHTML ) || 0 ;
180
+ if ( ! date ) return ;
181
+ el . title = new Date ( date ) . toLocaleString ( ) ;
182
+ el . innerHTML = format ( date ) ;
183
+ }
184
+ } ,
185
+ format
186
+ }
187
+ }
188
+ } ) ( ) ;
189
+ window . Lately && Lately . init ( { target : ".photo-title" } ) ;
190
190
</ script >
191
191
192
192
{{ end }}
0 commit comments