From f16c6c01d33cdeb649f5b96c459e62dfd03453de Mon Sep 17 00:00:00 2001 From: tlyong1992 Date: Tue, 31 May 2022 13:42:02 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9C=80=E8=BF=91=E8=AF=84=E8=AE=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/WalineComponent.js | 30 ++++++++++++++++ components/WalineRecentsComments.js | 43 +++++++++++++++++++++++ lib/lang/en-US.js | 3 +- lib/lang/zh-CN.js | 3 +- styles/globals.css | 13 +++++++ themes/hexo/components/SideRight.js | 12 ++++++- themes/medium/components/ArticleDetail.js | 1 + 7 files changed, 102 insertions(+), 3 deletions(-) create mode 100644 components/WalineRecentsComments.js diff --git a/components/WalineComponent.js b/components/WalineComponent.js index 80741b15..9fea1463 100644 --- a/components/WalineComponent.js +++ b/components/WalineComponent.js @@ -24,6 +24,36 @@ const WalineComponent = (props) => { serverURL: BLOG.COMMENT_WALINE_SERVER_URL }) router.events.on('routeChangeComplete', updateWaline) + + const anchor = window.location.hash + /** 需要跳转到评论区 */ + if (anchor) { + // 选择需要观察变动的节点 + const targetNode = document.getElementsByClassName('wl-cards')[0] + const commentNode = document.getElementById('comment') + commentNode.scrollIntoView({ block: 'start', behavior: 'smooth' }) + + // 当观察到变动时执行的回调函数 + const mutationCallback = (mutations) => { + for (const mutation of mutations) { + const type = mutation.type + if (type === 'childList') { + const anchorElement = document.getElementById(anchor.substring(1)) + if (anchorElement) { + anchorElement.scrollIntoView({ block: 'end', behavior: 'smooth' }) + setTimeout(() => { + anchorElement.classList.add('animate__animated') + anchorElement.classList.add('animate__bounceIn') + }, 300) + } + } + } + } + + // 观察子节点 变化 + new MutationObserver(mutationCallback).observe(targetNode, { childList: true }) + } + return () => { walineInstanceRef.current?.destroy() router.events.off('routeChangeComplete', updateWaline) diff --git a/components/WalineRecentsComments.js b/components/WalineRecentsComments.js new file mode 100644 index 00000000..b1142383 --- /dev/null +++ b/components/WalineRecentsComments.js @@ -0,0 +1,43 @@ +import React from 'react' +import { RecentComments } from '@waline/client' +import BLOG from '@/blog.config' +import Card from '@/themes/hexo/components/Card' +import { useGlobal } from '@/lib/global' +import Link from 'next/link' + +/** + * @see https://waline.js.org/guide/get-started.html + * @param {*} props + * @returns + */ +const WalineRecentComment = (props) => { + const [comments, updateComments] = React.useState([]) + const { locale } = useGlobal() + const [onLoading, changeLoading] = React.useState(true) + React.useEffect(() => { + RecentComments({ + serverURL: BLOG.COMMENT_WALINE_SERVER_URL, + count: 5 + }).then(({ comments }) => { + changeLoading(false) + updateComments(comments) + }) + }, []) + + return +
+ + {locale.COMMON.RECENT_COMMENTS} +
+ + {onLoading &&
Loading...
} + {!onLoading && comments && comments.length === 0 &&
No Comments
} + {!onLoading && comments && comments.length > 0 && comments.map((comment) =>
+ )} + + +} + +export default WalineRecentComment diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js index 9f8fc94a..464a79d7 100644 --- a/lib/lang/en-US.js +++ b/lib/lang/en-US.js @@ -34,7 +34,8 @@ export default { ARTICLE_LOCK_TIPS: 'Please Enter the password:', SUBMIT: 'Submit', POST_TIME: 'Post on', - LAST_EDITED_TIME: 'Last edited' + LAST_EDITED_TIME: 'Last edited', + RECENT_COMMENTS: 'Recent Comments' }, PAGINATION: { PREV: 'Prev', diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js index 435aeb96..43bb26c6 100644 --- a/lib/lang/zh-CN.js +++ b/lib/lang/zh-CN.js @@ -36,7 +36,8 @@ export default { ARTICLE_LOCK_TIPS: '文章已上锁，请输入访问密码', SUBMIT: '提交', POST_TIME: '发布于', - LAST_EDITED_TIME: '最后更新' + LAST_EDITED_TIME: '最后更新', + RECENT_COMMENTS: '最新评论' }, PAGINATION: { PREV: '上一页', diff --git a/styles/globals.css b/styles/globals.css index 8ffbcce3..a1d8418a 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -158,3 +158,16 @@ nav { .medium-zoom-image--opened{ width: auto !important; } + +[data-waline] p { + color: var(--waline-color); + @apply dark:text-gray-200 !important +} + +.waline-recent-content p{ + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} \ No newline at end of file diff --git a/themes/hexo/components/SideRight.js b/themes/hexo/components/SideRight.js index 361d568f..4a5508dd 100644 --- a/themes/hexo/components/SideRight.js +++ b/themes/hexo/components/SideRight.js @@ -6,6 +6,14 @@ import Catalog from './Catalog' import { InfoCard } from './InfoCard' import { AnalyticsCard } from './AnalyticsCard' import CONFIG_HEXO from '../config_hexo' +import WalineRecentComment from '@/components/WalineRecentsComments' +import BLOG from '@/blog.config' + +/** + * Hexo主题右侧栏 + * @param {*} props + * @returns + */ export default function SideRight(props) { const { post, currentCategory, categories, latestPosts, tags, @@ -37,8 +45,10 @@ export default function SideRight(props) { } + {BLOG.COMMENT_WALINE_SERVER_URL && } +
- {post && post.toc && + {post && post.toc && post.toc.length > 1 && } {slot} diff --git a/themes/medium/components/ArticleDetail.js b/themes/medium/components/ArticleDetail.js index 7a4cdc61..c9eabe73 100644 --- a/themes/medium/components/ArticleDetail.js +++ b/themes/medium/components/ArticleDetail.js @@ -8,6 +8,7 @@ import formatDate from '@/lib/formatDate' import { useGlobal } from '@/lib/global' import BLOG from '@/blog.config' import NotionPage from '@/components/NotionPage' +import React from 'react' export const ArticleDetail = props => { const { post, prev, next, siteInfo } = props