Django-Oscar新手咨询：如何在不Fork仓库的情况下扩展模板个性化页面？

Hey there! Great job getting your Django/Oscar project up and running with a virtual environment—customizing templates without forking the core repo is totally feasible (and it’s the recommended best practice). Let me walk you through the process step by step, so you can tweak backgrounds, add new navigation, and personalize pages to your heart’s content.

Core Concept: Template Overriding #

Django’s template system lets you override third-party app templates by creating matching file paths in your own project. Oscar follows this system, so you don’t need to modify the original Oscar code at all—your project’s templates will take priority over the default ones.

Step 1: Set Up Your Project’s Template Directory #

First, create a templates/oscar folder structure in your project root (the same directory where manage.py lives). This mirrors Oscar’s internal template structure, so Django knows to load your files first:

your_project/
├── manage.py
├── your_project/
├── templates/
│   └── oscar/
│       ├── base.html  # We'll add this next
│       └── catalogue/  # For product page customizations (optional)
└── static/  # For custom CSS/images (optional)

Step 2: Copy Oscar’s Base Template (Key for Global Changes) #

Most Oscar pages inherit from base.html, so this is the best file to start with for global tweaks like background colors or navigation bars. To get it:

• Locate your virtual environment’s Oscar template folder (usually at venv/lib/pythonX.X/site-packages/oscar/templates/oscar/base.html)
• Copy this file into your project’s templates/oscar/ directory

Step 3: Start Customizing #

Now you can edit the copied template to make your changes. Here are common examples:

Change Page Background

Open base.html and modify the <body> element or add custom CSS. If using a background image, place the image in your project’s static/images/ folder first, then reference it with Django’s static template tag:

{% load static %}

<style>
    body {
        background-color: #f8f9fa;  /* Light gray background */
        /* Or use an image: */
        background: url("{% static 'images/custom-bg.jpg' %}") no-repeat center center fixed;
        background-size: cover;
    }
</style>

Add a New Navigation Bar

Find the existing navigation section in base.html (look for <nav> elements or classes like navbar). Insert your custom links directly into the structure:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <!-- Existing Oscar navigation links -->
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="{% url 'home' %}">Home</a>
        </li>
        <!-- Your new navigation items -->
        <li class="nav-item">
            <a class="nav-link" href="{% url 'custom-page' %}">My Custom Page</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{% url 'contact' %}">Contact Us</a>
        </li>
    </ul>
</nav>

Step 4: Customize Specific Pages #

If you want to tweak a specific page (like the product list or checkout page), follow the same pattern:

1. Find the corresponding template in Oscar’s directory (e.g., oscar/templates/oscar/catalogue/product_list.html)
2. Copy it to your project’s templates/oscar/catalogue/ folder
3. Edit the file to make your desired changes (e.g., rearrange product cards, add extra info)

Step 5: Optimize with Template Inheritance (Optional) #

Instead of copying entire templates, you can inherit from Oscar’s templates and only override specific blocks. This keeps your code clean and makes it easier to update Oscar later. For example, to add content to the homepage without rewriting the whole file:

{% extends 'oscar/home.html' %}

{% block content %}
    {{ block.super }}  <!-- Keeps the original homepage content -->
    <div class="custom-banner">
        <h2>Welcome to My Custom Oscar Store!</h2>
    </div>
{% endblock %}

Step 6: Verify Template Loading #

Double-check your settings.py to ensure Django can find your templates. Your TEMPLATES config should look something like this:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],  # Ensures your project's templates are loaded first
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'oscar.apps.search.context_processors.search_form',
                'oscar.apps.checkout.context_processors.checkout',
                'oscar.apps.communication.notifications.context_processors.notifications',
                'oscar.core.context_processors.metadata',
            ],
        },
    },
]

Step 7: Test Your Changes #

Run your server with python manage.py runserver, then refresh your browser—you should see all your customizations live!

内容的提问来源于stack exchange，提问作者Antonio Silvio de Letteriis