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, // 首页是否显示分类大图标按钮