refactor(Sidebar): 优化Study组件渲染逻辑和样式代码

重构Study组件渲染条件，仅当sidebar包含study时才渲染
使用SCSS变量和循环优化RandomArticle组件的排名样式代码

src/components/Sidebar/RandomArticle/index.scss

@@ -1,50 +1,31 @@
+// 定义颜色变量
+$ranking-colors: (
+  1: #f83356,
+  2: #faa527,
+  3: #3c83fd,
+  4: #56c357,
+  5: #6756c3
+);
+
 .RandomArticleComponent {
-    .item {
-        background-size: 100%;
+  .item {
+    background-size: 100%;
+    transition: background-size 0.3s ease; // 添加过渡效果
 
-        // 鼠标经过效果
-        &:hover {
-            background-size: 105%;
-        }
-
-        &:nth-of-type(1) .ranking {
-            background-color: #f83356;
-
-            &::after {
-                border-color: transparent transparent transparent #f83356;
-            }
-        }
-
-        &:nth-of-type(2) .ranking {
-            background-color: #faa527;
-
-            &::after {
-                border-color: transparent transparent transparent #faa527;
-            }
-        }
-
-        &:nth-of-type(3) .ranking {
-            background-color: #3c83fd;
-
-            &::after {
-                border-color: transparent transparent transparent #3c83fd;
-            }
-        }
-
-        &:nth-of-type(4) .ranking {
-            background-color: #56c357;
-
-            &::after {
-                border-color: transparent transparent transparent #56c357;
-            }
-        }
-
-        &:nth-of-type(5) .ranking {
-            background-color: #6756c3;
-
-            &::after {
-                border-color: transparent transparent transparent #6756c3;
-            }
-        }
+    // 鼠标经过效果
+    &:hover {
+      background-size: 105%;
     }
+
+    // 使用循环生成排名样式
+    @each $rank, $color in $ranking-colors {
+      &:nth-of-type(#{$rank}) .ranking {
+        background-color: $color;
+
+        &::after {
+          border-color: transparent transparent transparent $color;
+        }
+      }
+    }
+  }
 }

src/components/Sidebar/index.tsx

@@ -27,8 +27,7 @@ export default async () => {
         {/* 最新评论 */}
         {sidebar.includes('newComments') && <Comment />}
         {/* 装饰组件 */}
-        {/* {sidebar.includes('study') && <Study />} */}
-        <Study />
+        {sidebar.includes('study') && <Study />}
       </div>
     </>
   );