HEXO 主题样式微调

themes/hexo/LayoutBase.js

@@ -8,6 +8,8 @@ import TopNav from './components/TopNav'
 import smoothscroll from 'smoothscroll-polyfill'
 import FloatDarkModeButton from './components/FloatDarkModeButton'
 import Live2D from '@/components/Live2D'
+import LoadingCover from './components/LoadingCover'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -20,6 +22,7 @@ const LayoutBase = (props) => {
   const [show, switchShow] = useState(false)
   // const [percent, changePercent] = useState(0) // 页面阅读百分比
   const rightAreaSlot = <Live2D/>
+  const { onLoading } = useGlobal()
 
   const scrollListener = () => {
     const targetRef = document.getElementById('wrapper')
@@ -43,6 +46,7 @@ const LayoutBase = (props) => {
 
   return (<div className='bg-white dark:bg-gray-900'>
     <CommonHead meta={meta} />
+
     <TopNav {...props}/>
 
     {headerSlot}
@@ -50,7 +54,10 @@ const LayoutBase = (props) => {
     <main id='wrapper' className='w-full justify-center py-8 min-h-screen'>
 
       <div id='container-inner' className='pt-14 w-full mx-auto lg:flex justify-between md:space-x-4 max-w-7xl'>
-        <div className='flex-grow w-full'>{children}</div>
+        <div className='flex-grow w-full'>
+          {onLoading ? <LoadingCover/> : children}
+        </div>
+
         <SideRight {...props} slot={rightAreaSlot}/>
       </div>
 

themes/hexo/LayoutSlug.js

@@ -52,7 +52,7 @@ export const LayoutSlug = props => {
       showTag={false}
       floatSlot={floatSlot}
     >
-      <div className="w-full dark:border-gray-600 lg:shadow-md lg:hover:shadow-xl lg:border lg:border-gray-100 lg:rounded-xl lg:px-2 lg:py-4 lg:bg-white lg:dark:bg-gray-800 lg:duration-100">
+      <div className="w-full dark:border-gray-600 lg:shadow-md lg:hover:shadow-xl lg:border lg:border-gray-100 lg:rounded-xl lg:px-2 lg:py-4 lg:bg-white lg:dark:bg-gray-800">
         <ArticleDetail {...props} />
       </div>
 

themes/hexo/components/ArticleAdjacent.js

@@ -0,0 +1,25 @@
+import Link from 'next/link'
+import CONFIG_HEXO from '../config_hexo'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleAdjacent ({ prev, next }) {
+  if (!prev || !next || !CONFIG_HEXO.ARTICLE_ADJACENT) {
+    return <></>
+  }
+  return <section className='text-gray-800 h-14 flex items-center justify-between space-x-5 my-1'>
+    <Link href={`/article/${prev.slug}`} passHref>
+      <a className='text-sm cursor-pointer hover:underline justify-start items-center flex w-full h-full duration-200'>
+        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
+      </a>
+    </Link>
+    <Link href={`/article/${next.slug}`} passHref>
+      <a className='text-sm  cursor-pointer hover:underline justify-end items-center flex w-full h-full duration-200'>{next.title}
+        <i className='ml-1 my-1 fas fa-angle-double-right' />
+      </a>
+    </Link>
+  </section>
+}

themes/hexo/components/ArticleCopyright.js

@@ -0,0 +1,39 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import CONFIG_HEXO from '../config_hexo'
+
+export default function ArticleCopyright () {
+  if (!CONFIG_HEXO.ARTICLE_COPYRIGHT) {
+    return <></>
+  }
+  const router = useRouter()
+  const [path, setPath] = useState(BLOG.LINK + router.asPath)
+  useEffect(() => {
+    setPath(window.location.href)
+  })
+
+  const { locale } = useGlobal()
+  return <section className="dark:text-gray-300 mt-6">
+    <ul className="overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-700 bg-gray-100 p-5 leading-8 border-l-2 border-blue-500">
+      <li>
+        <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
+        <Link href={'/about'} >
+          <a className="hover:underline">{BLOG.AUTHOR}</a>
+        </Link>
+      </li>
+      <li>
+      <strong className='mr-2'>{locale.COMMON.URL}:</strong>
+        <a className="hover:underline" href={path}>
+          {path}
+        </a>
+      </li>
+      <li>
+        <strong className='mr-2'>{locale.COMMON.COPYRIGHT}:</strong>
+        {locale.COMMON.COPYRIGHT_NOTICE}
+      </li>
+    </ul>
+  </section>
+}

themes/hexo/components/ArticleDetail.js

@@ -8,13 +8,16 @@ import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-typescript'
 import { useEffect, useRef } from 'react'
 import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
+import ArticleAdjacent from './ArticleAdjacent'
+import ArticleCopyright from './ArticleCopyright'
 
 /**
  *
  * @param {*} param0
  * @returns
  */
-export default function ArticleDetail ({ post, recommendPosts, prev, next }) {
+export default function ArticleDetail (props) {
+  const { post } = props
   const zoom = typeof window !== 'undefined' && mediumZoom({
     container: '.notion-viewport',
     background: 'rgba(0, 0, 0, 0.2)',
@@ -63,6 +66,9 @@ export default function ArticleDetail ({ post, recommendPosts, prev, next }) {
           data-ad-slot="3806269138"/>
       </section>
 
+      <ArticleCopyright {...props}/>
+      <ArticleAdjacent {...props}/>
+
     </article>
 
     <hr className='border-dashed'/>

themes/hexo/components/LoadingCover.js

@@ -0,0 +1,8 @@
+export default function LoadingCover () {
+  return (<div id="loading-cover" className={'md:-mt-20 flex-grow dark:text-white text-black animate__animated animate__fadeIn flex flex-col justify-center z-50 w-full h-screen container mx-auto'}>
+  <div className="mx-auto">
+    <i className="fas fa-spinner animate-spin"/>
+  </div>
+</div>
+  )
+}

themes/hexo/config_hexo.js

@@ -14,6 +14,9 @@ const CONFIG_HEXO = {
   POST_LIST_PREVIEW: true, // 读取文章预览
   NAV_TYPE: 'autoCollapse', // ['fixed','autoCollapse','normal'] 分别是固定屏幕顶部、屏幕顶部自动折叠，不固定
 
+  ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
+  ARTICLE_COPYRIGHT: true, // 显示文章版权声明
+
   WIDGET_TO_TOP: true,
   WIDGET_TO_COMMENT: true, // 跳到评论区
   WIDGET_DARK_MODE: true, // 夜间模式