62 lines
1.8 KiB
Vue
62 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { siteConfig } from '~/config/site'
|
|
|
|
const colorMode = useColorMode()
|
|
const container = ref<HTMLElement>()
|
|
const isEnabled = computed(() =>
|
|
Boolean(
|
|
siteConfig.giscus.repo
|
|
&& siteConfig.giscus.repoId
|
|
&& siteConfig.giscus.category
|
|
&& siteConfig.giscus.categoryId
|
|
)
|
|
)
|
|
|
|
function loadGiscus() {
|
|
if (!container.value) return
|
|
container.value.innerHTML = ''
|
|
|
|
const script = document.createElement('script')
|
|
script.src = 'https://giscus.app/client.js'
|
|
script.setAttribute('data-repo', siteConfig.giscus.repo)
|
|
script.setAttribute('data-repo-id', siteConfig.giscus.repoId)
|
|
script.setAttribute('data-category', siteConfig.giscus.category)
|
|
script.setAttribute('data-category-id', siteConfig.giscus.categoryId)
|
|
script.setAttribute('data-mapping', 'pathname')
|
|
script.setAttribute('data-strict', '0')
|
|
script.setAttribute('data-reactions-enabled', '1')
|
|
script.setAttribute('data-emit-metadata', '0')
|
|
script.setAttribute('data-input-position', 'bottom')
|
|
script.setAttribute('data-theme', colorMode.value === 'dark' ? 'dark' : 'light')
|
|
script.setAttribute('data-lang', 'zh-CN')
|
|
script.setAttribute('data-loading', 'lazy')
|
|
script.setAttribute('crossorigin', 'anonymous')
|
|
script.async = true
|
|
|
|
container.value.appendChild(script)
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (isEnabled.value) loadGiscus()
|
|
})
|
|
|
|
watch(() => colorMode.value, () => {
|
|
if (!isEnabled.value) return
|
|
|
|
const frame = document.querySelector<HTMLIFrameElement>('iframe.giscus-frame')
|
|
if (frame?.contentWindow) {
|
|
frame.contentWindow.postMessage(
|
|
{ giscus: { setConfig: { theme: colorMode.value === 'dark' ? 'dark' : 'light' } } },
|
|
'https://giscus.app'
|
|
)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="isEnabled">
|
|
<h2 class="text-xl font-semibold mb-4">评论</h2>
|
|
<div ref="container" />
|
|
</div>
|
|
</template>
|