自定義 STL 标簽

STL 标簽是 XYCMS 模闆解析并生成(chéng)靜态頁面(miàn)的核心，通過(guò)添加自定義 STL 标簽，我們將(jiāng)可以實現自己的專屬标簽，方便模闆調用。

我們以 XYCMS 二維碼顯示插件 (opens new window)作爲示例來說(shuō)明如何實現自定義标簽。

二維碼插件使用 stl:qrCode 标簽生成(chéng)二維碼，可以設置url 屬性指定二維碼地址，size 屬性指定二維碼圖片尺寸，标簽使用代碼如下：

<stl:qrCode url="https://xycms.com" size="128"></stl:qrCode>

爲了實現自定義 STL 标簽，我們需要繼承 IPluginParseAsync 接口并實現 ParseAsync 方法，此方法的返回值爲字符串，此字符串即自定義标簽解析後(hòu)的值。

我們以 XYCMS 二維碼顯示插件 (opens new window)的 StlQRCode (opens new window)類作爲示例說(shuō)明如何自定義 STL 标簽：

using System.Threading.Tasks;
using XYCMS.Parse;
using XYCMS.Plugins;
using XYCMS.Repositories;
using XYCMS.Services;
using XYCMS.Utils;

namespace XYCMS.QRCode
{
    public class StlQRCode : IPluginParseAsync
    {
        private const string AttributeUrl = "url";
        private const string AttributeSize = "size";

        private readonly IPathManager _pathManager;
        private readonly ISiteRepository _siteRepository;

        public StlQRCode(IPathManager pathManager, ISiteRepository siteRepository)
        {
            _pathManager = pathManager;
            _siteRepository = siteRepository;
        }

        public string ElementName => "stl:qrcode";

        public async Task<string> ParseAsync(IParseStlContext context)
        {
            var url = string.Empty;
            var size = 0;

            foreach (var name in context.StlAttributes.AllKeys)
            {
                var value = context.StlAttributes[name];

                if (StringUtils.EqualsIgnoreCase(name, AttributeUrl))
                {
                    url = await context.ParseAsync(value);
                }
                else if (StringUtils.EqualsIgnoreCase(name, AttributeSize))
                {
                    size = TranslateUtils.ToInt(value);
                }
            }

            url = string.IsNullOrEmpty(url) ? "location.href" : quot;'{url}'";

            var guid = StringUtils.Guid();
            var site = await _siteRepository.GetAsync(context.SiteId);
            var libUrl = _pathManager.GetApiHostUrl(site, "/assets/qrcode/qrcode.min.js");

            return size == 0
                ? $@"
<div class=""qrcode"" id=""{guid}""></div>
<script type=""text/javascript"" src=""{libUrl}""></script>
<script type=""text/javascript"">
new QRCode(document.getElementById('{guid}'), {url});
</script>
"
                : $@"
<div class=""qrcode"" id=""{guid}""></div>
<script type=""text/javascript"" src=""{libUrl}""></script>
<script type=""text/javascript"">
new QRCode(document.getElementById('{guid}'), {{
    text: {url},
	width: {size},
	height: {size}
}});
</script>
";
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

首先，我們在類的構造函數中注入了需要使用的接口，接下來我們通過(guò)實現 ElementName 屬性定義了自定義 STL 标簽的名稱 stl:qrcode。

在 ParseAsync 方法中，我們通過(guò)方法傳遞的參數 IParseStlContext context 獲取了标簽所處環境的上下文，IParseStlContext 接口能(néng)夠獲得當前站點、欄目以及内容的信息，同時(shí)還(hái)能(néng)獲取标簽的屬性、嵌套的内部标簽等信息。

最後(hòu)，我們組合各類信息，返回字符串，最終 stl:qrcode 标簽解析的結果將(jiāng)是我們在此方法中返回的字符串值。

# 自定義 STL 标簽

自定義 STL 标簽