今天做了幾個自定義頁面，工具類的，想在工具下方調用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; }
}

---