1
{{ define "main" }}
2
{{ .Scratch.Set "scope" "single" }}
3

4

5
<article>
6
    {{ if .Params.showHero | default (.Site.Params.article.showHero | default false) }}
7
    {{ $heroStyle := .Params.heroStyle }}
8
    {{ if not $heroStyle }}{{ $heroStyle = .Site.Params.article.heroStyle }}{{ end }}
9
    {{ $heroStyle := print "hero/" $heroStyle ".html" }}
10
  {{ if templates.Exists ( printf "partials/%s" $heroStyle ) }}
11
    {{ partial $heroStyle . }}
12
    {{ else }}
13
    {{ partial "hero/basic.html" . }}
14
    {{ end }}
15
    {{ end }}
16

17
    <header id="single_header" class="mt-5 max-w-prose">
18
        {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
19
        {{ partial "breadcrumbs.html" . }}
20
        {{ end }}
21
        <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
22
            {{ .Title }}
23
        </h1>
24

25
        <div class="mt-1 mb-6 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
26
            {{ partial "article-meta/basic.html" (dict "context" . "scope" "single") }}
27
        </div>
28

29
    </header>
30

31
    <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
32

33
            <div class="min-w-0 min-h-0 max-w-fit">
34

35
                <div class="article-content max-w-full mb-20 break-words">
36

37
                        {{ .Content }}
38

39
                        <!-- 添加 not-prose 类来避免 prose 样式的影响 -->
40
                        <div class="not-prose">
41
                                <div class="friends-links grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
42
                                        {{ $linksResource := resources.Get "data/links.json" }}
43
                                        {{ $links := $linksResource | transform.Unmarshal }}
44
                    {{ $linksResource := resources.Get "data/links.json" }}
45
                    {{ $links := $linksResource | transform.Unmarshal }}
46

47
                    {{ range $links.links }}
48
                      {{ $name := .name }}
49
                      {{ $bio := .bio }}
50
                      {{ $url := .url }}
51
                      {{ $avatar := .avatar }}
52

53
                      <a target="_blank" href="{{ $url }}" title="{{ $name }}" class="block" rel="noopener noreferrer">
54
                        <div class="group flex items-center p-4 bg-gray-100 dark:bg-gray-900 rounded-lg hover:scale-105 transition-all duration-300 ease-in-out">
55
                          <div class="flex-shrink-0 mr-4">
56
                            <div class="friend-avatar-wrapper">
57
                            <img class="friend-avatar lazy nozoom w-16 h-16 object-cover rounded-full block" loading="lazy"
58
                                 src="{{ $avatar }}"
59
                                 alt="{{ $name }}"
60
                                 onerror="this.onerror=null; this.src='/img/Transparent_Akkarin.th.jpg';"
61
                                 style="width: 64px; height: 64px;">
62
                          </div>
63
                        </div>
64
                          <span class="inline-block w-4 h-4 mr-3"></span>
65
                          <div class="flex-grow min-w-0">
66
                            <div class="flex items-center mb-2">
67
                              <span class="font-medium text-neutral-900 dark:text-neutral-100 truncate" style="strong">{{ $name }}</span>
68
                            </div>
69
                            <p class="text-sm text-neutral-700 dark:text-neutral-300 line-clamp-2 m-0">{{ $bio }}</p>
70
                          </div>
71
                        </div>
72
                      </a>
73
                    {{ end }}
74
                                </div>
75
                        </div>
76

77
                </div>
78

79
            </div>
80

81
        </section>
82

83
</article>
84

85
{{ $lazyloadJS := resources.Get "js/lazyload.iife.min.js" | fingerprint "sha256" }}
86
<script type="text/javascript" src="{{ $lazyloadJS.RelPermalink }}" integrity="{{ $lazyloadJS.Data.Integrity }}"></script>
87

88
<script>
89
        // Random links
90
        function shuffleArray(array) {
91
                for (let i = array.length - 1; i > 0; i--) {
92
                        const j = Math.floor(Math.random() * (i + 1));
93
                        [array[i], array[j]] = [array[j], array[i]];
94
                }
95
                return array;
96
        }
97

98
        function randomizeLinks() {
99
                const linksContainer = document.querySelector('.friends-links');
100
                const links = Array.from(linksContainer.querySelectorAll('a'));
101
                const shuffledLinks = shuffleArray(links);
102

103
                links.forEach(link => link.remove());
104

105
                shuffledLinks.forEach(link => linksContainer.appendChild(link));
106
        }
107

108
        randomizeLinks();
109
</script>
110

111
<script>
112
        var lazyLoadInstance = new LazyLoad({
113
                // Your custom settings go here
114
        });
115
</script>
116

117
<style>
118

119
.friend-avatar-wrapper {
120
  width: 64px;
121
  aspect-ratio: 1 / 1; /* 保证是正方形，避免压扁 */
122
  border-radius: 50%;     /* 圆形裁切 */
123
  overflow: hidden;
124
  border: 2px solid #9ca3af;
125
  display: flex;
126
  align-items: center;
127
  justify-content: center;
128
  background-color: white;
129
  box-sizing: border-box;
130
  transition: transform 0.6s ease;
131
}
132

133
/* 鼠标悬停时旋转 */
134
.friend-avatar-wrapper:hover {
135
  transform: rotate(360deg);
136
}
137

138
/* dark 模式下边框稍调亮 */
139
html.dark .friend-avatar-wrapper {
140
  border-color: #d1d5db;  /* light gray for dark mode */
141
}
142

143
.friend-avatar {
144
  width: 100%;
145
  height: 100%;
146
  object-fit: cover;
147
  display: block;
148
}
149

150
</style>
151

152
{{ end }}

1
var LazyLoad = (function () {
2
  "use strict";
3
  const e = "undefined" != typeof window,
4
    t =
5
      (e && !("onscroll" in window)) ||
6
      ("undefined" != typeof navigator &&
7
        /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent)),
8
    a = e && window.devicePixelRatio > 1,
9
    s = {
10
      elements_selector: ".lazy",
11
      container: t || e ? document : null,
12
      threshold: 300,
13
      thresholds: null,
14
      data_src: "src",
15
      data_srcset: "srcset",
16
      data_sizes: "sizes",
17
      data_bg: "bg",
18
      data_bg_hidpi: "bg-hidpi",
19
      data_bg_multi: "bg-multi",
20
      data_bg_multi_hidpi: "bg-multi-hidpi",
21
      data_bg_set: "bg-set",
22
      data_poster: "poster",
23
      class_applied: "applied",
24
      class_loading: "loading",
25
      class_loaded: "loaded",
26
      class_error: "error",
27
      class_entered: "entered",
28
      class_exited: "exited",
29
      unobserve_completed: !0,
30
      unobserve_entered: !1,
31
      cancel_on_exit: !0,
32
      callback_enter: null,
33
      callback_exit: null,
34
      callback_applied: null,
35
      callback_loading: null,
36
      callback_loaded: null,
37
      callback_error: null,
38
      callback_finish: null,
39
      callback_cancel: null,
40
      use_native: !1,
41
      restore_on_error: !1,
42
    },
43
    n = (e) => Object.assign({}, s, e),
44
    l = function (e, t) {
45
      let a;
46
      const s = "LazyLoad::Initialized",
47
        n = new e(t);
48
      try {
49
        a = new CustomEvent(s, { detail: { instance: n } });
50
      } catch (e) {
51
        (a = document.createEvent("CustomEvent")),
52
          a.initCustomEvent(s, !1, !1, { instance: n });
53
      }
54
      window.dispatchEvent(a);
55
    },
56
    o = "src",
57
    r = "srcset",
58
    i = "sizes",
59
    c = "poster",
60
    d = "llOriginalAttrs",
61
    _ = "data",
62
    u = "loading",
63
    g = "loaded",
64
    b = "applied",
65
    h = "error",
66
    m = "native",
67
    p = "data-",
68
    v = "ll-status",
69
    f = (e, t) => e.getAttribute(p + t),
70
    E = (e) => f(e, v),
71
    I = (e, t) =>
72
      ((e, t, a) => {
73
        const s = p + t;
74
        null !== a ? e.setAttribute(s, a) : e.removeAttribute(s);
75
      })(e, v, t),
76
    k = (e) => I(e, null),
77
    A = (e) => null === E(e),
78
    L = (e) => E(e) === m,
79
    y = [u, g, b, h],
80
    w = (e, t, a, s) => {
81
      e &&
82
        "function" == typeof e &&
83
        (void 0 === s ? (void 0 === a ? e(t) : e(t, a)) : e(t, a, s));
84
    },
85
    C = (t, a) => {
86
      e && "" !== a && t.classList.add(a);
87
    },
88
    O = (t, a) => {
89
      e && "" !== a && t.classList.remove(a);
90
    },
91
    x = (e) => e.llTempImage,
92
    M = (e, t) => {
93
      if (!t) return;
94
      const a = t._observer;
95
      a && a.unobserve(e);
96
    },
97
    z = (e, t) => {
98
      e && (e.loadingCount += t);
99
    },
100
    N = (e, t) => {
101
      e && (e.toLoadCount = t);
102
    },
103
    R = (e) => {
104
      let t = [];
105
      for (let a, s = 0; (a = e.children[s]); s += 1)
106
        "SOURCE" === a.tagName && t.push(a);
107
      return t;
108
    },
109
    T = (e, t) => {
110
      const a = e.parentNode;
111
      a && "PICTURE" === a.tagName && R(a).forEach(t);
112
    },
113
    G = (e, t) => {
114
      R(e).forEach(t);
115
    },
116
    D = [o],
117
    H = [o, c],
118
    V = [o, r, i],
119
    F = [_],
120
    B = (e) => !!e[d],
121
    J = (e) => e[d],
122
    S = (e) => delete e[d],
123
    j = (e, t) => {
124
      if (B(e)) return;
125
      const a = {};
126
      t.forEach((t) => {
127
        a[t] = e.getAttribute(t);
128
      }),
129
        (e[d] = a);
130
    },
131
    P = (e, t) => {
132
      if (!B(e)) return;
133
      const a = J(e);
134
      t.forEach((t) => {
135
        ((e, t, a) => {
136
          a ? e.setAttribute(t, a) : e.removeAttribute(t);
137
        })(e, t, a[t]);
138
      });
139
    },
140
    U = (e, t, a) => {
141
      C(e, t.class_applied),
142
        I(e, b),
143
        a && (t.unobserve_completed && M(e, t), w(t.callback_applied, e, a));
144
    },
145
    $ = (e, t, a) => {
146
      C(e, t.class_loading),
147
        I(e, u),
148
        a && (z(a, 1), w(t.callback_loading, e, a));
149
    },
150
    q = (e, t, a) => {
151
      a && e.setAttribute(t, a);
152
    },
153
    K = (e, t) => {
154
      q(e, i, f(e, t.data_sizes)),
155
        q(e, r, f(e, t.data_srcset)),
156
        q(e, o, f(e, t.data_src));
157
    },
158
    Q = {
159
      IMG: (e, t) => {
160
        T(e, (e) => {
161
          j(e, V), K(e, t);
162
        }),
163
          j(e, V),
164
          K(e, t);
165
      },
166
      IFRAME: (e, t) => {
167
        j(e, D), q(e, o, f(e, t.data_src));
168
      },
169
      VIDEO: (e, t) => {
170
        G(e, (e) => {
171
          j(e, D), q(e, o, f(e, t.data_src));
172
        }),
173
          j(e, H),
174
          q(e, c, f(e, t.data_poster)),
175
          q(e, o, f(e, t.data_src)),
176
          e.load();
177
      },
178
      OBJECT: (e, t) => {
179
        j(e, F), q(e, _, f(e, t.data_src));
180
      },
181
    },
182
    W = ["IMG", "IFRAME", "VIDEO", "OBJECT"],
183
    X = (e, t) => {
184
      !t ||
185
        ((e) => e.loadingCount > 0)(t) ||
186
        ((e) => e.toLoadCount > 0)(t) ||
187
        w(e.callback_finish, t);
188
    },
189
    Y = (e, t, a) => {
190
      e.addEventListener(t, a), (e.llEvLisnrs[t] = a);
191
    },
192
    Z = (e, t, a) => {
193
      e.removeEventListener(t, a);
194
    },
195
    ee = (e) => !!e.llEvLisnrs,
196
    te = (e) => {
197
      if (!ee(e)) return;
198
      const t = e.llEvLisnrs;
199
      for (let a in t) {
200
        const s = t[a];
201
        Z(e, a, s);
202
      }
203
      delete e.llEvLisnrs;
204
    },
205
    ae = (e, t, a) => {
206
      ((e) => {
207
        delete e.llTempImage;
208
      })(e),
209
        z(a, -1),
210
        ((e) => {
211
          e && (e.toLoadCount -= 1);
212
        })(a),
213
        O(e, t.class_loading),
214
        t.unobserve_completed && M(e, a);
215
    },
216
    se = (e, t, a) => {
217
      const s = x(e) || e;
218
      ee(s) ||
219
        ((e, t, a) => {
220
          ee(e) || (e.llEvLisnrs = {});
221
          const s = "VIDEO" === e.tagName ? "loadeddata" : "load";
222
          Y(e, s, t), Y(e, "error", a);
223
        })(
224
          s,
225
          (n) => {
226
            ((e, t, a, s) => {
227
              const n = L(t);
228
              ae(t, a, s),
229
                C(t, a.class_loaded),
230
                I(t, g),
231
                w(a.callback_loaded, t, s),
232
                n || X(a, s);
233
            })(0, e, t, a),
234
              te(s);
235
          },
236
          (n) => {
237
            ((e, t, a, s) => {
238
              const n = L(t);
239
              ae(t, a, s),
240
                C(t, a.class_error),
241
                I(t, h),
242
                w(a.callback_error, t, s),
243
                a.restore_on_error && P(t, V),
244
                n || X(a, s);
245
            })(0, e, t, a),
246
              te(s);
247
          }
248
        );
249
    },
250
    ne = (e, t, s) => {
251
      ((e) => W.indexOf(e.tagName) > -1)(e)
252
        ? ((e, t, a) => {
253
            se(e, t, a),
254
              ((e, t, a) => {
255
                const s = Q[e.tagName];
256
                s && (s(e, t), $(e, t, a));
257
              })(e, t, a);
258
          })(e, t, s)
259
        : ((e, t, s) => {
260
            ((e) => {
261
              e.llTempImage = document.createElement("IMG");
262
            })(e),
263
              se(e, t, s),
264
              ((e) => {
265
                B(e) || (e[d] = { backgroundImage: e.style.backgroundImage });
266
              })(e),
267
              ((e, t, s) => {
268
                const n = f(e, t.data_bg),
269
                  l = f(e, t.data_bg_hidpi),
270
                  r = a && l ? l : n;
271
                r &&
272
                  ((e.style.backgroundImage = `url("${r}")`),
273
                  x(e).setAttribute(o, r),
274
                  $(e, t, s));
275
              })(e, t, s),
276
              ((e, t, s) => {
277
                const n = f(e, t.data_bg_multi),
278
                  l = f(e, t.data_bg_multi_hidpi),
279
                  o = a && l ? l : n;
280
                o && ((e.style.backgroundImage = o), U(e, t, s));
281
              })(e, t, s),
282
              ((e, t, a) => {
283
                const s = f(e, t.data_bg_set);
284
                if (!s) return;
285
                let n = s.split("|").map((e) => `image-set(${e})`);
286
                (e.style.backgroundImage = n.join()), U(e, t, a);
287
              })(e, t, s);
288
          })(e, t, s);
289
    },
290
    le = (e) => {
291
      e.removeAttribute(o), e.removeAttribute(r), e.removeAttribute(i);
292
    },
293
    oe = (e) => {
294
      T(e, (e) => {
295
        P(e, V);
296
      }),
297
        P(e, V);
298
    },
299
    re = {
300
      IMG: oe,
301
      IFRAME: (e) => {
302
        P(e, D);
303
      },
304
      VIDEO: (e) => {
305
        G(e, (e) => {
306
          P(e, D);
307
        }),
308
          P(e, H),
309
          e.load();
310
      },
311
      OBJECT: (e) => {
312
        P(e, F);
313
      },
314
    },
315
    ie = (e, t) => {
316
      ((e) => {
317
        const t = re[e.tagName];
318
        t
319
          ? t(e)
320
          : ((e) => {
321
              if (!B(e)) return;
322
              const t = J(e);
323
              e.style.backgroundImage = t.backgroundImage;
324
            })(e);
325
      })(e),
326
        ((e, t) => {
327
          A(e) ||
328
            L(e) ||
329
            (O(e, t.class_entered),
330
            O(e, t.class_exited),
331
            O(e, t.class_applied),
332
            O(e, t.class_loading),
333
            O(e, t.class_loaded),
334
            O(e, t.class_error));
335
        })(e, t),
336
        k(e),
337
        S(e);
338
    },
339
    ce = ["IMG", "IFRAME", "VIDEO"],
340
    de = (e) => e.use_native && "loading" in HTMLImageElement.prototype,
341
    _e = (e, t, a) => {
342
      e.forEach((e) =>
343
        ((e) => e.isIntersecting || e.intersectionRatio > 0)(e)
344
          ? ((e, t, a, s) => {
345
              const n = ((e) => y.indexOf(E(e)) >= 0)(e);
346
              I(e, "entered"),
347
                C(e, a.class_entered),
348
                O(e, a.class_exited),
349
                ((e, t, a) => {
350
                  t.unobserve_entered && M(e, a);
351
                })(e, a, s),
352
                w(a.callback_enter, e, t, s),
353
                n || ne(e, a, s);
354
            })(e.target, e, t, a)
355
          : ((e, t, a, s) => {
356
              A(e) ||
357
                (C(e, a.class_exited),
358
                ((e, t, a, s) => {
359
                  a.cancel_on_exit &&
360
                    ((e) => E(e) === u)(e) &&
361
                    "IMG" === e.tagName &&
362
                    (te(e),
363
                    ((e) => {
364
                      T(e, (e) => {
365
                        le(e);
366
                      }),
367
                        le(e);
368
                    })(e),
369
                    oe(e),
370
                    O(e, a.class_loading),
371
                    z(s, -1),
372
                    k(e),
373
                    w(a.callback_cancel, e, t, s));
374
                })(e, t, a, s),
375
                w(a.callback_exit, e, t, s));
376
            })(e.target, e, t, a)
377
      );
378
    },
379
    ue = (e) => Array.prototype.slice.call(e),
380
    ge = (e) => e.container.querySelectorAll(e.elements_selector),
381
    be = (e) => ((e) => E(e) === h)(e),
382
    he = (e, t) => ((e) => ue(e).filter(A))(e || ge(t)),
383
    me = function (t, a) {
384
      const s = n(t);
385
      (this._settings = s),
386
        (this.loadingCount = 0),
387
        ((e, t) => {
388
          de(e) ||
389
            (t._observer = new IntersectionObserver((a) => {
390
              _e(a, e, t);
391
            }, ((e) => ({ root: e.container === document ? null : e.container, rootMargin: e.thresholds || e.threshold + "px" }))(e)));
392
        })(s, this),
393
        ((t, a) => {
394
          e &&
395
            ((a._onlineHandler = () => {
396
              ((e, t) => {
397
                var a;
398
                ((a = ge(e)), ue(a).filter(be)).forEach((t) => {
399
                  O(t, e.class_error), k(t);
400
                }),
401
                  t.update();
402
              })(t, a);
403
            }),
404
            window.addEventListener("online", a._onlineHandler));
405
        })(s, this),
406
        this.update(a);
407
    };
408
  return (
409
    (me.prototype = {
410
      update: function (e) {
411
        const a = this._settings,
412
          s = he(e, a);
413
        var n, l;
414
        N(this, s.length),
415
          t
416
            ? this.loadAll(s)
417
            : de(a)
418
            ? ((e, t, a) => {
419
                e.forEach((e) => {
420
                  -1 !== ce.indexOf(e.tagName) &&
421
                    ((e, t, a) => {
422
                      e.setAttribute("loading", "lazy"),
423
                        se(e, t, a),
424
                        ((e, t) => {
425
                          const a = Q[e.tagName];
426
                          a && a(e, t);
427
                        })(e, t),
428
                        I(e, m);
429
                    })(e, t, a);
430
                }),
431
                  N(a, 0);
432
              })(s, a, this)
433
            : ((l = s),
434
              ((e) => {
435
                e.disconnect();
436
              })((n = this._observer)),
437
              ((e, t) => {
438
                t.forEach((t) => {
439
                  e.observe(t);
440
                });
441
              })(n, l));
442
      },
443
      destroy: function () {
444
        this._observer && this._observer.disconnect(),
445
          e && window.removeEventListener("online", this._onlineHandler),
446
          ge(this._settings).forEach((e) => {
447
            S(e);
448
          }),
449
          delete this._observer,
450
          delete this._settings,
451
          delete this._onlineHandler,
452
          delete this.loadingCount,
453
          delete this.toLoadCount;
454
      },
455
      loadAll: function (e) {
456
        const t = this._settings;
457
        he(e, t).forEach((e) => {
458
          M(e, this), ne(e, t, this);
459
        });
460
      },
461
      restoreAll: function () {
462
        const e = this._settings;
463
        ge(e).forEach((t) => {
464
          ie(t, e);
465
        });
466
      },
467
    }),
468
    (me.load = (e, t) => {
469
      const a = n(t);
470
      ne(e, a);
471
    }),
472
    (me.resetStatus = (e) => {
473
      k(e);
474
    }),
475
    e &&
476
      ((e, t) => {
477
        if (t)
478
          if (t.length) for (let a, s = 0; (a = t[s]); s += 1) l(e, a);
479
          else l(e, t);
480
      })(me, window.lazyLoadOptions),
481
    me
482
  );
483
})();