Skip to content

Bootstrap テンプレート#

Gentelella#

使用方法#

Gentelellaは、Bootstrap 3とFont Awesomeを使用したオープンソースのダッシュボードテンプレートです。DjangoとGentelellaを組み合わせて使用する場合、Djangoのテンプレートエンジンを使用してGentelellaのテンプレートをレンダリングすることができます。以下は、GentelellaをDjangoで使用する方法の概要です。

  1. Gentelellaのソースコードをダウンロードまたはクローンします。
  2. Djangoプロジェクトのルートディレクトリにstatic、templates、layoutsの3つのフォルダを作成します。
  3. Gentelellaのソースコードから、以下のファイルをlayoutsフォルダにコピーします。
    • layout.html
    • sidebar.html
  4. Gentelellaのソースコードから、以下のファイルをtemplatesフォルダにコピーします。
    • index.html
    • login.html
    • register.html
    • forgot_password.html
  5. Djangoのsettings.pyファイルに以下の設定を追加します。
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
            os.path.join(BASE_DIR, 'layouts'),
        ],
        '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',
            ],
        },
    },
]
  1. Djangoのurls.pyファイルに以下の設定を追加します。 
from django.urls import path
from django.contrib.auth import views as auth_views
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('login/', auth_views.LoginView.as_view(template_name='login.html'), name='login'),
    path('logout/', auth_views.LogoutView.as_view(), name='logout'),
    path('register/', views.register, name='register'),
    path('forgot_password/', auth_views.PasswordResetView.as_view(template_name='forgot_password.html'), name='password_reset'),
    path('reset_password/<uidb64>/<token>/', auth_views.PasswordResetConfirmView.as_view(template_name='reset_password.html'), name='password_reset_confirm'),
    path('reset_password_complete/', auth_views.PasswordResetCompleteView.as_view(template_name='reset_password_complete.html'), name='password_reset_complete'),
]
  1. views.pyファイルを作成し、以下のコードを追加します。
from django.shortcuts import render, redirect
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.decorators import login_required

@login_required
def index(request):
    return render(request, 'index.html')

def register(request):
    if request.method == 'POST':
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('login')
    else:
        form = UserCreationForm()
    return render(request, 'register.html', {'form': form})

これで、GentelellaをDjangoで使用することができます。

  1. データベースをマイグレーションします。
python manage.py migrate
  1. サーバーを起動します。
python manage.py runserver
  1. ブラウザで http://localhost:8000/ にアクセスします。

これで、GentelellaをDjangoで使用することができます。ただし、この方法は最低限の設定しか行っておらず、必要に応じて追加の設定が必要になる場合があります。 また、Gentelellaのバージョンによっては、この方法が正常に動作しない場合があります。その場合は、Gentelellaの公式ドキュメントを参照して、必要な設定を行ってください。