织梦cms栏目侧边栏设置

栏目侧边栏概述

织梦CMS栏目的侧边栏（Sidebar）是栏目页面的重要组成部分，通常用于展示子栏目导航、热门文章、推荐内容、广告位等辅助信息。合理的侧边栏布局能提升用户体验和页面转化率。

一、侧边栏的子栏目导航

<!-- 栏目页侧边栏：显示当前栏目下的子栏目 -->
<div class="sidebar">
  <div class="side-box">
    <h3>栏目导航</h3>
    <ul class="sub-nav">
      {dede:channel type='son' currentstyle="
      <li class='active'><a href='~typelink~'>~typename~</a></li>"}
      <li><a href="[field:typelink/]">[field:typename/]</a></li>
      {/dede:channel}
    </ul>
  </div>
</div>

二、侧边栏完整布局代码

<!-- 栏目列表页完整侧边栏 -->
<aside class="sidebar">
  
  <!-- 1. 子栏目导航 -->
  <div class="side-box">
    <h3>本栏目导航</h3>
    {dede:channel type='son'}
    <li><a href="[field:typelink/]">[field:typename/]</a></li>
    {/dede:channel}
  </div>
  
  <!-- 2. 本栏目推荐文章 -->
  <div class="side-box">
    <h3>推荐阅读</h3>
    {dede:arclist typeid='{dede:field.id/}' flag='c' row='5' titlelen='36'}
    <li><a href="[field:arcurl/]">[field:title/]</a></li>
    {/dede:arclist}
  </div>
  
  <!-- 3. 热门文章排行 -->
  <div class="side-box">
    <h3>热门排行</h3>
    {dede:arclist typeid='{dede:field.id/}' row='10' orderby='click'}
    <li>
      <span class="rank">{dede:global.autoindex/}</span>
      <a href="[field:arcurl/]">[field:title/]</a>
    </li>
    {/dede:arclist}
  </div>
  
  <!-- 4. TAG标签云 -->
  <div class="side-box">
    <h3>热门标签</h3>
    <div class="tag-cloud">
      {dede:tag sort='hot' row='20'}
      <a href="[field:link/]">[field:tag /]</a>
      {/dede:tag}
    </div>
  </div>
  
  <!-- 5. 广告位 -->
  <div class="side-ad">
    <a href="/ad/link.html">
      <img src="/images/ad-300x250.jpg" alt="广告">
    </a>
  </div>
  
</aside>

三、不同栏目使用不同侧边栏

通过判断当前栏目ID加载不同的侧边栏内容：

<!-- 根据栏目ID选择侧边栏内容 -->
{dede:php}
$typeid=$refObj->TypeLink->TypeInfos['id'];
switch($typeid){
    case 3: // 新闻栏目
        include('sidebar_news.htm');
        break;
    case 5: // 产品栏目
        include('sidebar_product.htm');
        break;
    case 8: // 下载栏目
        include('sidebar_download.htm');
        break;
    default:
        include('sidebar_default.htm');
}
{/dede:php}

四、侧边栏CSS布局样式

<style>
.content-wrap{display:flex;gap:25px;max-width:1200px;margin:0 auto;}
.main-content{flex:1;min-width:0;}
.sidebar{width:320px;flex-shrink:0;}

.side-box{
  background:#fff;
  border-radius:8px;
  padding:20px;
  margin-bottom:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.side-box h3{
  font-size:18px;
  color:#2c3e50;
  border-bottom:2px solid #3498db;
  padding-bottom:10px;
  margin-bottom:15px;
}
.side-box li{padding:8px 0;border-bottom:1px dashed #eee;}
.side-box li:last-child{border-bottom:none;}

@media(max-width:768px){
  .content-wrap{flex-direction:column;}
  .sidebar{width:100%;}
}
</style>