Django+Semantic-ui创建Blog网站（1、基本框架）

时间 2019-12-06

标签 django+semantic django semantic 创建 blog 网站基本框架栏目 Python 繁體版

原文原文链接

Django应该算是最流行的web应用框架了吧，而语义化的CSS框架semantic-ui我以为很是好用，使用这个组合作一个blog站点,关于Django的详细介绍以及MTV模式的相关有优势，请翻阅官方文档，很详细，我这边直接开始应用^_^javascript

1、创建Django工程

1.创建项目，建立应用css

D:\pythonproject\djangoproject>django-admin startproject blogsite

D:\pythonproject\djangoproject>cd blogsite

D:\pythonproject\djangoproject\blogsite>python manage.py startapp blog

D:\pythonproject\djangoproject\blogsite>

2.在blogsite/setting.py文件中添加应用，并设置templates路径html

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
]

####
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

顺便修改下语言与时区java

# 汉语
LANGUAGE_CODE = 'zh-hans'
# 上海时区
TIME_ZONE = 'Asia/Shanghai'

在主目录（manage.py所在文件夹）创建templates模板文件夹，按应用区分模板python

在blog目录下建立static存放css与js文件，最终目录：web

目录结构和基本的设置搞定了django

2.建立模板文件session

先建立主页的文件，咱们的最终目标大概是这样app

（比较渣画的。。。）
将下载的semantic-ui文件放入对应的static文件夹框架

在templates/blog下建立index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    {% load staticfiles %}
    <title>Blogsite</title>
    <!-- 使用本地的样式与js文件 -->
    <link rel="stylesheet" href="{% static 'css/semantic.min.css' %}">
    <script type="text/javascript" src="{% static 'js/semantic.min.js'%}"></script>
    <!-- 也能够直接使用CDN连接 -->
    <!--
    <link href="https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.js"></script>
    -->
  </head>
  <body>
    <!-- 目录结构 -->
    <div class="ui container">
      <div class="ui secondary pointing menu">
        <div class="active item">
          <a href="#">主页</a>
        </div>
        <div class=" item">
          <a href="#">热门</a>
        </div>
        <div class=" item">
          <a href="#">个人</a>
        </div>
        <div class="right menu">
          <div class="item">
            <div class="ui icon input">
              <input type="text" placeholder="Search...">
              <i class="search link icon"></i>
            </div>
          </div>
          <div class="item">
            <a href="/login" class="ui button">登陆</a>
          </div>

        </div>
      </div>
    </div>

    <!-- 隐藏分隔条 -->
    <div class="ui hidden divider">

    </div>

    <!-- 正文 -->
    <div class="ui container segment">
      <h3 class="ui header">花木兰</h3>
      <a href="/author-link">做者：钱唯演</a>
      <div class="ui divider"></div>
      <p>城上风光莺语乱，城下烟波春拍岸。绿杨芳草几时休？泪眼愁肠先已断。
        情怀渐觉成衰晚，鸾镜朱颜惊暗换。昔年多病厌芳尊，今日芳尊唯恐浅。
      </p>
    </div>
    <div class="ui container segment">
      <h3 class="ui header">花木兰</h3>
      <a href="/author-link">做者：钱唯演</a>
      <div class="ui divider"></div>
      <p>城上风光莺语乱，城下烟波春拍岸。绿杨芳草几时休？泪眼愁肠先已断。
        情怀渐觉成衰晚，鸾镜朱颜惊暗换。昔年多病厌芳尊，今日芳尊唯恐浅。
      </p>
    </div>
    <div class="ui container segment">
      <h3 class="ui header">花木兰</h3>
      <a href="/author-link">做者：钱唯演</a>
      <div class="ui divider"></div>
      <p>城上风光莺语乱，城下烟波春拍岸。绿杨芳草几时休？泪眼愁肠先已断。
        情怀渐觉成衰晚，鸾镜朱颜惊暗换。昔年多病厌芳尊，今日芳尊唯恐浅。
      </p>
    </div>
    <div class="ui container segment">
      <h3 class="ui header">花木兰</h3>
      <a href="/author-link">做者：钱唯演</a>
      <div class="ui divider"></div>
      <p>城上风光莺语乱，城下烟波春拍岸。绿杨芳草几时休？泪眼愁肠先已断。
        情怀渐觉成衰晚，鸾镜朱颜惊暗换。昔年多病厌芳尊，今日芳尊唯恐浅。
      </p>
    </div>
  </body>
</html>

在blog/views.py中添加主页函数：

from django.shortcuts import render

# Create your views here.
def index(request):
    # 模板文件要指明应用路径
    return render(request, 'blog/index.html')

在blogsite/urls.py中指明主页url

from django.conf.urls import url
from django.contrib import admin
# 不要忘记导入blog中的views
from blog import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # 访问/和/index都将跳转至主页
    url(r'^$', views.index),
    url(r'^index/$', views.index,name='home'),
]

OK，在根目录（manage.py目录）运行启动命令

python manage.py runserver

查看127.0.0.1:8000,或者127.0.0.1:8000/index

主页显示成功，下一篇介绍用户注册系统