织梦调用导航栏目图片

1. 推荐方式：使用自定义栏目属性 - 这是最灵活、最规范的方法,可以为每个栏目单独上传图片。
2. 备选方式：使用栏目内容（描述） - 如果不想用自定义属性，也可以利用栏目简介（description）字段来存放图片地址。

下面我将详细介绍这两种方法,并提供完整的代码示例。

使用“自定义栏目属性”（推荐）

这种方法的核心是利用织梦后台为每个栏目设置一个自定义的属性,用来存放图片的地址。

第一步：在后台栏目设置中添加图片

1. 登录织梦后台，进入“栏目管理”。

2. 找到你想要添加图片的导航栏目，点击“新增栏目”或者编辑现有栏目。

3. 在新增/编辑栏目页面，滚动到最下方，找到“自定义栏目属性”区域。

   
   （图片来源网络，侵删）

4. 在“属性名称”中输入 image（或任意你喜欢的名字，但后续代码要对应），在“属性值”中填写你上传好的图片的完整URL地址。

   提示：建议先将图片上传到“媒体文档管理”中，然后复制图片的链接地址,这样可以避免路径错误。

5. 点击“确定”保存。

第二步：修改模板文件调用图片

我们需要修改网站的导航模板文件,让它读取并显示我们刚刚设置的图片。

1. 找到导航模板文件。

   • 织梦的导航通常调用 {dede:channel}
   • 这个标签的模板文件通常位于 /templets/default/ 目录下，文件名可能是 head.htm、top.htm 或者你自定义的模板文件。
   • 打开这个文件，找到 {dede:channel} 标签所在的位置。

2. 修改标签代码。 默认的调用代码可能如下：

   {dede:channel type='top' row='8'}
       <li><a href="[field:typelink/]">[field:typename/]</a></li>
   {dede:channel}

   我们需要修改它，使其包含图片,修改后的代码如下：

   {dede:channel type='top' row='8'}
       <li>
           <!-- 如果栏目有自定义的image属性，则显示图片，否则显示文字 -->
           <a href="[field:typelink/]">
               <img src="[field:global.cfg_cmspath/]/templets/default/images/default.png" data-src="[field:array runphp='yes']@me = (@me['image'] ? @me['image'] : '');[/field:array]" alt="[field:typename/]" onerror="this.src='/templets/default/images/default.png';">
               <span>[field:typename/]</span>
           </a>
       </li>
   {dede:channel}

   代码解析：

   • [field:array runphp='yes']...[/field:array]：这是一个强大的用法，可以获取当前栏目的所有信息,并通过PHP代码处理。
   • @me['image']：@me 代表当前栏目的数据数组，['image'] 就是我们第一步在自定义属性中设置的键名。
   • ? @me['image'] : ''：这是一个三元运算符。image 属性存在（不为空），就使用它的值；否则就使用空字符串。
   • data-src="[field:array runphp='yes']...[/field:array]"：我们将获取到的图片地址放在 data-src 属性中，这是一种现代前端开发的技巧，通常配合 JavaScript 实现图片懒加载,可以加快页面初始加载速度。
   • onerror="this.src='/templets/default/images/default.png';"：这是一个非常重要的健壮性处理，如果图片地址错误或加载失败，会自动显示一个默认图片，防止出现破损的图标，请确保 /templets/default/images/default.png 这个默认图片路径是正确的。

3. 添加CSS样式。 为了让图片和文字都能正确显示，你需要在CSS文件中添加一些样式，在 /templets/default/style/dedecms.css 中添加：

   /* 导航栏样式示例 */
   .nav li a {
       display: flex;            /* 使用flex布局 */
       flex-direction: column;    /* 垂直排列 */
       align-items: center;      /* 居中对齐 */
       text-align: center;
       font-size: 14px;
       color: #333;
       text-decoration: none;
   }
   .nav li a img {
       width: 80px;              /* 设置图片宽度 */
       height: 80px;             /* 设置图片高度 */
       object-fit: cover;        /* 使图片填充区域，不变形 */
       margin-bottom: 5px;       /* 图片和文字的间距 */
       display: block;           /* 避免图片下方有空隙 */
   }
   .nav li a span {
       /* 文字样式 */
   }

   注意：.nav 是我假设的导航容器的 class 名,你需要根据你网站的实际HTML结构来修改。

{dede:channel type='top' row='8'}
    <li>
        <a href="[field:typelink/]">
            <img src="[field:description/]" alt="[field:typename/]" onerror="this.src='/templets/default/images/default.png';">
            <span>[field:typename/]</span>
        </a>
    </li>
{dede:channel}