登录        注册
 本站基于Django1.11开发,源码已共享在 Github 欢迎 Fork、Star.近期站点微调频繁,如遇访问异常希望见谅,若能在评论区留言,或者发送邮件指出BUG,更是万分感谢

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

Django stormsha 3520浏览 0评论
本渣渣不专注技术,只专注使用技术,不是一个资深的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个人博客开发八 | 博客首页开发一

喜欢 (447) or 分享 ( 0)

联系我请直接在公众号留言~

扫码或搜索:进击的Coder

进击的Coder

微信公众号 扫一扫关注

想结交更多的朋友吗?

来进击的Coder瞧瞧吧

进击的Coder

QQ群号 213037458 立即加入

进击的Coder灌水太多?

这里是纯粹的技术领地

激进的Coder

QQ群号 781587463 立即加入

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的

发表我的评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 太强了。。。

    yangaoxu2019-04-10 14:04:56回复
    • 正在开发全站消息功能,测试中发现了老弟的评论。谢谢夸奖,一起学习进步:mrgreen:

      stormsha2019-04-10 21:58:42回复
  2. 关于index.html文件中的 ../ 替换方法:
    可以pychram中 shift+f 打开查找 利用正则整体替换
    参考链接 https://www.cnblogs.com/thunderLL/p/6701374.html

    Ricool2019-04-26 15:48:13回复
    • 可以,很实用,欢迎推荐更骚的操作:!:

      stormsha2019-04-26 16:21:33回复
    • 感谢两位大神

      niuxuliang9292019-04-28 23:10:09回复
      • 不客气,其实没什么技术难度,主要是能坚持,既然学习了django,就应该做一个让自己满意的东西,这样才有学习的成就感

        stormsha2019-04-29 09:37:13回复
  3. index.html运行出现如下错误
    TemplateSyntaxError at /
    'blog_tags' is not a registered tag library. Must be one of:
    admin_list
    admin_modify
    admin_static
    admin_urls
    ...

    fslfyc2019-06-12 16:38:40回复
    • 博主,评论删除不了:mrgreen:

      fslfyc2019-06-13 09:17:27回复
  4. 各位兄弟如果在终端runserver出现 以下错误:
    django.core.exceptions.ImproperlyConfigured:
    Specifying a namespace in include() without providing an app_name is not supported.
    Set the app_name attribute in the included module,
    or pass a 2-tuple containing the list of patterns and app_name instead.

    意思为:
    在include方法里面指定namespace却不提供app_name是不允许的。
    在包含的模块里设置app_name变量,或者在include方法里面提供app_name参数。

    不妨在Blog/storm/urls.py
    改成这样:
    app_name = 'storm.urls'
    urlpatterns = [
    url(r"^$",IndexView.as_view(template_name='index.html'),name = 'index'),
    ]

    亲测有效喔

    miles2019-07-20 17:02:21回复
    • 在index.html第一行写入{% load staticfiles %}后,
      原第一行<!DOCTYPE HTML>下标红,报错为提示为Unexpected tokens...
      emmm不知为何.

      查了很久的资料也没答案.希望博主看见后能解答一下疑惑

      miles2019-07-20 17:26:19回复
      • H5网页批量修改的方法:
        ctrl+r打开查找和替换,右边勾上Regex,实现正则匹配
        上面出现定位搜索框输入'../static/(css/.*?)' 可以看见黄色表示,表示匹配到的数据
        下面替换框输入 "{% static '$1' %}" 黄色表条下面,出现一个黑色框,上面是替换后的结果预览

        同理替换其他~

        miles2019-07-20 18:04:21回复