From d3a8a02808718b4910cbd736a218346282253484 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 21 Dec 2021 10:40:38 +0800 Subject: [PATCH] =?UTF-8?q?feature:=20=E8=AF=AD=E8=A8=80=E6=9C=AC=E5=9C=B0?= =?UTF-8?q?=E5=8C=96=E5=AE=8C=E5=96=84=EF=BC=9B=20=E5=A4=9C=E9=97=B4?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=AE=8C=E5=96=84=EF=BC=9B=20=E5=B0=81?= =?UTF-8?q?=E8=A3=85=E7=89=88=E6=9D=83=E5=A3=B0=E6=98=8E=EF=BC=9B=20?= =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8Fsticky=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ArticleCopyright.js | 26 ++++++++++++++++++++ components/ArticleDetail.js | 25 +++---------------- components/BlogPostListScroll.js | 4 ++- components/DarkModeButton.js | 1 + components/FloatDarkModeButton.js | 4 +++ components/{SideArea.js => SideAreaLeft.js} | 27 +++++++++------------ components/SideAreaRight.js | 2 +- layouts/BaseLayout.js | 13 +++++----- lib/global.js | 14 +++++------ lib/lang/en-US.js | 8 +++++- lib/lang/zh-CN.js | 8 +++++- pages/_document.js | 2 +- 12 files changed, 77 insertions(+), 57 deletions(-) create mode 100644 components/ArticleCopyright.js rename components/{SideArea.js => SideAreaLeft.js} (74%) diff --git a/components/ArticleCopyright.js b/components/ArticleCopyright.js new file mode 100644 index 00000000..d2063055 --- /dev/null +++ b/components/ArticleCopyright.js @@ -0,0 +1,26 @@ +import { useGlobal } from '@/lib/global' +import Link from 'next/link' + +export default function ArticleCopyright ({ author, url }) { + const { locale } = useGlobal() + return
+
{locale.COMMON.COPYRIGHT}
+ +
+} diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js index c7f9a011..9a055ffd 100644 --- a/components/ArticleDetail.js +++ b/components/ArticleDetail.js @@ -25,6 +25,7 @@ import { faEye, faFolderOpen } from '@fortawesome/free-solid-svg-icons' import BlogAround from '@/components/BlogAround' import { useRef } from 'react' import WordCount from './WordCount' +import ArticleCopyright from './ArticleCopyright' /** * @@ -36,7 +37,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n const drawerRight = useRef(null) const url = BLOG.link + useRouter().asPath const { locale } = useGlobal() - const date = formatDate(post?.date?.start_date || post.createdTime, BLOG.lang) + const date = formatDate(post?.date?.start_date || post.createdTime, locale.LOCALE) return (<>
@@ -134,27 +135,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n {/* 版权声明 */} -
-
版权声明
-
    -
  • - 本文作者:{' '} - - {BLOG.author} - -
    • -
  • - 本文链接:{' '} - - {url} - -
    • -
  • - 本博客所有文章除特别声明外，均采用 BY-NC-SA - 许可协议。转载请注明出处！ -
    • -
-
+ {/* 标签列表 */}
diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js index 351c4927..b10b70a4 100644 --- a/components/BlogPostListScroll.js +++ b/components/BlogPostListScroll.js @@ -4,6 +4,7 @@ import BLOG from '@/blog.config' import React, { useCallback, useEffect, useRef, useState } from 'react' import throttle from 'lodash.throttle' import BlogPostListEmpty from '@/components/BlogPostListEmpty' +import { useGlobal } from '@/lib/global' /** * 博客列表滚动分页 @@ -47,6 +48,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory, }) const targetRef = useRef(null) + const { locale } = useGlobal() if (!postsToShow || postsToShow.length === 0) { return @@ -65,7 +67,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory, handleGetMore() }} className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200' - > {hasMore ? '继续加载' : '加载完了😰'}
+ > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} } diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js index c4df5e3c..ae344cf1 100644 --- a/components/DarkModeButton.js +++ b/components/DarkModeButton.js @@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' const DarkModeButton = () => { const { changeTheme } = useGlobal() const userTheme = loadUserThemeFromCookies() + // 用户手动设置主题 const handleChangeDarkMode = () => { const newTheme = (userTheme === 'light' ? 'dark' : 'light') diff --git a/components/FloatDarkModeButton.js b/components/FloatDarkModeButton.js index e09b79c3..53e28513 100644 --- a/components/FloatDarkModeButton.js +++ b/components/FloatDarkModeButton.js @@ -25,6 +25,10 @@ export default function FloatDarkModeButton () { const newTheme = userTheme === 'light' ? 'dark' : 'light' saveTheme(newTheme) changeTheme(newTheme) + const htmlElement = document.getElementsByTagName('html')[0] + console.log('切换主题', htmlElement) + htmlElement.classList.remove(userTheme) + htmlElement.classList.add(newTheme) } return ( diff --git a/components/SideArea.js b/components/SideAreaLeft.js similarity index 74% rename from components/SideArea.js rename to components/SideAreaLeft.js index 828a3ea1..13ed6d51 100644 --- a/components/SideArea.js +++ b/components/SideAreaLeft.js @@ -21,28 +21,25 @@ import React from 'react' * @returns {JSX.Element} * @constructor */ -const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => { +const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => { const { locale } = useGlobal() + const showToc = post && post.toc && post.toc.length > 1 + return <> - return + } -export default SideArea +export default SideAreaLeft diff --git a/components/SideAreaRight.js b/components/SideAreaRight.js index 4e7e84f2..dd42716d 100644 --- a/components/SideAreaRight.js +++ b/components/SideAreaRight.js @@ -51,7 +51,7 @@ const SideAreaRight = ({ > -
+
{/* 最新文章 */} {posts && (
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js index 16b4e925..ecbc1fec 100644 --- a/layouts/BaseLayout.js +++ b/layouts/BaseLayout.js @@ -3,7 +3,7 @@ import FloatDarkModeButton from '@/components/FloatDarkModeButton' import Footer from '@/components/Footer' import JumpToTopButton from '@/components/JumpToTopButton' import LoadingCover from '@/components/LoadingCover' -import SideArea from '@/components/SideArea' +import SideAreaLeft from '@/components/SideAreaLeft' import SideAreaRight from '@/components/SideAreaRight' import TopNav from '@/components/TopNav' import { useGlobal } from '@/lib/global' @@ -61,19 +61,20 @@ const BaseLayout = ({ window.removeEventListener('scroll', scrollTrigger) } }, []) - const { theme, onLoading } = useGlobal() + const { onLoading } = useGlobal() const targetRef = useRef(null) - return (
+ return (
{/* 顶部导航栏 */} -
-
- +
+ +
+
diff --git a/lib/global.js b/lib/global.js index b37b6262..4b693135 100644 --- a/lib/global.js +++ b/lib/global.js @@ -88,33 +88,31 @@ const initTheme = (theme, changeTheme) => { const date = new Date() const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches const useDark = prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6) + const htmlElement = document.getElementsByTagName('html') + if (useDark) { changeTheme('dark') saveTheme('dark') + htmlElement.classList.remove('light') + htmlElement.classList.add('dark') } else { changeTheme('light') saveTheme('light') + htmlElement.classList.remove('dark') + htmlElement.classList.add('light') } } - const baseLayoutClass = document.getElementById('wrapper')?.classList - if (baseLayoutClass && !baseLayoutClass.contains(theme)) { - baseLayoutClass.add(theme) - } } export function handleRouteChange (url) { - console.log('路由变化', url) initGoogleAdsense() } /** * 初始化谷歌广告 */ -// let activeAdsCount = 0 function initGoogleAdsense () { const ads = document.getElementsByClassName('adsbygoogle').length - // const newAdsCount = ads - activeAdsCount - // console.log(`Start: 总广告${ads}, 已激活${activeAdsCount} 新广告${newAdsCount}`) const newAdsCount = ads if (newAdsCount > 0) { for (let i = 0; i <= newAdsCount; i++) { diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js index a7dfb2f9..ff9cfe31 100644 --- a/lib/lang/en-US.js +++ b/lib/lang/en-US.js @@ -1,4 +1,5 @@ export default { + LOCALE: 'en-US', NAV: { INDEX: 'Blog', RSS: 'RSS', @@ -9,6 +10,7 @@ export default { }, COMMON: { MORE: 'More', + NO_MORE: 'No More', LATEST_POSTS: 'Latest posts', TAGS: 'Tags', NO_TAG: 'NoTag', @@ -17,7 +19,11 @@ export default { SCAN_QR_CODE: 'Scan QRCode', URL_COPIED: 'URL has copied!', TABLE_OF_CONTENTS: 'Table of Contents', - RELATE_POSTS: 'Relate Posts' + RELATE_POSTS: 'Relate Posts', + COPYRIGHT: 'Copyright', + AUTHOR: 'Author', + URL: 'URL', + COPYRIGHT_NOTICE: 'All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!' }, PAGINATION: { PREV: 'Prev', diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js index bed04aac..03a28a03 100644 --- a/lib/lang/zh-CN.js +++ b/lib/lang/zh-CN.js @@ -1,4 +1,5 @@ export default { + LOCALE: 'zh-CN', NAV: { INDEX: '首页', RSS: '订阅', @@ -10,6 +11,7 @@ export default { }, COMMON: { MORE: '更多', + NO_MORE: '没有更多了', LATEST_POSTS: '最新文章', TAGS: '标签', NO_TAG: 'NoTag', @@ -18,7 +20,11 @@ export default { SCAN_QR_CODE: '扫一扫二维码', URL_COPIED: '链接已复制！', TABLE_OF_CONTENTS: '目录', - RELATE_POSTS: '相关文章' + RELATE_POSTS: '相关文章', + COPYRIGHT: '版权声明', + AUTHOR: '作者', + URL: '链接', + COPYRIGHT_NOTICE: '本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！' }, PAGINATION: { PREV: '上一页', diff --git a/pages/_document.js b/pages/_document.js index b1396afa..b9d762a3 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -18,7 +18,7 @@ class MyDocument extends Document { - +