Django 项目 1.需求分析与基础环境搭建

项目需求

首页展示（分页）
帖子分类
帖子归档
近期文章
关于博主
全文搜索
发布帖子

会用到富文本编辑器
帖子可以设置标签，左下角#Python

新建项目和应用

先建项目blog和应用post
**在这里插入图片描述**

找模板

如果看到别人的页面好看，可以做成模板，右键，另存为，会变成一个文件夹，里面有各种css、js和图片
有些看不见是在文件管理器里

公共文件夹配置

static静态文件夹

在blog项目根目录里创建static文件夹，再里面创建css文件夹，把刚才的css文件放进来

templates网页模板文件夹

在根目录里创建templates基础模板，创建基础模板base.html
- 复制html文件
- 或打开网页F12看代码

静态文件路由
配置static的路由
在blog-settings.py里

STATIC_URL = '/static/'

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

输入global_settings，点击进入py文件，可以复制目录常量STATICFILES_DIRS，不要自己手写；然后拼接出css的文件夹路径

这样，html里css的href就可以写/static/，也可以写load static files，用static变量，参考前面的文章

base.html挖洞与include

在base.html里

每个页面都会变化的，先挖洞，用block，后面用的时候可以再编辑
- 标题
  {% block title %}
  {% endblock %}
- js相关css
  {% block headerjs %}
  {% endblock %}
- 内容
  {% block main %}
  {% endblock %}
不怎么变化的地方，但数据也会更新，用include
包括头部、右侧、底部
{% include ‘header.html’ %}
{% include ‘right.html’ %}
{% include ‘footer.html’ %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" type="text/css" href="/static/style.css">
        {% block headerjs %}
        
        {% endblock %}
    </head>
    <body>
        <div id="container">
                <div id="wrap">
                    {% include 'header.html' %}

                    <div class="outer">
                        {% block left %}

                        {% endblock %}

                        {% include 'right.html' %}

                    </div>

                    {% include 'footer.html' %}

                </div>
            </div>

    </body>

</html>

配置项目urls,views与index.html

注意：如果不是创建项目blog的时候同时创建的app-post，需要单独命令启动apppython manage.py startapp post
并在setting里installed_apps注册post

配置项目urls

from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('post.urls')),
]

配置应用urls，并指向空到新的view
在post里新建urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.queryall_view)
    ]

alt+enter，快速创建views，最后跳转到index.html

from django.shortcuts import render


def queryall_view(request):
    return render(request,'index.html')

index.html的建立、继承与填坑
- 在post应用里新建目录templates（不是刚才那个根目录里的模板），创建index.html
- 首先继承自base.html
- 然后填3个block坑，包括title、header、left

{% extends 'base.html' %}

{% block title %}首页{% endblock %}

{% block headerjs %}

    <style>
        form {
          position: relative;
          width: 150px;
          margin: 0 auto;
        }
        .d1{
            float: right;
            line-height: 67px;
        }
        .d1 input {
          width: 100px;
          height: 30px;
          border: 2px solid darkred;
          border-radius: 5px;
          outline: none;
          background: white;
          color: #1e242a;
        }
    </style>

{% endblock %}


{% block left %}
    <div id="main">
            <article class="article article-type-post">
            <div class="article-meta">
                <a class="article-date">
                    <time>2018-06-26 16:58:24</time>
                </a>
                <div class="article-category">
                    <a class="article-category-link" href="#" target="_blank">后端</a>
                </div>
            </div>
            <div class="article-inner">
                <header class="article-header">
                    <h1 itemprop="name">
                        <a class="article-title" href="#" target="_blank">T4</a>
                    </h1>
                </header>
                <div class="article-entry" itemprop="articleBody">
                    <h2>前言</h2>
                    <hr>
                    &lt;p&gt;&lt;img alt="" sr...
                    <p class="article-more-link">
                        <a href="/post/8" target="_blank">阅读全文</a>
                    </p>
                </div>
                <footer class="article-footer">
                    <a data-url="存放文章的url" class="article-share-link">分享</a>
                    <ul class="article-tag-list">

                        <li class="article-tag-list-item">
                            <a class="article-tag-list-link" href="#">Python</a>
                        </li>

                    </ul>
                </footer>
            </div>
            </article>
        <nav id="page-nav">
                <span class="page-number current">1</span>
                <a class="page-number" href="/page/2">2</a>
                <a class="page-number" href="/page/3">3</a>
                <a class="page-number" href="/page/4">4</a>
                <a class="page-number" href="/page/5">5</a>
                <a class="page-number" href="/page/6">6</a>
                <a class="page-number" href="/page/7">7</a>
                <a class="page-number" href="/page/8">8</a>
            <a class="extend next" rel="next" href="/page/2">Next »</a>
        </nav>
    </div>
{% endblock %}

最后的静态页面如图