d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 15:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

主题添加最近评论插件

Browse Source
This commit is contained in:
tlyong1992
2022-05-31 15:17:33 +08:00
parent 7b425891cc
commit 976e519058
6 changed files with 103 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
themes/example/components/ExampleRecentComments.js Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react'
import { RecentComments } from '@waline/client'
import BLOG from '@/blog.config'
import Link from 'next/link'
/**
* @see https://waline.js.org/guide/get-started.html
* @param {*} props
* @returns
*/
const ExampleRecentComments = (props) => {
const [comments, updateComments] = React.useState([])
const [onLoading, changeLoading] = React.useState(true)
React.useEffect(() => {
RecentComments({
serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
count: 5
}).then(({ comments }) => {
changeLoading(false)
updateComments(comments)
})
}, [])
return <>
{onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
{!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
{!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
<div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
<div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={comment.url + '#' + comment.objectId}><a >-- {comment.nick}</a></Link></div>
</div>)}
</>
}
export default ExampleRecentComments

10
themes/example/components/SideBar.js
View File

@@ -1,6 +1,8 @@
import BLOG from '@/blog.config'
import Live2D from '@/components/Live2D'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import ExampleRecentComments from './ExampleRecentComments'
export const SideBar = (props) => {
const { locale } = useGlobal()
@@ -36,6 +38,14 @@ export const SideBar = (props) => {
</div>
</aside>
{BLOG.COMMENT_WALINE_SERVER_URL && <aside className="rounded shadow overflow-hidden mb-6">
<h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.RECENT_COMMENTS}</h3>
<div className="p-4">
<ExampleRecentComments/>
</div>
</aside>}
<aside className="rounded overflow-hidden mb-6">
<Live2D />
</aside>

2
themes/hexo/components/SideRight.js
View File

@@ -6,7 +6,7 @@ import Catalog from './Catalog'
import { InfoCard } from './InfoCard'
import { AnalyticsCard } from './AnalyticsCard'
import CONFIG_HEXO from '../config_hexo'
import WalineRecentComment from '@/components/WalineRecentsComments'
import WalineRecentComment from './WalineRecentsComments'
import BLOG from '@/blog.config'
/**

4
components/WalineRecentsComments.js → themes/hexo/components/WalineRecentsComments.js
View File

@@ -32,9 +32,9 @@ const WalineRecentComment = (props) => {
{onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
{!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
{!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
{!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2 pl-1'>
<div className='dark:text-gray-200 text-sm waline-recent-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
<div className='dark:text-gray-100 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={comment.url + '#' + comment.objectId}><a >-- {comment.nick}</a></Link></div>
<div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'><Link href={comment.url + '#' + comment.objectId}><a >-- {comment.nick}</a></Link></div>
</div>)}
</Card>

35
themes/next/components/NextRecentComments.js Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react'
import { RecentComments } from '@waline/client'
import BLOG from '@/blog.config'
import Link from 'next/link'
/**
* @see https://waline.js.org/guide/get-started.html
* @param {*} props
* @returns
*/
const NextRecentComments = (props) => {
const [comments, updateComments] = React.useState([])
const [onLoading, changeLoading] = React.useState(true)
React.useEffect(() => {
RecentComments({
serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
count: 5
}).then(({ comments }) => {
changeLoading(false)
updateComments(comments)
})
}, [])
return <>
{onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
{!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
{!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
<div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
<div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={comment.url + '#' + comment.objectId}><a >-- {comment.nick}</a></Link></div>
</div>)}
</>
}
export default NextRecentComments

20
themes/next/components/SideAreaRight.js
View File

@@ -6,6 +6,8 @@ import CategoryGroup from './CategoryGroup'
import TagGroups from './TagGroups'
import CONFIG_NEXT from '../config_next'
import { useRouter } from 'next/router'
import NextRecentComments from './NextRecentComments'
import BLOG from '@/blog.config'
/**
* 侧边平铺
@@ -77,6 +79,24 @@ const SideAreaRight = (props) => {
</Card>
)}
{BLOG.COMMENT_WALINE_SERVER_URL && <Card>
<div className="text-sm pb-1 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200">
<div className="text-gray-600 dark:text-gray-200">
<i className="mr-2 fas fa-tag" />
{locale.COMMON.RECENT_COMMENTS}
</div>
<Link href={'/tag'} passHref>
<a className="text-gray-400 hover:text-black dark:hover:text-white hover:underline cursor-pointer">
{locale.COMMON.MORE}{' '}
<i className='fas fa-angle-double-right' />
</a>
</Link>
</div>
<div className="px-2 pt-2">
<NextRecentComments/>
</div>
</Card>}
</div>
</aside>
)