Django个人博客开发八 | 博客首页开发一

本渣渣不专注技术，只专注使用技术，不是一个资深的coder，是一个不折不扣的copier

1、添加模板

现在我们进入博客的首页 127.0.0.1:8000，发现还是欢迎页面，因为我们还没有给博客添加任何模板，也就是前端HTML页面

博客前端模板托管在GitHub：HTML

将项目下载到本地后，内含两个文件夹，static、templates，这两个文件在 Django个人博客开发一 | 抓取网站源码中获得的，将 static 文件夹整个拷贝到博客项目根目录下，然后在将 templates 文件夹下的 html 文件全部拷贝到到 templates 目录下。里边的 index.html 就是我们博客的首页。

2、创建视图

Django 中后端的控制都是在视图函数中进行的，也就是 view.py，每创建一个 app，该 app 目录下都会有一个view.py，我们主要就是在这里进行后端代码的书写的。

# ---------------------------
__author__ = 'stormsha'
__date__ = '2019/3/15 20:31'
# ---------------------------

from django.views import generic
from django.shortcuts import get_object_or_404, get_list_or_404
from .models import Article, BigCategory, Category, Tag

# Create your views here.
class IndexView(generic.ListView):
    """
        首页视图,继承自ListVIew，用于展示从数据库中获取的文章列表
    """
    # 获取数据库中的文章列表
    model = Article
    # template_name属性用于指定使用哪个模板进行渲染
    template_name = 'index.html'
    # context_object_name属性用于给上下文变量取名（在模板中使用该名字）
    context_object_name = 'articles'

3、配置首页路由

通过 url 将视图函数与模板关联起来

现在我们有了 index.html 页面，也有了视图函数 IndexView，但是怎么才能通过 127.0.0.1:8000 访问到这个页面呢？django中是通过 url 将这个页面与视图函数关联起来，也就是前后端的API接口。

添加 urls.py 文件 blog -> storm

配置页面路由 blog -> storm -> urls.py

from django.conf.urls import url
from .views import IndexView

urlpatterns = [
    url(r'^$', IndexView.as_view(template_name='index.html'), name='index')
]

【注意】—— template_name 是指定使用的模板文件，传递给视图，进行数据渲染，后边会详讲路由

配置博客应用路由

blog -> blog -> urls.py

from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    # 后台管理应用，django自带
    url(r'^admin/', admin.site.urls),
    # storm 应用
    url('', include('storm.urls', namespace='blog')),  
]

目前项目结构

.
|-- blog
|   |-- storm               # 博客应用
|   |   |-- migrations      # 数据库映射文件
|   |   |-- __init__.py     # 声明模块，内容默认为空
|   |   |-- admin.py        # 该应用的后台管理系统
|   |   |-- apps.py         # 应用配置，Django-1.9以后自动生成
|   |   |-- models.py       # 数据模块，使用ORM框架
|   |   |-- tests.py        # 自动化测试的模块    
|   |   |-- urls.py         # 应用路由    
|   |   |-- views.py        # 执行响应的代码所在模块，是代码逻辑处理的主要地点，项目中大部分代码在这里编写    
|   |-- blog                # 项目的容器
|   |   |-- __init__.py     # 声明模块，内容默认为空
|   |   |-- settings.py     # 该 Django 项目的设置/配置。
|   |   |-- urls.py         # 该 Django 项目的 URL 声明; 一份由 Django 驱动的网站"目录"。
|   `-- wsgi.py             # 一个 WSGI 兼容的 Web 服务器的入口，以便运行你的项目
|   |-- static              # 静态文件
|   |   |-- css
|   |   |-- fonts
|   |   |-- images
|   |   |-- js
|   |-- templates           # 模板文件
|   |   |-- about.html
|   |   |-- donate.html
|   |   |-- exchange.html
|   |   |-- index.html
|   |   |-- message.html
|   |   |-- project.html
|   |   |-- question.html
|   |   |-- resources.html
|   |   |-- technique.html
|   |   |-- wp-login.html
`-- manage.py

4、修改静态文件路径

访问 127.0.0.1:8000 这个页面时，Django 会通过正则表达式解析这个 url，从而判断出该 url 连接到哪个视图函数，我们这里对应的就是 IndexView。然后在 IndexView 中，将 index.html 传递给前端，并通过浏览器展示给用户，这样我们便配置好了首页。

首页样式的加载

但是在刷新首页时，我们发现并没有样式，样式文件我们放在 static 文件夹中了，而index.html并没有定位到该目录

20311 配置静态路径

这里静态文件 static 需要在 settings.py 中配置一下路径，templates 已经在 Django个人博客开发五 | 创建第一个APP 中设置过了

blog -> blog -> settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

index.html 中，在第一行添加：

{% load staticfiles %}

修改静态文件路径

前端H5源码：

<link rel='stylesheet' id='l2h_print_style-css'  href='../static/css/print.min.css' type='text/css' media='print' />
<link rel='stylesheet' id='style-css'  href='../static/css/style.css' type='text/css' media='all' />
<script type='text/javascript' src='../static/js/jquery.min.js'></script>

修改静态文件路径为绝对路径

<link rel='stylesheet' id='l2h_print_style-css'  href='/static/css/print.min.css' type='text/css' media='print' />
<link rel='stylesheet' id='style-css'  href='/static/css/style.css' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/jquery.min.js'></script>

把静态路径修改为动态路径

<link rel='stylesheet' id='l2h_print_style-css'  href='{% static 'css/print.min.css' %}' type='text/css' media='print' />
<link rel='stylesheet' id='style-css'  href='{% static 'css/style.css' %}' type='text/css' media='all' />
<script type='text/javascript' src='{% static 'js/jquery.min.js' %}'></script>

以上只是部分示列，要把 index.html文件中的 ../ 按上边的方式全改掉

绝对路径也可以加载静态文件，为什么要配置动态路径，

settings.py 中设置的静态路径，/static/ 这里对应前端模板的 /static/, 如果后台 static 文件夹名称修改了，前端那么多 /static/ 都要修改那不得累死，所以这里给把静态文件路由固定为 /static/.

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

这样如果修改了 static 静态文件夹的名称，只需要修改一下 os.path.join(BASE_DIR, 'static') 名字即可

(BASE_DIR, 'static') 中的 'static' 名字随便修改

4、查看运行效果

配置好静态路径后，重启项目，查看运行效果

20312

最后再刷新下页面，发现我们的博客首页已经出现，接下来就是首页渲染数据了。不要感觉这么多步骤很难，对 Django 项目结构进一步了解后也就那么回事，就可以驾轻就熟的搞出自己喜欢的站点了，不要急躁，首页整好后接下来每干一点，都会在前台看到自己的成果，坚持一下，美好即将来临

现在我们展示的还只是静态页面，首页中博客的内容仍然是崔庆才的内容，为了将我们自己的文章从后台添加的文章展示到前端，我们还需要对视图函数进行进一步完善。下节继续~~~

转载请注明： StormSha » Django个人博客开发八 | 博客首页开发一

渡 StormSha的个人博客