搭建自己的博客（十二）：为分类添加博客数目并添加自定义404界面

单单有博客分类不能明了的知道某个分类有多少篇博客，所以在分类的边上添加了博客数目统计的功能。

之后又觉得django自带的404界面太丑了，所以添加了自定义404界面

1、先看变化的部分

2、上代码

# -*- coding: utf-8 -*-
# @Time    : 18-11-15 下午8:20
# @Author  : Felix Wang
from django.utils.deprecation import MiddlewareMixin
from django.shortcuts import render_to_response


class My404(MiddlewareMixin):
    def process_response(self, request, response):
        if str(response.status_code) == '404':
            import random
            return render_to_response(random.choice(['my404/my404_1.html', 'my404/my404_2.html']))
        return response

{% extends 'base.html' %}
{% load staticfiles %}
{# 标题 #}
{% block title %}
    felix Blog
{% endblock %}

{% block header_extends %}
    <link rel="stylesheet" href="{% static 'blog/blog.css' %}">
    <link rel="stylesheet" href="{% static 'fontawesome-free-5.5.0-web/css/all.min.css' %}">
{% endblock %}

{# 内容#}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="card" style="">
                    <div class="card-header"><h5 class="card-title">{% block blog_type_title %}博客列表{% endblock %}</h5>
                    </div>
                    <div class="card-body">
                        {% for blog in blogs %}
                            <div class="blog">
                                <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                                <div class="blog-info">
                                    <p>
                                        {# 添加图标 #}
                                        <i class="fas fa-tag"></i>
                                        <a href="{% url 'blogs_with_type' blog.blog_type.pk %}">
                                            {{ blog.blog_type }}
                                        </a>
                                        <i class="far fa-clock  "></i>
                                        {{ blog.created_time|date:"Y-m-d" }}
                                    <p>
                                </div>
                                <p>{{ blog.content|truncatechars:30 }}</p>
                            </div>
                        {% empty %}
                            <div class="blog">
                                <h3>--暂无博客，敬请期待--</h3>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                {# 分页 #}
                <div class="paginator">
                    <ul class="pagination justify-content-center">
                        {# 首页 #}
                        <li class="page-item"><a class="page-link" href="?page=1">首页</a></li>
                        {# 上一页 #}
                        {% if page_of_blogs.has_previous %}
                            <li class="page-item"><a class="page-link"
                                                     href="?page={{ page_of_blogs.previous_page_number }}">上一页</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled"><span class="page-link">上一页</span></li>
                        {% endif %}
                        {# 全部页码 #}
                        {% for page_num in page_range %}
                            {# 添加当前页高亮显示 #}
                            {% if page_num == page_of_blogs.number %}
                                <li class="page-item active"><span class="page-link">{{ page_num }}</span></li>
                            {% else %}
                                <li class="page-item"><a class="page-link"
                                                         href="?page={{ page_num }}">{{ page_num }}</a></li>
                            {% endif %}
                        {% endfor %}
                        {# 下一页 #}
                        {% if page_of_blogs.has_next %}
                            <li class="page-item"><a class="page-link"
                                                     href="?page={{ page_of_blogs.next_page_number }}">下一页</a></li>
                        {% else %}
                            <li class="page-item disabled"><span class="page-link">下一页</span></li>
                        {% endif %}
                        {# 尾页 #}
                        <li class="page-item"><a class="page-link"
                                                 href="?page={{ page_of_blogs.paginator.num_pages }}">尾页</a></li>
                    </ul>

                    <p>
                        一共有 {{ page_of_blogs.paginator.count }}篇博客，当前{{ page_of_blogs.number }}页，共{{ page_of_blogs.paginator.num_pages }}页
                    </p>

                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-header"><h5 class="card-title">博客分类</h5></div>
                    <div class="card-body">
                        <ul class="blog-types">
                            {% for blog_type in blog_types %}
                                <li>
                                    <a href="{% url 'blogs_with_type' blog_type.pk %}">{{ blog_type.type_name }}({{ blog_type.blog_count }})</a>
                                </li>
                            {% empty %}
                                <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header"><h5 class="card-title">日期归档</h5></div>
                    <div class="card-body">
                        <ul class="blog-dates">
                            {% for blog_date,blog_count in blog_dates.items %}
                                <li>
                                    <a href="{% url 'blogs_with_date' blog_date.year blog_date.month %}">
                                        {{ blog_date|date:'Y年m月' }}({{ blog_count }})
                                    </a>
                                </li>
                            {% empty %}
                                <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script>
        $(".nav-blog").addClass("active").siblings().removeClass("active");
    </script>
{% endblock %}

from django.shortcuts import render_to_response, get_object_or_404
from .models import Blog, BlogType
from django.core.paginator import Paginator
from django.conf import settings
from django.db.models import Count


# 分页部分公共代码
def blog_list_common_data(requests, blogs_all_list):
    paginator = Paginator(blogs_all_list, settings.EACH_PAGE_BLOGS_NUMBER)  # 第一个参数是全部内容，第二个是每页多少
    page_num = requests.GET.get('page', 1)  # 获取url的页面参数（get请求）
    page_of_blogs = paginator.get_page(page_num)  # 从分页器中获取指定页码的内容

    current_page_num = page_of_blogs.number  # 获取当前页
    all_pages = paginator.num_pages
    if all_pages < 5:
        page_range = list(
            range(max(current_page_num - 2, 1),
                  min(all_pages + 1, current_page_num + 3)))  # 获取需要显示的页码 并且剔除不符合条件的页码
    else:
        if current_page_num <= 2:
            page_range = range(1, 5 + 1)
        elif current_page_num >= all_pages - 2:
            page_range = range(all_pages - 4, paginator.num_pages + 1)
        else:
            page_range = list(
                range(max(current_page_num - 2, 1),
                      min(all_pages + 1, current_page_num + 3)))  # 获取需要显示的页码 并且剔除不符合条件的页码

    blog_dates = Blog.objects.dates('created_time', 'month', order='DESC')
    blog_dates_dict = {}
    for blog_date in blog_dates:
        blog_count = Blog.objects.filter(created_time__year=blog_date.year, created_time__month=blog_date.month).count()
        blog_dates_dict = {
            blog_date: blog_count
        }

    return {
        'blogs': page_of_blogs.object_list,
        'page_of_blogs': page_of_blogs,
        'blog_types': BlogType.objects.annotate(blog_count=Count('blog')),  # 添加查询并添加字段
        'page_range': page_range,
        'blog_dates': blog_dates_dict
    }


# 博客列表
def blog_list(requests):
    blogs_all_list = Blog.objects.all()  # 获取全部博客
    context = blog_list_common_data(requests, blogs_all_list)
    return render_to_response('blog/blog_list.html', context)


# 根据类型筛选
def blogs_with_type(requests, blog_type_pk):
    blog_type = get_object_or_404(BlogType, pk=blog_type_pk)
    blogs_all_list = Blog.objects.filter(blog_type=blog_type)  # 获取全部博客
    context = blog_list_common_data(requests, blogs_all_list)
    context['blog_type'] = blog_type
    return render_to_response('blog/blog_with_type.html', context)


# 根据日期筛选
def blogs_with_date(requests, year, month):
    blogs_all_list = Blog.objects.filter(created_time__year=year, created_time__month=month)  # 获取全部博客
    context = blog_list_common_data(requests, blogs_all_list)
    context['blogs_with_date'] = '{}年{}日'.format(year, month)
    return render_to_response('blog/blog_with_date.html', context)


# 博客详情
def blog_detail(requests, blog_pk):
    blog = get_object_or_404(Blog, pk=blog_pk)
    context = {
        'blog': blog,
        'previous_blog': Blog.objects.filter(created_time__gt=blog.created_time).last(),
        'next_blog': Blog.objects.filter(created_time__lt=blog.created_time).first(),
    }

    return render_to_response('blog/blog_detail.html', context)

"""
Django settings for myblog project.

Generated by 'django-admin startproject' using Django 2.1.3.

For more information on this file, see
https://docs.djangoproject.com/en/2.1/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.1/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'ea+kzo_5k^6r7micfg@lar1(rfdc08@b4*+w5d11=0mp1p5ngr'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog.apps.BlogConfig',  # 将自己创建的app添加到设置中
]

MIDDLEWARE = [

    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',

    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'blog.middleware.mymiddleware.My404',  # 添加自己的中间件
]

ROOT_URLCONF = 'myblog.urls'

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

WSGI_APPLICATION = 'myblog.wsgi.application'

# Database
# https://docs.djangoproject.com/en/2.1/ref/settings/#databases

DATABASES = {
    # 'default': {
    #     'ENGINE': 'django.db.backends.sqlite3',
    #     'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    # }
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'myblogs',  # 要连接的数据库，连接前需要创建好
        'USER': 'root',  # 连接数据库的用户名
        'PASSWORD': 'felixwang',  # 连接数据库的密码
        'HOST': '127.0.0.1',  # 连接主机，默认本级
        'PORT': 3306  # 端口 默认3306
    }
}

# Password validation
# https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

# Internationalization
# https://docs.djangoproject.com/en/2.1/topics/i18n/

# LANGUAGE_CODE = 'en-us'
# 语言
LANGUAGE_CODE = 'zh-hans'

# TIME_ZONE = 'UTC'
# 时区
TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_L10N = True

# 不考虑时区
USE_TZ = False

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

# 自定义参数
EACH_PAGE_BLOGS_NUMBER = 7

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>404</title>


    <style>
        html, body {
            height: 100%;
            min-height: 450px;
            font-size: 32px;
            font-weight: 500;
            color: #5d7399;
            margin: 0;
            padding: 0;
            border: 0;
        }

        .content {
            height: 100%;
            position: relative;
            z-index: 1;
            background-color: #d2e1ec;
            background-image: -webkit-linear-gradient(top, #bbcfe1 0%, #e8f2f6 80%);
            background-image: linear-gradient(to bottom, #bbcfe1 0%, #e8f2f6 80%);
            overflow: hidden;
        }

        .snow {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 20;
        }

        .main-text {
            padding: 20vh 20px 0 20px;
            text-align: center;
            line-height: 2em;
            font-size: 5vh;
        }

        .main-text h1 {
            font-size: 45px;
            line-height: 48px;
            margin: 0;
            padding: 0;
        }

        .main-text-a {
            height: 32px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        .main-text-a a {
            font-size: 16px;
            text-decoration: none;
            color: #0066CC;
        }

        .main-text-a a:hover {
            color: #000;
        }

        .home-link {
            font-size: 0.6em;
            font-weight: 400;
            color: inherit;
            text-decoration: none;
            opacity: 0.6;
            border-bottom: 1px dashed rgba(93, 115, 153, 0.5);
        }

        .home-link:hover {
            opacity: 1;
        }

        .ground {
            height: 160px;
             100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background: #f6f9fa;
            box-shadow: 0 0 10px 10px #f6f9fa;
        }

        .ground:before, .ground:after {
            content: '';
            display: block;
             250px;
            height: 250px;
            position: absolute;
            top: -62.5px;
            z-index: -1;
            background: transparent;
            -webkit-transform: scaleX(0.2) rotate(45deg);
            transform: scaleX(0.2) rotate(45deg);
        }

        .ground:after {
            left: 50%;
            margin-left: -166.66667px;
            box-shadow: -340px 260px 15px #8193b2, -620px 580px 15px #8193b2, -900px 900px 15px #b0bccf, -1155px 1245px 15px #b4bed1, -1515px 1485px 15px #8193b2, -1755px 1845px 15px #8a9bb8, -2050px 2150px 15px #91a1bc, -2425px 2375px 15px #bac4d5, -2695px 2705px 15px #a1aec6, -3020px 2980px 15px #8193b2, -3315px 3285px 15px #94a3be, -3555px 3645px 15px #9aa9c2, -3910px 3890px 15px #b0bccf, -4180px 4220px 15px #bac4d5, -4535px 4465px 15px #a7b4c9, -4840px 4760px 15px #94a3be;
        }

        .ground:before {
            right: 50%;
            margin-right: -166.66667px;
            box-shadow: 325px -275px 15px #b4bed1, 620px -580px 15px #adb9cd, 925px -875px 15px #a1aec6, 1220px -1180px 15px #b7c1d3, 1545px -1455px 15px #7e90b0, 1795px -1805px 15px #b0bccf, 2080px -2120px 15px #b7c1d3, 2395px -2405px 15px #8e9eba, 2730px -2670px 15px #b7c1d3, 2995px -3005px 15px #9dabc4, 3285px -3315px 15px #a1aec6, 3620px -3580px 15px #8193b2, 3880px -3920px 15px #aab6cb, 4225px -4175px 15px #9dabc4, 4510px -4490px 15px #8e9eba, 4785px -4815px 15px #a7b4c9;
        }

        .mound {
            margin-top: -80px;
            font-weight: 800;
            font-size: 180px;
            text-align: center;
            color: #dd4040;
            pointer-events: none;
        }

        .mound:before {
            content: '';
            display: block;
             600px;
            height: 200px;
            position: absolute;
            left: 50%;
            margin-left: -300px;
            top: 50px;
            z-index: 1;
            border-radius: 100%;
            background-color: #e8f2f6;
            background-image: -webkit-linear-gradient(top, #dee8f1, #f6f9fa 60px);
            background-image: linear-gradient(to bottom, #dee8f1, #f6f9fa 60px);
        }

        .mound:after {
            content: '';
            display: block;
             28px;
            height: 6px;
            position: absolute;
            left: 50%;
            margin-left: -150px;
            top: 68px;
            z-index: 2;
            background: #dd4040;
            border-radius: 100%;
            -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
            box-shadow: -56px 12px 0 1px #dd4040, -126px 6px 0 2px #dd4040, -196px 24px 0 3px #dd4040;
        }

        .mound_text {
            -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
        }

        .mound_spade {
            display: block;
             35px;
            height: 30px;
            position: absolute;
            right: 50%;
            top: 42%;
            margin-right: -250px;
            z-index: 0;
            -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
            background: #dd4040;
        }

        .mound_spade:before, .mound_spade:after {
            content: '';
            display: block;
            position: absolute;
        }

        .mound_spade:before {
             40%;
            height: 30px;
            bottom: 98%;
            left: 50%;
            margin-left: -20%;
            background: #dd4040;
        }

        .mound_spade:after {
             100%;
            height: 30px;
            top: -55px;
            left: 0%;
            box-sizing: border-box;
            border: 10px solid #dd4040;
            border-radius: 4px 4px 20px 20px;
        }
    </style>

</head>

<body translate="no">
<div class="content">
    <canvas class="snow" id="snow" width="1349" height="400"></canvas>
    <div class="main-text">
        <h1>天啊！<br>你访问的页面失踪了！</h1>
        <div class="main-text-a"><a href="{% url 'home' %}">< 返回首页</a></div>
    </div>
    <div class="ground">
        <div class="mound">
            <div class="mound_text">404</div>
            <div class="mound_spade"></div>
        </div>
    </div>
</div>


<script>
    (function () {
        function ready(fn) {
            if (document.readyState !== 'loading') {
                fn();
            } else {
                document.addEventListener('DOMContentLoaded', fn);
            }
        }

        function makeSnow(el) {
            let ctx = el.getContext('2d');
            let width = 0;
            let height = 0;
            let particles = [];

            let Particle = function () {
                this.x = this.y = this.dx = this.dy = 0;
                this.reset();
            };

            Particle.prototype.reset = function () {
                this.y = Math.random() * height;
                this.x = Math.random() * width;
                this.dx = Math.random() - 0.5;
                this.dy = (Math.random() * 0.5) + 0.5;
            };

            function createParticles(count) {
                if (count !== particles.length) {
                    particles = [];
                    for (let i = 0; i < count; i++) {
                        particles.push(new Particle());
                    }
                }
            }

            function onResize() {
                width = window.innerWidth;
                height = window.innerHeight;
                el.width = width;
                el.height = height;

                createParticles((width * height) / 10000);
            }

            function updateParticles() {
                ctx.clearRect(0, 0, width, height);
                ctx.fillStyle = '#f6f9fa';

                particles.forEach(function (particle) {
                    particle.y += particle.dy;
                    particle.x += particle.dx;

                    if (particle.y > height) {
                        particle.y = 0;
                    }

                    if (particle.x > width) {
                        particle.reset();
                        particle.y = 0;
                    }

                    ctx.beginPath();
                    ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false);
                    ctx.fill();
                });

                window.requestAnimationFrame(updateParticles);
            }

            onResize();
            updateParticles();
        }

        ready(function () {
            let canvas = document.getElementById('snow');
            makeSnow(canvas);
        });
    })();
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>404</title>

    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700' rel='stylesheet' type='text/css'>


    <style>
        svg#robot {
            display: block;
            position: relative;
            margin: 6em auto 0 auto;
            padding: 10px;
            -webkit-transform-origin: bottom;
            -ms-transform-origin: bottom;
            transform-origin: bottom;
            -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
            -ms-transform: rotate(0deg) translate3d(0px, 0px, 0px);
            transform: rotate(0deg) translate3d(0px, 0px, 0px);
            -webkit-animation: move 2s ease infinite;
            animation: move 2s ease infinite;
        }

        @-webkit-keyframes move {
            0%, 100% {
                -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
                transform: rotate(0deg) translate3d(0px, 0px, 0px);
            }

            25% {
                -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px);
                transform: rotate(5deg) translate3d(5px, 5px, 0px);
            }

            75% {
                -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
                transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
            }
        }

        @keyframes move {
            0%, 100% {
                -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
                transform: rotate(0deg) translate3d(0px, 0px, 0px);
            }

            25% {
                -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px);
                transform: rotate(5deg) translate3d(5px, 5px, 0px);
            }

            75% {
                -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
                transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
            }
        }

        g#head {
            -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
            -ms-transform: rotate(0deg) translate3d(0px, 0px, 0px);
            transform: rotate(0deg) translate3d(0px, 0px, 0px);
            -webkit-transform-origin: bottom center;
            -ms-transform-origin: bottom center;
            transform-origin: bottom center;
            -webkit-animation: head 1s 1s ease infinite;
            animation: head 1s 1s ease infinite;
        }

        g#head #leftAntenna > ellipse, g#head #rightAntenna > ellipse {
            -webkit-animation: color 350ms linear infinite;
            animation: color 350ms linear infinite;
        }

        @-webkit-keyframes head {
            0%, 46%, 50%, 55%, 100% {
                -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
                transform: rotate(0deg) translate3d(0px, 0px, 0px);
            }

            49% {
                -webkit-transform: rotate(20deg) translate3d(0px, 0px, 0px);
                transform: rotate(20deg) translate3d(0px, 0px, 0px);
            }

            51% {
                -webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0px);
                transform: rotate(-10deg) translate3d(0px, 0px, 0px);
            }
        }

        @keyframes head {
            0%, 46%, 50%, 55%, 100% {
                -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
                transform: rotate(0deg) translate3d(0px, 0px, 0px);
            }

            49% {
                -webkit-transform: rotate(20deg) translate3d(0px, 0px, 0px);
                transform: rotate(20deg) translate3d(0px, 0px, 0px);
            }

            51% {
                -webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0px);
                transform: rotate(-10deg) translate3d(0px, 0px, 0px);
            }
        }

        @-webkit-keyframes color {
            0%, 100% {
                fill: #ccc;
            }

            50% {
                fill: red;
            }
        }

        @keyframes color {
            0%, 100% {
                fill: #ccc;
            }

            50% {
                fill: red;
            }
        }

        #upperTorso {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: center;
            -ms-transform-origin: center;
            transform-origin: center;
            -webkit-animation: torso 600ms 1s ease infinite;
            animation: torso 600ms 1s ease infinite;
        }

        #upperTorso #leftArm {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 80% 5%;
            -ms-transform-origin: 80% 5%;
            transform-origin: 80% 5%;
            -webkit-animation: left 1s ease infinite;
            animation: left 1s ease infinite;
        }

        #upperTorso #leftArm .forearm {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 68% 10%;
            -ms-transform-origin: 68% 10%;
            transform-origin: 68% 10%;
            -webkit-animation: forearm 800ms 1s ease infinite;
            animation: forearm 800ms 1s ease infinite;
        }

        #upperTorso #rightArm {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 18% 0%;
            -ms-transform-origin: 18% 0%;
            transform-origin: 18% 0%;
            -webkit-animation: right 1s ease infinite;
            animation: right 1s ease infinite;
        }

        #upperTorso #rightArm .forearm {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 68% 10%;
            -ms-transform-origin: 68% 10%;
            transform-origin: 68% 10%;
            -webkit-animation: forearm 700ms 1s ease infinite;
            animation: forearm 700ms 1s ease infinite;
        }

        @-webkit-keyframes torso {
            40%, 50%, 60% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            45% {
                -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
            }

            55% {
                -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg);
            }
        }

        @keyframes torso {
            40%, 50%, 60% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            45% {
                -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
            }

            55% {
                -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg);
            }
        }

        @-webkit-keyframes left {
            60% {
                -webkit-transform: rotate(100deg);
                transform: rotate(100deg);
            }
        }

        @keyframes left {
            60% {
                -webkit-transform: rotate(100deg);
                transform: rotate(100deg);
            }
        }

        @-webkit-keyframes right {
            50% {
                -webkit-transform: rotate(-70deg);
                transform: rotate(-70deg);
            }
        }

        @keyframes right {
            50% {
                -webkit-transform: rotate(-70deg);
                transform: rotate(-70deg);
            }
        }

        @-webkit-keyframes forearm {
            0%, 30%, 50%, 70%, 100% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            40% {
                -webkit-transform: rotate(25deg);
                transform: rotate(25deg);
            }

            60% {
                -webkit-transform: rotate(-25deg);
                transform: rotate(-25deg);
            }
        }

        @keyframes forearm {
            0%, 30%, 50%, 70%, 100% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            40% {
                -webkit-transform: rotate(25deg);
                transform: rotate(25deg);
            }

            60% {
                -webkit-transform: rotate(-25deg);
                transform: rotate(-25deg);
            }
        }

        #lowerTrunk {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 60% 5%;
            -ms-transform-origin: 60% 5%;
            transform-origin: 60% 5%;
            -webkit-animation: lowerTrunk 1s ease infinite;
            animation: lowerTrunk 1s ease infinite;
        }

        @-webkit-keyframes lowerTrunk {
            0%, 100% {
                -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
                transform: rotate(0deg) translate3d(0px, 0px, 0px);
            }

            25% {
                -webkit-transform: rotate(2deg) translate3d(2px, 0px, 0px);
                transform: rotate(2deg) translate3d(2px, 0px, 0px);
            }

            75% {
                -webkit-transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
                transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
            }
        }

        @keyframes lowerTrunk {
            0%, 100% {
                -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
                transform: rotate(0deg) translate3d(0px, 0px, 0px);
            }

            25% {
                -webkit-transform: rotate(2deg) translate3d(2px, 0px, 0px);
                transform: rotate(2deg) translate3d(2px, 0px, 0px);
            }

            75% {
                -webkit-transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
                transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
            }
        }

        #leftFoot {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 60% 5%;
            -ms-transform-origin: 60% 5%;
            transform-origin: 60% 5%;
            -webkit-animation: leftFoot 2s ease infinite;
            animation: leftFoot 2s ease infinite;
        }

        #leftFoot > .lowerLeg {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 68% 10%;
            -ms-transform-origin: 68% 10%;
            transform-origin: 68% 10%;
            -webkit-animation: lowerLeg 2s ease infinite;
            animation: lowerLeg 2s ease infinite;
        }

        @-webkit-keyframes leftFoot {
            0%, 50% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            25% {
                -webkit-transform: rotate(70deg);
                transform: rotate(70deg);
            }
        }

        @keyframes leftFoot {
            0%, 50% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            25% {
                -webkit-transform: rotate(70deg);
                transform: rotate(70deg);
            }
        }

        @-webkit-keyframes lowerLeg {
            0%, 50% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            8%, 14% {
                -webkit-transform: rotate(-15deg);
                transform: rotate(-15deg);
            }

            11%, 18% {
                -webkit-transform: rotate(15deg);
                transform: rotate(15deg);
            }
        }

        @keyframes lowerLeg {
            0%, 50% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            8%, 14% {
                -webkit-transform: rotate(-15deg);
                transform: rotate(-15deg);
            }

            11%, 18% {
                -webkit-transform: rotate(15deg);
                transform: rotate(15deg);
            }
        }

        #rightFoot {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 50% 5%;
            -ms-transform-origin: 50% 5%;
            transform-origin: 50% 5%;
            -webkit-animation: rightFoot 2s ease infinite;
            animation: rightFoot 2s ease infinite;
        }

        #rightFoot > .lowerLeg {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 68% 10%;
            -ms-transform-origin: 68% 10%;
            transform-origin: 68% 10%;
            -webkit-animation: lowerLegIz 2s ease infinite;
            animation: lowerLegIz 2s ease infinite;
        }

        @-webkit-keyframes rightFoot {
            75% {
                -webkit-transform: rotate(-60deg);
                transform: rotate(-60deg);
            }

            50%, 100% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
        }

        @keyframes rightFoot {
            75% {
                -webkit-transform: rotate(-60deg);
                transform: rotate(-60deg);
            }

            50%, 100% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
        }

        @-webkit-keyframes lowerLegIz {
            50%, 100% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            60%, 70% {
                -webkit-transform: rotate(15deg);
                transform: rotate(15deg);
            }

            65%, 85% {
                -webkit-transform: rotate(-15deg);
                transform: rotate(-15deg);
            }
        }

        @keyframes lowerLegIz {
            50%, 100% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            60%, 70% {
                -webkit-transform: rotate(15deg);
                transform: rotate(15deg);
            }

            65%, 85% {
                -webkit-transform: rotate(-15deg);
                transform: rotate(-15deg);
            }
        }

        html {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizelegibility;
        }

        html,
        body {
             100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            background: #404853;
            font-family: 'Roboto Condensed', sans-serif;
        }

        .col {
            text-align: center;
        }

        .col h1 {
            text-shadow: 0 3px 0px #404853, 0 6px 0px #333333;
            color: #f54f59;
            font-size: 6em;
            font-weight: 500;
            line-height: 0.6em;
        }

        .col p {
            color: #ccc;
            font-family: monospace;
            font-size: 4em;
            font-weight: 300;
            line-height: 1em;
        }
    </style>


</head>

<body>

<svg id="robot" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="320px" height="300px" viewBox="0 0 160 300" enable-background="new 0 0 320 300" xml:space="preserve">
    <rect x="59.722" y="72.779" fill="#333" width="40.557" height="27.564" />
    <g id="head" class="up">
        <g id="leftAntenna">
            <path fill="none" stroke="#ccc" stroke-width="1.5" stroke-miterlimit="10" d="M77.519,25.869
        C75.85,13.604,65.745,3.39,53.972,3.39">
                <animate attributeName="d" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1" begin="0s" dur="0.75s" repeatCount="indefinite" values="
                          M77.519,25.869C75.85,13.604,65.745,3.39,53.972,3.39
                          ;
                          M77.519,25.869C75.85,13.604,65.745,3.39,53.972,12
                          ;
                          M77.519,25.869C75.85,13.604,65.745,3.39,53.972,0
                          ;
                          M77.519,25.869C75.85,13.604,65.745,3.39,53.972,3.39
                          " />
            </path>
            <ellipse fill="#ccc" cx="55.021" cy="3.39" rx="3.344" ry="3.391">
                <animate dur="0.75s" attributeName="cy" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1" begin="0s" values="
                           3.39;
                           12;
                           0;
                           3.39
                           " repeatCount="indefinite" />
            </ellipse>
        </g>
        <g id="rightAntenna">
            <path fill="none" stroke="#ccc" stroke-width="1.5" stroke-miterlimit="10" d="M82.48,25.869
        C84.15,13.604,94.255,3.39,106.028,3.39">
                <animate attributeName="d" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1" begin="0s" dur="0.6s" repeatCount="indefinite" values="
                          M82.48,25.869C84.15,13.604,94.255,3.39,106.028,3.39
                          ;
                          M82.48,25.869C84.15,13.604,94.255,3.39,106.028,10.39
                          ;
                          M82.48,25.869C84.15,13.604,94.255,3.39,106.028,-5.39
                          ;
                          M82.48,25.869C84.15,13.604,94.255,3.39,106.028,3.39
                          " />
            </path>
            <ellipse fill="#ccc" cx="104.979" cy="3.39" rx="3.344" ry="3.391">
                <animate dur="0.6s" attributeName="cy" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1" begin="0s" values="
                           3.39;
                           10.39;
                           -5.39;
                           3.39
                           " repeatCount="indefinite" />
            </ellipse>
        </g>
        <path fill="#333" d="M96.079,32.57v-8.546c-10.72-3.765-21.437-3.98-32.156,0v8.546H96.079z" />
        <path fill="#f54f59" d="M112.809,28.372H80H47.19c-5.814,18.663-5.499,37.322,0,55.983H80h32.811
        C118.309,65.694,118.625,47.035,112.809,28.372z" />
        <g>
            <g id="eyeLeft">
                <path fill="#FFFFFF" d="M72.116,47.955c0,5.443-4.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853
                s4.044-9.856,9.032-9.856h1.971C68.071,38.099,72.116,42.512,72.116,47.955z">
                    <animate attributeName="d" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" begin="5s" dur="0.8s" repeatCount="indefinite" values="
                          M72.116,47.955c0,5.443-4.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853s4.044-9.856,9.032-9.856h1.971C68.071,38.099,72.116,42.512,72.116,47.955z
                          ;
                          M72.116,47.955c0,5.443-0.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853s4.044-4.856,9.032-4.856h1.971C68.071,45.099,72.116,42.512,72.116,47.955z
                          ;
                          M72.116,47.955c0,5.443-4.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853s4.044-9.856,9.032-9.856h1.971C68.071,38.099,72.116,42.512,72.116,47.955z
                          " />
                </path>
                <path d="M66.614,47.955c0,2.176-1.618,3.942-3.613,3.942h-1.807c-1.994,0-3.612-1.766-3.612-3.942
                c0-2.178,1.618-3.943,3.612-3.943H63C64.996,44.012,66.614,45.777,66.614,47.955z" />
            </g>
            <g>
                <path fill="#FFFFFF" d="M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853
                s4.045-9.856,9.031-9.856h1.973C103.875,38.099,107.92,42.512,107.92,47.955z">
                    <animate attributeName="d" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" begin="5s" dur="0.8s" repeatCount="indefinite" values="
                          M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853s4.045-9.856,9.031-9.856h1.973C103.875,38.099,107.92,42.512,107.92,47.955z
                          ;
                          M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853s4.045-4.856,9.031-4.856h1.973C103.875,45.099,107.92,42.512,107.92,47.955z
                          ;
                          M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853s4.045-9.856,9.031-9.856h1.973C103.875,38.099,107.92,42.512,107.92,47.955z
                          " />
                </path>
                <path d="M102.417,47.955c0,2.176-1.616,3.942-3.612,3.942h-1.807c-1.994,0-3.611-1.766-3.611-3.942
                c0-2.178,1.617-3.943,3.611-3.943h1.807C100.801,44.012,102.417,45.777,102.417,47.955z" />
            </g>
        </g>
        <path fill="#FFFFFF" d="M103.383,69.778c0,1.381-0.836,2.499-1.871,2.499c-10.756,0-32.269,0-43.025,0
        c-1.033,0-1.871-1.118-1.871-2.499c0-1.378,0.838-2.496,1.871-2.496c10.756,0,32.269,0,43.025,0
        C102.547,67.282,103.383,68.4,103.383,69.778z">
            <animate attributeName="d" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1" begin="0s" dur="1s" repeatCount="indefinite" values="
                          M103.383,69.778c0,1.381-0.836,2.499-1.871,2.499c-10.756,0-32.269,0-43.025,0
        c-1.033,0-1.871-1.118-1.871-2.499c0-1.378,0.838-2.496,1.871-2.496c10.756,0,32.269,0,43.025,0
        C102.547,67.282,103.383,68.4,103.383,69.778z
                          ;
                          M103.383,69.778c0,1.381-0.862,2.268-1.871,2.499c-11.669,2.677-29.396,3.207-43.025,0
        c-1.005-0.236-1.871-1.118-1.871-2.499c0-1.378,0.868-2.249,1.871-2.496c11.349-2.795,31.753-2.53,43.025,0
        C102.521,67.508,103.383,68.4,103.383,69.778z
                          ;
                          M103.383,69.778c0,1.381-0.86,2.724-1.871,2.499c-11.271-2.506-29.956-2.201-43.025,0
        c-1.019,0.171-1.871-1.118-1.871-2.499c0-1.378,0.89-2.819,1.871-2.496c15.191,4.995,30.429,3.433,43.025,0
        C102.511,67.01,103.383,68.4,103.383,69.778z
                          ;
                          M103.383,69.778c0,1.381-0.836,2.499-1.871,2.499c-10.756,0-32.269,0-43.025,0
        c-1.033,0-1.871-1.118-1.871-2.499c0-1.378,0.838-2.496,1.871-2.496c10.756,0,32.269,0,43.025,0
        C102.547,67.282,103.383,68.4,103.383,69.778z
                          " />
        </path>
    </g>
    <g id="upperTorso">
        <g id="leftArm">
            <g class="forearm">
                <path fill="#333" d="M9.068,131.177c-4.78,12.558-5.183,25.372-2.497,40.71c0,0,0.68,4.312,6.107,3.39
        c4.571-0.776,4.348-5.001,4.348-5.001c-2.351-13.388-2.234-24.244,1.89-35.134c0,0,1.75-4.725-2.833-6.6
        C11.02,126.471,9.068,131.177,9.068,131.177z" />
                <path fill="#f54f59" d="M9.604,166.5c-6.984,1.975-11.067,9.316-9.117,16.398c1.008,3.662,3.439,6.522,6.51,8.172
        c-0.167-0.363-0.315-0.742-0.426-1.141c-1.235-4.484,1.703-9.234,6.562-10.609c4.861-1.377,9.804,1.145,11.037,5.631
        c0.111,0.396,0.18,0.798,0.221,1.197c1.785-3.021,2.399-6.748,1.393-10.407C23.833,168.661,16.589,164.523,9.604,166.5z" />
            </g>
            <path fill="#333" d="M18.917,135.142c1.731-4.573,4.169-9.151,7.428-13.925c4.23-6.199,7.573-9.281,13.553-13.761
        c0,0,3.335-2.905,0.961-6.63c-2.797-4.389-7.415-1.908-7.415-1.908c-4.981,3.145-10.421,8.413-15.576,15.872
        c-3.827,5.537-6.726,10.938-8.8,16.387c0,0-1.877,4.187,2.599,6.24C16.75,139.75,18.917,135.142,18.917,135.142z" />
            <g>
                <ellipse stroke="#f54f59" cx="13.581" cy="132.93" rx="8.505" ry="8.623" />
                <g>
                    <path fill="#f54f59" d="M9.299,135.199c1.237,2.396,4.154,3.322,6.52,2.07c2.364-1.252,3.278-4.211,2.042-6.605
                c-1.236-2.398-4.152-3.324-6.52-2.072C8.978,129.844,8.065,132.803,9.299,135.199z" />
                </g>
            </g>
        </g>
        <g id="rightArm">
            <g class="forearm">
                <path fill="#333" d="M143.916,128.542c-4.583,1.875-2.833,6.6-2.833,6.6c4.124,10.89,4.241,21.746,1.89,35.134
        c0,0-0.223,4.225,4.348,5.001c5.428,0.922,6.107-3.39,6.107-3.39c2.688-15.338,2.283-28.152-2.496-40.71
        C150.932,131.177,148.98,126.471,143.916,128.542z" />
                <path fill="#f54f59" d="M134.216,175.741c-1.006,3.659-0.392,7.386,1.394,10.407c0.041-0.399,0.109-0.801,0.221-1.197
        c1.232-4.486,6.176-7.008,11.037-5.631c4.859,1.375,7.797,6.125,6.562,10.609c-0.111,0.398-0.26,0.777-0.427,1.141
        c3.071-1.649,5.502-4.51,6.511-8.172c1.949-7.082-2.134-14.424-9.117-16.398C143.411,164.523,136.167,168.661,134.216,175.741z" />
            </g>
            <path fill="#333" d="M148.333,137.417c4.476-2.054,2.599-6.24,2.599-6.24c-2.074-5.449-4.973-10.85-8.8-16.387
        c-5.155-7.459-10.595-12.727-15.576-15.872c0,0-4.618-2.48-7.415,1.908c-2.374,3.725,0.961,6.63,0.961,6.63
        c5.98,4.479,9.323,7.562,13.553,13.761c3.26,4.773,5.697,9.352,7.429,13.925C141.083,135.142,143.25,139.75,148.333,137.417z" />
            <g>
                <ellipse stroke="#f54f59" cx="146.419" cy="132.93" rx="8.505" ry="8.623" />
                <g>
                    <path fill="#f54f59" d="M148.659,128.592c-2.368-1.252-5.284-0.326-6.521,2.072c-1.236,2.395-0.322,5.354,2.043,6.605
                s5.282,0.326,6.52-2.07C151.936,132.803,151.021,129.844,148.659,128.592z" />
                </g>
            </g>
        </g>
        <path d="M42.356,94.049l-8.341-1.248c-5.238,10.201-7.014,20.918-4.697,32.248l8.34,1.248L42.356,94.049z" />
        <path d="M122.342,126.297l8.34-1.248c2.317-11.33,0.541-22.047-4.697-32.248l-8.34,1.248L122.342,126.297z" />
        <path fill="#f54f59" d="M125.283,131.334c0.048-13.081-1.633-26.163-5.186-39.244H80H39.903
        c-3.552,13.081-5.232,26.162-5.184,39.242L125.283,131.334z" />
    </g>
    <g id="lowerTrunk">
        <g id="leftFoot">
            <path fill="#333" d="M61.27,164.817c0-3.526-2.858-6.386-6.385-6.386c-3.527,0-6.386,2.859-6.386,6.386v0.001l0,0l0,36.132
            c0,3.526,2.859,6.386,6.386,6.386c3.526,0,6.385-2.859,6.385-6.386L61.27,164.817L61.27,164.817L61.27,164.817z" />
            <g class="lowerLeg">
                <path fill="#333" d="M61.27,200.63c0-3.526-2.858-6.386-6.385-6.386c-3.527,0-6.386,2.859-6.386,6.386v0.001l0,0l0,36.132
            c0,3.526,2.859,6.386,6.386,6.386c3.526,0,6.385-2.859,6.385-6.386L61.27,200.63L61.27,200.63L61.27,200.63z" />
                <path fill="#f54f59" d="M54.885,234.096c-9.526,0-17.244,7.119-17.244,15.903H72.13C72.13,241.215,64.41,234.096,54.885,234.096z" />
            </g>
            <g>
                <ellipse stroke="#f54f59" cx="54.885" cy="200.79" rx="9.294" ry="9.423" />
                <g>
                    <path fill="#f54f59" d="M60.607,203.823c-1.653,3.202-5.553,4.44-8.715,2.768c-3.163-1.677-4.383-5.628-2.73-8.832
                    c1.651-3.204,5.556-4.442,8.715-2.771C61.036,196.664,62.258,200.62,60.607,203.823z" />
                </g>
            </g>
        </g>
        <g id="rightFoot">
            <path fill="#333" d="M98.73,164.817c0-3.526,2.858-6.386,6.385-6.386c3.527,0,6.386,2.859,6.386,6.386v0.001l0,0l0.001,36.132
            c0,3.526-2.859,6.386-6.387,6.386c-3.525,0-6.385-2.859-6.385-6.386V164.817L98.73,164.817L98.73,164.817z" />
            <g class="lowerLeg">
                <path fill="#333" d="M98.73,200.63c0-3.526,2.858-6.386,6.385-6.386c3.527,0,6.386,2.859,6.386,6.386v0.001l0,0l0.001,36.132
            c0,3.526-2.859,6.386-6.387,6.386c-3.525,0-6.385-2.859-6.385-6.386V200.63L98.73,200.63L98.73,200.63z" />
                <path fill="#f54f59" d="M87.87,249.999h34.489c0-8.784-7.719-15.903-17.244-15.903S87.87,241.215,87.87,249.999z" />
            </g>
            <g>
                <ellipse stroke="#f54f59" cx="105.115" cy="200.79" rx="9.294" ry="9.423" />
                <g>
                    <path fill="#f54f59" d="M102.123,194.988c3.159-1.672,7.064-0.434,8.715,2.771c1.653,3.204,0.434,7.155-2.73,8.832
                    c-3.162,1.673-7.062,0.435-8.715-2.768C97.742,200.62,98.964,196.664,102.123,194.988z" />
                </g>
            </g>
        </g>
        <path fill="#f7727a" d="M34.719,131.334c0.048,13.082,1.824,26.164,5.184,39.246H80h40.098c3.361-13.08,5.138-26.162,5.186-39.244L34.719,131.334z" />
    </g>
</svg>


<div class="col">
    <h1>404</h1>
    <div class="main-text-a"><a style="color: wheat;" href="{% url 'home' %}">< 返回首页</a></div>
    <p>你要访问的页面不见了！</p>
</div>

</body>
</html>

3、注意点

（1）、自定义中间件之后，如果要让django加载，得在django中的settings.py中配置。

 （2）、在统计文章数目的时候使用了django的聚合函数annotate，可参考：annotate简介