Astro & Fuwari优化配置

Twikoo评论区 💬#

具体后端部署请参考 Twikoo 哦～我给相关代码添加了两个响应事件，解决了需要刷新一次才能显示的小问题呢！😊

新增编辑相关文件

1
<div id="tcomment"></div>
2

3
<script is:inline>
4
  window.twikooIsRun = false;
5

6
  function loadTwikoo() {
19 collapsed lines
7
    if (window.twikooIsRun) return;
8
    const commentsContainer = document.getElementById("tcomment");
9
    if (commentsContainer) {
10
      const script = document.createElement("script");
11
      script.src =
12
        "https://registry.npmmirror.com/twikoo/1.6.44/files/dist/twikoo.min.js";
13
      script.onload = () => {
14
        const initScript = document.createElement("script");
15
        initScript.innerHTML = `
16
            twikoo.init({
17
                envId: 'https://xxx',
18
                el: '#tcomment',
19
            });
20
        `;
21
        document.body.appendChild(initScript);
22
        window.twikooIsRun = true;
23
      };
24
      document.body.appendChild(script);
25
    }
26
  }
27
  document.addEventListener("astro:page-load", loadTwikoo);
28
  document.addEventListener("DOMContentLoaded", loadTwikoo);
29
</script>

添加到喜欢的位置，比如我底部的评论区就很合适呀～

1
---
2
import Comment from "@components/Comment.astro";
3
---
4
...
5
<Markdown class="mb-6 markdown-content onload-animation">
6
  <Content />
7
</Markdown>
8
{
8 collapsed lines
9
  licenseConfig.enable && (
10
    <License
11
      title={entry.data.title}
12
      slug={entry.slug}
13
      pubDate={entry.data.published}
14
      class="mb-6 rounded-xl license-container onload-animation"
15
    />
16
  )
17
}
18

19
<Comment />

底部计时功能 ⏳#

实时显示本站运行时长哦～是不是很贴心！💕

添加配置项

1
export type SiteConfig = {
2
  date: Date
3
};

1
export const siteConfig: SiteConfig = {
2
  date: new Date('2020-04-15 00:00:00')
3
};

需要新增以下文件

1
<script>
2
import { siteConfig } from '@/config';
3

4
let days, hours, minutes, seconds;
5

6
function updateEstablishedTime() {
7 collapsed lines
7
  var now = new Date();
8
  var difference = now.getTime() - siteConfig.date.getTime();
9
  days = Math.floor(difference / (1000 * 60 * 60 * 24));
10
  hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
11
  minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
12
  seconds = Math.floor((difference % (1000 * 60)) / 1000);
13
  setTimeout(updateEstablishedTime, 1000);
14
}
15

16
updateEstablishedTime();
17
</script>
18

19
<span>
20
  本站已稳定运行 {days} 天 {hours} 小时 {minutes} 分钟 {seconds} 秒
21
</span>

在网站底部引用相关文件就好啦～

1
---
2
import { Icon } from "astro-icon/components";
3
import RunningTime from "./RunningTime.svelte";
4
---
5
<div class="transition text-50 text-sm text-center">
3 collapsed lines
6
  &copy; <span id="copyright-year">{currentYear}</span> {profileConfig.name}. All Rights Reserved. /
7
  <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> /
8
  <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a><br>
9
  <div class="flex items-center justify-center gap-1"><Icon name='fa6-solid:heart' class="text-[0.8rem] text-red-500 animate-pulse"></Icon><RunningTiclient:load /></div>
3 collapsed lines
10
  Powered by
11
  <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
12
  <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a>
13
</div>