Django入门指南-第7章:模板引擎设置

在manage.py所在的目录创建一个名为 templates的新文件夹:

  1. myproject/
  2. |-- myproject/
  3. | |-- boards/
  4. | |-- myproject/
  5. | |-- templates/ <-- 这里
  6. | +-- manage.py
  7. +-- venv/

在templates文件夹中,创建一个名为home.html的HTML文件:

templates/home.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Boards</title>
  6. </head>
  7. <body>
  8. <h1>Boards</h1>
  9. {% for board in boards %}
  10. {{ board.name }} <br>
  11. {% endfor %}
  12. </body>
  13. </html>

在上面的例子中,我们混入了原始HTML和一些特殊标签 {% for ... in ... %}{{ variable }} 。它们是Django模板语言的一部分。上面的例子展示了如何使用 for遍历列表对象。{{ board.name }}会在 HTML 模板中会被渲染成版块的名称,最后生成动态HTML文档。

在我们可以使用这个HTML页面之前,我们必须告诉Django在哪里可以找到我们应用程序的模板。

打开myproject目录下面的settings.py文件,搜索TEMPLATES变量,并设置DIRS 的值为 os.path.join(BASE_DIR, 'templates')

  1. TEMPLATES = [
  2. {
  3. 'BACKEND': 'django.template.backends.django.DjangoTemplates',
  4. 'DIRS': [
  5. os.path.join(BASE_DIR, 'templates')
  6. ],
  7. 'APP_DIRS': True,
  8. 'OPTIONS': {
  9. 'context_processors': [
  10. 'django.template.context_processors.debug',
  11. 'django.template.context_processors.request',
  12. 'django.contrib.auth.context_processors.auth',
  13. 'django.contrib.messages.context_processors.messages',
  14. ],
  15. },
  16. },
  17. ]

本质上,刚添加的这一行所做的事情就是找到项目的完整路径并在后面附加“/templates”

我们可以使用Python shell进行调试:

  1. python manage.py shell
  1. from django.conf import settings
  2. settings.BASE_DIR
  3. '/Users/vitorfs/Development/myproject'
  4. import os
  5. os.path.join(settings.BASE_DIR, 'templates')
  6. '/Users/vitorfs/Development/myproject/templates'

看到了吗?它只是指向我们在前面步骤中创建的templates文件夹。

现在我们可以更新home视图:

boards/views.py

  1. from django.shortcuts import render
  2. from .models import Board
  3. def home(request):
  4. boards = Board.objects.all()
  5. return render(request, 'home.html', {'boards': boards})

生成的HTML:

2-2-5.png

我们可以用一个更漂亮的表格来替换,改进HTML模板:

templates/home.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Boards</title>
  6. </head>
  7. <body>
  8. <h1>Boards</h1>
  9. <table border="1">
  10. <thead>
  11. <tr>
  12. <th>Board</th>
  13. <th>Posts</th>
  14. <th>Topics</th>
  15. <th>Last Post</th>
  16. </tr>
  17. </thead>
  18. <tbody>
  19. {% for board in boards %}
  20. <tr>
  21. <td>
  22. {{ board.name }}<br>
  23. <small style="color: #888">{{ board.description }}</small>
  24. </td>
  25. <td>0</td>
  26. <td>0</td>
  27. <td></td>
  28. </tr>
  29. {% endfor %}
  30. </tbody>
  31. </table>
  32. </body>
  33. </html>

2-2-6.png