Parse Sightly inside HTML comments

2 replies
2101 views
Translate

Hello,

We're trying to add an IE8 stylesheet inside conditional comments, but because the parser ignores contents inside comments, it is not converted to a css link correctly:

<!--[if lte IE 8]> <meta data-sly-call="${clientLib.css @ categories='ourstlyes.iestyles'}" data-sly-unwrap></meta> <![endif]-->

Which gets rendered to:

<!--[if lte IE 8]> <meta data-sly-call="" data-sly-unwrap></meta> <![endif]-->

What would be the recommend approach here? I have tried pulling the comment into a different template with the same result. The other approach we were thinking was creating a a component for the comment opening and closing and outputting directly with: response.getWriter().print("<!--"); but this seem like a bit of a hack?

Thanks!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

radu_cotescuAccepted solution

Employee

Hi Gareth,

I've just tried this in aem-sightly-repl:

<!DOCTYPE html> <html data-sly-use.ie8conditional="${'libs.granite.sightly.templates.ClientLibUseObject' @ categories='apps.geometrixx-outdoors.desktop', mode='css'}"> <head> <!--[if lte IE 8]> ${ie8conditional.include @ context='unsafe'} <![endif]--> <title>Conditional tags</title> </head> <body> <h2>It Works!</h2> </body> </html>

The output looks like what you need:

<!DOCTYPE html> <html> <head> <!--[if lte IE 8]> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/social/recommend/recommend_social/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/profilelinkprovider/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_subscription_management/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_social_profile/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_sidebar_right/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_sidebar_render_together/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_sidebar/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_profile/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_newquestion/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_newcommunity/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_editanswer/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_company/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_communities/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page/userinfo/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page/topnav/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page/search/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/etc/clientlibs/foundation/commerce/desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page/breadcrumb/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/nav_products/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/colctrl/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/activities_page/userinfo/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/activities_page/topnav/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/activities_page/search/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/activities_page/colctrl/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/activities_page/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/activities_page/breadcrumb/clientlibs_desktop.css" type="text/css"> <![endif]--> <title>Conditional tags</title> </head> <body> <h2>It Works!</h2> </body> </html><!--cq{"decorated":false,"type":"repl/components/repl","path":"/content/repl/jcr:content","selectors":"template","servlet":"Script /apps/repl/components/repl/template.html","totalTime":5,"selfTime":5}-->

radu_cotescuAccepted solution

Employee

Hi Gareth,

I've just tried this in aem-sightly-repl:

<!DOCTYPE html> <html data-sly-use.ie8conditional="${'libs.granite.sightly.templates.ClientLibUseObject' @ categories='apps.geometrixx-outdoors.desktop', mode='css'}"> <head> <!--[if lte IE 8]> ${ie8conditional.include @ context='unsafe'} <![endif]--> <title>Conditional tags</title> </head> <body> <h2>It Works!</h2> </body> </html>

The output looks like what you need:

<!DOCTYPE html> <html> <head> <!--[if lte IE 8]> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/social/recommend/recommend_social/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/profilelinkprovider/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_subscription_management/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_social_profile/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_sidebar_right/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_sidebar_render_together/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_sidebar/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_profile/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_newquestion/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_newcommunity/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_editanswer/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_company/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page_communities/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page/userinfo/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page/topnav/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page/search/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/etc/clientlibs/foundation/commerce/desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/page/breadcrumb/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/nav_products/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/colctrl/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/activities_page/userinfo/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/activities_page/topnav/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/activities_page/search/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/activities_page/colctrl/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/activities_page/clientlibs_desktop.css" type="text/css"> <link rel="stylesheet" href="https://forums.adobe.com/apps/geometrixx-outdoors/components/activities_page/breadcrumb/clientlibs_desktop.css" type="text/css"> <![endif]--> <title>Conditional tags</title> </head> <body> <h2>It Works!</h2> </body> </html><!--cq{"decorated":false,"type":"repl/components/repl","path":"/content/repl/jcr:content","selectors":"template","servlet":"Script /apps/repl/components/repl/template.html","totalTime":5,"selfTime":5}-->

Translate

gareth_trufittAuthor

Level 2

Brilliant, that works, thank you!

Translate

Sign up

Login with SSO

Login to the community

Login with SSO