Expand my Community achievements bar.

adding .html onto the end of all external links

Avatar

Level 2

Hi , 

If configure any externel links to pathfield. while clicking on that external link it's adding ".html" end of the url and not loading the external link. 

ParthasaradhiGa_0-1694180078598.png

 

Kindly help me on this please.

Regards,

partha

11 Replies

Avatar

Community Advisor

Hi 

HTL has the "extension" feature, which can be useful for appending ".html" to your links. However, it won't validate whether your URL is external or internal and will indiscriminately append ".html." Therefore, use it carefully. Usually, you will end up writing a custom "LinkChecker" that checks if the URL configured in the anchor is external or internal and dynamically appends the extension based on the conditions.

 

You can use it like this:

<!--/* Adds the html extension to a path. */-->
<a href="${item.path @ extension = 'html'}">${item.name}</a>

 

Read more here: https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#125-uri-manipulation 



Esteban Bustamante

Hi , 

Thank for your reply. Here our requirement is not required to append .html for externel links.

In the code we are not using any @ extension = 'html' feature in HTL.

 

Thanks,

Partha

Avatar

Community Advisor

Correct, as I mentioned earlier, in such scenarios, you will need to write a custom function that detects whether the link is external, a document, or internal, and appends the extension accordingly. Something like the example below. Please note that the example below is illustrative and must be updated according to your specific requirements:

public static String getUrl(String link, String extension, ResourceResolver resourceResolver) {
        String updatedLink = "";
        if (link != null) {
            Resource pathResource = resourceResolver.getResource(link);
            // check if resource exists
            if (pathResource != null) {
                // append .html
                updatedLink = resourceResolver.map(link) + extension;
            }
        }
        return updatedLink;
    }

 You could use the above method as a Util and invoke it from your SlingModel. The slingModel is what you will use in your HTML. 

 

Regards



Esteban Bustamante

We are using below custom code, please find and give me suggestion.

@inject
public TestTabItem(@ValueMapValue(name = "url") String url, @ValueMapValue(name = "jsonUrlList") String[] jsonUrlList) {
if (StringUtils.isNotBlank(url)) {
this.url = checkUrlLinks(url).orElse(url + ".html");
}
if (jsonUrlList != null && jsonUrlList.length != 0) {
this.urlList = loadUrlList(jsonUrlList);
}
}

private Optional<String> checkUrlLinks(String urlStr) {
String[] splittedUrl = urlStr.split("/");

return Stream.of(splittedUrl)
.reduce((subPath1, subPath2) -> subPath2)
.filter(subPath -> subPath.contains("."))
.map(subPath -> urlStr);
}

Avatar

Community Advisor

The best way to determine if this meets your requirements is by writing a JUnit test. I encourage you to do so; from what I can see, it seems that this can work.



Esteban Bustamante

Avatar

Community Advisor

Hello @ParthasaradhiGa 

 

The WCM core components, tackle with internal and external links.

There is a issue and a PR that would be worth looking into

 

https://github.com/adobe/aem-core-wcm-components/issues/727 - This is about invalid links.

But, its PR will give you an idea how core components deal with links.

 

Look for LinkHandler.java in the PR. 


Aanchal Sikka

Avatar

Community Advisor

If you inspect the link on browser do you see .html append in the href ? Is the behaviour same on author, publisher and dispatcher?

Avatar

Level 2

Yes, while inspecting on link .html appending. It's same behaviour in author,publisher and dispatcher.

Avatar

Community Advisor

Hi @ParthasaradhiGa ,

You have to write custom logic on this field using java

if the path starts ("/content"/) then append with html extension and if the path does not start with ("/content"/)  then keep it as it is.

example :

if(path.startsWith("/content"))
{
path=path+".html";
}else{
path=path;
}

 

Thanks,

Sanjay 

Avatar

Community Advisor

Hi @ParthasaradhiGa There are multiple ways to cater this use case. 

There is one which is suggested in the on-going thread using the sling model and checking the link via passing the link to respective service method which returns true/false or the .html appended url if it is required. If there is Url shortening done at your end using the sling model using the api, then it is advised to handle over there itself for adding the extension as well.

 

Otherwise, other way is to handle via the sightly code using the below code snippet

 

<sly data-sly-test.linkCheck="${properties.linkUrl}"></sly>
<a data-sly-test="${properties.linkUrl}" data-sly-test.internalLink="${'/content/' in linkCheck}" class="home-link" href="${properties.linkUrl}.html" target="${properties.linksTarget}">

 

 

Hope this helps!

Thanks