Django+Bootstrap+Mysql 搭建個人博客（五）

5.1.自定義403，404和500頁面

（1）website/urls.py

from blog import views as blog_views

handler403 = blog_views.permission_denied
handler404 = blog_views.page_not_found
handler500 = blog_views.page_error

（2）views.py

def permission_denied(request):
    '''403'''
    return render(request, 'blog/403.html', locals())


def page_not_found(request):
    '''404'''
    return render(request, 'blog/404.html', locals())


def page_error(request):
    '''500'''
    return render(request, 'blog/500.html', locals())

還要改detail的view

 

 （3）403，404,500頁面

{% extends 'blog/base.html' %}
{% block title %}403{% endblock %}

{% block content %}
    <section class="container text-center" style="min-height:600px;">
        <h1>403, Forbidden!</h1>
        <p>你沒有權限訪問該頁面</p>
        <a class="btn btn-primary" href="{% url 'blog:blog_index' %}">返回主頁</a>
    </section>
{% endblock %}

{% extends 'blog/base.html' %}
{% block title %}404{% endblock %}

{% block content %}
    <div class="container text-center" style="min-height:600px;">
        <h1>404, Page not Found!</h1>
        <h2>頁面不存在!</h2>
        <a class="btn btn-primary" href="{% url 'blog:blog_index' %}">返回主頁</a>
    </div>
{% endblock %}

{% extends 'blog/base.html' %}
{% block title %}500{% endblock %}

{% block content %}
    <section class="container text-center" style="min-height:600px;">
        <h1>500, Page Error!</h1>
        <p>服務器錯誤！</p>
        <a class="btn btn-primary" href="{% url 'blog:blog_index' %}">返回主頁</a>
    </section>
{% endblock %}

生成環境下才有效：DEBUG = False

 

5.2.sitemap（站點地圖）

（1）settings.py

INSTALLED_APPS = [
        'django.contrib.sitemaps',
]

（2）web/urls.py

from django.contrib.sitemaps import GenericSitemap
from django.contrib.sitemaps.views import sitemap
from blog.models import Entry

info_dict = {
    'queryset': Entry.objects.all(),
    'date_field': 'modifyed_time'
}


url(r'^sitemap\.xml$', sitemap, {'sitemaps': {'blog': GenericSitemap(info_dict, priority=0.6)}},
      name='django.contrib.sitemaps.views.sitemap'),       #站點地圖

from django.conf.urls import url,include
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static
from blog.feed import LatestEntriesFeed
from blog import views as blog_views

from django.contrib.sitemaps import GenericSitemap
from django.contrib.sitemaps.views import sitemap
from blog.models import Entry

info_dict = {
    'queryset': Entry.objects.all(),
    'date_field': 'modifyed_time'
}

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^blog/',include('blog.urls') ),
    url(r'^latest/feed/$', LatestEntriesFeed()),    #RSS訂閱
    url(r'^sitemap\.xml$', sitemap, {'sitemaps': {'blog': GenericSitemap(info_dict, priority=0.6)}},
      name='django.contrib.sitemaps.views.sitemap'),       #站點地圖
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT )        #添加圖片的url

handler403 = blog_views.permission_denied
handler404 = blog_views.page_not_found
handler500 = blog_views.page_error

（3）訪問地址：http://127.0.0.1:8000/sitemap.xml

 

5.3.博客詳情頁目錄

（1）right_site_bar.html

因為只有詳情頁右邊才顯示目錄，主頁不顯示，在right_side_bar.html添加一個block

 

 （2）detail.html

 <div class="col-md-3">
                {% block toc %}
                    <div class="row">
                        <div class="widget">
                            <h3>博客目錄</h3>
                            {{ entry.toc|safe }}
                        </div>
                    </div>
                {% endblock %}
                {% include 'blog/right_site_bar.html' %}
            </div>

把之前在正文里面顯示的目錄刪了，只要右側顯示目錄就行了

 

5.4.返回頂部功能

（1）base.html

  <div id="back-to-top">
        <i class="glyphicon glyphicon-arrow-up"></i>
    </div>

（2）css代碼 

base.html引用

<link href="{% static 'blog/css/back-to-top.css' %}" rel="stylesheet">

blog/css/back-top-css.css代碼

#back-to-top {
    box-shadow: 5px 5px 5px #888888;
    border-radius: 2px;
    position: fixed;
    bottom: 70px;
    right: 70px;
    color: whitesmoke;
    background: #3ac57d;
    width: 50px;
    height: 50px;
    text-align: center;
}

#back-to-top i {
    font-size: 30px;
    margin: 10px auto;
}

（3）js代碼

base.html

 <script>
    $("#back-to-top").click(function () {
        window.scrollTo(0,0);
    });
 </script>