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目錄）運行啓動命令