自定义 STL 标签

STL 标签是 XYCMS 模板解析并生成静态页面的核心，通过添加自定义 STL 标签，我们将可以实现自己的专属标签，方便模板调用。

我们以 XYCMS 二维码显示插件 (opens new window)作为示例来说明如何实现自定义标签。

二维码插件使用 stl:qrCode 标签生成二维码，可以设置url 属性指定二维码地址，size 属性指定二维码图片尺寸，标签使用代码如下：

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

为了实现自定义 STL 标签，我们需要继承 IPluginParseAsync 接口并实现 ParseAsync 方法，此方法的返回值为字符串，此字符串即自定义标签解析后的值。

我们以 XYCMS 二维码显示插件 (opens new window)的 StlQRCode (opens new window)类作为示例说明如何自定义 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

首先，我们在类的构造函数中注入了需要使用的接口，接下来我们通过实现 ElementName 属性定义了自定义 STL 标签的名称 stl:qrcode。

在 ParseAsync 方法中，我们通过方法传递的参数 IParseStlContext context 获取了标签所处环境的上下文，IParseStlContext 接口能够获得当前站点、栏目以及内容的信息，同时还能获取标签的属性、嵌套的内部标签等信息。

最后，我们组合各类信息，返回字符串，最终 stl:qrcode 标签解析的结果将是我们在此方法中返回的字符串值。

# 自定义 STL 标签

自定义 STL 标签