From 9494daee3618a55de79c1f5808bcd07379f84c22 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 6 Mar 2024 12:41:54 +0800
Subject: [PATCH] =?UTF-8?q?simple=E4=B8=BB=E9=A2=98=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=85=B3=E8=81=94=E6=96=87=E7=AB=A0=E6=8E=A8=E8=8D=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/simple/components/RecommendPosts.js | 32 ++++++++++++++++++
 themes/simple/components/SideBar.js        |  8 -----
 themes/simple/config.js                    |  2 ++
 themes/simple/index.js                     |  8 +++--
 themes/starter/style.js                    | 38 +++++++++++-----------
 5 files changed, 59 insertions(+), 29 deletions(-)
 create mode 100644 themes/simple/components/RecommendPosts.js

diff --git a/themes/simple/components/RecommendPosts.js b/themes/simple/components/RecommendPosts.js
new file mode 100644
index 00000000..fd214fa0
--- /dev/null
+++ b/themes/simple/components/RecommendPosts.js
@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 展示文章推荐
+ */
+const RecommendPosts = ({ recommendPosts }) => {
+  const { locale } = useGlobal()
+  if (!siteConfig('SIMPLE_ARTICLE_RECOMMEND_POSTS', null, CONFIG) || !recommendPosts || recommendPosts.length < 1) {
+    return <></>
+  }
+
+  return (
+    <div className="pt-2 border pl-4 py-2 my-4 dark:text-gray-300 ">
+       <div className="mb-2 font-bold text-lg">{locale.COMMON.RELATE_POSTS} :</div>
+        <ul className="font-light text-sm">
+          {recommendPosts.map(post => (
+            <li className="py-1" key={post.id}>
+              <Link href={`/${post.slug}`} className="cursor-pointer hover:underline">
+
+                {post.title}
+
+              </Link>
+            </li>
+          ))}
+        </ul>
+    </div>
+  )
+}
+export default RecommendPosts
diff --git a/themes/simple/components/SideBar.js b/themes/simple/components/SideBar.js
index 3f109cb9..1f4fa2e3 100644
--- a/themes/simple/components/SideBar.js
+++ b/themes/simple/components/SideBar.js
@@ -13,22 +13,14 @@ export default function SideBar (props) {
   const { notice } = props
   return (<>
 
-        <aside>
             <Catalog {...props} />
-        </aside>
 
-        <aside>
             <Live2D />
-        </aside>
 
-        <aside>
             <Announcement post={notice} />
-        </aside>
 
-        <aside>
             <AdSlot/>
             <WWAds orientation="vertical" className="w-full" />
-        </aside>
 
     </>)
 }
diff --git a/themes/simple/config.js b/themes/simple/config.js
index bbacb396..bc0b8fc4 100644
--- a/themes/simple/config.js
+++ b/themes/simple/config.js
@@ -11,6 +11,8 @@ const CONFIG = {
 
   SIMPLE_POST_COVER_ENABLE: process.env.NEXT_PUBLIC_SIMPLE_POST_COVER_ENABLE || false, // 是否展示博客封面
 
+  SIMPLE_ARTICLE_RECOMMEND_POSTS: process.env.NEXT_PUBLIC_SIMPLE_ARTICLE_RECOMMEND_POSTS || true, // 文章详情底部显示推荐
+
   // 菜单配置
   SIMPLE_MENU_CATEGORY: true, // 显示分类
   SIMPLE_MENU_TAG: true, // 显示标签
diff --git a/themes/simple/index.js b/themes/simple/index.js
index 02cb8dd4..60867451 100644
--- a/themes/simple/index.js
+++ b/themes/simple/index.js
@@ -31,6 +31,7 @@ const Footer = dynamic(() => import('./components/Footer'), { ssr: false });
 const SearchInput = dynamic(() => import('./components/SearchInput'), { ssr: false });
 const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false });
 const BlogListPage = dynamic(() => import('./components/BlogListPage'), { ssr: false })
+const RecommendPosts = dynamic(() => import('./components/RecommendPosts'), { ssr: false })
 
 // 主题全局状态
 const ThemeGlobalSimple = createContext()
@@ -175,7 +176,7 @@ const LayoutArchive = props => {
  * @returns
  */
 const LayoutSlug = props => {
-  const { post, lock, validPassword, prev, next } = props
+  const { post, lock, validPassword, prev, next, recommendPosts } = props
   const { fullWidth } = useGlobal()
 
   return (
@@ -201,7 +202,10 @@ const LayoutSlug = props => {
                 {/* 广告嵌入 */}
                 <AdSlot type={'in-article'} />
 
-                {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />}
+                {post?.type === 'Post' && <>
+                <ArticleAround prev={prev} next={next} />
+                <RecommendPosts recommendPosts={recommendPosts}/>
+                </>}
 
                 {/* 评论区 */}
                 <Comment frontMatter={post} />
diff --git a/themes/starter/style.js b/themes/starter/style.js
index c176c16d..cfe51df6 100644
--- a/themes/starter/style.js
+++ b/themes/starter/style.js
@@ -8,7 +8,7 @@
 const Style = () => {
   return <style jsx global>{`
 
-  .sticky{
+  #theme-starter .sticky{
     position: fixed;
     z-index: 9999;
     background-color: rgb(255 255 255 / 0.8);
@@ -19,48 +19,48 @@ const Style = () => {
     transition-duration: 150ms;
   }
   
-  :is(.dark .sticky){
+  :is(.dark #theme-starter .sticky){
     background-color: rgb(17 25 40 / 0.8);
   }
   
-  .sticky {
+  #theme-starter .sticky {
     -webkit-backdrop-filter: blur(5px);
             backdrop-filter: blur(5px);
     box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
   }
   
-  .sticky .navbar-logo{
+  #theme-starter .sticky .navbar-logo{
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
   
-  .sticky #navbarToggler span{
+  #theme-starter .sticky #navbarToggler span{
     --tw-bg-opacity: 1;
     background-color: rgb(17 25 40 / var(--tw-bg-opacity));
   }
   
-  :is(.dark .sticky #navbarToggler span){
+  :is(.dark #theme-starter .sticky #navbarToggler span){
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }
   
-  .sticky #navbarCollapse li > a{
+  #theme-starter .sticky #navbarCollapse li > a{
     --tw-text-opacity: 1;
     color: rgb(17 25 40 / var(--tw-text-opacity));
   }
   
-  .sticky #navbarCollapse li > a:hover{
+  #theme-starter .sticky #navbarCollapse li > a:hover{
     --tw-text-opacity: 1;
     color: rgb(55 88 249 / var(--tw-text-opacity));
     opacity: 1;
   }
   
-  :is(.dark .sticky #navbarCollapse li > a){
+  :is(.dark #theme-starter .sticky #navbarCollapse li > a){
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
   
-  :is(.dark .sticky #navbarCollapse li > a:hover){
+  :is(.dark #theme-starter .sticky #navbarCollapse li > a:hover){
     --tw-text-opacity: 1;
     color: rgb(55 88 249 / var(--tw-text-opacity));
   }
@@ -69,53 +69,53 @@ const Style = () => {
     opacity: 0.7;
   }
   
-  .sticky #navbarCollapse li .ud-menu-scroll.active{
+  #theme-starter .sticky #navbarCollapse li .ud-menu-scroll.active{
     --tw-text-opacity: 1;
     color: rgb(55 88 249 / var(--tw-text-opacity));
     opacity: 1;
   }
   
-  .sticky .loginBtn{
+  #theme-starter .sticky .loginBtn{
     --tw-text-opacity: 1;
     color: rgb(17 25 40 / var(--tw-text-opacity));
   }
   
-  .sticky .loginBtn:hover{
+  #theme-starter .sticky .loginBtn:hover{
     --tw-text-opacity: 1;
     color: rgb(55 88 249 / var(--tw-text-opacity));
     opacity: 1;
   }
   
-  :is(.dark .sticky .loginBtn){
+  :is(.dark #theme-starter .sticky .loginBtn){
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
   
-  :is(.dark .sticky .loginBtn:hover){
+  :is(.dark #theme-starter .sticky .loginBtn:hover){
     --tw-text-opacity: 1;
     color: rgb(55 88 249 / var(--tw-text-opacity));
   }
   
-  .sticky .signUpBtn{
+  #theme-starter .sticky .signUpBtn{
     --tw-bg-opacity: 1;
     background-color: rgb(55 88 249 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
   
-  .sticky .signUpBtn:hover{
+  #theme-starter .sticky .signUpBtn:hover{
     --tw-bg-opacity: 1;
     background-color: rgb(27 68 200 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
   
-  .sticky #themeSwitcher ~ span{
+  #theme-starter .sticky #themeSwitcher ~ span{
     --tw-text-opacity: 1;
     color: rgb(17 25 40 / var(--tw-text-opacity));
   }
   
-  :is(.dark .sticky #themeSwitcher ~ span){
+  :is(.dark #theme-starter .sticky #themeSwitcher ~ span){
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }