Skip to content

Commit 8099488

Browse files
keniushadukeniushadu
authored
Merge branch 'tangly1024:main' into main
2 parents 47ac723 + 1238c0e commit 8099488

28 files changed

+390
-250
lines changed

‎.env.local

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
# 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
2-
NEXT_PUBLIC_VERSION=3.13.5
2+
NEXT_PUBLIC_VERSION=3.13.6

‎blog.config.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,9 @@ const BLOG = {
183183
// ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK
184184

185185
// twikoo
186-
COMMENT_TWIKOO_ENV_ID: process.env.NEXT_PUBLIC_COMMENT_ENV_ID || '', // TWIKOO地址 腾讯云环境填 envId；Vercel 环境域名地址（https://xxx.vercel.app)
186+
COMMENT_TWIKOO_ENV_ID: process.env.NEXT_PUBLIC_COMMENT_ENV_ID || '', // TWIKOO后端地址 腾讯云环境填envId；Vercel环境填域名，教程：https://tangly1024.com/article/notionnext-twikoo
187+
COMMENT_TWIKOO_COUNT_ENABLE: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_COUNT_ENABLE || false, // 博客列表是否显示评论数
188+
COMMENT_TWIKOO_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_CDN_URL || 'https://cdn.staticfile.org/twikoo/1.6.16/twikoo.all.min.js', // twikoo客户端cdn
187189

188190
// utterance
189191
COMMENT_UTTERRANCES_REPO:

‎components/PrismMac.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,10 @@ const PrismMac = () => {
2323
loadExternalResource('/css/prism-mac-style.css', 'css')
2424
}
2525
loadExternalResource(BLOG.PRISM_THEME_PATH, 'css')
26-
loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((e) => {
27-
Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
26+
loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
27+
if (window?.Prism?.plugins?.autoloader) {
28+
window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
29+
}
2830
renderPrismMac()
2931
})
3032
}

‎components/Twikoo.js

+44-12
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import BLOG from '@/blog.config'
2-
import React from 'react'
3-
import twikoo from 'twikoo'
2+
import { loadExternalResource } from '@/lib/utils'
3+
import { useEffect } from 'react'
4+
// import twikoo from 'twikoo'
45

56
/**
67
* Giscus评论 @see https://giscus.app/zh-CN
@@ -10,17 +11,48 @@ import twikoo from 'twikoo'
1011
*/
1112

1213
const Twikoo = ({ isDarkMode }) => {
13-
React.useEffect(() => {
14-
twikoo({
15-
envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
16-
el: '#twikoo', // 容器元素
17-
lang: BLOG.LANG // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
18-
// region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
19-
// path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
20-
})
21-
})
14+
const loadTwikoo = async () => {
15+
try {
16+
const url = await loadExternalResource(BLOG.COMMENT_TWIKOO_CDN_URL, 'js')
17+
console.log('twikoo 加载成功', url)
18+
const twikoo = window.twikoo
19+
twikoo.init({
20+
envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
21+
el: '#twikoo', // 容器元素
22+
lang: BLOG.LANG // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
23+
// region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
24+
// path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
25+
})
26+
27+
twikoo.getCommentsCount({
28+
envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 环境 ID
29+
// region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
30+
urls: [ // 不包含协议、域名、参数的文章路径列表，必传参数
31+
'/article/notion-next',
32+
'/article/notion-next-guide'
33+
],
34+
includeReply: false // 评论数是否包括回复，默认：false
35+
}).then(function (res) {
36+
console.log(res)
37+
// 返回示例: [
38+
// { url: '/2020/10/post-1.html', count: 10 },
39+
// { url: '/2020/11/post-2.html', count: 0 },
40+
// { url: '/2020/12/post-3.html', count: 20 }
41+
// ]
42+
}).catch(function (err) {
43+
// 发生错误
44+
console.error(err)
45+
})
46+
} catch (error) {
47+
console.error('twikoo 加载失败', error)
48+
}
49+
}
50+
51+
useEffect(() => {
52+
loadTwikoo()
53+
}, [])
2254
return (
23-
<div id="twikoo"></div>
55+
<div id="twikoo"></div>
2456
)
2557
}
2658

‎components/TwikooCommentCount.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import BLOG from '@/blog.config'
2+
// import twikoo from 'twikoo'
3+
4+
/**
5+
* 获取博客的评论数，用与在列表中展示
6+
* @returns {JSX.Element}
7+
* @constructor
8+
*/
9+
10+
const TwikooCommentCount = ({ post, className }) => {
11+
if (!JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE)) {
12+
return null
13+
}
14+
return <a href={`${post.slug}?target=comment`} className={`mx-1 hidden comment-count-wrapper-${post.id} ${className || ''}`}>
15+
<i className="far fa-comment mr-1"></i>
16+
<span className={`comment-count-text-${post.id}`}>
17+
{/* <i className='fa-solid fa-spinner animate-spin' /> */}
18+
</span>
19+
</a>
20+
}
21+
22+
export default TwikooCommentCount

‎components/TwikooCommentCounter.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import BLOG from '@/blog.config'
2+
import { useGlobal } from '@/lib/global'
3+
import { loadExternalResource } from '@/lib/utils'
4+
import { useRouter } from 'next/router'
5+
import { useEffect } from 'react'
6+
7+
/**
8+
* 获取博客的评论数，用与在列表中展示
9+
* @returns {JSX.Element}
10+
* @constructor
11+
*/
12+
13+
const TwikooCommentCounter = (props) => {
14+
let commentsData = []
15+
const { theme } = useGlobal()
16+
17+
const fetchTwikooData = async (posts) => {
18+
posts.forEach(post => {
19+
post.slug = post.slug.startsWith('/') ? post.slug : `/${post.slug}`
20+
})
21+
try {
22+
await loadExternalResource(BLOG.COMMENT_TWIKOO_CDN_URL, 'js')
23+
const twikoo = window.twikoo
24+
twikoo.getCommentsCount({
25+
envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 环境 ID
26+
// region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
27+
urls: posts.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数
28+
includeReply: true // 评论数是否包括回复，默认：false
29+
}).then(function (res) {
30+
console.log('查询', res)
31+
commentsData = res
32+
updateCommentCount()
33+
}).catch(function (err) {
34+
// 发生错误
35+
console.error(err)
36+
})
37+
} catch (error) {
38+
console.error('twikoo 加载失败', error)
39+
}
40+
}
41+
42+
const updateCommentCount = () => {
43+
if (commentsData.length === 0) {
44+
return
45+
}
46+
props.posts.forEach(post => {
47+
const matchingRes = commentsData.find(r => r.url === post.slug)
48+
if (matchingRes) {
49+
// 修改评论数量div
50+
const textElements = document.querySelectorAll(`.comment-count-text-${post.id}`)
51+
textElements.forEach(element => {
52+
element.innerHTML = matchingRes.count
53+
})
54+
// 取消隐藏
55+
const wrapperElements = document.querySelectorAll(`.comment-count-wrapper-${post.id}`)
56+
wrapperElements.forEach(element => {
57+
element.classList.remove('hidden')
58+
})
59+
}
60+
})
61+
}
62+
const router = useRouter()
63+
64+
useEffect(() => {
65+
console.log('路由触发评论计数')
66+
if (props?.posts && props?.posts?.length > 0) {
67+
fetchTwikooData(props.posts)
68+
}
69+
}, [router.events])
70+
71+
// 监控主题变化时的的评论数
72+
useEffect(() => {
73+
console.log('主题触发评论计数', commentsData)
74+
updateCommentCount()
75+
}, [theme])
76+
return null
77+
}
78+
79+
export default TwikooCommentCounter

‎components/TwikooRecentComments.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
/**
3+
* 显示最近评论 TODO
4+
* @returns {JSX.Element}
5+
* @constructor
6+
*/
7+
8+
const TwikooRecentComments = (props) => {
9+
return null
10+
}
11+
12+
export default TwikooRecentComments

‎package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "notion-next",
3-
"version": "3.13.5",
3+
"version": "3.13.6",
44
"homepage": "https://github.com/tangly1024/NotionNext.git",
55
"license": "MIT",
66
"repository": {
@@ -55,7 +55,6 @@
5555
"react-share": "^4.4.1",
5656
"react-tweet-embed": "~2.0.0",
5757
"smoothscroll-polyfill": "^0.4.4",
58-
"twikoo": "^1.6.16",
5958
"typed.js": "^2.0.12",
6059
"use-ackee": "^3.0.0",
6160
"valine": "^1.4.18"

‎pages/[...slug].js

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const Slug = props => {
3131
setLock(true)
3232
} else {
3333
if (!lock && post?.blockMap?.block) {
34-
post.content = Object.keys(post.blockMap.block).filter(key => post.blockMap.block[key]?.value.parent_id === post.id)
34+
post.content = Object.keys(post.blockMap.block).filter(key => post.blockMap.block[key]?.value?.parent_id === post.id)
3535
post.toc = getPageTableOfContents(post, post.blockMap)
3636
}
3737

‎pages/_app.js

+2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import smoothscroll from 'smoothscroll-polyfill'
2626
import AOS from 'aos'
2727
import 'aos/dist/aos.css' // You can also use <link> for styles
2828
import { isMobile } from '@/lib/utils'
29+
import TwikooCommentCounter from '@/components/TwikooCommentCounter'
2930

3031
const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
3132
const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
@@ -53,6 +54,7 @@ const MyApp = ({ Component, pageProps }) => {
5354
{JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
5455
{JSON.parse(BLOG.NEST) && <Nest />}
5556
{JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
57+
{JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...pageProps}/>}
5658
{JSON.parse(BLOG.RIBBON) && <Ribbon />}
5759
<ExternalScript/>
5860
</>

‎pages/index.js

+10
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,22 @@ import * as ThemeMap from '@/themes'
55
import { useGlobal } from '@/lib/global'
66
import { generateRss } from '@/lib/rss'
77
import { generateRobotsTxt } from '@/lib/robots.txt'
8+
9+
/**
10+
* 首页布局
11+
* @param {*} props
12+
* @returns
13+
*/
814
const Index = props => {
915
const { theme } = useGlobal()
1016
const ThemeComponents = ThemeMap[theme]
1117
return <ThemeComponents.LayoutIndex {...props} />
1218
}
1319

20+
/**
21+
* SSG 获取数据
22+
* @returns
23+
*/
1424
export async function getStaticProps() {
1525
const from = 'index'
1626
const props = await getGlobalNotionData({ from })

‎styles/notion.css

+1
Original file line numberDiff line numberDiff line change
@@ -919,6 +919,7 @@ code[class*='language-'] {
919919
font-size: 14px;
920920
line-height: 1.4;
921921
color: var(--fg-color-3);
922+
@apply dark:text-gray-300
922923
}
923924

924925
.notion-callout {

‎themes/example/components/BlogListPage.js

+3-40
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global'
44
import { useRouter } from 'next/router'
55
import Link from 'next/link'
66
import CONFIG_EXAMPLE from '../config_example'
7+
import BlogPostCard from './BlogPostCard'
78

89
export const BlogListPage = props => {
910
const { page = 1, posts, postCount } = props
@@ -22,46 +23,8 @@ export const BlogListPage = props => {
2223
<div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`}>
2324

2425
<div id="container">
25-
{posts?.map(p => (
26-
<article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
27-
<div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
28-
<h2 className="mb-4">
29-
<Link
30-
href={`/${p.slug}`}
31-
className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
32-
{p.title}
33-
</Link>
34-
</h2>
35-
36-
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
37-
by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
38-
<span className="font-bold mx-1"> | </span>
39-
<a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
40-
{/* <span className="font-bold mx-1"> | </span> */}
41-
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
42-
</div>
43-
44-
<p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
45-
{p.summary}
46-
</p>
47-
{/* 搜索结果 */}
48-
{p.results && (
49-
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
50-
{p.results.map(r => (
51-
<span key={r}>{r}</span>
52-
))}
53-
</p>
54-
)}
55-
</div>
56-
{/* 图片封面 */}
57-
{showPageCover && (
58-
<div className="md:w-5/12 w-full overflow-hidden p-1">
59-
<Link href={`${BLOG.SUB_PATH}/${p.slug}`} passHref legacyBehavior>
60-
<div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${p?.page_cover}')` }} />
61-
</Link>
62-
</div>
63-
)}
64-
</article>
26+
{posts?.map(post => (
27+
<BlogPostCard key={post.id} post = {post}/>
6528
))}
6629
</div>
6730

0 commit comments

Comments
 (0)