今天做了几个自定义页面，工具类的，想在工具下方调用cms的文章，刚好最近在用迅睿，直接在自定义页面调用迅睿的标准标签是不行的，比如：

                {module module=news order=rand num=5 cache=1}
                <li><a href="{$t.url}">{$t.title}</a></li>
                {/module}

必须在模板里调用才行，迅睿我也不熟啊。怎么办，想到外部调用，搜索官网要用到api接口插件，还是收费的，直接放弃。

那么我们可以通过ajax做外部调用，

新建模板页面

在迅睿cms站点模板目录\template\pc\default\home中新建一个目录api，在api目录下新建一个模板页面建一个模板 demo.html 并写好调用标签，比如：

{module module=news num=10}
<li><a href="{$t.url}" target="_blank">{$t.title}</a></li>
{/module}

站外网站模板代码

在自定义页面或站外网站的模板页面，写入调用代码：

比如：

            <ul id="xunruicms"></ul>
            <script src="/js/jquery-3.6.0.min.js"></script> // 这个js也可以直接调用外链https://code.jquery.com/jquery-3.6.0.min.js 很重要
            <script type="text/javascript">
                $.ajax({
                    type: "GET",
                    url:"https://域名/index.php?s=api&c=api&m=template&name=demo.html&format=jsonp", //demo 就是前面新建的模板页面
                    dataType: "jsonp",
                    jsonpCallback: "callback",  // 添加这一行很重要
                    success: function(json){
                        if(json && json.msg) {
                            $("#xunruicms").html(json.msg);
                        } else {
                             console.error('返回数据异常:', json);
                        }
                    },
                    error: function(xhr, status, error){
                        console.error('请求失败:', status, error);
                    }
                });
            </script>

后面可以加一下样式css，也可以放在总的css中，根据实际情况修改即可。

body #xunruicms {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  #xunruicms li {
    position: relative;
    padding-left: 1.5em;
    width: 100%;           /* 确保宽度受grid控制 */
    min-width: 0;          /* 防止flex/grid项溢出 */
  }
  #xunruicms li::before {
    content: "▶";
    color: #FFD700;
    position: absolute;
    left: 0;
    font-size: 0.7em; /* 调小三角 */
    top: 0.2em;
  }
#xunruicms li a {
  display: inline-block; /* 或 block */
  max-width: 100%;      /* 限制最大宽度 */
  white-space: nowrap;   /* 禁止换行 */
  overflow: hidden;      /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 超出部分显示为... */
  color: inherit !important;          /* 继承父元素颜色（通常是黑色） */
  text-decoration: none;   /* 可选：移除下划线 */
}
#xunruicms li a:hover {
  color: inherit;         /* 悬停时保持颜色不变 */
  text-decoration: underline; /* 可选：悬停时显示下划线 */
}
@media (max-width: 600px) { //手机端可添加媒体查询改为单列
  #xunruicms { grid-template-columns: 1fr; }
}