refactor: refactoring twikoo components
This commit is contained in:
Guoqi Sun
parent
55f81243b2
commit
085175509b
8 changed files with 1983 additions and 84 deletions
|
|
@ -28,8 +28,8 @@ A minimalism, personal blog theme for Astro.
|
||||||
- [x] 📰 RSS feed & sitemap support
|
- [x] 📰 RSS feed & sitemap support
|
||||||
- [x] 🛠️ Google analysis integration
|
- [x] 🛠️ Google analysis integration
|
||||||
- [x] 💬 Commenting Integration (Twikoo)
|
- [x] 💬 Commenting Integration (Twikoo)
|
||||||
|
- [x] 🎨 Enhance Transition and Animation
|
||||||
- [ ] 🔍 Local search functionality
|
- [ ] 🔍 Local search functionality
|
||||||
- [ ] 🎨 Enhance Transition and Animation
|
|
||||||
- [ ] ...and more
|
- [ ] ...and more
|
||||||
|
|
||||||
## Quick Start
|
## Quick Start
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,6 @@
|
||||||
---
|
---
|
||||||
import Twikoo from "~/components/react/comment/twikoo.tsx"
|
import Twikoo from "~/components/astro/twikoo.astro"
|
||||||
import { common } from "~/config"
|
import { common } from "~/config"
|
||||||
import "~/styles/comment.css"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{
|
{common.comments.enabled && common.comments.twikoo.enabled && <Twikoo />}
|
||||||
common.comments.enabled && common.comments.twikoo.enabled && (
|
|
||||||
<Twikoo client:only="react" />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
|
||||||
23
src/components/astro/twikoo.astro
Normal file
23
src/components/astro/twikoo.astro
Normal 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>
|
||||||
|
|
@ -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
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { NoiseBackground } from "~/components/react/noise-background"
|
||||||
import { getLangFromUrl } from "~/i18n/utils"
|
import { getLangFromUrl } from "~/i18n/utils"
|
||||||
import { GoogleAnalytics } from "astro-google-analytics"
|
import { GoogleAnalytics } from "astro-google-analytics"
|
||||||
import { en, zh } from "~/config"
|
import { en, zh } from "~/config"
|
||||||
|
import { ClientRouter } from "astro:transitions"
|
||||||
|
|
||||||
const lang = getLangFromUrl(Astro.url)
|
const lang = getLangFromUrl(Astro.url)
|
||||||
|
|
||||||
|
|
@ -88,6 +89,7 @@ const config = lang === "zh" ? zh : en
|
||||||
<GoogleAnalytics id={config.googleAnalyticsId} />
|
<GoogleAnalytics id={config.googleAnalyticsId} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
<ClientRouter />
|
||||||
</head>
|
</head>
|
||||||
<body
|
<body
|
||||||
class="flex min-h-screen w-full justify-center px-6 dark:bg-[#121212] dark:text-white md:px-0"
|
class="flex min-h-screen w-full justify-center px-6 dark:bg-[#121212] dark:text-white md:px-0"
|
||||||
|
|
|
||||||
|
|
@ -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
1954
src/styles/twikoo.css
Normal file
File diff suppressed because it is too large
Load diff
1
src/types/twikoo.d.ts
vendored
Normal file
1
src/types/twikoo.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
declare module "twikoo"
|
||||||
Loading…
Add table
Reference in a new issue