tn00627974 / django_blog Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 13.28 MB

這是一個使用Django架設部落格的Blog網站

Python 7.53% HTML 10.03% CSS 81.31% JavaScript 1.13%

css django html javascript python bootstrap

django_blog's Introduction

這是一個使用Django架設部落格的Blog網站

提供了HTML、CSS、JS的頁面呈現
可以自動新增與更新網頁文章的數量和標籤內容 (支援Markdown語法)
提供作品集及自我介紹的頁面

Django Blog 目標開發

Django Blog 功能開發

Bug fix

分頁書籤會多一個空白
標籤連結篩選只有該標籤的內容
作品集 css樣板有衝突
關於我內容要更新

建立 Django 專案與設定指引

1. 確認環境與安裝 Django

python --version
pip install --upgrade pip
pip install django
pip list

2. 建立 Django 專案與應用程式

django-admin startproject firstproject
cd firstproject

python manage.py startapp myblog

3. 專案目錄結構

firstproject/
├── manage.py
└── firstproject/
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py
└── myblog/
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations/
    ├── models.py
    ├── tests.py
    └── views.py

4. 建立 templates 與 static 目錄

mkdir templates
mkdir static

5. 設定 Django 環境

settings.py 設定

LANGUAGE_CODE = 'zh-hant'
TIME_ZONE = 'Asia/Taipei'

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

DEBUG = True

6.在settings.py加入TEMPLATES資料夾

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [BASE_DIR / "templates"], # 加上 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",
            ],
        },
    },
]

7.引入 bootstap 到Django

下載 https://getbootstrap.com/docs/5.3/getting-started/download/
點選 Docs > Download > bootstrap-5.3.3-dist解壓縮後放至以下<pluguns資料夾路徑>
H:\我的雲端硬碟\Github專案\Django_Blog\firstproject\static\pluguns

將bootstrap.css加入在HTML呈現CSS

<head>
  <meta charset='utf-8'>
  <title>{{name}}</title>
  <link rel="stylesheet" href="/static/pluguns/bootstrap-5.3.3-dist/css/bootstrap.css">
</head>