mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 07:26:52 +00:00
Merge branch 'common' into theme-next
This commit is contained in:
@@ -3,6 +3,8 @@ import dynamic from 'next/dynamic'
|
||||
import { useRouter } from 'next/router'
|
||||
import 'gitalk/dist/gitalk.css'
|
||||
import Tabs from '@/components/Tabs'
|
||||
import { ReactCusdis } from 'react-cusdis'
|
||||
import { useGlobal } from '@/lib/global'
|
||||
|
||||
const GitalkComponent = dynamic(
|
||||
() => {
|
||||
@@ -16,26 +18,29 @@ const UtterancesComponent = dynamic(
|
||||
},
|
||||
{ ssr: false }
|
||||
)
|
||||
const CusdisComponent = dynamic(
|
||||
() => {
|
||||
return import('@/components/Cusdis')
|
||||
},
|
||||
{ ssr: false }
|
||||
)
|
||||
|
||||
const Comment = ({ frontMatter }) => {
|
||||
const router = useRouter()
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<div className='comment mt-5 px-5 text-gray-800 dark:text-gray-300'>
|
||||
<Tabs>
|
||||
{BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
|
||||
<CusdisComponent id={frontMatter.id} url={BLOG.LINK + router.asPath} title={frontMatter.title} />
|
||||
<ReactCusdis
|
||||
lang={locale.LOCALE.toLowerCase()}
|
||||
attrs={{
|
||||
host: BLOG.COMMENT_CUSDIS_HOST,
|
||||
appId: BLOG.COMMENT_CUSDIS_APP_ID,
|
||||
pageId: frontMatter.id,
|
||||
pageTitle: frontMatter.title,
|
||||
pageUrl: BLOG.LINK + router.asPath
|
||||
}}
|
||||
/>
|
||||
</div>)}
|
||||
|
||||
{BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
|
||||
<UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
|
||||
</div>
|
||||
)}
|
||||
</div>)}
|
||||
|
||||
{BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
|
||||
<GitalkComponent
|
||||
@@ -51,7 +56,6 @@ const Comment = ({ frontMatter }) => {
|
||||
}}
|
||||
/>
|
||||
</div>)}
|
||||
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -85,12 +85,12 @@ const CommonScript = () => {
|
||||
|
||||
{/* 谷歌统计 */}
|
||||
{BLOG.ANALYTICS_GOOGLE_ID && (<>
|
||||
<script async
|
||||
src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.ANALYTICS_GOOGLE_ID}`}
|
||||
/>
|
||||
<script async
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
<script async
|
||||
src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.ANALYTICS_GOOGLE_ID}`}
|
||||
/>
|
||||
<script async
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
@@ -98,9 +98,9 @@ const CommonScript = () => {
|
||||
page_path: window.location.pathname,
|
||||
});
|
||||
`
|
||||
}}
|
||||
/>
|
||||
</>)}
|
||||
}}
|
||||
/>
|
||||
</>)}
|
||||
</>)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import BLOG from '@/blog.config'
|
||||
import { useEffect } from 'react'
|
||||
const Cusdis = ({ id, url, title }) => {
|
||||
useEffect(() => {
|
||||
const script = document.createElement('script')
|
||||
const anchor = document.getElementById('comments-cusdis')
|
||||
script.setAttribute(
|
||||
'src',
|
||||
BLOG.COMMENT_CUSDIS_SCRIPT_SRC
|
||||
)
|
||||
script.setAttribute('async', true)
|
||||
script.setAttribute('defer', true)
|
||||
anchor.appendChild(script)
|
||||
})
|
||||
return (
|
||||
<div id="comments-cusdis">
|
||||
<div
|
||||
id="cusdis_thread"
|
||||
data-host={BLOG.COMMENT_CUSDIS_HOST}
|
||||
data-app-id={BLOG.COMMENT_CUSDIS_APP_ID}
|
||||
data-page-id={id}
|
||||
data-page-url={url}
|
||||
data-page-title={title}
|
||||
lang={BLOG.LANG.toLowerCase()}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Cusdis
|
||||
@@ -41,12 +41,14 @@ const Tabs = ({ children }) => {
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
{children.map((item, index) => {
|
||||
return <section key={index}
|
||||
className={`${currentTab === index ? 'block animate__animated animate__fadeIn animate__faster' : 'hidden'}`}>
|
||||
{item}
|
||||
</section>
|
||||
})}
|
||||
<div>
|
||||
{children.map((item, index) => {
|
||||
return <section key={index}
|
||||
className={`${currentTab === index ? 'block animate__animated animate__fadeIn animate__faster' : 'hidden'}`}>
|
||||
{item}
|
||||
</section>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
27
lib/utils.js
Normal file
27
lib/utils.js
Normal file
@@ -0,0 +1,27 @@
|
||||
// 封装异步加载资源的方法
|
||||
|
||||
/**
|
||||
* 加载外部资源
|
||||
* @param url 地址 例如 https://xx.com/xx.js
|
||||
* @param type js 或 css
|
||||
* @returns {Promise<unknown>}
|
||||
*/
|
||||
export function loadExternalResource (url, type) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let tag
|
||||
|
||||
if (type === 'css') {
|
||||
tag = document.createElement('link')
|
||||
tag.rel = 'stylesheet'
|
||||
tag.href = url
|
||||
} else if (type === 'js') {
|
||||
tag = document.createElement('script')
|
||||
tag.src = url
|
||||
}
|
||||
if (tag) {
|
||||
tag.onload = () => resolve(url)
|
||||
tag.onerror = () => reject(url)
|
||||
document.head.appendChild(tag)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -39,6 +39,7 @@
|
||||
"qrcode.react": "^1.0.1",
|
||||
"react": "17.0.2",
|
||||
"react-cookies": "^0.1.1",
|
||||
"react-cusdis": "^2.1.3",
|
||||
"react-dom": "17.0.2",
|
||||
"react-notion-x": "4.14.2",
|
||||
"smoothscroll-polyfill": "^0.4.4",
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable no-undef */
|
||||
import CONFIG_NEXT from '../config_next'
|
||||
import { loadExternalResource } from '@/lib/utils'
|
||||
|
||||
let hasLoad = false
|
||||
export default function Live2D () {
|
||||
@@ -29,24 +30,3 @@ function initLive2D () {
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 封装异步加载资源的方法
|
||||
function loadExternalResource (url, type) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let tag
|
||||
|
||||
if (type === 'css') {
|
||||
tag = document.createElement('link')
|
||||
tag.rel = 'stylesheet'
|
||||
tag.href = url
|
||||
} else if (type === 'js') {
|
||||
tag = document.createElement('script')
|
||||
tag.src = url
|
||||
}
|
||||
if (tag) {
|
||||
tag.onload = () => resolve(url)
|
||||
tag.onerror = () => reject(url)
|
||||
document.head.appendChild(tag)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import Head from 'next/head'
|
||||
import { useEffect } from 'react'
|
||||
import { loadExternalResource } from '@/lib/utils'
|
||||
|
||||
export default function Live2DWife () {
|
||||
useEffect(() => {
|
||||
@@ -17,27 +18,6 @@ function initLive2DWife () {
|
||||
const live2dPath = 'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/'
|
||||
// const live2d_path = "/live2d-widget/";
|
||||
|
||||
// 封装异步加载资源的方法
|
||||
function loadExternalResource (url, type) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let tag
|
||||
|
||||
if (type === 'css') {
|
||||
tag = document.createElement('link')
|
||||
tag.rel = 'stylesheet'
|
||||
tag.href = url
|
||||
} else if (type === 'js') {
|
||||
tag = document.createElement('script')
|
||||
tag.src = url
|
||||
}
|
||||
if (tag) {
|
||||
tag.onload = () => resolve(url)
|
||||
tag.onerror = () => reject(url)
|
||||
document.head.appendChild(tag)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 加载 waifu.css live2d.min.js waifu-tips.js
|
||||
if (screen.width >= 768) {
|
||||
Promise.all([
|
||||
|
||||
Reference in New Issue
Block a user