From 9246c8d7f8ec19965afa724dd9955e3047f3d745 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sun, 4 Jun 2023 15:41:04 +0800 Subject: [PATCH] remove gitalk valine mermaid --- blog.config.js | 11 +++- components/Gitalk.js | 50 ++++++++++++----- components/NotionPage.js | 2 +- components/PrismMac.js | 7 ++- components/Valine.js | 3 -- components/ValineComponent.js | 92 ++++++++++++++++++-------------- package.json | 5 +- themes/hexo/components/Header.js | 3 +- themes/hexo/config_hexo.js | 1 + 9 files changed, 110 insertions(+), 64 deletions(-) delete mode 100644 components/Valine.js diff --git a/blog.config.js b/blog.config.js index 2178eaa2..300f3ff6 100644 --- a/blog.config.js +++ b/blog.config.js @@ -12,6 +12,9 @@ const BLOG = { APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式 APPEARANCE_DARK_TIME: process.env.NEXT_PUBLIC_APPEARANCE_DARK_TIME || [18, 6], // 夜间模式起至时间，false时关闭根据时间自动切换夜间模式 + // 3.14.1版本后，欢迎语在此配置，英文逗号隔开 , 即可支持多个欢迎语打字效果。 + GREETING_WORDS: process.env.NEXT_PUBLIC_GREETING_WORDS || 'Hi，我是一个程序员, Hi，我是一个打工人,Hi，我是一个干饭人,欢迎来到我的博客🎉', + CUSTOM_MENU: process.env.NEXT_PUBLIC_CUSTOM_MENU || false, // 支持Menu 类型，从3.12.0版本起，各主题将逐步支持灵活的二级菜单配置，替代了原来的Page类型，此配置是试验功能、默认关闭。 AUTHOR: process.env.NEXT_PUBLIC_AUTHOR || 'NotionNext', // 您的昵称 例如 tangly1024 @@ -95,6 +98,9 @@ const BLOG = { CODE_MAC_BAR: true, // 代码左上角显示mac的红黄绿图标 CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号 + // Mermaid 图表CDN + MERMAID_CDN: process.env.NEXT_PUBLIC_MERMAID_CDN || 'https://cdn.jsdelivr.net/npm/mermaid@10.2.2/dist/mermaid.min.js', // CDN + BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc BACKGROUND_DARK: '#000000', // use hex value, don't forget '#' SUB_PATH: '', // leave this empty unless you want to deploy in a folder @@ -231,11 +237,14 @@ const BLOG = { COMMENT_GITALK_CLIENT_SECRET: process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET || '', // e.g 40位ID， 在gitalk后台获取 COMMENT_GITALK_DISTRACTION_FREE_MODE: false, // 类似facebook的无干扰模式 + COMMENT_GITALK_JS_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_GITALK_JS_CDN_URL || 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', // gitalk客户端 js cdn + COMMENT_GITALK_CSS_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_GITALK_CSS_CDN_URL || 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css', // gitalk客户端 css cdn COMMENT_GITTER_ROOM: process.env.NEXT_PUBLIC_COMMENT_GITTER_ROOM || '', // gitter聊天室 see https://gitter.im/ 不需要则留空 COMMENT_DAO_VOICE_ID: process.env.NEXT_PUBLIC_COMMENT_DAO_VOICE_ID || '', // DaoVoice http://dashboard.daovoice.io/get-started COMMENT_TIDIO_ID: process.env.NEXT_PUBLIC_COMMENT_TIDIO_ID || '', // [tidio_id] -> //code.tidio.co/[tidio_id].js + COMMENT_VALINE_CDN: process.env.NEXT_PUBLIC_VALINE_CDN || 'https://unpkg.com/valine@1.5.1/dist/Valine.min.js', COMMENT_VALINE_APP_ID: process.env.NEXT_PUBLIC_VALINE_ID || '', // Valine @see https://valine.js.org/quickstart.html 或 https://github.com/stonehank/react-valine#%E8%8E%B7%E5%8F%96app-id-%E5%92%8C-app-key COMMENT_VALINE_APP_KEY: process.env.NEXT_PUBLIC_VALINE_KEY || '', COMMENT_VALINE_SERVER_URLS: process.env.NEXT_PUBLIC_VALINE_SERVER_URLS || '', // 该配置适用于国内自定义域名用户, 海外版本会自动检测(无需手动填写) @see https://valine.js.org/configuration.html#serverURLs @@ -314,7 +323,7 @@ const BLOG = { // 作废配置 AVATAR: process.env.NEXT_PUBLIC_AVATAR || '/avatar.svg', // 作者头像，被notion中的ICON覆盖。若无ICON则取public目录下的avatar.png - TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖 + TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖；此处请勿留空白，否则服务器无法编译 HOME_BANNER_IMAGE: process.env.NEXT_PUBLIC_HOME_BANNER_IMAGE || './bg_image.jpg', // 首页背景大图, 会被notion中的封面图覆盖，若无封面图则会使用代码中的 /public/bg_image.jpg 文件 DESCRIPTION: diff --git a/components/Gitalk.js b/components/Gitalk.js index 66b30174..166eb8c7 100644 --- a/components/Gitalk.js +++ b/components/Gitalk.js @@ -1,18 +1,44 @@ -import 'gitalk/dist/gitalk.css' +// import 'gitalk/dist/gitalk.css' import BLOG from '@/blog.config' -import GitalkComponent from 'gitalk/dist/gitalk-component' +import { loadExternalResource } from '@/lib/utils' +import { useEffect } from 'react' +// import GitalkComponent from 'gitalk/dist/gitalk-component' const Gitalk = ({ frontMatter }) => { - return + // return + const loadGitalk = async() => { + const css = await loadExternalResource(BLOG.COMMENT_GITALK_CSS_CDN_URL, 'css') + const js = await loadExternalResource(BLOG.COMMENT_GITALK_JS_CDN_URL, 'js') + + console.log('gitalk 加载成功', css, js) + const Gitalk = window.Gitalk + + const gitalk = new Gitalk({ + clientID: BLOG.COMMENT_GITALK_CLIENT_ID, + clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET, + repo: BLOG.COMMENT_GITALK_REPO, + owner: BLOG.COMMENT_GITALK_OWNER, + admin: BLOG.COMMENT_GITALK_ADMIN.split(','), + id: frontMatter.id, // Ensure uniqueness and length less than 50 + distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE) // Facebook-like distraction free mode + }) + + gitalk.render('gitalk-container') + } + useEffect(() => { + loadGitalk() + }, []) + + return
} export default Gitalk diff --git a/components/NotionPage.js b/components/NotionPage.js index c2466e03..63d57861 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -13,7 +13,7 @@ const Equation = dynamic(() => // 化学方程式 await import('@/lib/mhchem') return m.Equation - }) + }), { ssr: false } ) const Pdf = dynamic( () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf), diff --git a/components/PrismMac.js b/components/PrismMac.js index 0350fa60..8a4a4c51 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -64,8 +64,11 @@ const renderMermaid = async() => { } } if (needLoad) { - const asyncMermaid = await import('mermaid') - asyncMermaid.default.contentLoaded() + // const asyncMermaid = await import('mermaid') + const url = await loadExternalResource(BLOG.MERMAID_CDN, 'js') + const mermaid = window.mermaid + console.log('mermaid加载成功', url, mermaid) + mermaid.contentLoaded() } } } diff --git a/components/Valine.js b/components/Valine.js deleted file mode 100644 index c1e915db..00000000 --- a/components/Valine.js +++ /dev/null @@ -1,3 +0,0 @@ -import { Valine } from 'react-valine' - -export default Valine diff --git a/components/ValineComponent.js b/components/ValineComponent.js index 6df63e7c..359cff6d 100644 --- a/components/ValineComponent.js +++ b/components/ValineComponent.js @@ -1,49 +1,61 @@ import BLOG from '@/blog.config' -import { useRouter } from 'next/router' -import React from 'react' -import Valine from 'valine' +import { loadExternalResource } from '@/lib/utils' +import { useEffect } from 'react' -const ValineComponent = (props) => { - const router = useRouter() - const initValine = (url) => { - const valine = new Valine({ - el: '#v-comments', - appId: BLOG.COMMENT_VALINE_APP_ID, - appKey: BLOG.COMMENT_VALINE_APP_KEY, - avatar: '', - path: url || router.asPath, - recordIP: true, - placeholder: BLOG.COMMENT_VALINE_PLACEHOLDER, - serverURLs: BLOG.COMMENT_VALINE_SERVER_URLS, - visitor: true - }) - if (!valine) { - console.error('valine错误') +const ValineComponent = ({ path }) => { + const loadValine = async () => { + try { + const url = await loadExternalResource(BLOG.COMMENT_VALINE_CDN, 'js') + console.log('valine 加载成功', url) + const Valine = window.Valine + // eslint-disable-next-line no-unused-vars + const valine = new Valine({ + el: '#valine', // 容器元素 + lang: BLOG.LANG, // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js + appId: BLOG.COMMENT_VALINE_APP_ID, + appKey: BLOG.COMMENT_VALINE_APP_KEY, + avatar: '', + path, + recordIP: true, + placeholder: BLOG.COMMENT_VALINE_PLACEHOLDER, + serverURLs: BLOG.COMMENT_VALINE_SERVER_URLS, + visitor: true + }) + console.log('初始化valine成功') + } catch (error) { + console.error('twikoo 加载失败', error) } } - const updateValine = url => { - // 移除旧的评论区，否则会重复渲染。 - const wrapper = document.getElementById('v-wrapper') - const comments = document.getElementById('v-comments') - wrapper.removeChild(comments) - const newComments = document.createElement('div') - newComments.id = 'v-comments' - newComments.name = new Date() - wrapper.appendChild(newComments) - initValine(url) - } - - React.useEffect(() => { - initValine() - router.events.on('routeChangeComplete', updateValine) - return () => { - router.events.off('routeChangeComplete', updateValine) - } + useEffect(() => { + loadValine() }, []) - return
-
-
+ + return
+ + // const updateValine = url => { + // // 移除旧的评论区，否则会重复渲染。 + // const wrapper = document.getElementById('v-wrapper') + // const comments = document.getElementById('v-comments') + // wrapper.removeChild(comments) + // const newComments = document.createElement('div') + // newComments.id = 'v-comments' + // newComments.name = new Date() + // wrapper.appendChild(newComments) + // initValine(url) + // } + + // useEffect(() => { + // initValine() + // router.events.on('routeChangeComplete', updateValine) + // return () => { + // router.events.off('routeChangeComplete', updateValine) + // } + // }, []) + +// return
+//
+//
} export default ValineComponent diff --git a/package.json b/package.json index 50363485..c0f5452d 100644 --- a/package.json +++ b/package.json @@ -30,13 +30,11 @@ "copy-to-clipboard": "^3.3.1", "eslint-plugin-react-hooks": "^4.6.0", "feed": "^4.2.2", - "gitalk": "^1.7.2", "js-md5": "^0.7.3", "localStorage": "^1.0.4", "lodash.throttle": "^4.1.1", "mark.js": "^8.11.1", "memory-cache": "^0.2.0", - "mermaid": "9.2.2", "mongodb": "^4.6.0", "next": "13.3.1", "notion-client": "6.15.6", @@ -56,8 +54,7 @@ "react-tweet-embed": "~2.0.0", "smoothscroll-polyfill": "^0.4.4", "typed.js": "^2.0.12", - "use-ackee": "^3.0.0", - "valine": "^1.4.18" + "use-ackee": "^3.0.0" }, "devDependencies": { "@waline/client": "^2.5.1", diff --git a/themes/hexo/components/Header.js b/themes/hexo/components/Header.js index c3374413..e72a931a 100644 --- a/themes/hexo/components/Header.js +++ b/themes/hexo/components/Header.js @@ -5,6 +5,7 @@ import CONFIG_HEXO from '../config_hexo' import NavButtonGroup from './NavButtonGroup' import throttle from 'lodash.throttle' import { useGlobal } from '@/lib/global' +import BLOG from '@/blog.config' let wrapperTop = 0 let windowTop = 0 @@ -25,7 +26,7 @@ const Header = props => { if (!typed && window && document.getElementById('typed')) { changeType( new Typed('#typed', { - strings: CONFIG_HEXO.HOME_BANNER_GREETINGS, + strings: BLOG.GREETING_WORDS.split(','), typeSpeed: 200, backSpeed: 100, backDelay: 400, diff --git a/themes/hexo/config_hexo.js b/themes/hexo/config_hexo.js index ded4489f..29ce7110 100644 --- a/themes/hexo/config_hexo.js +++ b/themes/hexo/config_hexo.js @@ -1,5 +1,6 @@ const CONFIG_HEXO = { HOME_BANNER_ENABLE: true, + // 3.14.1以后的版本中，欢迎语在blog.config.js中配置，用英文逗号','隔开多个。 HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字 HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮