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

Question

我正在 Adob​​e 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"。将它与/profile.html 连接应该会产生字符串"/content/myproject/en/home/profile.html"，如果我使用Sightly 来执行<p>${langinfo.goToPage}</p> 之类的操作。

但是，如果我尝试这个：<a href="${langinfo.goToPage}"></a> 该组件将显示一个空白的锚标记。它还会将我在两个锚标记之间写的任何内容都清空。

到目前为止，我已经尝试返回一个我手工写出的字符串"/content/myproject/en/home/profile.html" 作为 goToPage 值，它在锚标记中工作。此外，如果我只返回 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>

我在这里很困惑。我做错了什么？

Answer 1

在线<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 调用中执行此操作。请参阅此blog 中的示例。

更新 -

只要链接有效，您的代码就可以正常工作。

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 的唯一可能原因是您的链接无效，因此链接检查器正在删除它。如果您检查作者实例，您将看到断开的链接符号以及链接文本。

理想情况下，您应该修复逻辑，以便生成正确的有效链接。在开发过程中，您可以禁用链接检查器和/或链接转换器以让所有链接工作（即使是无效链接 | 不推荐）。这两个服务可以通过搜索-Day CQ Link Checker Service和Day CQ Link Checker Transformer签入http://localhost:4502/system/console/configMgr