将附加样式应用于继承的 Django 模板

Question

在我的 Django 项目中，我设置了一个带有一组 CSS 样式的基本 HTML 模板 (

base.html

)。我的项目中的几个其他模板继承了这个基本模板。

我面临的挑战是，其中一些继承的模板需要特定于每个模板的附加样式。虽然我尝试将所有样式包含在

base.html

中，但我发现它不能无缝地适应具有独特样式需求的模板。

将附加样式应用于各个模板，同时仍然利用

base.html

中定义的常用样式的推荐方法是什么？是否有有效管理此类场景的最佳实践或 Django 约定？

我很欣赏有关如何构建我的模板和样式以实现整个项目的凝聚力设计的任何见解或建议。

我最初尝试将所有样式合并到 base.html 文件中，希望它们能够无缝地应用于所有模板。然而，这种方法并没有达到预期效果。单个模板的附加样式未正确应用。

Answer 1

假设下面你优雅的项目结构是这样的，而你的静态文件夹显然是你的css文件代码所在的地方。

.
├── .dockerignore
├── Dockerfile
├── entrypoint.sh
├── requirements.txt
├── src
|   ├── manage.py
|   └── myproj
|       ├── __init__.py
|       ├── asgi.py
|       ├── settings.py
|       ├── urls.py
|       └── wsgi.py
|── venv

├── templates
    |
    ├──base.html
        
    └── registration
           |
            ── login.html
           myproj
|          ├── __products.html
|      
        
├── static
    |
    ├──CSS 
         ├── mycss.css
    └── JS
         ├── product.js

步骤：

然后您必须在项目结构的
```
STATIC DIR
```
中配置您的
```
settings.py of myproj which lives in src
```
文件。

这是如何做到的：


STATIC_ROOT = BASE_DIR / 'static'

STATIC_URL = 'static/'

#Add this in your settings.py file:
STATICFILES_DIRS = [
    BASE_DIR / 'staticfiles'
]

在您使用
```
BASE_DIR/templates
```
查找在设置中配置的模板文件夹中创建 base.html 文件。

确保您的模板具有类似的末端块，如下所示：

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}{% endblock %}</title>
  <link rel="stylesheet" href="{% static 'CSS/mycss.css' %}">  
</head>
<body>

{% block content %}
{% endblock %}

</body>
</html>

3.然后您现在可以将 css 扩展到您想要的任何模板，而无需在您的任何 HTML Ike 例如 products.html 上，如下所示：


{% extends "master.html" %}

{% block title %}
 List of all members
{% endblock %}


{% block content %}
  <div class="mycard">
    <h1 class="heading-color">I love Django</h1>
    <ul>

      {% comments %}Your other django code blocks from your view here {%comments %}
    </ul>
  </div>
{% endblock %}

在您的
```
mycss.css fole of CSS folder
```
中，您现在可以编写您想要的任何CSS代码，该代码将动态地出现在您应用它来继承此类代码的任何页面中。

Mycss 输入：

heading-color {
  background-color: lightblue;
}

例如，当您在网络上呈现页面时，您的login.html和products.html可以继承您在那里编写的代码背景。

PS：如果您在生产中，请不要忘记不断运行命令

python manage.py collectstatic

，以便您新创建的 CSS 样式可以使用您想要使用的静态库（例如 AWS、Nginx 等）进行动态渲染

祝你好运！

将附加样式应用于继承的 Django 模板

问题描述投票：0回答：1

1个回答

最新问题

将附加样式应用于继承的 Django 模板

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1