修复:Gitalk登录报错的问题

This commit is contained in:
2022-08-14 13:14:36 +08:00
parent abd80c6b77
commit fdad66d197
10 changed files with 62 additions and 41 deletions

View File

@@ -81,8 +81,8 @@
<script lang="ts" setup>
import { computed, watchEffect } from 'vue'
import { useRouter } from 'vitepress'
import articleData from '../../../../../article-data.json'
import { formatDate, getQueryParam } from '../../utils.ts'
import articleData from '../../../../article-data.json'
import { formatDate, getQueryParam } from '../utils.ts'
const router = useRouter()

View File

@@ -6,6 +6,9 @@
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'
@@ -15,25 +18,25 @@ const props = defineProps({
})
const data = reactive({
type: props.commentConfig?.type ?? 'gitalk',
options: props.commentConfig?.options ?? {}
type: props.commentConfig?.type ?? 'gitalk'
})
const { type, options } = toRefs(data)
const { type } = toRefs(data)
// 初始化评论组件配置
const { page } = useData()
let gitalk
if (type.value && type.value == 'gitalk') {
gitalk = new Gitalk({
clientID: options.value.clientID,
clientSecret: options.value.clientSecret,
repo: options.value.repo,
owner: options.value.owner,
admin: options.value.admin,
clientID: '1de126ce1fbdbe049709',
clientSecret: '035fe49874a43e5cefc28a99b7e40b1925319c62',
repo: 'charles7c.github.io',
owner: 'Charles7c',
admin: ['Charles7c'],
id: md5(page.value.relativePath),
language: options.value.language,
distractionFreeMode: options.value.distractionFreeMode,
proxy: options.value.pagerDirection
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'
})
}
@@ -41,6 +44,35 @@ if (type.value && type.value == 'gitalk') {
onMounted(() => {
if (type.value && type.value == 'gitalk') {
gitalk.render('comment-container')
// 如果点赞,先判断有没有登录
let $gc = $('#comment-container');
$gc.on('click', '.gt-comment-like', function () {
if (!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>

View File

@@ -60,8 +60,8 @@
<script lang="ts" setup>
import { computed, ref, onMounted } from 'vue'
import md5 from 'blueimp-md5'
import articleData from '../../../../../article-data.json'
import { formatDate, getQueryParam } from '../../utils.ts'
import articleData from '../../../../article-data.json'
import { formatDate, getQueryParam } from '../utils.ts'
const tags = computed(() => initTags(articleData))
/**