Django+Bootstrap+Mysql 搭建个人博客（一）

1.1.环境搭建

（1）虚拟环境

mkvirtualenv website

pip install django==1.11.7

（2）创建项目和app：website和blog

（3）设置中文settings.py

LANGUAGE_CODE = 'zh-hans'

TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_L10N = True

USE_TZ = False

运行项目：http://127.0.0.1:8000/

1.2.模型设计

 （1）blog/models.py

from django.db import models
from django.contrib.auth.models import User

'''
遇到不懂的问题？Python学习交流群：1004391443满足你的需求，资料都已经上传群文件，可以自行下载！
'''

class Category(models.Model):
    name = models.CharField('分类',max_length=128)

    def __str__(self):
        return self.name

    class Meta:
        verbose_name = '博客分类'
        verbose_name_plural = verbose_name


class Tag(models.Model):
    name = models.CharField('标签', max_length=128)

    def __str__(self):
        return self.name

    class Meta:
        verbose_name = '博客标签'
        verbose_name_plural = verbose_name


class Entry(models.Model):
    title = models.CharField('文章标题',max_length=128)
    author = models.ForeignKey(User,verbose_name='作者',on_delete=models.CASCADE)
    img = models.ImageField(upload_to='blog_img',null=True,blank=True,verbose_name='博客配图')
    body = models.TextField('正文',)
    abstract = models.TextField('摘要',max_length=256,null=True,blank=True)
    visiting = models.PositiveIntegerField('访问量',default=0)
    category = models.ManyToManyField('Category',verbose_name='博客分类')
    tags = models.ManyToManyField('Tag',verbose_name='标签')
    created_time = models.DateTimeField('创建时间',auto_now_add=True)
    modifyed_time = models.DateTimeField('修改时间',auto_now=True)

    def __str__(self):
        return self.title

    class Meta:
        ordering = ['-created_time']
        verbose_name = '博客正文'
        verbose_name_plural = verbose_name

（2）blog/admin.py

from django.contrib import admin
from . import models

class EntryAdmin(admin.ModelAdmin):
    list_display = ['title','author','visiting','created_time','modifyed_time']


admin.site.register(models.Category)
admin.site.register(models.Tag)
admin.site.register(models.Entry,EntryAdmin)

（3）设置为MySql

import pymysql
pymysql.install_as_MySQLdb()

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'my_blog',        #数据库名字
        'USER': 'root',          #账号
        'PASSWORD': '123456',      #密码
        'HOST': '127.0.0.1',    #IP
        'PORT': '3306',                   #端口
    }
}

（4）安装模块

pip install pymysql pillow

（5）创建超级用户

python manage.py createsuperuser

进后台添加标签和分类

 

1.3.url及视图设计

（1）website/urls.py

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

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^blog/',include('blog.urls') ),
]

（2）blog/urls.py

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

app_name = 'blog'

urlpatterns = [
    url(r'^$', views.index,name='blog_index'),
    url(r'^(?P[0-9]+)', views.detail,name='blog_detail'),
]

（3）blog/views.py

from django.shortcuts import render

def index(request):

    return render(request,'blog/index.html',locals())


def detail(request,blog_id):

    return render(request,'blog/detail.html',locals())

（4）blog/templates/blog/index.html

    
    首页


博客首页

（5）blog/templates/blog/detail.html

    
    博客详情页


博客{{ blog_id }}的详情

1.4.前端页面设计

 （1）Bootstrap

 下载bootstrap,把文件放到static目录

settings设置

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

（2）blog/base.html

{% load staticfiles %}




    
    {% block title %}{% endblock %}

    
    
    {% block css %}{% endblock %}





  

    
    

      
        Toggle navigation
        
        
        
      
      Zhang_derek
    

    
    

      

        
博客
        
学习资源
        
联系我
      

      
        

          
        
        搜索
      

      

        
登录
      

    
  


{% block content %}{% endblock %}

 
    

        

            

                

                    
主页
                               
联系我们
                               
关于博主
                               
文档支持
                               
博客首页
                
                
Copyright © 2018 Zhang_derek 

            
        
    






{% block script %}{% endblock %}

（3）blog/static/blog/css/blog_nav.css

body {
    margin-top: 30px;
    font-weight: 400;
    /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    padding-top: 70px;
}

/* Navbar and footer (global) styling */
.navbar-fixed-top .nav {
    padding: 15px 0;
}

.navbar {
    color: black;
    border-width: thin;
    -webkit-transition: .2s;
    background-color: white;
    border-bottom: 1px solid #e0e0e0;
    background-color: white;
}

.navbar a {
    color: black;
}

.navbar-fixed-top .navbar-brand {
    padding: 0 15px;
}

.navbar-header .icon-bar {
    background-color: black;
}

.navbar-nav > li > .navbar-active {
    color: #E46E2E;
}

.navbar-scroll {
  background-color: white;
    animation-duration: 2s;
    animation-name: smooth;
    -moz-box-shadow: 1px 1px 1px #999;
    -webkit-box-shadow: 1px 1px 1px #999;
    box-shadow: 1px 1px 1px #999;
}

.jupytercon-nav > li > .black-tab {
    color: black;
}

.navbar-logo {
    height: 45px;
}

.nav > li > a {
    font-size: 20px;
    padding: 12px 16px 10px;
}

.nav > li > a:hover {
    background-color: transparent;
    color: #E46E2E;
    -webkit-transition: .2s;
}

.nav > li > a:focus {
    background-color: white;
}

.nav > li > a:active {
    background-color: #F8F8F8;
}

.nav > li > a:visited {
    background-color: #F8F8F8;
}

.tab:hover {
    background-color: transparent;
    color: #E46E2E;
}

.footer {
    background-color: #979797;
}

.footer p {
    color: white;
    padding-top: 10px;
}

.footer li {
    color: white;
    display: inline-block;
    text-decoration: none;
}

.footer a {
    color: white;
    text-decoration: none;
}

.footer li::after {
    content:" |";
}

.footer li:last-of-type::after {
    content:"";
}

.footer-text {
    font-size: 16px;
    margin-left: 0;
    padding-left: 0;
}

.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 20px;
    line-height: 20px;
    margin-top: 27px;
}

nav .navbar-form{
    padding: 10px;
}

（4）blog/index.html

{% extends 'blog/base.html' %}

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

{% block content %}

    博客首页
    


{% endblock %}

效果：

 

此时目录结构：