首页 / 建站手册 / 轮播图、多图、相关推荐

轮播图、多图、相关推荐

首页轮播、详情页图片墙、相关内容推荐 —— 三个按分组/顺序取一批图或内容块的标签。

适用范围:首页(轮播)、详情页(图集、相关推荐)。

幻灯片轮播 {naicha:banners}

一个站往往不止一处轮播:首页一组、某个栏目页一组、活动页一组。用分组区分,互不干扰。

{naicha:banners group="home" num="5"}
  <div class="slide">
    <h2>{banner.title}</h2>
    <p>{banner.subtitle}</p>
    <a href="{banner.url}">{banner.btn_text}</a>
  </div>
{/naicha:banners}
写法取到哪些
group="home"home 这一组
不写 group默认也是 home 组
group=""全部分组,按排序值混在一起

循环体里的字段(一条不漏)

{banner.id}轮播项 id
{banner.title}主标题
{banner.subtitle}副标题
{banner.image}图片的相对路径。⚠️ 同 {list.thumb},多级地址下别直接塞进 src
{banner.url}点击跳转地址(填的,不做语言前缀处理)
{banner.btn_text}按钮文字;没填时是空串,按钮要套 {naicha:if} 再渲染
{banner.group_key}它属于哪个分组(可以用来打点、调试「这站到底有几个轮播组」)
{banner.sort}排序值
{banner.lang}属于哪个语言(空串 = 不限)

分组标识只允许字母、数字与下划线,在「轮播管理」里填写;留空会自动归到 home。

图集 {naicha:gallery}

<!-- [详情] 图集存在独立表里,可以排序、带 alt -->
{naicha:gallery content_id="{naicha:param name='id'}" num="30"}
  <figure>
    <img src="{photo.url}" alt="{photo.alt}" loading="lazy">
    <figcaption>第 {photo.index} 张</figcaption>
  </figure>
{/naicha:gallery}

参数

content_id当前内容;取哪一篇的图集
kindgallery;图片种类;同一个内容可以有多种图的集合
num30;最多取几张

循环体里的字段(一条不漏)

{photo.index}序号,从 1 开始(写「第 N 张」用它;模板里没有算术,别自己想加 1)
{photo.url}可直接用的图片地址(引擎拼好的)
{photo.path}图片的相对路径(要自己拼 URL 时才用)
{photo.alt}替代文字。没填时是空串,但 alt="" 也要写上,别整个省掉
{photo.sort}排序值(的先后顺序就是展示顺序)

关联内容 {naicha:rel}

{naicha:rel num="6"}
  <a href="{rel.url}">{rel.title}</a>
{/naicha:rel}

参数

content_id当前内容;哪一篇的关联
typerelated;关联类型;同一篇可以同时有「相关」「同系列」等几种关系
num6;最多取几条

循环体里的字段(一条不漏)

{rel.index}序号,从 1 开始(合集/剧集写「第 N 集」)
{rel.id}被关联那篇的内容 id
{rel.title}标题
{rel.url}详情页地址
{rel.summary}摘要(关联查询只取少数字段,这个可能为空串)

关联内容支持双向查询 —— 被关联的一方也能查到谁引用了自己。

友情链接 {naicha:links}

<!-- [页脚] 「友情链接」里维护的那批 -->
{naicha:links num="20"}
  <a href="{link.url}" target="_blank" rel="noopener">
    {naicha:if var="link.logo" notempty="1"}<img src="{link.logo}" alt="{link.name}">{/naicha:if}
    {link.name}
  </a>
{/naicha:links}
num(参数)最多取几条,默认 30
{link.id}链接 id
{link.name}站名
{link.url}网址(填的,不做语言前缀处理)
{link.logo}图标地址。没传时是空串 —— 外面套 {naicha:if} 再渲染 <img>
{link.sort}排序值
{link.lang}属于哪个语言(空串 = 不限)
没找到答案? 可以在 联系我们 留言说明使用场景,我们会补充进文档。