1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
| //- ============================================================
//- Hexo Anzhiyu 主题 - 朋友圈/动态页面模板
//- 路径：/moments/
//- 数据：source/_data/moments.yml
//- 评论：Twikoo（每条动态独立评论区）
//- ============================================================
extends includes/layout.pug
block content
link(rel="stylesheet" href=url_for("/css/moments.css"))
if site.data.moments
each i in site.data.moments
#moments-page.moments-page
//- ========== 顶部 Banner ==========
.moments-banner(style = i.top_background ? `background: url(${i.top_background}) center / cover no-repeat;` : "")
.banner-overlay
.banner-content
.banner-tips= i.tips
h1.banner-title= i.subTitle
if i.buttonText
a.banner-link(href=url_for(i.buttonLink))
i.anzhiyufont.anzhiyu-icon-arrow-circle-right
span= i.buttonText
//- ========== 动态时间线 ==========
.moments-timeline
each item, idx in i.moments_list
- var suffix = ((idx * 137 + 59) % 900 + 100)
- var momentPath = '/moments/' + item.date.replace(/\//g, '-') + '-' + suffix
.moment-item(id='moment-' + idx)
.moment-card
//- 头部：头像 + 昵称
.moment-header
img.moment-header-avatar(src=theme.avatar_img || "/img/avatar.png" alt="avatar" loading="lazy")
.moment-header-info
.moment-author= config.author || "我"
if item.date
time.moment-header-time(datetime=item.date)= item.date
//- 正文
if item.content
.moment-text= item.content
//- 图片画廊
if item.image && item.image.length
- var imgTotal = item.image.length
- var imgUrls = item.image.map(function(x){return url_for(x)}).join(',')
- var visibleCount = imgTotal > 5 ? 5 : imgTotal
- var displayImages = imgTotal > 5 ? item.image.slice(0, 5) : item.image
//- 1 张图
if imgTotal === 1
- var r0 = url_for(item.image[0])
.moment-gallery.gallery-1
img.gallery-img(src=r0 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 0)`)
//- 2 张图 — 上下等分
if imgTotal === 2
- var r0 = url_for(item.image[0]), r1 = url_for(item.image[1])
.moment-gallery.gallery-2
.gallery-item
img.gallery-img(src=r0 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 0)`)
.gallery-item
img.gallery-img(src=r1 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 1)`)
//- 3 张图 — 上1下2 + 斜切分割
if imgTotal === 3
- var r0 = url_for(item.image[0]), r1 = url_for(item.image[1]), r2 = url_for(item.image[2])
.moment-gallery.gallery-3
.gallery-row-top
img.gallery-img(src=r0 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 0)`)
.gallery-diagonal
.gallery-row-bottom
.gallery-item
img.gallery-img(src=r1 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 1)`)
.gallery-item
img.gallery-img(src=r2 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 2)`)
//- 4 张图 — 1 张悬浮居中 + 3 张错落 + 左右切换
if imgTotal === 4
- var r0 = url_for(item.image[0]), r1 = url_for(item.image[1]), r2 = url_for(item.image[2]), r3 = url_for(item.image[3])
- var allUrls4Arr = '["' + item.image.map(function(x){return url_for(x)}).join('","') + '"]'
.moment-gallery.gallery-4(
data-all-urls=allUrls4Arr
data-main-idx="0"
)
.gallery-float-main
img.gallery-img(src=r0 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 0)`)
button.gallery-arrow.gallery-arrow-left(onclick=`MomentsApp.gallery4Prev(this)`)
i.anzhiyufont.anzhiyu-icon-chevron-left
button.gallery-arrow.gallery-arrow-right(onclick=`MomentsApp.gallery4Next(this)`)
i.anzhiyufont.anzhiyu-icon-chevron-right
.gallery-stagger-row
.gallery-item.gallery-skew-left
img.gallery-img(src=r1 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 1)`)
.gallery-item.gallery-skew-right
img.gallery-img(src=r2 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 2)`)
.gallery-item.gallery-skew-left
img.gallery-img(src=r3 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 3)`)
//- 5 张图 — 上横通栏斜切 + 下2×2
if imgTotal === 5
- var r0 = url_for(item.image[0]), r1 = url_for(item.image[1]), r2 = url_for(item.image[2]), r3 = url_for(item.image[3]), r4 = url_for(item.image[4])
.moment-gallery.gallery-5
.gallery-wide-top
img.gallery-img(src=r0 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 0)`)
.gallery-wide-skew
.gallery-grid-2x2
.gallery-item: img.gallery-img(src=r1 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 1)`)
.gallery-item: img.gallery-img(src=r2 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 2)`)
.gallery-item: img.gallery-img(src=r3 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 3)`)
.gallery-item: img.gallery-img(src=r4 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 4)`)
//- 超过5张 — 前5张展示，第5张毛玻璃遮罩
if imgTotal > 5
.moment-gallery.gallery-expand(data-expanded="false")
- var g0 = url_for(item.image[0]), g1 = url_for(item.image[1]), g2 = url_for(item.image[2]), g3 = url_for(item.image[3]), g4 = url_for(item.image[4])
.gallery-wide-top
img.gallery-img(src=g0 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 0)`)
.gallery-wide-skew
.gallery-grid-2x2
.gallery-item: img.gallery-img(src=g1 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 1)`)
.gallery-item: img.gallery-img(src=g2 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 2)`)
.gallery-item: img.gallery-img(src=g3 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 3)`)
.gallery-cell-frosted
img.gallery-img(src=g4 alt="image" loading="lazy")
.gallery-frosted-overlay(onclick=`MomentsApp.expandGallery(this)`)
i.anzhiyufont.anzhiyu-icon-angles-right
span= '+' + (imgTotal - 4)
//- 隐藏的剩余图片（手动 hardcode 索引 5-9）
.gallery-extra(style="display:none;")
if imgTotal >= 7
- var u6 = url_for(item.image[5])
.gallery-item: img.gallery-img(src=u6 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 5)`)
if imgTotal >= 8
- var u7 = url_for(item.image[6])
.gallery-item: img.gallery-img(src=u7 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 6)`)
if imgTotal >= 9
- var u8 = url_for(item.image[7])
.gallery-item: img.gallery-img(src=u8 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 7)`)
if imgTotal >= 10
- var u9 = url_for(item.image[8])
.gallery-item: img.gallery-img(src=u9 alt="image" loading="lazy" onclick=`MomentsApp.openLightbox('${imgUrls}', 8)`)
//- 视频嵌入
if item.video && item.video.length
- var vidCount = item.video.length
- var showVidLimit = 1
each vid, vidIdx in item.video
.moment-video(class=(vidIdx >= showVidLimit ? 'moment-video-collapsed' : ''))
if vid.includes('player.bilibili.com')
iframe(
src=vid
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"
)
else if vid.includes('youtube.com') || vid.includes('youtu.be')
iframe(src=vid allowfullscreen)
else
video(src=url_for(vid) controls)
if vidCount > showVidLimit
button.moment-expand-videos-btn(
onclick=`MomentsApp.toggleVideos(this, ${vidCount})`
)
i.anzhiyufont.anzhiyu-icon-play
span= '展开更多视频（' + (vidCount - showVidLimit) + '个）'
//- APlayer 音乐
if item.aplayer
.moment-music
meting-js(
id=item.aplayer.id
server=item.aplayer.server
type="song"
mutex="true"
preload="none"
theme="var(--anzhiyu-main)"
data-lrctype="0"
order="list"
)
//- 底部信息栏
.moment-meta
.moment-meta-left
time.moment-time(datetime=item.date)
i.anzhiyufont.anzhiyu-icon-clock
span= item.date
- var addr = item.address || '佛山'
span.moment-location
i.anzhiyufont.anzhiyu-icon-location-dot
span= addr
- var dev = item.from || 'Redmi K90'
span.moment-device
i.anzhiyufont.anzhiyu-icon-gear
span= dev
if item.link
a.moment-link(href=url_for(item.link) title="查看详情")
i.anzhiyufont.anzhiyu-icon-link
span 链接
.moment-meta-right
button.moment-action.like-btn(
data-id=item.date
onclick=`MomentsApp.toggleLike(this, '${item.date}')`
)
i.anzhiyufont.anzhiyu-icon-heartbeat
span.like-count 0
button.moment-action.comment-btn(
data-id=item.date
data-path=momentPath
onclick=`MomentsApp.openComment('${idx}', '${momentPath}')`
)
i.anzhiyufont.anzhiyu-icon-comments
span 评论
button.moment-action.share-btn(
onclick=`MomentsApp.shareMoment('${item.content ? item.content.slice(0,30) : ''}')`
)
i.anzhiyufont.anzhiyu-icon-paper-plane
//- 独立的 Twikoo 评论区
.moment-comments-twikoo(
id='moment-comments-' + idx
style="display:none;"
data-inited="false"
data-path=momentPath
)
//- ========== Lightbox ==========
.moments-lightbox#momentsLightbox(style="display:none;")
.lightbox-overlay(onclick="MomentsApp.closeLightbox()")
.lightbox-content
img.lightbox-img#lightboxImg(src="" alt="")
button.lightbox-prev(onclick="MomentsApp.lightboxNav(-1)")
i.anzhiyufont.anzhiyu-icon-chevron-left
button.lightbox-next(onclick="MomentsApp.lightboxNav(1)")
i.anzhiyufont.anzhiyu-icon-chevron-right
button.lightbox-close(onclick="MomentsApp.closeLightbox()")
i.anzhiyufont.anzhiyu-icon-times
.lightbox-counter#lightboxCounter
//- 加载 Twikoo JS（只加载一次）
script(src=url_for(theme.asset.twikoo))
script.
window.__twikooEnvId = '!{theme.twikoo.envId}';
window.__twikooRegion = '!{theme.twikoo.region || ""}';
script(src=url_for("/js/moments.js"))
|
