Merge pull request #97 from tangly1024/preview

样式调整

blog.config.js

@@ -41,8 +41,9 @@ const BLOG = {
   CONTACT_TELEGRAM: '',
 
   // 悬浮挂件
-  WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || false, // 是否显示宠物挂件
+  WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
   WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
+  WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题
 
   // 评论互动 可同时开启 CUSDIS UTTERRANCES GITALK
   COMMENT_CUSDIS_APP_ID: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID || '', // data-app-id 36位 see https://cusdis.com/
@@ -78,7 +79,7 @@ const BLOG = {
   ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx
 
   isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
-  VERSION: '2.8.0' // 版本号
+  VERSION: '2.8.1' // 版本号
 }
 
 module.exports = BLOG

components/Live2D.js

@@ -11,10 +11,11 @@ export default function Live2D () {
   const [init, setInit] = useState()
   const { switchTheme } = useGlobal()
 
-  // if (typeof window !== 'undefined' && !hasLoad) {
-  //   initLive2D()
-  //   hasLoad = true
-  // }
+  function handleClick () {
+    if (BLOG.WIDGET_PET_SWITCH_THEME) {
+      switchTheme()
+    }
+  }
 
   useEffect(() => {
     if (!init) {
@@ -23,7 +24,7 @@ export default function Live2D () {
     }
   }, [init])
 
-  return <canvas id="live2d" className='cursor-pointer' width="280" height="250" onClick={switchTheme} alt='切换主题' title='切换主题'/>
+  return <canvas id="live2d" className='cursor-pointer' width="280" height="250" onClick={handleClick} alt='切换主题' title='切换主题'/>
 }
 
 function initLive2D () {

lib/theme.js

@@ -1,7 +1,7 @@
 import cookie from 'react-cookies'
 import BLOG from '@/blog.config'
 
-export const ALL_THEME = ['next', 'fukasawa', 'hexo', 'empty', 'medium']
+export const ALL_THEME = ['hexo', 'next', 'medium', 'fukasawa', 'empty']
 /**
  * 初始化主题
  * @param isDarkMode

themes/empty/LayoutArchive.js

@@ -1,6 +1,69 @@
-export const LayoutArchive = (props) => {
-  // const { posts, tags, categories, postCount } = props
-  return <div {...props}>
-    Archive Page
-  </div>
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import LayoutBase from './LayoutBase'
+
+export const LayoutArchive = props => {
+  const { posts } = props
+  const { locale } = useGlobal()
+  const postsSortByDate = Object.create(posts)
+
+  postsSortByDate.sort((a, b) => {
+    const dateA = new Date(a?.date.start_date || a.createdTime)
+    const dateB = new Date(b?.date.start_date || b.createdTime)
+    return dateB - dateA
+  })
+
+  const meta = {
+    title: `${locale.NAV.ARCHIVE} | ${BLOG.TITLE}`,
+    description: BLOG.DESCRIPTION,
+    type: 'website'
+  }
+
+  const archivePosts = {}
+
+  postsSortByDate.forEach(post => {
+    const date = post.date.start_date.slice(0, 7)
+    if (archivePosts[date]) {
+      archivePosts[date].push(post)
+    } else {
+      archivePosts[date] = [post]
+    }
+  })
+  return (
+    <LayoutBase {...props} meta={meta}>
+      <div className="mb-10 pb-20 md:p-12 p-3  min-h-full">
+        {Object.keys(archivePosts).map(archiveTitle => (
+          <div key={archiveTitle}>
+            <div
+              className="pt-16 pb-4 text-3xl dark:text-gray-300"
+              id={archiveTitle}
+            >
+              {archiveTitle}
+            </div>
+            <ul>
+              {archivePosts[archiveTitle].map(post => (
+                <li
+                  key={post.id}
+                  className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
+                >
+                  <div id={post?.date?.start_date}>
+                    <span className="text-gray-400">
+                      {post.date.start_date}
+                    </span>{' '}
+                    &nbsp;
+                    <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
+                      <a className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+                        {post.title}
+                      </a>
+                    </Link>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </LayoutBase>
+  )
 }

themes/empty/LayoutBase.js

@@ -3,6 +3,7 @@ import Live2D from '@/components/Live2D'
 import Link from 'next/link'
 import React from 'react'
 import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
 
@@ -10,47 +11,123 @@ import BLOG from '@/blog.config'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, meta } = props
+  const { children, meta, customNav } = props
+  const { locale } = useGlobal()
   const d = new Date()
   const currentYear = d.getFullYear()
   const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
+
+  let links = [
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search' },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive' },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category' },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag' }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
   return (
     <div>
       <CommonHead meta={meta} />
       {/* 导航菜单 */}
       <div className="w-full flex justify-center my-2">
-        <nav className="max-w-6xl space-x-3 underline">
-          <Link href="/">
-            <a>首页</a>
-          </Link>
-        </nav>
+        <div className=" max-w-6xl justify-between w-full flex">
+          <section>
+            <Link title={BLOG.TITLE} href={'/'}>
+              <a className={'cursor-pointer flex items-center hover:underline'}>
+                <i className={'fas fa-home mr-1'} />
+                <div className="text-center">{BLOG.TITLE} </div>
+              </a>
+            </Link>
+          </section>
+          <nav className="space-x-3 flex">
+            {links.map(link => {
+              if (link) {
+                return (
+                  <Link key={`${link.to}`} title={link.to} href={link.to}>
+                    <a
+                      className={
+                        'cursor-pointer flex items-center hover:underline'
+                      }
+                    >
+                      <i className={`${link.icon} mr-1`} />
+                      <div className="text-center">{link.name}</div>
+                    </a>
+                  </Link>
+                )
+              } else {
+                return null
+              }
+            })}
+          </nav>
+        </div>
       </div>
+
       {/* 内容主体 */}
       <main id="wrapper" className="flex justify-center flex-1 pb-12">
-        <div className="max-w-4xl px-3">{children}</div>
-        <div >
-          <div className='sticky top-0 z-40'>
-          <Live2D/>
+        <div className="max-w-4xl w-full px-3">{children}</div>
+        <div>
+          <div className="sticky top-0 z-40">
+            <Live2D />
           </div>
         </div>
       </main>
-      <footer
-      className='font-sans dark:bg-gray-900 flex-shrink-0  justify-center text-center m-auto w-full leading-6 text-sm p-6'
-    >
-      <i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
-      <br/>
 
-      <span>Powered by <a href='https://notion.so' className='underline font-bold dark:text-gray-300'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold  dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span>
-
-      {BLOG.BEI_AN && <><br /><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
-      <br/>
-      <span className='hidden busuanzi_container_site_pv'>
-            <i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
-      <span className='pl-2 hidden busuanzi_container_site_uv'>
-        <i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
-        <br/>
+      {/* 页脚 */}
+      <footer className="font-sans dark:bg-gray-900 flex-shrink-0  justify-center text-center m-auto w-full leading-6 text-sm p-6">
+        <i className="fas fa-copyright" /> {`${startYear}${currentYear}`}{' '}
+        <span>
+          <i className="mx-1 animate-pulse fas fa-heart" />{' '}
+          <a
+            href={BLOG.LINK}
+            className="underline font-bold dark:text-gray-300 "
+          >
+            {BLOG.AUTHOR}
+          </a>
+          .
+          <br />
+          <span>
+            Powered by{' '}
+            <a
+              href="https://notion.so"
+              className="underline font-bold dark:text-gray-300"
+            >
+              Notion
+            </a>{' '}
+            &{' '}
+            <a
+              href="https://github.com/tangly1024/NotionNext"
+              className="underline font-bold  dark:text-gray-300"
+            >
+              NotionNext {BLOG.VERSION}
+            </a>
+            .
+          </span>
+        </span>
+        {BLOG.BEI_AN && (
+          <>
+            <br />
+            <i className="fas fa-shield-alt" />{' '}
+            <a href="https://beian.miit.gov.cn/" className="mr-2">
+              {BLOG.BEI_AN}
+            </a>
+            <br />
+          </>
+        )}
+        <br />
+        <span className="hidden busuanzi_container_site_pv">
+          <i className="fas fa-eye" />
+          <span className="px-1 busuanzi_value_site_pv"> </span>{' '}
+        </span>
+        <span className="pl-2 hidden busuanzi_container_site_uv">
+          <i className="fas fa-users" />{' '}
+          <span className="px-1 busuanzi_value_site_uv"> </span>{' '}
+        </span>
+        <br />
         <h1>{meta?.title || BLOG.TITLE}</h1>
-    </footer>
+      </footer>
     </div>
   )
 }

themes/empty/LayoutCategory.js

@@ -1,8 +1,48 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useState } from 'react'
 import LayoutBase from './LayoutBase'
 
-export const LayoutCategory = (props) => {
-  const { category } = props
-  return <LayoutBase {...props}>
-    Category -  {category}
-  </LayoutBase>
+export const LayoutCategory = props => {
+  const { category, posts } = props
+  const { locale } = useGlobal()
+
+  const [page, updatePage] = useState(1)
+  let hasMore = false
+  const postsToShow = posts
+    ? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
+    : []
+
+  if (posts) {
+    const totalCount = posts.length
+    hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
+  }
+  const handleGetMore = () => {
+    if (!hasMore) return
+    updatePage(page + 1)
+  }
+
+  return (
+    <LayoutBase {...props}>
+      Category - {category}
+      {postsToShow.map(p => (
+        <div key={p.id} className="border my-12">
+          <Link href={`/article/${p.slug}`}>
+            <a className="underline cursor-pointer">{p.title}</a>
+          </Link>
+          <div>{p.summary}</div>
+        </div>
+      ))}
+      <div>
+        <div
+          onClick={handleGetMore}
+          className="w-full my-4 py-4 text-center cursor-pointer "
+        >
+          {' '}
+          {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+        </div>
+      </div>
+    </LayoutBase>
+  )
 }

themes/empty/LayoutCategoryIndex.js

@@ -1,8 +1,25 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
 import LayoutBase from './LayoutBase'
 
 export const LayoutCategoryIndex = (props) => {
-  // const { tags, allPosts, categories, postCount, latestPosts } = props
+  const { categories } = props
+  const { locale } = useGlobal()
   return <LayoutBase {...props}>
-    CategoryIndex
+    <div className=' p-10'>
+      <div className='dark:text-gray-200 mb-5'>
+        <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
+      </div>
+      <div id='category-list' className='duration-200 flex flex-wrap'>
+        {categories && categories.map(category => {
+          return <Link key={category.name} href={`/category/${category.name}`} passHref>
+            <div
+              className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
+              <i className='mr-4 fas fa-folder' />{category.name}({category.count})
+            </div>
+          </Link>
+        })}
+      </div>
+    </div>
   </LayoutBase>
 }

themes/empty/LayoutSearch.js

@@ -1,41 +1,59 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import SearchInput from './components/SearchInput'
 import LayoutBase from './LayoutBase'
 
 export const LayoutSearch = props => {
   const { keyword, posts } = props
-  const router = useRouter()
-  const currentSearch = keyword || router?.query?.s
-  let handleTextColor = false
   useEffect(() => {
     setTimeout(() => {
-      if (currentSearch && !handleTextColor) {
-        const container = document.getElementById('container')
-        if (container && container.innerHTML) {
-          const re = new RegExp(`${currentSearch}`, 'gim')
-          container.innerHTML = container.innerHTML.replace(
-            re,
-            `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`
-          )
-          handleTextColor = true
-        }
+      const container = document.getElementById('container')
+      if (container && container.innerHTML) {
+        const re = new RegExp(`${keyword}`, 'gim')
+        container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)
       }
     }, 100)
   })
 
+  const { locale } = useGlobal()
+
+  const [page, updatePage] = useState(1)
+  let hasMore = false
+  const postsToShow = posts
+    ? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
+    : []
+
+  if (posts) {
+    const totalCount = posts.length
+    hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
+  }
+  const handleGetMore = () => {
+    if (!hasMore) return
+    updatePage(page + 1)
+  }
+
   return (
     <LayoutBase {...props}>
-      <h2>Search</h2>
-      <div id="container">
-        {posts.map(p => (
-          <div key={p.id} className="border my-12">
-            <Link href={`/article/${p.slug}`}>
-              <a className="underline cursor-pointer">{p.title}</a>
-            </Link>
-            <div>{p.summary}</div>
-          </div>
-        ))}
+      <h2>Search - {keyword}</h2>
+      <SearchInput {...props} />
+      {postsToShow.map(p => (
+        <div key={p.id} className="border my-12">
+          <Link href={`/article/${p.slug}`}>
+            <a className="underline cursor-pointer">{p.title}</a>
+          </Link>
+          <div>{p.summary}</div>
+        </div>
+      ))}
+      <div>
+        <div
+          onClick={handleGetMore}
+          className="w-full my-4 py-4 text-center cursor-pointer "
+        >
+          {' '}
+          {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+        </div>
       </div>
     </LayoutBase>
   )

themes/empty/LayoutTag.js

@@ -1,8 +1,49 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useState } from 'react'
 import LayoutBase from './LayoutBase'
 
-export const LayoutTag = (props) => {
-  const { tag } = props
-  return <LayoutBase>
-     Tag - {tag}
-   </LayoutBase>
+export const LayoutTag = props => {
+  const { tag, posts } = props
+  const { locale } = useGlobal()
+
+  const [page, updatePage] = useState(1)
+
+  let hasMore = false
+  const postsToShow = posts
+    ? Object.assign(posts).slice(0, BLOG.POSTS_PER_PAGE * page)
+    : []
+
+  if (posts) {
+    const totalCount = posts.length
+    hasMore = page * BLOG.POSTS_PER_PAGE < totalCount
+  }
+  const handleGetMore = () => {
+    if (!hasMore) return
+    updatePage(page + 1)
+  }
+
+  return (
+    <LayoutBase>
+      Tag - {tag}
+      {postsToShow.map(p => (
+        <div key={p.id} className="border my-12">
+          <Link href={`/article/${p.slug}`}>
+            <a className="underline cursor-pointer">{p.title}</a>
+          </Link>
+          <div>{p.summary}</div>
+        </div>
+      ))}
+      <div>
+        <div
+          onClick={handleGetMore}
+          className="w-full my-4 py-4 text-center cursor-pointer "
+        >
+          {' '}
+          {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+        </div>
+      </div>
+    </LayoutBase>
+  )
 }

themes/empty/LayoutTagIndex.js

@@ -1,8 +1,24 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
 import LayoutBase from './LayoutBase'
 
 export const LayoutTagIndex = (props) => {
-  // const { tags, categories, postCount, latestPosts } = props
+  const { tags } = props
+  const { locale } = useGlobal()
   return <LayoutBase {...props}>
-     TagIndex
-   </LayoutBase>
+    <div className='p-10'>
+      <div className='dark:text-gray-200 mb-5'><i className='mr-4 fas fa-tag'/>{locale.COMMON.TAGS}:</div>
+      <div id='tags-list' className='duration-200 flex flex-wrap'>
+        { tags.map(tag => {
+          return <div key={tag.name} className='p-2'>
+            <Link key={tag} href={`/tag/${encodeURIComponent(tag.name)}`} passHref>
+          <a className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
+            mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
+          <div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag'/> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+          </a>
+  </Link>
+  </div>
+        }) }
+      </div>
+    </div>   </LayoutBase>
 }

themes/empty/components/SearchInput.js

@@ -0,0 +1,87 @@
+import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
+import { useImperativeHandle, useRef, useState } from 'react'
+
+let lock = false
+
+const SearchInput = ({ currentTag, currentSearch, cRef }) => {
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const searchInputRef = useRef(null)
+  useImperativeHandle(cRef, () => {
+    return {
+      focus: () => {
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+  const handleSearch = () => {
+    const key = searchInputRef.current.value
+    if (key && key !== '') {
+      router.push({ pathname: '/search/' + key }).then(r => {
+        console.log('搜索', key)
+      })
+    } else {
+      router.push({ pathname: '/' }).then(r => {
+      })
+    }
+  }
+  const handleKeyUp = (e) => {
+    if (e.keyCode === 13) { // 回车
+      handleSearch(searchInputRef.current.value)
+    } else if (e.keyCode === 27) { // ESC
+      cleanSearch()
+    }
+  }
+  const cleanSearch = () => {
+    searchInputRef.current.value = ''
+    setShowClean(false)
+  }
+  function lockSearchInput () {
+    lock = true
+  }
+
+  function unLockSearchInput () {
+    lock = false
+  }
+  const [showClean, setShowClean] = useState(false)
+  const updateSearchKey = (val) => {
+    if (lock) {
+      return
+    }
+    searchInputRef.current.value = val
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
+    }
+  }
+
+  return <section className='flex w-full bg-gray-100'>
+  <input
+    ref={searchInputRef}
+    type='text'
+    placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
+    className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+    onKeyUp={handleKeyUp}
+    onCompositionStart={lockSearchInput}
+    onCompositionUpdate={lockSearchInput}
+    onCompositionEnd={unLockSearchInput}
+    onChange={e => updateSearchKey(e.target.value)}
+    defaultValue={currentSearch || ''}
+  />
+
+  <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
+    onClick={handleSearch}>
+      <i className={'hover:text-black transform duration-200  text-gray-500 cursor-pointer fas fa-search'} />
+  </div>
+
+  {(showClean &&
+    <div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
+      <i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} />
+    </div>
+    )}
+</section>
+}
+
+export default SearchInput

themes/fukasawa/LayoutCategoryIndex.js

@@ -26,5 +26,6 @@ export const LayoutCategoryIndex = (props) => {
           </Link>
         })}
       </div>
-    </div>  </LayoutBase>
+    </div>
+  </LayoutBase>
 }

themes/fukasawa/components/AsideLeft.js

@@ -6,9 +6,11 @@ import GroupTag from './GroupTag'
 import SearchInput from './SearchInput'
 import SiteInfo from './SiteInfo'
 import Catalog from './Catalog'
+import { useRouter } from 'next/router'
 
 function AsideLeft (props) {
   const { tags, currentTag, categories, currentCategory, post, slot } = props
+  const router = useRouter()
   return <div className='w-72 bg-white dark:bg-gray-800 min-h-screen px-10 py-14 hidden lg:block'>
     <Logo />
 
@@ -27,15 +29,15 @@ function AsideLeft (props) {
       { BLOG.DESCRIPTION }
     </section>
 
-    <section className='flex flex-col'>
+    {router.asPath !== '/tag' && <section className='flex flex-col'>
       <hr className='w-12 my-8 ' />
       <GroupTag tags={tags} currentTag={currentTag}/>
-    </section>
+    </section>}
 
-    <section className='flex flex-col'>
+    {router.asPath !== '/category' && <section className='flex flex-col'>
       <hr className='w-12 my-8 ' />
       <GroupCategory categories={categories} currentCategory={currentCategory}/>
-    </section>
+    </section>}
 
     <section className='flex flex-col'>
       <hr className='w-12 my-8 ' />

themes/hexo/LayoutSearch.js

@@ -19,7 +19,7 @@ export const LayoutSearch = props => {
   useEffect(() => {
     setTimeout(() => {
       // 自动聚焦到搜索框
-      cRef.current.focus()
+      cRef?.current?.focus()
       if (currentSearch && !handleTextColor) {
         const targets = document.getElementsByClassName('replace')
         for (const container of targets) {

themes/hexo/components/BlogPostListEmpty.js

@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 
 /**
  * 空白博客 列表
@@ -5,8 +6,9 @@
  * @constructor
  */
 const BlogPostListEmpty = ({ currentSearch }) => {
+  const { locale } = useGlobal()
   return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
-        <p className='text-gray-500 dark:text-gray-300'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
+        <div className='text-gray-500 dark:text-gray-300'>{locale.COMMON.NO_MORE} {(currentSearch && <div>{currentSearch}</div>)}</div>
   </div>
 }
 export default BlogPostListEmpty

themes/medium/LayoutArchive.js

@@ -1,6 +1,69 @@
-export const LayoutArchive = (props) => {
-  // const { posts, tags, categories, postCount } = props
-  return <div {...props}>
-    Archive Page
-  </div>
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import LayoutBase from './LayoutBase'
+
+export const LayoutArchive = props => {
+  const { posts } = props
+  const { locale } = useGlobal()
+  const postsSortByDate = Object.create(posts)
+
+  postsSortByDate.sort((a, b) => {
+    const dateA = new Date(a?.date.start_date || a.createdTime)
+    const dateB = new Date(b?.date.start_date || b.createdTime)
+    return dateB - dateA
+  })
+
+  const meta = {
+    title: `${locale.NAV.ARCHIVE} | ${BLOG.TITLE}`,
+    description: BLOG.DESCRIPTION,
+    type: 'website'
+  }
+
+  const archivePosts = {}
+
+  postsSortByDate.forEach(post => {
+    const date = post.date.start_date.slice(0, 7)
+    if (archivePosts[date]) {
+      archivePosts[date].push(post)
+    } else {
+      archivePosts[date] = [post]
+    }
+  })
+  return (
+    <LayoutBase {...props} meta={meta}>
+      <div className="mb-10 pb-20 md:p-12 p-3  min-h-full">
+        {Object.keys(archivePosts).map(archiveTitle => (
+          <div key={archiveTitle}>
+            <div
+              className="pt-16 pb-4 text-3xl dark:text-gray-300"
+              id={archiveTitle}
+            >
+              {archiveTitle}
+            </div>
+            <ul>
+              {archivePosts[archiveTitle].map(post => (
+                <li
+                  key={post.id}
+                  className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
+                >
+                  <div id={post?.date?.start_date}>
+                    <span className="text-gray-400">
+                      {post.date.start_date}
+                    </span>{' '}
+                    &nbsp;
+                    <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
+                      <a className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+                        {post.title}
+                      </a>
+                    </Link>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </LayoutBase>
+  )
 }

themes/medium/LayoutCategoryIndex.js

@@ -1,8 +1,25 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
 import LayoutBase from './LayoutBase'
 
 export const LayoutCategoryIndex = (props) => {
-  // const { tags, allPosts, categories, postCount, latestPosts } = props
+  const { categories } = props
+  const { locale } = useGlobal()
   return <LayoutBase {...props}>
-    CategoryIndex
+       <div className='bg-white dark:bg-gray-700 p-10'>
+      <div className='dark:text-gray-200 mb-5'>
+        <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
+      </div>
+      <div id='category-list' className='duration-200 flex flex-wrap'>
+        {categories && categories.map(category => {
+          return <Link key={category.name} href={`/category/${category.name}`} passHref>
+            <div
+              className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
+              <i className='mr-4 fas fa-folder' />{category.name}({category.count})
+            </div>
+          </Link>
+        })}
+      </div>
+    </div>
   </LayoutBase>
 }

themes/medium/LayoutTagIndex.js

@@ -1,8 +1,27 @@
+import { useGlobal } from '@/lib/global'
+import TagItemMini from './components/TagItemMini'
 import LayoutBase from './LayoutBase'
 
-export const LayoutTagIndex = (props) => {
-  // const { tags, categories, postCount, latestPosts } = props
-  return <LayoutBase {...props}>
-     TagIndex
-   </LayoutBase>
+export const LayoutTagIndex = props => {
+  const { tags } = props
+  const { locale } = useGlobal()
+  return (
+    <LayoutBase {...props}>
+      <div className="bg-white dark:bg-gray-700 p-10">
+        <div className="dark:text-gray-200 mb-5">
+          <i className="mr-4 fas fa-tag" />
+          {locale.COMMON.TAGS}:
+        </div>
+        <div id="tags-list" className="duration-200 flex flex-wrap">
+          {tags.map(tag => {
+            return (
+              <div key={tag.name} className="p-2">
+                <TagItemMini key={tag.name} tag={tag} />
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </LayoutBase>
+  )
 }