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

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': '',      #密码

        'HOST': '127.0.0.1',    #IP

        'PORT': '',                   #端口

    }

}

（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<blog_id>[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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>首页</title>

</head>

<body>

<h1>博客首页</h1>

</body>

</html>

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>博客详情页</title>

</head>

<body>

<h1>博客{{ blog_id }}的详情</h1>

</body>

</html>

1.4.前端页面设计

（1）Bootstrap

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

settings设置

STATIC_URL = '/static/'

STATICFILES_DIRS = [

    os.path.join(BASE_DIR,'static'),

]

（2）blog/base.html

Bootstrap优站精选

{% load staticfiles %}

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>{% block title %}{% endblock %}</title>

    <link href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="stylesheet">

    <link href="{% static 'blog/css/blog_nav.css' %}" rel="stylesheet">

    {% block css %}{% endblock %}

</head>

<body>

<nav class="navbar navbar-fixed-top">

  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-nav" aria-expanded="false">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">Zhang_derek</a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="my-nav">

      <ul class="nav navbar-nav">

        <li class="active"><a href="/blog/">博客</a></li>

        <li ><a href="#">学习资源</a></li>

        <li ><a href="#">联系我</a></li>

      </ul>

      <form class="navbar-form navbar-left">

        <div class="form-group">

          <input type="text" class="form-control" placeholder="Search">

        </div>

        <button type="submit" class="btn btn-default">搜索</button>

      </form>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">登录</a></li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

{% block content %}{% endblock %}

 <footer>

    <div class="footer" role="navigation">

        <div class="container">

            <div class="navbar-text">

                <ul class="footer-text">

                    <li><a href="#">主页</a></li>

                               <li><a href="#">联系我们</a></li>

                               <li><a href="#">关于博主</a></li>

                               <li><a href="#">文档支持</a></li>

                               <li><a href="/blog/">博客首页</a></li>

                </ul>

                <p>Copyright © 2018 Zhang_derek </p>

            </div>

        </div>

    </div>

</footer>

<script src="{% static 'jquery-3.2.1.min.js' %}"></script>

<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>

{% block script %}{% endblock %}

</body>

</html>

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

body {

    margin-top: 30px;

    font-weight:;

    /* 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:;

    padding-left:;

}

.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 %}

    博客首页

    <div style="height: 440px; " ></div>

{% endblock %}

效果：

此时目录结构：

Django+Bootstrap+Mysql 搭建个人博客（一）的更多相关文章

Django+Bootstrap+Mysql 搭建个人博客（五）
5.1.自定义403,404和500页面 (1)website/urls.py from blog import views as blog_views handler403 = blog_views ...
Django+Bootstrap+Mysql 搭建个人博客（四）
4.1.博客分类 (1)blog_tags.py @register.simple_tag def get_categories(): return Category.objects.all() @r ...
Django+Bootstrap+Mysql 搭建个人博客（三）
3.1.分页功能 (1)views.py from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger def make ...
Django+Bootstrap+Mysql 搭建个人博客（二）
2.1.博客首页设计 (1)settings.py MEDIA_ROOT = os.path.join(BASE_DIR,'media').replace("//","/ ...
Django+Bootstrap+Mysql 搭建个人博客（六）
6.1.comments插件 (1)安装 pip install django-contrib-comments (02)settings INSTALLED_APPS = [ 'django.con ...
Django+Bootstrap+Mysql 搭建个人博客（六）
6.1.comments插件 (1)安装 pip install django-contrib-comments (02)settings INSTALLED_APPS = [ 'django.con ...
Python Web开发:Django+BootStrap实现简单的博客项目
创建blog的项目结构关于如何创建一个Django项目,请查看[Python Web开发:使用Django框架创建HolleWorld项目] 创建blog的数据模型创建一个文章类所有开发都是数据 ...
django入门--django-blog-zinnia搭建个人博客
1.安装python 选择合适python2.7及以上版本安装https://www.python.org/downloads/ 2.建立虚拟环境这不是必须的,但是建议使用,为每个项目单独引入依赖, ...
Django两天搭建个人博客
传送门:https://github.com/1417766861/django-blog(可直接运行,上面有步骤) 效果: 首页: 侧栏: 详情页面: 修改头像,资料,文章发布: 支持添加标签拖拽 ...

随机推荐

Java - 数组详解（图解数组的基本操作）
目录什么是数组数组的定义和内存分配数组的赋值和访问数组的注意事项数组的内存图解数组的插入数组的删除数组的扩容数组的反转首先什么是数组数组是一组地址连续.长度固定的具有相同类型的 ...
Python学习最佳路线图
python语言基础(1)Python3入门,数据类型,字符串(2)判断/循环语句,函数,命名空间,作用域(3)类与对象,继承,多态(4)tkinter界面编程(5)文件与异常,数据处理简介(6)Py ...
SpringBoot的自动配置原理
一.入口上篇注解@SpringBootApplication简单分析,说到了@SpringBootApplication注解的内部结构, 其中@EnableAutoConfiguration利用En ...
2018-2019网络对抗技术 20165220 Exp4 恶意代码分析
实践目标监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systracer套件. ...
POJ 1966 Cable TV Network (点连通度)【最小割】
<题目链接> 题目大意: 给定一个无向图,求点连通度,即最少去掉多少个点使得图不连通. 解题分析: 解决点连通度和边连通度的一类方法总结见 >>> 本题是求点连通度, ...
分分钟解决MySQL查询速度慢与性能差
阅读本文大概需要 6 分钟. 一.什么影响了数据库查询速度 1.1 影响数据库查询速度的四个因素 1.2 风险分析 QPS: QueriesPerSecond意思是“每秒查询率”,是一台服务器每秒能够 ...
3步永久性激活pycharm 亲测有效
----------破解后,有效时间会到2099年------------ 1.下载JAR包:此JAR包的目的就是让截获截止时间并骗过pycharm 链接:https://pan.baidu.com/ ...
免费获取SSL证书/一键安装SSL证书/https加密
因为我用的是恒创的香港服务器虽然价格相较于大促的阿里云贵一些,但是有一个有点不用备案... 安装步骤: 1.登录云主机控制面板, 在其他管理中找到并进入 SSL证书设置. 注意:如拥有多个域名 ...
Python网络编程基础pdf
Python网络编程基础(高清版)PDF 百度网盘链接:https://pan.baidu.com/s/1VGwGtMSZbE0bSZe-MBl6qA 提取码:mert 复制这段内容后打开百度网盘手 ...
C# 中传参中的OUT 和 ref 区别笔记
//out传参前需要对参数进行赋值处理,ref则不需要.//out.ref 传参都可以对值进行改变 1 static void Main(string[] args) { ; //int J = 10 ...