主题微调

themes/Empty/LayoutBase.js

@@ -28,7 +28,7 @@ const LayoutBase = props => {
       </div>
       {/* 内容主体 */}
       <main id="wrapper" className="flex justify-center flex-1 pb-12">
-        <div className="max-w-6xl">{children}</div>
+        <div className="max-w-6xl px-3">{children}</div>
       </main>
     </div>
   )

themes/Empty/LayoutIndex.js

@@ -5,7 +5,6 @@ export const LayoutIndex = props => {
   const { posts } = props
   return (
     <LayoutBase {...props}>
-      Index
       {posts.map(p => (
         <div key={p.id} className='border my-12'>
           <Link href={`/article/${p.slug}`}>

themes/Empty/LayoutSearch.js

@@ -1,6 +1,42 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import LayoutBase from './LayoutBase'
 
-export const LayoutSearch = (props) => {
-  return <LayoutBase {...props}>
-  </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
+        }
+      }
+    }, 100)
+  })
+
+  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>
+        ))}
+      </div>
+    </LayoutBase>
+  )
 }

themes/Fukasawa/LayoutBase.js

@@ -28,7 +28,7 @@ const LayoutBase = (props) => {
     <div className='flex'>
       <AsideLeft {...props}/>
       <main id='wrapper' className='flex w-full py-8 justify-center'>
-        <div className='2xl:max-w-6xl md:max-w-3xl w-full'>
+        <div className='2xl:max-w-6xl md:max-w-4xl w-full'>
           <div> {headerSlot} </div>
           <div>{children}</div>
         </div>

themes/Hexo/components/BlogPostCard.js

@@ -14,7 +14,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
       <div className='lg:p-8 p-4 flex flex-col w-full'>
         <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-          <a className={`cursor-pointer hover:underline text-3xl font-sans ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+          <a className={`cursor-pointer hover:underline text-2xl font-sans ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
             {post.title}
           </a>
         </Link>

themes/Medium/components/BlogPostCard.js

@@ -15,7 +15,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
         <div className='lg:p-8 p-4 flex flex-col w-full'>
           <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-            <a className={'cursor-pointer font-bold font-sans hover:underline text-3xl flex justify-start leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'}>
+            <a className={'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'}>
               {post.title}
             </a>
           </Link>

themes/NEXT/components/BlogPostCard.js

@@ -17,7 +17,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
       <div className='lg:p-8 p-4 flex flex-col w-full'>
         <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-          <a className={`cursor-pointer font-bold hover:underline text-3xl flex ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+          <a className={`cursor-pointer font-bold hover:underline text-3xl ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
             {post.title}
           </a>
         </Link>