l/wrath
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: refactoring twikoo components

Browse source
This commit is contained in:
Guoqi Sun 2025-01-13 05:01:38 +08:00
parent 55f81243b2
commit 085175509b
8 changed files with 1983 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -28,8 +28,8 @@ A minimalism, personal blog theme for Astro.
- [x] 📰 RSS feed & sitemap support
- [x] 🛠️ Google analysis integration
- [x] 💬 Commenting Integration (Twikoo)
- [x] 🎨 Enhance Transition and Animation
- [ ] 🔍 Local search functionality
- [ ] 🎨 Enhance Transition and Animation
- [ ] ...and more
## Quick Start

9
src/components/astro/comments.astro
View file

@ -1,11 +1,6 @@
---
import Twikoo from "~/components/react/comment/twikoo.tsx"
import Twikoo from "~/components/astro/twikoo.astro"
import { common } from "~/config"
import "~/styles/comment.css"
---
{
common.comments.enabled && common.comments.twikoo.enabled && (
<Twikoo client:only="react" />
)
}
{common.comments.enabled && common.comments.twikoo.enabled && <Twikoo />}

23
src/components/astro/twikoo.astro Normal file
View file

@ -0,0 +1,23 @@
<div id="tcomment"></div>
<script>
import twikoo from "twikoo"
import { common, defaultLanguage } from "~/config"
import "~/styles/twikoo.css"
function initTwikoo() {
twikoo({
envId: common.comments.twikoo.envId,
el: "#tcomment",
lang: defaultLanguage === "zh" ? "zh-CN" : "en-GB",
}).then(() => {
console.log("comment loading success")
})
}
initTwikoo()
document.addEventListener("astro:page-load", () => {
initTwikoo()
})
</script>

20
src/components/react/comment/twikoo.tsx
View file

@ -1,20 +0,0 @@
import { useEffect } from "react"
// @ts-ignore
import twikoo from "twikoo"
import { common, defaultLanguage } from "~/config"
const Twikoo = () => {
useEffect(() => {
twikoo({
envId: common.comments.twikoo.envId,
el: "#tcomment",
lang: defaultLanguage === "zh" ? "zh-CN" : "en-GB",
}).then(() => {
console.log("comment loading success")
})
}, [])
return <div id="tcomment" />
}
export default Twikoo

2
src/layouts/base.astro
View file

@ -4,6 +4,7 @@ import { NoiseBackground } from "~/components/react/noise-background"
import { getLangFromUrl } from "~/i18n/utils"
import { GoogleAnalytics } from "astro-google-analytics"
import { en, zh } from "~/config"
import { ClientRouter } from "astro:transitions"
const lang = getLangFromUrl(Astro.url)
@ -88,6 +89,7 @@ const config = lang === "zh" ? zh : en
<GoogleAnalytics id={config.googleAnalyticsId} />
)
}
<ClientRouter />
</head>
<body
class="flex min-h-screen w-full justify-center px-6 dark:bg-[#121212] dark:text-white md:px-0"

56
src/styles/comment.css
View file

@ -1,56 +0,0 @@
/* comments container */
.tk-comments-container {
margin-top: 50px !important;
}
/* avatar*/
.tk-avatar {
background-color: transparent !important;
}
.tk-avatar-img {
border-radius: 50% !important;
}
/* comment margin */
.tk-comment {
margin-top: 36px !important;
}
/* comment content */
.tk-main .tk-content {
border-radius: 10px !important;
padding: 10px !important;
background-color: rgba(144, 147, 153, 0.1) !important;
}
/* PC 端宽度调整 */
@media screen and (min-width: 768px) {
.tk-main .tk-content {
max-width: 60% !important;
}
}
/* comment content image */
.tk-main .tk-content > span > p {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
.tk-main .tk-content {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
.tk-main .tk-content > span > p > img {
border-radius: 20px !important;
}
.tk-extras {
margin-top: 5px !important;
}

1954
src/styles/twikoo.css Normal file
View file

File diff suppressed because it is too large Load diff

1
src/types/twikoo.d.ts vendored Normal file
View file

@ -0,0 +1 @@
declare module "twikoo"