28、HTL Sightly(七)Context

2024-03-06 10:10
文章标签 28 context htl sightly

本文主要是介绍28、HTL Sightly(七)Context,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 28、HTL Sightly(七)Context
    • styleToken
    • styleString
    • scriptToken
    • scriptString
    • html
    • number
    • 其他

28、HTL Sightly(七)Context

项目中有时需要将前端的样式或内容保存在JCR中并显示在HTL中,就需要用到context关键字。context关键字会依据传入的参数类型进行不同的操作。

styleToken

将样式代码显示在HTL中,新增页面代码

<h1>==== context =====</h1>
<div style="color: ${'red'};"><p>Style Token not working</p>
</div>
<div style="color: ${'red' @ context='styleToken'};"><p>Style Token working</p>
</div>

显示效果

请添加图片描述

styleString

将样式代码显示在HTL中,给div元素增加一个红色的上边框,新增页面代码

<div style="border-top: ${'2px solid red' @ context='styleToken'};"><p>Style Token not working</p>
</div>
<div style="border-top: ${'2px solid red' @ context='styleString'};"><p>Style String working</p>
</div>

显示效果

在这里插入图片描述

NOTE:可以看到styleToken和styleString有时显示效果一致,区别在于,如果样式内容中包含空格、逗号等特殊字符时,styleToken就不再生效,所以推荐所有的样式内容都用styleString类型

scriptToken

scriptToken可以将脚本代码显示在HTL模板中,添加如下代码

<div><button onclick="location.href='${'https://www.baidu.com'}'">打开百度</button></div>
<div><button onclick="location.href='${'https://www.baidu.com' @ context='scriptToken'}'">打开百度</button></div>

显示效果,分别点击两个按钮不生效

在这里插入图片描述

因为链接内容中包含特殊字符,所以scriptToken也不生效

scriptString

scriptString也可以将脚本代码显示在HTL模板中,添加如下代码

<div><button onclick="location.href='${'https://www.baidu.com' @ context='scriptString'}'">打开百度</button></div>

查看结果,点击按钮可以跳转到百度

在这里插入图片描述

html

在htlsightly组件中添加属性html和值

在这里插入图片描述

新增代码

<h2>==== html ====</h2>
<div>${properties.html}</div>
<div>${properties.html @ context='html'}</div>

查看效果,第一行会把所有的内容输出,第二行会将html代码嵌入到页面中

在这里插入图片描述

number

在htlsightly组件中添加属性number和值,类型为String

在这里插入图片描述

新增代码

<h2>==== number ====</h2>
<div>${properties.number}</div>
<div>${properties.number @ context='number'}</div>
<div>${'abcdef' @ context='number'}</div>

查看效果,第一行和第二行都将字符串形式转为number,第三行由于abcdef不能转为数字,则显示默认值0

在这里插入图片描述

其他

context关键字还支持许多其他的类型,如下:

${properties.jcr:title @ context='html'}         <!--/* Use this in case you want to output HTML - Removes markup that may contain XSS risks */-->
${properties.jcr:title @ context='text'}          <!--/* Use this for simple HTML content - Encodes all HTML */-->
${properties.jcr:title @ context='elementName'}   <!--/* Allows only element names that are white-listed, outputs 'div' otherwise */-->
${properties.jcr:title @ context='attributeName'} <!--/* Outputs nothing if the value doesn't correspond to the HTML attribute name syntax - doesn't allow 'style' and 'on*' attributes */-->
${properties.jcr:title @ context='attribute'}     <!--/* Applies HTML attribute escaping */-->
${properties.jcr:title @ context='uri'}           <!--/* Outputs nothing if the value contains XSS risks */-->
${properties.jcr:title @ context='scriptToken'}   <!--/* Outputs nothing if the value doesn't correspond to an Identifier, String literal or Numeric literal JavaScript token */-->
${properties.jcr:title @ context='scriptString'}  <!--/* Applies JavaScript string escaping */-->
${properties.jcr:title @ context='scriptComment'} <!--/* Context for Javascript block comments. Outputs nothing if value is trying to break out of the comment context */-->
${properties.jcr:title @ context='scriptRegExp'}  <!--/* Applies JavaScript regular expression escaping */-->
${properties.jcr:title @ context='styleToken'}    <!--/* Outputs nothing if the value doesn't correspond to the CSS token syntax */-->
${properties.jcr:title @ context='styleString'}   <!--/* Applies CSS string escaping */-->
${properties.jcr:title @ context='styleComment'}  <!--/* Context for CSS comments. Outputs nothing if value is trying to break out of the comment context */-->
${properties.jcr:title @ context='comment'}       <!--/* Applies HTML comment escaping */-->
${properties.jcr:title @ context='number'}        <!--/* Outputs zero if the value is not a number */-->
${properties.jcr:title @ context='unsafe'}        <!--/* Use this at your own risk, this disables XSS protection completely */-->

注意:context='elementName'只允许以下元素:

section, nav, article, aside, h1, h2, h3, h4, h5, h6, header, footer, address, main, p, pre, blockquote, ol, li, dl, dt, dd, figure, figcaption, div, a, em, strong, small, s, cite, q, dfn, abbr, data, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, span, br, wbr, ins, del, table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th

这篇关于28、HTL Sightly(七)Context的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/779708

相关文章

【vue3|第28期】 Vue3 + Vue Router:探索路由重定向的使用与作用

日期:2024年9月8日 作者:Commas 签名:(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释:如果您觉在这里插入代码片得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^ 1.01365 = 37.7834;0.99365 = 0.0255 1.02365 = 1377.4083;0.98365 = 0.0006 说

context:component-scan使用说明!

<!-- 使用annotation 自动注册bean, 并保证@Required、@Autowired的属性被注入 --> <context:component-scan base-package="com.yuanls"/> 在xml配置了这个标签后,spring可以自动去扫描base-pack下面或者子包下面的java文件,如果扫描到有@Component @Controll

React的context学习总结

context是干什么的?为什么会存在这么一个东西? context字面意思是上下文,在react中存在是为了解决深层次组件传值困难的问题 这里涉及到组件的传值问题,大体商说分三总:兄弟间传值(通过父组件),父往子传值(通过props),子往父传(props函数回调),这是基础的传值问题,但是如果组件嵌套的太深,那么传值就变的非常麻烦,为了解决这样的问题才产生了context  这是cont

【抽代复习笔记】28-群(二十二):四道子群例题

例1:证明,循环群的子群是循环群。 证:设G = (a),H ≤ G。 (1)若H = {e},则H是一阶循环群; (2)设H至少包含2个元素,即设H = {...,a^(-k),a^(-j),a^(-i),a^0,a^i,a^j,a^k,...}, 其中a^i是H中正指数最小的元素,0<i<j<k, 下证a^i是H的生成元: 对任意的a^t∈H(t∈Z),存在q∈Z,使得t = qi

兔子--The method setLatestEventInfo(Context, CharSequence, CharSequence, PendingIntent) from the type

notification.setLatestEventInfo(context, title, message, pendingIntent);     不建议使用 低于API Level 11版本,也就是Android 2.3.3以下的系统中,setLatestEventInfo()函数是唯一的实现方法。  Intent  intent = new Intent(

【C++学习(28)】通俗一点讲解:std::bind 回调技术

std::bind 是 C++11 标准库中的一个功能,它允许你“绑定”某些参数到一个函数、成员函数或可调用对象上,从而生成一个新的可调用对象。这种新的可调用对象可以稍后被调用,而且其中一些参数已经被预先设置好了。这在回调函数和异步编程中特别有用。 下面我用一个通俗的例子来解释 std::bind 是如何工作的。 假设场景 假设你有一个家庭厨师,他有一个技能叫做“做饭”。做饭需要两个参数:一

『功能项目』Unity连接读取本地数据库【28】

打开上一篇27账号登陆注册界面UI搭建的项目, 本章要做的事情是本地数据库的连接与读取数据库中的道具信息(刀、铁块) 访问官方网站:MySQL 一、下载Mysql 首页滑到最下面,选择Downloads下的MySQL Community server 点击查看下载历史版本 下载完毕后将文件解压到你想保存到的盘和目录内。我是将文件解压到E:Program FilesM

代码随想录 刷题记录-28 图论 (5)最短路径

一、dijkstra(朴素版)精讲 47. 参加科学大会 思路 本题就是求最短路,最短路是图论中的经典问题即:给出一个有向图,一个起点,一个终点,问起点到终点的最短路径。 接下来讲解最短路算法中的 dijkstra 算法。 dijkstra算法:在有权图(权值非负数)中求从起点到其他节点的最短路径算法。 需要注意两点: dijkstra 算法可以同时求 起点到所有节点的最短路径权值不

大语言模型的上下文窗口(Context Windows):对人工智能应用的影响

大语言模型(LLMs)极大地提升了人工智能在理解和生成类人文本方面的能力。其中一个影响其效用的基本方面是它们的 “上下文窗口”—— 这个概念直接影响着这些模型接收和生成语言的有效性。我将深入探讨上下文窗口是什么、它们对人工智能应用的影响以及组织在利用大语言模型时的一些考量。 澳鹏在提升大语言模型开发方面处于领先地位,提供一系列对超越当前性能基准至关重要的服务。我们专注于大语言模型创建的复杂细节,

代码随想录第八天|151.翻转字符串里的单词 卡码网:55.右旋转字符串 28. 实现 strStr() 459.重复的子字符串

反转字符串的单词 思路:刷过稍微忘记 class Solution {public://去除空格string remove(string s){//使用快慢指针int slow=0;int i=0;for(;i<s.size();i++){if(s[i]!=' '){if(slow!=0){s[slow++]=' ';}while(s[i]!=' '&&i<s.size()){s[slow+