修复: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

@@ -12,7 +12,7 @@ const articleData = await Promise.all(
const { data, path } = file const { data, path } = file
return { return {
...data, ...data,
path: path.replace(/\.md$/, '.html').replace('./repos/', '') path: path.replace(/\.md$/, '.html').replace('./docs/', '')
} }
}) })
) )

View File

@@ -46,17 +46,6 @@ export const themeConfig: DefaultTheme.Config = {
// 自定义扩展: 评论配置 // 自定义扩展: 评论配置
commentConfig: { commentConfig: {
type: 'gitalk', type: 'gitalk',
options: {
clientID: '1de126ce1fbdbe049709',
clientSecret: '035fe49874a43e5cefc28a99b7e40b1925319c62',
repo: 'charles7c.github.io-comments',
owner: 'Charles7c',
admin: ['Charles7c'],
language: 'zh-CN',
distractionFreeMode: false,
// 默认: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
proxy: 'https://cors-server-ecru.vercel.app/github_access_token'
},
showComment: true // 是否显示评论 showComment: true // 是否显示评论
} }
} }

View File

@@ -13,8 +13,6 @@
import DefaultTheme from 'vitepress/theme' import DefaultTheme from 'vitepress/theme'
import { useData } from 'vitepress' import { useData } from 'vitepress'
import md5 from 'blueimp-md5' import md5 from 'blueimp-md5'
import Comment from './components/Comment.vue'
import Footer from './components/Footer.vue'
const { Layout } = DefaultTheme const { Layout } = DefaultTheme
const { page, theme, frontmatter } = useData() const { page, theme, frontmatter } = useData()

View File

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

View File

@@ -6,6 +6,9 @@
import { reactive, toRefs, onMounted } from 'vue' import { reactive, toRefs, onMounted } from 'vue'
import { useData } from 'vitepress' import { useData } from 'vitepress'
import md5 from 'blueimp-md5' 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 Gitalk from 'gitalk'
import '../styles/gitalk.css' import '../styles/gitalk.css'
@@ -15,25 +18,25 @@ const props = defineProps({
}) })
const data = reactive({ const data = reactive({
type: props.commentConfig?.type ?? 'gitalk', type: props.commentConfig?.type ?? 'gitalk'
options: props.commentConfig?.options ?? {}
}) })
const { type, options } = toRefs(data) const { type } = toRefs(data)
// 初始化评论组件配置 // 初始化评论组件配置
const { page } = useData() const { page } = useData()
let gitalk let gitalk
if (type.value && type.value == 'gitalk') { if (type.value && type.value == 'gitalk') {
gitalk = new Gitalk({ gitalk = new Gitalk({
clientID: options.value.clientID, clientID: '1de126ce1fbdbe049709',
clientSecret: options.value.clientSecret, clientSecret: '035fe49874a43e5cefc28a99b7e40b1925319c62',
repo: options.value.repo, repo: 'charles7c.github.io',
owner: options.value.owner, owner: 'Charles7c',
admin: options.value.admin, admin: ['Charles7c'],
id: md5(page.value.relativePath), id: md5(page.value.relativePath),
language: options.value.language, language: 'zh-CN',
distractionFreeMode: options.value.distractionFreeMode, distractionFreeMode: false,
proxy: options.value.pagerDirection // 默认: 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(() => { onMounted(() => {
if (type.value && type.value == 'gitalk') { if (type.value && type.value == 'gitalk') {
gitalk.render('comment-container') 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> </script>

View File

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

View File

@@ -1,15 +1,11 @@
import DefaultTheme from 'vitepress/theme' import DefaultTheme from 'vitepress/theme'
import MyLayout from "./MyLayout.vue" import MyLayout from './MyLayout.vue'
import './styles/vars.css' import './styles/vars.css'
import './styles/custom.css' import './styles/custom.css'
import ArticleMetadata from './components/ArticleMetadata.vue'
import WordCloud from './components/WordCloud.vue'
export default { export default {
...DefaultTheme, ...DefaultTheme,
Layout: MyLayout, Layout: MyLayout,
enhanceApp({ app }) { enhanceApp({ app }) {
app.component('ArticleMetadata', ArticleMetadata)
app.component('WordCloud', WordCloud)
} }
} }

View File

@@ -4,7 +4,7 @@ import { ArcoResolver } from 'unplugin-vue-components/resolvers'
export default { export default {
plugins: [ plugins: [
Components({ Components({
dirs: ['.vitepress/theme/components/dynamic'], dirs: ['.vitepress/theme/components'],
include: [/\.vue$/, /\.md$/], include: [/\.vue$/, /\.md$/],
resolvers: [ArcoResolver({ sideEffect: true, resolveIcons: true })] resolvers: [ArcoResolver({ sideEffect: true, resolveIcons: true })]
}) })

View File

@@ -11,19 +11,20 @@
"serve": "vitepress serve docs" "serve": "vitepress serve docs"
}, },
"devDependencies": { "devDependencies": {
"unplugin-vue-components": "0.22.0",
"vitepress": "^1.0.0-alpha.4",
"vue": "^3.2.37"
},
"dependencies": {
"@antv/g2plot": "^2.4.20", "@antv/g2plot": "^2.4.20",
"@arco-design/web-vue": "^2.35.0", "@arco-design/web-vue": "^2.35.0",
"@pureadmin/utils": "^0.0.33", "@pureadmin/utils": "^0.0.33",
"blueimp-md5": "^2.19.0", "blueimp-md5": "^2.19.0",
"dayjs": "^1.11.4", "dayjs": "^1.11.4",
"fast-glob": "^3.2.11", "fast-glob": "^3.2.11",
"gitalk": "^1.7.2",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"unplugin-vue-components": "0.22.0", "jquery": "^3.6.0"
"vitepress": "^1.0.0-alpha.4",
"vue": "^3.2.37"
},
"dependencies": {
"gitalk": "^1.7.2"
}, },
"keywords": [ "keywords": [
"blog", "blog",

View File

@@ -1431,6 +1431,11 @@ is-weakref@^1.0.2:
dependencies: dependencies:
call-bind "^1.0.2" call-bind "^1.0.2"
jquery@^3.6.0:
version "3.6.0"
resolved "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
"js-tokens@^3.0.0 || ^4.0.0": "js-tokens@^3.0.0 || ^4.0.0":
version "4.0.0" version "4.0.0"
resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"