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

最新推荐文章于 2024-08-31 08:41:12 发布

weixin_33812433

最新推荐文章于 2024-08-31 08:41:12 发布

阅读量925

点赞数

文章标签： ui python javascript ViewUI

原文链接：https://segmentfault.com/a/1190000011555797

版权

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

一、建立Django工程

1.建立项目，创建应用

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路径

# 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',
            ],
        },
    },
]

顺便修改下语言与时区

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

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

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

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

2.创建模板文件

先创建主页的文件，我们的最终目标大概是这样

（比较渣画的。。。）
将下载的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目录）运行启动命令