AEM 6.3：能否为同一页面针对不同受众配置不同模板？

Absolutely, this is totally achievable—there are several straightforward ways to pull this off depending on your tech stack and whether you're handling rendering server-side or client-side. Let's break down the most common approaches:

This is the most straightforward method if you're using a backend framework with a template engine. The core workflow is:

• Your backend checks the logged-in user's role (from session, auth token, or database)
• Pass that role to your main index template
• Use conditional logic in the template to load role-specific sub-templates

Example with Flask + Jinja2 #

Backend code (Flask route):

from flask import render_template, session

@app.route('/')
def index():
    # Grab the user's role from the session; default to 'Default' if no user is logged in
    user_role = session.get('user_role', 'Default')
    return render_template('index.html', user_role=user_role)

Main index template (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body>
    {% if user_role == 'Super Users' %}
        {% include 'super_user_dashboard.html' %}
    {% elif user_role == 'Users' %}
        {% include 'regular_user_home.html' %}
    {% else %}
        {% include 'default_landing.html' %}
    {% endif %}
</body>
</html>

Example with Laravel + Blade #

Controller code:

public function index()
{
    // Get the authenticated user's role, or default to 'Default'
    $userRole = auth()->user()?->role ?? 'Default';
    return view('index', compact('userRole'));
}

Blade template:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body>
    @if($userRole === 'Super Users')
        @include('super-users.dashboard')
    @elseif($userRole === 'Users')
        @include('users.home')
    @else
        @include('default.landing')
    @endif
</body>
</html>

If you're using a frontend framework like React, Vue, or Angular, you can handle the role check and template switching entirely on the client side.

Example with React #

import DefaultLanding from './components/DefaultLanding';
import RegularUserHome from './components/RegularUserHome';
import SuperUserDashboard from './components/SuperUserDashboard';

function App() {
    // Get user role from localStorage, auth state, or an API call
    const userRole = localStorage.getItem('userRole') || 'Default';

    return (
        <div className="app-container">
            {userRole === 'Super Users' && <SuperUserDashboard />}
            {userRole === 'Users' && <RegularUserHome />}
            {userRole === 'Default' && <DefaultLanding />}
        </div>
    );
}

export default App;

Example with Vue #

<template>
    <div id="app">
        <super-user-dashboard v-if="userRole === 'Super Users'" />
        <regular-user-home v-else-if="userRole === 'Users'" />
        <default-landing v-else />
    </div>
</template>

<script>
import DefaultLanding from './components/DefaultLanding.vue';
import RegularUserHome from './components/RegularUserHome.vue';
import SuperUserDashboard from './components/SuperUserDashboard.vue';

export default {
    components: {
        DefaultLanding,
        RegularUserHome,
        SuperUserDashboard
    },
    data() {
        return {
            userRole: localStorage.getItem('userRole') || 'Default'
        };
    }
};
</script>

Even if you can't use a backend or frontend framework, you can still pull this off with vanilla JavaScript to dynamically load role-specific content:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body>
    <div id="content-target"></div>

    <script>
        // Get user role (could pull from a cookie, or a simple API endpoint)
        const userRole = document.cookie.split('; ')
            .find(row => row.startsWith('userRole='))
            ?.split('=')[1] || 'Default';

        // Map roles to template files
        const templateMap = {
            'Super Users': 'super-user-content.html',
            'Users': 'regular-user-content.html',
            'Default': 'default-content.html'
        };

        // Fetch and inject the correct template
        fetch(templateMap[userRole])
            .then(response => response.text())
            .then(html => {
                document.getElementById('content-target').innerHTML = html;
            })
            .catch(err => console.error('Failed to load template:', err));
    </script>
</body>
</html>

Key Takeaway #

No matter which approach you choose, the core idea is the same:

1. Identify the user's role/audience (via session, auth token, localStorage, cookie, etc.)
2. Use conditional logic (either server-side or client-side) to render the appropriate template for that role.

内容的提问来源于stack exchange，提问作者Abraham Pérez