评论插件空白;
赞赏按钮微调;
侧边栏、详情页微调排班
This commit is contained in:
tangly1024
2021-12-03 16:11:05 +08:00
parent f695e98e0c
commit 1ddd7adf37
6 changed files with 53 additions and 56 deletions

View File

@@ -28,7 +28,7 @@ const Comment = ({ frontMatter }) => {
return <div className='comment text-gray-800 dark:text-gray-300'>
{/* 评论插件 */}
{BLOG.comment.provider === 'gitalk' && (
{BLOG.comment.provider === 'gitalk' && (<div className='m-10'>
<GitalkComponent
options={{
id: frontMatter.id,
@@ -41,12 +41,13 @@ const Comment = ({ frontMatter }) => {
distractionFreeMode: BLOG.comment.gitalkConfig.distractionFreeMode
}}
/>
)}
{BLOG.comment.provider === 'utterances' && (
</div>)}
{BLOG.comment.provider === 'utterances' && (<div className='m-10'>
<UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
</div>
)}
{BLOG.comment.provider === 'cusdis' && (
<>
<div className='m-10'>
<script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />
<CusdisComponent
attrs={{
@@ -59,9 +60,10 @@ const Comment = ({ frontMatter }) => {
}}
lang={BLOG.lang.toLowerCase()}
/>
</>
</div>
)}</div>
)}
</div>
}
export default Comment

View File

@@ -2,7 +2,6 @@ import Link from 'next/link'
import BLOG from '@/blog.config'
import { formatDateFmt } from '@/lib/formatDate'
import { useRouter } from 'next/router'
import { useGlobal } from '@/lib/global'
/**
* 最新文章列表
@@ -31,15 +30,15 @@ const LatestPostsGroup = ({ posts, sliceCount = 6 }) => {
{postsSortByDate.map(post => {
const selected = currentPath === `${BLOG.path}/article/${post.slug}`
return (
<Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`}>
<Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
<div
className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' text-xs leading-5 py-1.5 px-5 flex'}>
<div className='mr-2 text-gray-400'>
<div className='mr-2 text-gray-500'>
{formatDateFmt(post.lastEditedTime, 'MM/dd')}
</div>
<div
className={
(selected ? 'dark:text-white text-black ' : 'text-gray-500 ') +
(selected ? 'dark:text-white text-black ' : 'text-gray-500') +
' text-sm flex w-50 overflow-x-hidden whitespace-nowrap hover:text-black dark:hover:text-white cursor-pointer hover:underline'
}>
{post.title}

View File

@@ -37,7 +37,7 @@ const RecommendPosts = ({ currentPost, totalPosts }) => {
const { locale } = useGlobal()
return <div className='dark:text-gray-300 dark:bg-gray-800 bg-gray-100 p-2 mb-2 border-l-4 border-yellow-500'>
return <div className='dark:text-gray-300 dark:bg-gray-800 bg-gray-100 p-2 my-2 border-l-4 border-yellow-500'>
<h2 className='mb-2 font-bold text-xl'>{locale.COMMON.RELATE_POSTS}</h2>
<ul className='list-disc px-5'>
{filteredPosts.map(post => (

View File

@@ -20,15 +20,15 @@ const RewardButton = () => {
}
}
return (
<div onMouseEnter={openPopover} onMouseLeave={closePopover} className='justify-center py-10'>
<div className='bg-red-500 w-36 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'>
<div className='justify-center'>
<div onMouseEnter={openPopover} onMouseLeave={closePopover} className='bg-red-500 w-36 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 py-2 rounded cursor-pointer'>
<FontAwesomeIcon icon={faQrcode} className='mr-2' />
<span>打赏一杯咖啡</span>
</div>
<div id='reward-qrcode' className='hidden flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 mx-auto py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
<div className='w-72 bg-black'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_alipay.png' /></div>
<div className='w-72 bg-black'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_wechat.png' /></div>
<div onMouseEnter={openPopover} onMouseLeave={closePopover} id='reward-qrcode' className='hidden flex space-x-10 animate__animated animate__fadeIn duration-200 my-5 px-5 mx-auto py-6 justify-center bg-white dark:bg-black dark:text-gray-200'>
<div className='w-80'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_alipay.png' /></div>
<div className='w-80'><Image width='auto' height='auto' layout='responsive' objectFit='fill' src='/reward_code_wechat.png' /></div>
</div>
</div>
)

View File

@@ -38,14 +38,14 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
<section className='p-5'>
<SearchInput currentTag={currentTag} currentSearch={currentSearch} />
</section>
<hr classNaÍme='dark:border-gray-700' />
<hr className='dark:border-gray-700' />
</section>
{/* 最新文章 */}
{posts && (
<section className='mt-4'>
<div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'>
<div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4' />{locale.COMMON.LATEST_POSTS}</div>
<div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
<div className='font-bold text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4' />{locale.COMMON.LATEST_POSTS}</div>
<Link href='/archive' passHref>
<div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
@@ -59,8 +59,8 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{/* 分类 */}
{categories && (
<section className='mt-5'>
<div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'>
<div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}</div>
<div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
<div className='font-bold text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}</div>
<Link href='/category' passHref>
<div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
@@ -74,7 +74,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{/* 标签云 */}
{tags && (
<section className='mt-5'>
<div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'>
<div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
<div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-4' />{locale.COMMON.TAGS}</div>
<Link href='/tag' passHref>
<div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>