如何在Liferay DXP 7.4自定义母版页中使用默认登录弹窗链接？

核心实现步骤 #

默认登录弹窗的唤起依赖Liferay内置的前端API和特定触发逻辑，无需嵌入完整登录表单，具体实现如下：

1. 添加触发链接的HTML结构 #

在自定义母版页的目标位置（如头部导航区）插入以下代码：

<a href="javascript:;" class="sign-in-trigger" data-login-url="/c/portal/login">登录</a>

• data-login-url 指定登录请求的基础路径，Liferay会自动处理弹窗内的表单逻辑
• javascript:; 用于阻止默认页面跳转，避免刷新

2. 绑定弹窗唤起的JS逻辑 #

在母版页的</body>标签前添加JS代码，利用Liferay官方API唤起弹窗：

<script>
Liferay.Loader.require(
    ['frontend-js-web'],
    function() {
        const signInLink = document.querySelector('.sign-in-trigger');
        if (signInLink) {
            signInLink.addEventListener('click', function(e) {
                e.preventDefault();
                Liferay.Util.openModal({
                    title: Liferay.Language.get('sign-in'),
                    url: this.getAttribute('data-login-url'),
                    modalProps: {
                        centered: true,
                        size: 'md'
                    }
                });
            });
        }
    }
);
</script>

• frontend-js-web是Liferay核心前端模块，包含弹窗工具类Liferay.Util.openModal
• 该方法会自动加载官方登录Portlet内容到弹窗中，和默认主题的弹窗逻辑完全一致

3. 动态控制登录/退出状态（可选） #

通过Freemarker/Velocity指令判断用户登录状态，实现链接的动态切换：

<#if !isSignedIn()>
    <a href="javascript:;" class="sign-in-trigger" data-login-url="/c/portal/login">登录</a>
<#else>
    <a href="/c/portal/logout">退出</a>
</#if>

4. 样式适配（可选） #

如果需要和默认主题样式统一，可复用Liferay内置CSS类，或自定义样式：

.sign-in-trigger {
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: none;
}
.sign-in-trigger:hover {
    text-decoration: underline;
}

内容的提问来源于stack exchange，提问作者Gunnar