iCMS JSON标签技术文档

JSON标签 (json)

JSON标签用于获取和解析JSON数据，支持从URL获取或直接解析JSON字符串。

iCMS:json 标签

支持参数

返回值

解析后的JSON数据数组。如果解析失败，将显示错误信息并返回空数组。

使用示例

<!-- 从URL获取JSON数据 -->
<!--{iCMS:json url="https://api.example.com/data" cache="true" time="3600"}-->
<div class="data-list">
  <!--{foreach key="key" value="item" from="$json"}-->
    <div class="item">
      <h3><!--{$item.title}--></h3>
      <p><!--{$item.description}--></p>
    </div>
  <!--{/foreach}-->
</div>

<!-- 解析JSON字符串 -->
<!--{iCMS:json json='{"name":"张三","age":25,"skills":["PHP","JavaScript","CSS"]}'}-->
<div class="user-info">
  <h3><!--{$json.name}--></h3>
  <p>年龄: <!--{$json.age}--></p>
  <p>技能: 
    <!--{foreach key="k" value="skill" from="$json.skills"}-->
      <span class="skill"><!--{$skill}--></span>
    <!--{/foreach}-->
  </p>
</div>

常见应用场景

1. 调用第三方API

<!--{iCMS:json url="https://api.weather.com/forecast?city=beijing" cache="true" time="1800"}-->
<div class="weather-forecast">
  <h2>天气预报</h2>
  <div class="current">
    <h3>当前天气: <!--{$json.current.condition}--></h3>
    <p>温度: <!--{$json.current.temperature}-->°C</p>
    <p>湿度: <!--{$json.current.humidity}-->%</p>
  </div>

  <div class="forecast">
    <h3>未来天气</h3>
    <ul>
      <!--{foreach key="key" value="day" from="$json.forecast"}-->
        <li>
          <span class="date"><!--{$day.date}--></span>
          <span class="condition"><!--{$day.condition}--></span>
          <span class="temp"><!--{$day.low}-->°C - <!--{$day.high}-->°C</span>
        </li>
      <!--{/foreach}-->
    </ul>
  </div>
</div>

2. 配置数据

<!--{iCMS:json json='{"theme":{"primary":"#3498db","secondary":"#2ecc71"},"layout":{"sidebar":"left","width":"1200px"}}' cache="true"}-->
<style>
:root {
  --primary-color: <!--{$json.theme.primary}-->;
  --secondary-color: <!--{$json.theme.secondary}-->;
  --layout-width: <!--{$json.layout.width}-->;
}
</style>

<div class="container" style="max-width: <!--{$json.layout.width}-->;">
  <div class="layout layout-<!--{$json.layout.sidebar}-->">
    <!-- 页面内容 -->
  </div>
</div>

3. 动态数据展示

<!--{iCMS:json url="/api/statistics.json" cache="true" time="600"}-->
<div class="statistics">
  <h2>网站统计</h2>
  <div class="stats-grid">
    <div class="stat-item">
      <h3>文章总数</h3>
      <div class="value"><!--{$json.articles}--></div>
    </div>
    <div class="stat-item">
      <h3>用户总数</h3>
      <div class="value"><!--{$json.users}--></div>
    </div>
    <div class="stat-item">
      <h3>评论总数</h3>
      <div class="value"><!--{$json.comments}--></div>
    </div>
    <div class="stat-item">
      <h3>今日访问</h3>
      <div class="value"><!--{$json.today_visits}--></div>
    </div>
  </div>
</div>

注意事项

1. URL与JSON参数：必须提供url或json参数中的一个，否则标签将返回false
2. 缓存机制：启用缓存可以减少网络请求，提高性能
3. 错误处理：JSON解析失败时会显示错误信息并返回空数组
4. 安全性：从外部URL获取数据时，应确保来源可信
5. 缓存时间：根据数据更新频率设置合适的缓存时间

高级用法

分页缓存

<!--{iCMS:json url="https://api.example.com/data?page=$page" cache="true" page="true" time="1800"}-->
<!-- 这将为每个页码创建单独的缓存 -->

条件缓存

<!--{if $need_fresh}-->
  <!--{iCMS:json url="https://api.example.com/data" cache="false"}-->
<!--{else}-->
  <!--{iCMS:json url="https://api.example.com/data" cache="true" time="3600"}-->
<!--{/if}-->

组合使用

<!--{iCMS:json url="https://api.example.com/products" cache="true"}-->
<!--{foreach key="key" value="product" from="$json.items"}-->
  <div class="product">
    <h3><!--{$product.name}--></h3>
    <p>价格: ¥<!--{$product.price}--></p>

    <!-- 获取每个产品的详细信息 -->
    <!--{iCMS:json url="https://api.example.com/product/<!--{$product.id}-->" cache="true" time="7200"}-->
      <div class="product-details">
        <p>库存: <!--{$json.stock}--></p>
        <div class="description"><!--{$json.description}--></div>
      </div>
    <!--{/iCMS}-->
  </div>
<!--{/foreach}-->