博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Django+Bootstrap+Mysql 搭建个人博客(一)
阅读量:4869 次
发布时间:2019-06-11

本文共 6488 字,大约阅读时间需要 21 分钟。

1.1.环境搭建

(1)虚拟环境

mkvirtualenv websitepip install django==1.11.7

(2)创建项目和app:website和blog

 

(3)设置中文settings.py

LANGUAGE_CODE = 'zh-hans'TIME_ZONE = 'Asia/Shanghai'USE_I18N = TrueUSE_L10N = TrueUSE_TZ = False

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

1.2.模型设计

 (1)blog/models.py

from django.db import modelsfrom django.contrib.auth.models import Userclass Category(models.Model):    name = models.CharField('分类',max_length=128)    def __str__(self):        return self.name    class Meta:        verbose_name = '博客分类'        verbose_name_plural = verbose_nameclass Tag(models.Model):    name = models.CharField('标签', max_length=128)    def __str__(self):        return self.name    class Meta:        verbose_name = '博客标签'        verbose_name_plural = verbose_nameclass 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 adminfrom . import modelsclass 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 pymysqlpymysql.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,includefrom django.contrib import adminurlpatterns = [    url(r'^admin/', admin.site.urls),    url(r'^blog/',include('blog.urls') ),]

(2)blog/urls.py

from django.conf.urls import urlfrom . import viewsapp_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 renderdef 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 %}
{
% block content %}{% endblock %}
{
% 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 %}

 效果:

 

 此时目录结构:

 

 

转载于:https://www.cnblogs.com/derek1184405959/p/9060981.html

你可能感兴趣的文章
数据库数据的查询----连接查询
查看>>
Git使用教程【转】
查看>>
html图片设置fixed消失,为什么fixed后,DIV7消失了,怎么显示出来?
查看>>
html5隐藏自定义控制按钮,用仿ActionScript的语法来编写html5——第七篇,自定义按钮...
查看>>
找不到可安装的ISAM ,asp.net读取数据丢失,解决的一列里有字符与数字的
查看>>
Java学习笔记三(对象的基本思想一)
查看>>
Bezier贝塞尔曲线的原理、二次贝塞尔曲线的实现
查看>>
Java程序(文件操作)
查看>>
Alignment (DP基础--最长上升子序列)
查看>>
SPF(图的割点)
查看>>
KMP算法的Next数组详解
查看>>
Brackets (区间DP)
查看>>
Tarjan算法
查看>>
Strategic Game(树形DP)
查看>>
迷宫城堡 (求强连通)
查看>>
Oulipo (KMP 统计出现次数,裸题)
查看>>
图的割点算法 与 图的割边算法
查看>>
KMP算法 最小循环节 最大重复次数
查看>>
Proving Equivalences (强连通,缩点)
查看>>
并查集(模板)
查看>>