zoukankan      html  css  js  c++  java
  • 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': '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<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: 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 %}
    
        博客首页
        <div style="height: 440px; " ></div>
    
    {% endblock %}

     效果:

     此时目录结构:

     

     
     
     
  • 相关阅读:
    mysql 远程登陆不上
    hdu 5339 Untitled【搜索】
    SqlServer 书目
    passwordauthentication yes
    oracle 11g RAC ocfs2
    Oracle 11g RAC database on ASM, ACFS or OCFS2
    CentOS ips bonding
    Oracle 11g RAC features
    openStack 王者归来之 trivial matters
    openstack windows 2008 img
  • 原文地址:https://www.cnblogs.com/gaidy/p/12106286.html
Copyright © 2011-2022 走看看