样式调整

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