使用JavaScript将字符串与currentPage.path连接时,AEM <a href>不起作用

詹姆斯·NB

我正在Adobe Experience Manager中创建一个项目,并且在实现语言切换组件时遇到了问题。该组件应该允许用户单击链接并更改页面的语言。例如,如果他们在英语页面上/content/myproject/en/home.html并单击它,则应该以结束/content/myproject/fr_ca/home.html

作为启动和运行的一部分,我试图进行连接currentPage.path"/profile.html"以便至少可以使该组件在标记中注册对字符串的某些更改。

在英语的home.html页面中,currentPage.path生成字符串"/content/myproject/en/home"如果我使用Sightly进行类似操作,则将其与/profile.html应该会产生字符串"/content/myproject/en/home/profile.html"<p>${langinfo.goToPage}</p>

但是,如果我尝试这样做:<a href="${langinfo.goToPage}"></a>组件将显示一个空白的定位标记。它还会清空我在两个锚标记之间编写的所有内容。

到目前为止,我已经尝试过返回一个用手写方式写出的字符串"/content/myproject/en/home/profile.html"作为goToPage值,它可以在anchor标记中使用。另外,如果我只返回currentPage.path它的作品。<a href="It doesn't work here!">如果我尝试进行串联,则它拒绝像这样工作,但它将像这样工作:<a>It works here!</a>

在这一点上,我能想到的最好的一点是currentPage.path是JavaScript正在访问的Java String对象,并且当JS尝试使用来将其键入JavaScript字符串时会出现问题+如果我尝试使用String(goToPage)或goToPage.toString()将语句强制转换为字符串,它也将不起作用。我将其强制转换为字符串似乎并不重要。我看过的一个博客似乎暗示着Rhino的问题,在初始连接后我应该做一个.toString()。那没用。关于stackOverflow的另一篇文章似乎指出,尝试在JavaScript中连接Java String对象可能是一个问题,并指出应予以考虑,但不涉及如何处理该问题。

我追加到字符串不是组件的预期最终功能,但是如果无法通过串联修改字符串,似乎很难进行搜索和替换以将其更改/en//fr-ca/如果有人对我的问题有比我正在尝试的解决方案更优雅的解决方案,那么对我正在解决的问题的修复将不胜感激。

我已将我的代码粘贴到此处(如建议的那样),并张贴了我的代码的屏幕快照以提供帮助。

Javascript:

use(function() {
    var pageLang = currentPage.properties.get("jcr:language", "en");
    var otherLangText; 
    var currPage = currentPage.name;
    var currPagePath = currentPage.path;
    var goPage; 

    if (pageLang == "fr_ca") { 
        otherLangText = "English";
        goPage = "/content/myproject/en/index/home.html";
    } else { 
        otherLangText = "Français"; 
        goPage = "/content/myproject/fr-ca/home/home.html"; 
    };


    return {
        otherLanguage: otherLangText, 
        goToPage: goPage
    }


})

HTML:

<nav data-sly-use.langinfo="langcontact.js">
    <ul class="lang-list-container">
        <li class="lang-list-item"><a href="${langinfo.goToPage @ extension = 'html'}">${langinfo.otherLanguage}</a></li>
        <li class="lang-list-item"><a href="/content/myproject/en/index/contact-us.html">Contact</a></li>
   </ul>
</nav>

我在这里很困惑。我究竟做错了什么?

阿米什·特里卡(Ameesh Trikha)

线 <li class="lang-list-item"><a href="${langinfo.goToPage @ extension = 'html'}">${langinfo.otherLanguage}</a></li>

实际上应该是-

<li class="lang-list-item"><a href="${langinfo.goToPage}">${langinfo.otherLanguage}</a></li>

您试图做的是将一个对象传递给该对象,该对象将不起作用,如果您要传递要在JS中使用的扩展名,则需要在USE调用中执行此操作。请参阅此博客中的示例

更新 -

只要链接有效,您的代码对我来说就可以正常工作。

use(function() {
    var pageLang = currentPage.properties.get("jcr:language", "en");
    var otherLangText; 
    var currPage = currentPage.name;
    var currPagePath = currentPage.path;
    var goPage; 

    if (pageLang == "fr_ca") { 
        otherLangText = "English";
        goPage = currPagePath+"/profile.html";
    } else { 
        otherLangText = "Français"; 
        goPage = currPagePath+"/profile.html"; 
    };


    return {
        otherLanguage: otherLangText, 
        goToPage: goPage
    }


})

您获取空href的唯一可能原因是链接无效,因此linkchecker会将其删除。如果您检查作者实例,您将在链接文本中看到断开的链接符号。

理想情况下,您应该修正逻辑,以便生成正确的有效链接。在开发中,您可以禁用linkchecker和/或link转换器以使所有链接正常工作(即使无效|不推荐)。可以http://localhost:4502/system/console/configMgr通过搜索-Day CQ Link Checker Service来签入这两项服务Day CQ Link Checker Transformer

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章