开启了手机站独立模板（推荐，最规范）
这是目前最主流和规范的做法，DedeCMS 后台可以为 PC 端和手机端分别设置不同的栏目模板和文章模板。
（图片来源网络，侵删）
在这种模式下，你需要在手机端的栏目模板文件中编写调用代码，这个文件通常位于 /templets/你的手机端模板文件夹/ 目录下，并且文件名可能包含 m 或 mobile，list_m.htm。
方法 1：使用 {dede:channel} 标签调用一级栏目
这是最常用的方法，用于调用当前栏目的顶级栏目（父栏目）或同级栏目。
调用当前栏目的所有一级子栏目
假设你在一个“新闻”栏目下，想调用它的所有子栏目（如“国内新闻”、“国际新闻”）。
（图片来源网络，侵删）
{dede:channel type='son' currentstyle='<li class="on"><a href~=[field:typeurl/]~>~=[field:typename/]~</a></li>'}
<li><a href='[field:typeurl/]'>[field:typename/]</a></li>
{/dede:channel}
参数说明：
type='son'：表示调用当前栏目的子栏目。currentstyle：这是一个非常实用的参数，用于匹配当前栏目所在的<li>标签，并为其添加特定的 CSS 类（如class="on"）,方便你进行高亮显示样式控制。
调用当前栏目的同级栏目（兄弟栏目）
如果你想在子栏目页显示其父栏目下的所有子栏目（在“国内新闻”页显示“新闻”下的所有子栏目）。
{dede:channel type='self' currentstyle='<li class="on"><a href~=[field:typeurl/]~>~=[field:typename/]~</a></li>'}
<li><a href='[field:typeurl/]'>[field:typename/]</a></li>
{/dede:channel}
参数说明：
type='self'：表示调用与当前栏目同级的所有栏目。
调用顶级栏目（调用一级栏目）
如果你想调用网站最顶级的所有栏目。
{dede:channel type='top' currentstyle='<li class="on"><a href~=[field:typeurl/]~>~=[field:typename/]~</a></li>'}
<li><a href='[field:typeurl/]'>[field:typename/]</a></li>
{/dede:channel}
参数说明：
type='top'：表示调用所有顶级栏目。
方法 2：使用 {dede:channelartlist} 调用带栏目文章的列表
这个标签更强大，它不仅能调用栏目，还能在每个栏目下调用该栏目的指定文章列表,常用于制作首页或频道页的推荐栏目区块。
{dede:channelartlist typeid='0' row='4'}
<h2><a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></h2>
<ul>
{dede:arclist titlelen='42' row='5'}
<li><a href="[field:arcurl/]">[field:title/]</a></li>
{/dede:arclist}
</ul>
{/dede:channelartlist}
参数说明：
typeid='0'：调用所有顶级栏目，如果你想指定调用某些栏目，用英文逗号隔开，typeid='1,3,5'。row='4'：调用 4 个顶级栏目。{dede:field name='typeurl'/}和{dede:field name='typename'/}：分别获取当前循环到的栏目的链接和名称。- 内层的
{dede:arclist}：是在每个栏目下调用文章列表的标签。titlelen='42'长度限制为 42 个字符。row='5'：每个栏目下调用 5 篇文章。
未开启手机站独立模板（旧方法）
如果你的网站没有开启手机站独立模板，那么手机端和 PC 端共用的是同一套模板，在这种情况下，你需要确保你的调用代码在移动设备上能正常显示,并且样式是响应式的。
调用代码本身和场景一完全一样，都是使用 {dede:channel} 标签，关键在于CSS 样式。
示例代码（与场景一相同）：
<!-- 在你的 list.htm 或 index.htm 等模板文件中 -->
<div class="mobile-nav">
<ul>
{dede:channel type='top' currentstyle="<li class='active'><a href='~[field:typeurl/]~'>~[field:typename/]~</a></li>"}
<li><a href='[field:typeurl/]'>[field:typename/]</a></li>
{/dede:channel}
</ul>
</div>
关键点：CSS 响应式设计
你需要编写 CSS，让这个栏目导航在手机上看起来像一个菜单（点击后展开的汉堡菜单）。
CSS 示例：
/* 默认样式（PC端显示） */
.mobile-nav ul {
list-style: none;
display: flex; /* 使用 Flexbox 布局 */
padding: 0;
margin: 0;
}
.mobile-nav li a {
display: block;
padding: 10px 15px;
text-decoration: none;
}
/* 手机端样式 */
@media screen and (max-width: 768px) {
.mobile-nav ul {
/* 在手机上，可以改为垂直排列或隐藏，通过一个按钮触发 */
flex-direction: column; /* 改为垂直排列 */
display: none; /* 默认隐藏 */
background-color: #f1f1f1;
}
/* 当你给某个元素添加一个类（.menu-btn）时，显示菜单 */
.mobile-nav.show-menu ul {
display: flex; /* 或者 display: block; */
}
.mobile-nav li a {
text-align: center;
border-bottom: 1px solid #ddd;
}
}
/* 汉堡菜单按钮的样式 */
.menu-btn {
display: none; /* 默认在PC端隐藏 */
font-size: 20px;
cursor: pointer;
padding: 5px;
}
@media screen and (max-width: 768px) {
.menu-btn {
display: block; /* 在手机端显示 */
}
}
HTML 结构（配合 JS 使用）：
<!-- 在 body 开头或合适的位置添加按钮 -->
<button class="menu-btn">☰</button>
<div class="mobile-nav">
<ul>
{dede:channel type='top' currentstyle="<li class='active'><a href='~[field:typeurl/]~'>~[field:typename/]~</a></li>"}
<li><a href='[field:typeurl/]'>[field:typename/]</a></li>
{/dede:channel}
</ul>
</div>
JavaScript 代码（用于切换菜单显示/隐藏）：
<script>
document.querySelector(".menu-btn").addEventListener("click", function() {
document.querySelector(".mobile-nav").classList.toggle("show-menu");
});
</script>
总结与建议
- 首选方法一（开启独立模板）：这是 DedeCMS 官方推荐的最佳实践，代码清晰，逻辑分离,便于后期维护。
- 调用标签：核心是
{dede:channel}和{dede:channelartlist}，通过type参数控制调用范围（top,son,self）。 - 高亮显示：务必使用
currentstyle参数来方便地实现当前栏目高亮,这对用户体验非常重要。 - 旧方法注意：如果未开启独立模板，重点在于使用 CSS Media Queries 和 JavaScript 来实现移动端的交互效果（如汉堡菜单）。
希望这些信息能帮助您在 DedeCMS 手机端成功调用栏目！
