Merge branch 'common' into theme-next

This commit is contained in:
tangly1024
2022-02-18 11:08:01 +08:00
8 changed files with 61 additions and 97 deletions

View File

@@ -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>
)

View File

@@ -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,
});
`
}}
/>
</>)}
}}
/>
</>)}
</>)
}

View File

@@ -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

View File

@@ -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
View 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)
}
})
}

View File

@@ -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",

View File

@@ -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)
}
})
}

View File

@@ -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([