用DeepSeek开发的右侧边栏

开源 Discourse
1

鎴睆2025-06-30 13.56.40
鎴睆2025-06-30 13.56.401920×1009 61.1 KB

很尴尬，导致原有的很多地方的布局都错位了
强迫症不得不删除，有兴趣的小伙伴可以拓展下试试

css
.header-sidebar-toggle{
    position: relative;
    left: -149px;
}
.home-logo-wrapper-outlet{
    position: relative;
    left: -154px;
}
.d-header-mode{
    position: relative;
    left: -154px;
}
.sidebar-wrapper {
    position: relative;
    top: -20px;
    left: -154px;
}

#main-outlet {
    position: relative;
    left: -154px;
}

.custom-sidebar {
  position: fixed;
  right: 390px;
  top: 0;
  width: 300px;
  height: 100vh;
  padding: 20px;
  background: #ffffff;
  z-index: 1000;
  overflow-y: auto;
}

.auth-section {
  margin-bottom: 24px;
  margin-top: 60px;
  text-align: center;
}

.btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border-radius: 4px;
  font-weight: bold;
}

.ad-unit {
  width: 260px;
  height: 80px;
  background: #f8f9fa;
  margin: 15px 0;
  border: 1px solid #e9ecef;
}

.member-grid {
  display: flex;
  flex-wrap: wrap;
}

.member-col {
  width: 25%;
  padding: 5px;
}

.member {
  text-align: center;
  margin-bottom: 12px;
}

.member img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}


html
<div class="custom-sidebar">
 <!-- 登录/注册区域 -->
 <div class="auth-section">
   <button class="btn btn-login">登录</button>
   <button class="btn btn-register">注册</button>
 </div>
 
 <!-- 快捷导航 -->
 <div class="quick-nav">
   <h3>快捷导航</h3>
   <ul>
     <li><a href="/latest">最新帖子</a></li>
     <li><a href="/top">热门内容</a></li>
     <li><a href="/categories">分类浏览</a></li>
   </ul>
 </div>
 
 <!-- 广告位 -->
 <div class="ad-container">
   <div class="ad-unit"></div>
   <div class="ad-unit"></div>
   <div class="ad-unit"></div>
   <div class="ad-unit"></div>
 </div>
 
 <!-- 用户统计 -->
 <div class="user-counter">
   <h3>社区成员 <span class="count">12,345</span></h3>
 </div>
 
 <!-- 新用户展示 -->
 <div class="new-members">
   <h3>欢迎新成员</h3>
   <div class="member-grid">
     <div class="member-col">
       <div class="member"><img src="avatar1.jpg"><span>用户1</span></div>
       <div class="member"><img src="avatar2.jpg"><span>用户2</span></div>
     </div>
     <div class="member-col">
       <div class="member"><img src="avatar3.jpg"><span>用户3</span></div>
       <div class="member"><img src="avatar4.jpg"><span>用户4</span></div>
     </div>
     <div class="member-col">
       <div class="member"><img src="avatar5.jpg"><span>用户5</span></div>
       <div class="member"><img src="avatar6.jpg"><span>用户6</span></div>
     </div>
     <div class="member-col">
       <div class="member"><img src="avatar7.jpg"><span>用户7</span></div>
       <div class="member"><img src="avatar8.jpg"><span>用户8</span></div>
     </div>
   </div>
 </div>
</div>
2

就写了个前端，不是很懂

3

组件吗

4

有没有效果图呀？

5

大佬有没有效果图，来展示一下 :clap:

6

上传了，更新了一版，还是有点问题；图片中的广告位都打码了
新增了右侧边栏布局自适应，因为左侧边栏和中间内容板块需要做整体向左偏移，导致原有的自适应布局失效了。。。还需要修复