81 lines
2.2 KiB
Vue
81 lines
2.2 KiB
Vue
<template>
|
|
<div id="comment-container"></div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, toRefs, onMounted } from 'vue'
|
|
import { useData } from 'vitepress'
|
|
import md5 from 'blueimp-md5'
|
|
import $ from 'jquery'
|
|
import { Message } from '@arco-design/web-vue'
|
|
import '@arco-design/web-vue/es/message/style/css.js'
|
|
import Gitalk from 'gitalk'
|
|
import '../styles/gitalk.css'
|
|
|
|
// 定义属性
|
|
const props = defineProps({
|
|
commentConfig: Object
|
|
})
|
|
|
|
const data = reactive({
|
|
type: props.commentConfig?.type ?? 'gitalk'
|
|
})
|
|
const { type } = toRefs(data)
|
|
|
|
// 初始化评论组件配置
|
|
const { page } = useData()
|
|
let gitalk
|
|
if (type.value && type.value == 'gitalk') {
|
|
gitalk = new Gitalk({
|
|
clientID: '1de126ce1fbdbe049709',
|
|
clientSecret: '035fe49874a43e5cefc28a99b7e40b1925319c62',
|
|
repo: 'charles7c.github.io',
|
|
owner: 'Charles7c',
|
|
admin: ['Charles7c'],
|
|
id: md5(page.value.relativePath),
|
|
language: 'zh-CN',
|
|
distractionFreeMode: false,
|
|
// 默认: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
|
|
proxy: 'https://cors-server-charles7c.vercel.app/github_access_token'
|
|
})
|
|
}
|
|
|
|
// 渲染评论组件
|
|
onMounted(() => {
|
|
if (type.value && type.value == 'gitalk') {
|
|
gitalk.render('comment-container')
|
|
|
|
// 如果点赞，先判断有没有登录
|
|
let $gc = $('#comment-container');
|
|
$gc.on('click', '.gt-comment-like', function () {
|
|
if (!window.localStorage.getItem('GT_ACCESS_TOKEN')) {
|
|
Message.warning({
|
|
content:'点赞前，请您先进行登录',
|
|
closable: true
|
|
})
|
|
|
|
return false
|
|
}
|
|
return true
|
|
})
|
|
// 提交评论后输入框高度没有重置bug
|
|
$gc.on('click', '.gt-header-controls .gt-btn-public', function () {
|
|
let $gt = $('.gt-header-textarea')
|
|
$gt.css('height', '72px')
|
|
})
|
|
// 点击预览时，隐藏评论按钮
|
|
$gc.on('click', '.gt-header-controls .gt-btn-preview', function () {
|
|
let pl = $('.gt-header-controls .gt-btn-public');
|
|
if (pl.hasClass('hide')) {
|
|
pl.removeClass('hide')
|
|
} else {
|
|
// 隐藏
|
|
pl.addClass('hide')
|
|
}
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style> |