From cd8a39a6e48d894f60655f5f43a3a2f52f1b4443 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 11 Dec 2022 17:43:37 +0800
Subject: [PATCH] LatestPosts

---
 styles/globals.css                         | 11 +++++++++++
 themes/hexo/components/LatestPostsGroup.js | 14 ++++++++------
 themes/next/components/LatestPostsGroup.js | 12 ++++++------
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/styles/globals.css b/styles/globals.css
index 6035eed9..a4e86ff1 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -191,4 +191,15 @@ nav {
 
 .wl-meta > span {
   @apply dark:bg-gray-800 !important
+}
+
+/* 固定两行 */
+.text-line-2 {
+    overflow : hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	word-wrap: break-word;
+	word-break: break-all;
 }
\ No newline at end of file
diff --git a/themes/hexo/components/LatestPostsGroup.js b/themes/hexo/components/LatestPostsGroup.js
index 3c4a9a46..96eda369 100644
--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/themes/hexo/components/LatestPostsGroup.js
@@ -10,12 +10,14 @@ import { useRouter } from 'next/router'
  * @constructor
  */
 const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
-  if (!latestPosts) {
-    return <></>
-  }
   // 获取当前路径
   const currentPath = useRouter().asPath
   const { locale } = useGlobal()
+
+  if (!latestPosts) {
+    return <></>
+  }
+
   return (
     <>
       <div className=" mb-2 px-1 flex flex-nowrap justify-between">
@@ -37,7 +39,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
             href={`${BLOG.SUB_PATH}/${post.slug}`}
             passHref
           >
-            <a className={'my-1 flex '}>
+            <a className={'my-2 flex'}>
               <div
                 className="w-20 h-16 bg-cover bg-center bg-no-repeat"
                 style={{ backgroundImage: headerImage }}
@@ -45,12 +47,12 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
               <div
                 className={
                   (selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
-                  ' text-sm py-1.5 overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
+                  ' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
                   'hover:text-white dark:hover:text-indigo-400 cursor-pointer items-center flex'
                 }
               >
                 <div>
-                  <div style={{ WebkitLineClamp: 2 }}>{post.title}</div>
+                  <div className='text-line-2'>{post.title}</div>
                   <div className="text-gray-500">{post.lastEditedTime}</div>
                 </div>
               </div>
diff --git a/themes/next/components/LatestPostsGroup.js b/themes/next/components/LatestPostsGroup.js
index a55e1bf1..79de1c5c 100644
--- a/themes/next/components/LatestPostsGroup.js
+++ b/themes/next/components/LatestPostsGroup.js
@@ -10,13 +10,14 @@ import { useRouter } from 'next/router'
  * @constructor
  */
 const LatestPostsGroup = ({ latestPosts }) => {
-  if (!latestPosts) {
-    return <></>
-  }
   // 获取当前路径
   const currentPath = useRouter().asPath
   const { locale } = useGlobal()
 
+  if (!latestPosts) {
+    return <></>
+  }
+
   return (
     <>
       <div className="text-sm pb-1 px-2 flex flex-nowrap justify-between">
@@ -40,12 +41,11 @@ const LatestPostsGroup = ({ latestPosts }) => {
                   (selected
                     ? 'text-white  bg-gray-600 '
                     : 'text-gray-500 dark:text-gray-400 ') +
-                  ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-2 duration-200 w-full ' +
+                  ' text-xs py-1.5 flex hover:bg-gray-500 px-2 duration-200 w-full ' +
                   'hover:text-white dark:hover:text-white cursor-pointer'
                 }
               >
-                <i className="mr-2 fas fa-file-alt" />
-                <div className="truncate">{post.title}</div>
+                <li className="text-line-2">{post.title}</li>
               </div>
             </a>
           </Link>