HEXO 主题样式微调

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>
+  )
+}