simple主题支持关联文章推荐

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

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

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, // 显示标签

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} />

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