SPFX Content Query [Handlebars] 无法从列表超链接列获取有效URL

问题原因 #

你当前使用的URL.htmlValue返回的是超链接字段完整的HTML渲染片段（即<a href="http://bing.com">BING</a>格式），直接将该值填入<a>标签的href属性时，内容会被URL编码后识别为相对路径，自动拼接上当前站点前缀，才会出现你遇到的异常结果。

标准解决方法 #

SharePoint 超链接字段在Content Query WebPart的Handlebars上下文中默认拆分了两个独立属性，直接调用对应属性即可获取纯链接：

• URL.URL：超链接的纯地址值
• URL.Description：超链接的显示文本

替换你的模板代码为以下内容即可：

<div class="url"><a href="{{URL.URL}}">{{URL.Description}}</a></div>

特殊情况处理 #

如果按照上述方法仍无法获取到值，可在模板中临时加入以下代码输出整个URL字段的完整结构，确认属性名是否因为字段重命名、查询映射配置发生变化：

{{JSON.stringify URL}}

如果确认返回结构中仅存在htmlValue属性，可注册自定义Handlebars辅助函数提取href值，示例辅助函数逻辑如下：

Handlebars.registerHelper('extractHref', function(htmlStr) {
  var temp = document.createElement('div');
  temp.innerHTML = decodeURIComponent(htmlStr);
  return temp.querySelector('a')?.href || '';
});

模板调用方式：

<div class="url"><a href="{{extractHref URL.htmlValue}}">{{extractHref URL.htmlValue}}</a></div>

内容的提问来源于stack exchange，提问作者spencer souvannarath