完成了搜索栏、articles页面的美化，完善了滚动加载功能，完善了筛选文章功能，接下来简单完善一下其他页面

MyBlog/MyBlog/urls.py

@@ -18,11 +18,11 @@ from django.urls import path, include
 from django.conf import settings
 from django.conf.urls.static import static
 import notifications.urls
-from article.views import article_list
+from article.views import home
 
 urlpatterns = [
     # 首页
-    path('', article_list, name='home'),
+    path('', home, name='home'),
     path('admin/', admin.site.urls),
     path('article/', include('article.urls', namespace='article')),
     path('user/', include('userprofile.urls', namespace='userprofile')),

MyBlog/article/form.py

@@ -5,4 +5,4 @@ from .models import ArticlePost
 class ArticlePostForm(forms.ModelForm):
     class Meta:
         model = ArticlePost
-        fields = ('title', 'body', 'tags', 'avatar')
+        fields = ('title', 'summary', 'body', 'tags', 'avatar')

MyBlog/article/migrations/0002_articlepost_summary.py

@@ -0,0 +1,20 @@
+# Generated by Django 3.1.1 on 2021-03-09 04:18
+
+from django.db import migrations, models
+import django.utils.timezone
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('article', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='articlepost',
+            name='summary',
+            field=models.CharField(default=django.utils.timezone.now, max_length=100),
+            preserve_default=False,
+        ),
+    ]

MyBlog/article/models.py

@@ -20,6 +20,7 @@ class ArticleColumn(models.Model):
 class ArticlePost(models.Model):
     author = models.ForeignKey(User, on_delete=models.CASCADE)
     title = models.CharField(max_length=100)
+    summary = models.CharField(max_length=100)
     body = models.TextField()
     tags = TaggableManager(blank=True)
     created = models.DateTimeField(default=timezone.now)  # 使用timezone.now()时 进行数据迁移会，有警告

MyBlog/article/views.py

@@ -16,15 +16,31 @@ from comment.forms import CommentPost
 
 
 # 视图函数
+def home(request):
+    articles = ArticlePost.objects.all()[0:][:20]
+    context = {'articles': articles}
+    return render(request, 'article/home.html', context)
+
+
 def article_list(request):
     search = request.GET.get('search')
     order = request.GET.get('order')
     tag = request.GET.get('tag')
     column = request.GET.get('column')
-    article_list = ArticlePost.objects.all()
+    articles = ArticlePost.objects.all()
+    articles, search = get_articles_ordered(articles, order, search, column, tag)
+    # 分页，暂时关闭
+    # paginator = Paginator(article_list, 4)
+    # page = request.GET.get('page')
+    articles = articles[0:][:10]
+    context = {'articles': articles, 'order': order, 'search': search, 'column': column, 'tag': tag, }
+    return render(request, 'article/articles.html', context)
+
+
+def get_articles_ordered(articles, order, search, column, tag):
     # 搜索查询集
-    if search:
-        article_list = article_list.filter(
+    if search and search != 'None':
+        articles = articles.filter(
             Q(title__icontains=search) |
             Q(body__icontains=search)
         )
@@ -32,19 +48,14 @@ def article_list(request):
         search = ''
     # 分类查询集
     if column is not None and column.isdigit():
-        article_list = article_list.filter(column=column)
+        articles = articles.filter(column=column)
     # 标签查询集
     if tag and tag != 'None':
-        article_list = article_list.filter(tags__name__in=[tag])
+        articles = articles.filter(tags__name__in=[tag])
     # 排序
     if order == 'total_views':
-        article_list = article_list.order_by('-total_views')
-    # 分页，暂时关闭
-    # paginator = Paginator(article_list, 4)
-    # page = request.GET.get('page')
-    articles = ArticlePost.objects.all()[0:][:10]
-    context = {'articles': articles, 'order': order, 'search': search, 'column': column, 'tag': tag, }
-    return render(request, 'article/list.html', context)
+        articles = articles.order_by('-total_views')
+    return articles, search
 
 
 def callajax(request):
@@ -53,9 +64,22 @@ def callajax(request):
         response_json = json.dumps(response_json)
         data = json.loads(response_json)
         counter = int(data['counter'])
-        articles = ArticlePost.objects.all()[counter:][:10]
-        context = {'articles': articles}
-        return render(request, 'article/call.html', context)
+        articles = ArticlePost.objects.all()
+        if 'articles' in data['flag']:
+            search = data['search']
+            column = data['column']
+            tag = data['tag']
+            order = data['order']
+            articles, search = get_articles_ordered(articles, order, search, column, tag)
+        articles = articles[counter:][:10]
+        if articles:
+            context = {'articles': articles}
+            if 'articles' in data['flag']:
+                return render(request, 'article/order_call.html', context)
+            else:
+                return render(request, 'article/home_call.html', context)
+        else:
+            return HttpResponse('已经到底了')
     else:
         return HttpResponse('What?')
 
@@ -73,7 +97,11 @@ def article_detail(request, id):
         ])
     articles.body = md.convert(articles.body)
     comment_form = CommentPost()
-    context = {'article': articles, 'toc': md.toc, 'comments': comments, 'comment_form': comment_form}
+    toc_flag = True
+    if 'li' not in md.toc:
+        toc_flag = False
+    context = {'article': articles, 'toc': md.toc, 'comments': comments, 'comment_form': comment_form,
+               'toc_flag': toc_flag}
     return render(request, 'article/detail.html', context)
 
 

MyBlog/static/L_header.css

@@ -8,4 +8,19 @@
 
 #mainNav.is-fixed {
     background-color: rgba(240, 240, 240, 0.9) !important;
+}
+.search-icon:after {
+  background-color: #000000!important;
+}
+.search-icon:before {
+  background-color: #000000!important;
+}
+.search-icon {
+  border: 3px solid #000000!important;
+}
+.search:before {
+  background-color: #000000!important;
+}
+.search-box {
+  color: #000000!important;
 }

MyBlog/static/article/articles.css

@@ -0,0 +1,49 @@
+.content-top {
+    margin-top: 4rem !important;
+}
+
+.article-top {
+    margin-top: 2rem !important;
+}
+
+.sidebar {
+    will-change: min-height;
+}
+
+.sidebar__inner {
+    transform: translate(0, 0);
+    transform: translate3d(0, 0, 0);
+    will-change: position, transform;
+}
+
+.column_button {
+    color: #fff;
+    background-color: #0085a1;
+    border-color: #0085a1;
+    font-weight: bold;
+}
+
+.middle {
+    position: absolute;
+    top: 10rem;
+    left: 5rem;
+}
+
+.middle > a {
+    color: #868e96 !important;
+    font-style: italic;
+    font-family: 'Lora', 'Times New Roman', serif;
+}
+
+.middle > a:hover {
+    color: #0085a1 !important;
+}
+
+#line {
+    position: relative;
+    margin: 50px auto;
+    width: 30px;
+    height: 30px;
+    box-sizing: border-box;
+    background: linear-gradient(315deg, transparent 49.5%, #fff, #000, transparent 50.5%);
+}

MyBlog/static/article/articles.js

@@ -0,0 +1,48 @@
+$('#sidebar').stickySidebar({
+    topSpacing: 20,
+    bottomSpacing: 20,
+});
+(function ($) {
+    "use strict";
+    let counter;
+    counter = 10;
+    let loading = true
+    $(window).scroll(function () {
+        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
+            function see_more() {
+                if (loading) {
+                    var csrftoken = $.cookie('csrftoken')
+                    let info;
+                    info = {
+                        'counter': counter,
+                        'csrfmiddlewaretoken': csrftoken,
+                        'flag': 'articles',
+                        'tag': tag,
+                        'column': column,
+                        'search': search,
+                        'order': order
+                    }
+                    $.ajax({
+                        type: "POST",
+                        url: '../article_list_call/',
+                        data: info,
+                        datatype: 'json',
+                        headers: {"X-CSRFToken": csrftoken},
+                        success: function (data) {
+                            counter = counter + 10;
+                            if (data.indexOf('已经到底了') === -1) {
+                                $("#articles_list").append(data);
+                            } else {
+                                loading = false;
+                            }
+                        }
+                    })
+                }
+
+            }
+
+            see_more();
+        }
+    })
+
+})(jQuery);

MyBlog/static/article/detail.css

@@ -0,0 +1,20 @@
+a {
+    color: #111111;
+}
+
+#post-preview{
+    color: #0085A1;
+}
+
+.sidebar {
+    will-change: min-height;
+}
+
+.sidebar__inner {
+    transform: translate(0, 0);
+    transform: translate3d(0, 0, 0);
+    will-change: position, transform;
+}
+.text-slider-items {
+    display: none !important;
+}

MyBlog/static/article/detail.js

@@ -24,15 +24,37 @@ $('#sidebar').stickySidebar({
     topSpacing: 20,
     bottomSpacing: 20,
 });
+
+function confirm_delete() {
+    layer.open({
+        title: "删除文章",
+        content: "确认删除这篇文章吗？",
+        yes: function (index, layero) {
+            $('form#safe_delete button').click();
+            layer.close(index);
+        },
+    })
+}
+
 (function ($) {
     "use strict";
 
+    if ($('.text-slider').length == 1) {
+        console.log('233ok')
+        var typed_strings = $('.text-slider-items').text();
+        var typed = new Typed('.text-slider', {
+            strings: typed_strings.split(','),
+            typeSpeed: 80,
+            loop: true,
+            backDelay: 1100,
+            backSpeed: 30
+        });
+    }
+
     function initParallax() {
         $('#masthead').parallax("100%", 0.3);
         $('#content').parallax("20%", 0.7);
     }
 
     initParallax();
-
-
 })(jQuery);

MyBlog/static/article/list.css

@@ -1,6 +1,13 @@
 .text-slider-items {
-  display: none!important;
+    display: none !important;
 }
-.masthead{
-  background-image: url(home-bg.jpg) !important;
+
+.masthead {
+    background-image: url(home-bg.jpg) !important;
 }
+.column_button{
+    color: #fff;
+    background-color: #0085a1;
+    border-color: #0085a1;
+    font-weight: bold;
+}

MyBlog/static/article/list.js

@@ -21,26 +21,35 @@
 
     let counter;
     counter = 0;
+    let loading = true
     $(window).scroll(function () {
         if ($(window).scrollTop() + $(window).height() == $(document).height()) {
+            console.log(counter)
             function see_more() {
-                counter = counter + 10;
-                var csrftoken = $.cookie('csrftoken')
-                let info;
-                info = {'counter': counter, 'csrfmiddlewaretoken': csrftoken}
-                $.ajax({
-                    type: "POST",
-                    url: 'article/article_list_call/',
-                    data: info,
-                    datatype: 'json',
-                    headers: {"X-CSRFToken": csrftoken},
-                    success: function (data) {
-                        console.log(data)
-                        $("#articles_list").append(data);
-                    }
-                })
+                if (loading) {
+                    counter = counter + 20;
+                    var csrftoken = $.cookie('csrftoken')
+                    let info;
+                    info = {'counter': counter, 'csrfmiddlewaretoken': csrftoken,'flag':'home'}
+                    $.ajax({
+                        type: "POST",
+                        url: 'article/article_list_call/',
+                        data: info,
+                        datatype: 'json',
+                        headers: {"X-CSRFToken": csrftoken},
+                        success: function (data) {
+                            if (data.indexOf('已经到底了') === -1) {
+                                $("#articles_list").append(data);
+                            } else {
+                                loading = false;
+                            }
+                        }
+                    })
+                }
             }
+
             see_more();
+
         }
     })
 

MyBlog/static/header.css

@@ -141,4 +141,141 @@
         /* if the user changes the scrolling direction, we show the header */
         transform: translate3d(0, 100%, 0);
     }
-}
+
+    #mainNav.is-fixed .search-icon:after {
+        background-color: #000000 !important;
+    }
+
+    #mainNav.is-fixed .search-icon:before {
+        background-color: #000000 !important;
+    }
+
+    #mainNav.is-fixed .search-icon {
+        border: 3px solid #000000 !important;
+    }
+
+    #mainNav.is-fixed .search:before {
+        background-color: #000000 !important;
+    }
+
+    #mainNav.is-fixed .search-box {
+        color: #000000 !important;
+    }
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.search {
+    width: 40px;
+    height: 40px;
+    background-color: transparent;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.5s ease;
+}
+
+.search:before {
+    content: '';
+    display: block;
+    width: 3px;
+    height: 100%;
+    position: relative;
+    background-color: #ffffff;
+    transition: all 0.5s ease;
+}
+
+.search.open {
+    width: 420px;
+}
+
+.search.open:before {
+    height: 24px;
+    margin: 8px 0 20px 30px;
+    position: absolute;
+}
+
+.search-box {
+    width: 100%;
+    height: 100%;
+    box-shadow: none;
+    border: none;
+    background: transparent;
+    color: #fff;
+    padding: 7px 100px 12px 45px;
+    font-size: 20px;
+}
+
+.search-box:focus {
+    outline: none;
+}
+
+.search-button {
+    width: 60px;
+    height: 80px;
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 6px;
+    cursor: pointer;
+}
+
+.search-icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 40px;
+    border: 3px solid #ffffff;
+    display: block;
+    position: relative;
+    margin-left: 22px;
+    transition: all 0.5s ease;
+}
+
+.search-icon:before {
+    content: '';
+    width: 3px;
+    height: 10px;
+    position: absolute;
+    right: -3px;
+    top: 12px;
+    display: block;
+    background-color: #ffffff;
+    transform: rotate(-45deg);
+    transition: all 0.5s ease;
+}
+
+.search-icon:after {
+    content: '';
+    width: 3px;
+    height: 10px;
+    position: absolute;
+    right: -9px;
+    top: 18px;
+    display: block;
+    background-color: #ffffff;
+    transform: rotate(-45deg);
+    transition: all 0.5s ease;
+}
+
+.open .search-icon {
+    margin: 0;
+    width: 30px;
+    height: 30px;
+    border-radius: 60px;
+}
+
+.open .search-icon:before {
+    transform: rotate(52deg);
+    right: 9px;
+    top: 10px;
+    height: 9px;
+}
+
+.open .search-icon:after {
+    transform: rotate(-230deg);
+    right: 9px;
+    top: 6px;
+    height: 9px;
+}

MyBlog/static/header.js

@@ -37,3 +37,6 @@
     }
 
 })(jQuery); // End of use strict
+$('.search-button').click(function () {
+    $(this).parent().toggleClass('open');
+});

MyBlog/templates/article/articles.html

@@ -0,0 +1,161 @@
+{% extends "base.html" %}
+{% load static %}
+{% block title %}
+    文章
+{% endblock title %}
+{% block style %}
+    <link rel="stylesheet" type="text/css" href="{% static 'article/list.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'article/articles.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'L_header.css' %}">
+{% endblock style %}
+{% block content %}
+    <div class="container content-top" id="content">
+        <hr>
+        <div class="row article-top">
+            <div class="mt-2 col-10" id="articles_list">
+                {% if search %}
+                    {% if articles %}
+                        <h4>
+                            <span style="color: #0085a1">"{{ search }}"</span>的搜索结果如下：
+                        </h4>
+                        <hr>
+                    {% else %}
+                        <h4>
+                            暂无
+                            <span style="color: #0085a1">"{{ search }}"</span>有关的文章。
+                        </h4>
+                    {% endif %}
+                {% endif %}
+                {% for article in articles %}
+                    <div class="row col-12">
+                        <!--标题图-->
+                        {% if article.avatar %}
+                            <div class="col-5" data-aos="fade-up" data-aos-delay="100">
+                                <img src="{{ article.avatar.url }}"
+                                     alt="avatar"
+                                     style="max-width: 100%; border-radius: 20px;"
+                                >
+                            </div>
+                        {% endif %}
+                        <div class="col-7">
+                            {% if article.column %}
+                                <button type="button"
+                                        onclick="window.open('{% url 'article:article_list' %}?search={{ search }}&tag={{ tag }}&column={{ article.column.id }}')"
+                                        class="btn btn-sm mb-2 column_button"
+                                        data-aos="fade-up" data-aos-delay="120">
+                                    {{ article.column }}
+                                </button>
+                            {% endif %}
+                            <!--标签-->
+                            <span>
+                        {% for tag in article.tags.all %}
+                            <a href="{% url 'article:article_list' %}?tag={{ tag }}&column={{ column }}"
+                               class="badge badge-secondary" data-aos="fade-up" data-aos-delay="120">
+                            {{ tag }}
+                            </a>
+                        {% endfor %}
+                    </span>
+                            <!--标题-->
+                            <h4 data-aos="fade-up" data-aos-delay="140">
+                                <b>
+                                    <a id="post-preview" href="{% url 'article:article_detail' article.id %}">
+                                        {{ article.title }}
+                                    </a>
+                                </b>
+                            </h4>
+                            <!--摘要-->
+                            <div data-aos="fade-up" data-aos-delay="160">
+                                <p style="color: gray;">
+                                    {{ article.summary|slice:'50' }}...
+                                </p>
+                            </div>
+                            <!--注脚-->
+                            <p style="color: #868e96;font-style: italic;font-family: 'Lora', 'Times New Roman', serif;"
+                               data-aos="fade-up" data-aos-delay="180">
+                                <!--附加消息-->
+                                <span>
+                            <i class="fas fa-eye"></i>
+                            {{ article.total_views }} viewd&nbsp;&nbsp;&nbsp;
+                        </span>
+                                <span>
+                            <i class="fas fa-comments"></i>
+                            Posted at {{ article.created|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;
+                        </span>
+                                <span>
+                            <i class="fas fa-clock"></i>
+                            Update at {{ article.updated|date:'Y-m-d' }}
+                        </span>
+                            </p>
+                            <hr data-aos="fade-up" data-aos-delay="180">
+                        </div>
+                        <hr style="width:100%;" data-aos="fade-up" data-aos-delay="180"/>
+                    </div>
+                {% endfor %}
+            </div>
+            <div class="col-2 sidebar" id="sidebar">
+                <div class="sidebar__inner">
+                    <div class="mt-2 col-2">
+                        <div class="m-auto middle">
+                            <a href="{% url 'article:article_list' %}?search={{ search }}&tag={{ tag }}&column={{ column }}">
+                                Latest
+                            </a>
+                            <div id="line"></div>
+                            <a href="{% url 'article:article_list' %}?order=total_views&search={{ search }}&tag={{ tag }}&column={{ column }}">
+                                Hottest
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <!--
+        <div class="pagination row">
+            <div class="m-auto">
+            <span class="step-links">
+                {% if articles.has_previous %}
+                    <a href="?page=1&order={{ order }}&search={{ search }}&tag={{ tag }}&column={{ column }}"
+                       class="btn btn-success">
+                    &laquo;1
+                    </a>
+                    <span>...</span>
+                    <a href="?page={{ articles.previous_page_number }}&order={{ order }}&search={{ search }}&tag=
+            {{ tag }}&column={{ column }}"
+                       class="btn btn-secondary">
+                    {{ articles.previous_page_number }}
+                    </a>
+                {% endif %}
+                <span class="current btn btn-danger btn-lg">
+                    {{ articles.number }}
+                </span>
+                {% if articles.has_next %}
+                    <a href="?page={{ articles.next_page_number }}&order={{ order }}&search={{ search }}&tag={{ tag }}
+            &column={{ column }}"
+                       class="btn btn-secondary">
+                    {{ articles.next_page_number }}
+                    </a>
+                    <span>...</span>
+                    <a href="?page={{ articles.paginator.num_pages }}&order={{ order }}&search={{ search }}&tag=
+            {{ tag }}&column={{ column }}"
+                       class="btn btn-success">
+                    {{ articles.paginator.num_pages }} &raquo
+                    </a>
+                {% endif %}
+            </span>
+            </div>
+        </div>-->
+    </div>
+{% endblock content %}
+{% block script %}
+    <script src="{% static 'typed/typed.js' %}"></script>
+    <script src="{% static 'article/jquery.cookie.js' %}"></script>
+    <script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
+    <script>
+        let tag="{{ tag }}";
+        let search="{{ search }}";
+        let order="{{ order }}";
+        let column="{{ column }}";
+    </script>
+    <script src="{% static 'article/articles.js' %}"></script>
+{% endblock script %}

MyBlog/templates/article/create.html

@@ -45,6 +45,15 @@
                         </label>
                         <input type="text" class="form-control col-3" id="tags" name="tags">
                     </div>
+                    <div class="form-group">
+                        <label for="summary">
+                            文章摘要
+                        </label>
+                        <textarea type="text" class="form-control" id="summary" name="summary" rows="4">
+
+                        </textarea>
+
+                    </div>
                     <div class="form-group">
                         <label for="body">
                             文章正文

MyBlog/templates/article/detail.html

@@ -3,6 +3,10 @@
 {% block title %}
     文章详情:{{ article.title }}
 {% endblock title %}
+{% block style %}
+    <link rel="stylesheet" href="{% static 'prism/prism.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'article/detail.css' %}">
+{% endblock style %}
 {% block content %}
     <header class="masthead" id="masthead" style="background-image: url({{ article.avatar.url }}) !important;">
         <div class="overlay"></div>
@@ -11,6 +15,12 @@
                 <div class="col-lg-12 col-md-10 mx-auto">
                     <div class="site-heading no-gutter" data-aos="fade-up" data-aos-delay="100">
                         <h1>{{ article.title }}</h1>
+                        <p>
+                            <span class="subheading text-slider-items">
+                                {{ article.summary }}
+                            </span><strong
+                                class="text-slider"></strong>
+                        </p>
                     </div>
                 </div>
             </div>
@@ -18,21 +28,11 @@
     </header>
     <div class="container" id="content">
         <div class="row">
-            <div class="col-3 mt-4 sidebar" id="sidebar">
-                <div class="sidebar__inner">
-                    <h4 data-aos="fade-up" data-aos-delay="100"><strong>目录</strong></h4>
-                    <hr>
-                    <div data-aos="fade-up" data-aos-delay="140">
-                        {{ toc|safe }}
-                    </div>
-                </div>
-            </div>
-            <div class="col-9">
+            <div class="col-8">
                 <h1 class="mt-4 mb-4" data-aos="fade-up" data-aos-delay="100">
                     {{ article.title }}
                 </h1>
-
-                <div class="col-12 alert alert-success"  data-aos="fade-up" data-aos-delay="120">
+                <div class="col-12 alert alert-success" data-aos="fade-up" data-aos-delay="120">
                     作者: {{ article.author }}
                     {% if user == article.author %}
                         · <a href="#" onclick="confirm_delete()">
@@ -159,36 +159,23 @@
                     {% endrecursetree %}
                 </div>
             </div>
+            {% if toc_flag %}
+                <div class="col-4 mt-5 sidebar" id="sidebar">
+                    <div class="sidebar__inner">
+                        <h4 data-aos="fade-up" data-aos-delay="100"><strong>目录</strong></h4>
+                        <hr>
+                        <div data-aos="fade-up" data-aos-delay="140" id="post-preview">
+                            {{ toc|safe }}
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
         </div>
     </div>
-    <script>
-        function confirm_delete() {
-            layer.open({
-                title: "删除文章",
-                content: "确认删除这篇文章吗？",
-                yes: function (index, layero) {
-                    $('form#safe_delete button').click();
-                    layer.close(index);
-                },
-            })
-        }
-    </script>
-    <script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
-    <!-- 粘性侧边栏样式 -->
-    <style>
-        .sidebar {
-            will-change: min-height;
-        }
-
-        .sidebar__inner {
-            transform: translate(0, 0);
-            transform: translate3d(0, 0, 0);
-            will-change: position, transform;
-        }
-    </style>
-    <link rel="stylesheet" href="{% static 'prism/prism.css' %}">
 {% endblock content %}
 {% block script %}
+    <script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
     <script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
+    <script src="{% static 'typed/typed.js' %}"></script>
     <script src="{% static 'article/detail.js' %}"></script>
 {% endblock script %}

MyBlog/templates/article/list.html → MyBlog/templates/article/home.html

@@ -1,188 +1,184 @@
-{% extends "base.html" %}
-{% load static %}
-{% block title %}
-    首页
-{% endblock title %}
-{% block style %}
-    <link rel="stylesheet" type="text/css" href="{% static 'article/list.css' %}">
-{% endblock style %}
-{% block content %}
-    <header class="masthead" id="masthead">
-        <div class="overlay"></div>
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-12 col-md-10 mx-auto">
-                    <div class="site-heading no-gutter" data-aos="fade-up" data-aos-delay="100">
-                        <h1>Design And Record</h1>
-                        <p>
-                            <span class="subheading text-slider-items">
-                                All things are difficult before they are easy.,
-                                No success in life merely happens.,
-                                99 little bugs in the code.,
-                                One must first understand recursion in order to understand recursion.,
-                                Everything will be okay in the end. If it's not okay， it's not the end.,
-                                Everybody wants happiness. No one wants pain. But how can you make a rainbow without a little rain?,
-                                No matter when you start， it is important that you do not stop after starting. No matter when you end， it is more important that you do not regret after ended.,
-                                If you want something you've never had， then you've got to do something you've never Done.,
-                                Dear music， thank you for being there when nobody else was.
-                            </span><strong
-                                class="text-slider"></strong>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </header>
-    <div class="container" id="content">
-        <!--<hr>
-        <nav aria-label="breadcrumb">
-            <ol class="breadcrumb">
-                <li class="breadcrumb-item">
-                    <a href="{% url 'article:article_list' %}?search={{ search }}&tag={{ tag }}&column={{ column }}">
-                        最新
-                    </a>
-                </li>
-                <li class="breadcrumb-item">
-                    <a href="{% url 'article:article_list' %}?order=total_views&search={{ search }}&tag={{ tag }}&column={{ column }}">
-                        最热
-                    </a>
-                </li>
-            </ol>
-        </nav>
-        <div class="row">
-            <div class="col-auto mr-auto">
-                <form class="form-inline">
-                    <label class="sr-only">
-                        content
-                    </label>
-                    <input type="text" class="form-control mb-2 mr-sm-2" name="search" placeholder="搜索文章..." required>
-                </form>
-            </div>
-        </div>
-        {% if search %}
-            {% if articles %}
-                <h4>
-                    <span style="color: red">"{{ search }}"</span>的搜索结果如下：
-                </h4>
-                <hr>
-            {% else %}
-                <h4>
-                    暂无
-                    <span style="color: red">"{{ search }}"</span>有关的文章。
-                </h4>
-            {% endif %}
-        {% endif %}-->
-        <div class="row mt-2" id="articles_list">
-            {% for article in articles %}
-                <div class="row col-10 m-auto">
-                    <!--标题图-->
-                    {% if article.avatar %}
-                        <div class="col-4" data-aos="fade-up" data-aos-delay="100">
-                            <img src="{{ article.avatar.url }}"
-                                 alt="avatar"
-                                 style="max-width: 100%; border-radius: 20px;"
-                            >
-                        </div>
-                    {% endif %}
-                    <div class="col">
-                        {% if article.column %}
-                            <button type="button"
-                                    onclick="window.open('{% url 'article:article_list' %}?search={{ search }}&tag={{ tag }}&column={{ article.column.id }}')"
-                                    class="btn btn-sm mb-2
-                                {% if article.column.title == 'Django' %}
-                                    btn-success
-                                {% elif article.column.title == 'Java' %}
-                                    btn-danger
-                                {% elif article.column.title == 'HTML' %}
-                                    btn-warning
-                                {% endif %}
-                            "
-                             data-aos="fade-up" data-aos-delay="120">
-                                {{ article.column }}
-                            </button>
-                        {% endif %}
-                        <!--标签-->
-                        <span>
-                        {% for tag in article.tags.all %}
-                            <a href="{% url 'article:article_list' %}?tag={{ tag }}&search={{ search }}&column={{ column }}"
-                               class="badge badge-secondary" data-aos="fade-up" data-aos-delay="120">
-                            {{ tag }}
-                            </a>
-                        {% endfor %}
-                    </span>
-                        <!--标题-->
-                        <h4 data-aos="fade-up" data-aos-delay="140">
-                            <b>
-                                <a id="post-preview" href="{% url 'article:article_detail' article.id %}">
-                                    {{ article.title }}
-                                </a>
-                            </b>
-                        </h4>
-                        <!--摘要-->
-                        <div data-aos="fade-up" data-aos-delay="160">
-                            <p style="color: gray;">
-                                {{ article.body|slice:'50' }}...
-                            </p>
-                        </div>
-                        <!--注脚-->
-                        <p style="color: #868e96;font-style: italic;font-family: 'Lora', 'Times New Roman', serif;" data-aos="fade-up" data-aos-delay="180">
-                            <!--附加消息-->
-                            <span>
-                            <i class="fas fa-eye"></i>
-                            {{ article.total_views }} viewd&nbsp;&nbsp;&nbsp;
-                        </span>
-                            <span>
-                            <i class="fas fa-comments"></i>
-                            Posted at {{ article.created|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;
-                        </span>
-                            <span>
-                            <i class="fas fa-clock"></i>
-                            Update at {{ article.updated|date:'Y-m-d' }}
-                        </span>
-                        </p>
-                        <hr data-aos="fade-up" data-aos-delay="180">
-                    </div>
-                    <hr style="width:100%;" data-aos="fade-up" data-aos-delay="180"/>
-                </div>
-            {% endfor %}
-
-        </div>
-    <!--
-        <div class="pagination row">
-            <div class="m-auto">
-            <span class="step-links">
-                {% if articles.has_previous %}
-                    <a href="?page=1&order={{ order }}&search={{ search }}&tag={{ tag }}&column={{ column }}"
-                       class="btn btn-success">
-                    &laquo;1
-                    </a>
-                    <span>...</span>
-                    <a href="?page={{ articles.previous_page_number }}&order={{ order }}&search={{ search }}&tag={{ tag }}&column={{ column }}"
-                       class="btn btn-secondary">
-                    {{ articles.previous_page_number }}
-                    </a>
-                {% endif %}
-                <span class="current btn btn-danger btn-lg">
-                    {{ articles.number }}
-                </span>
-                {% if articles.has_next %}
-                    <a href="?page={{ articles.next_page_number }}&order={{ order }}&search={{ search }}&tag={{ tag }}&column={{ column }}"
-                       class="btn btn-secondary">
-                    {{ articles.next_page_number }}
-                    </a>
-                    <span>...</span>
-                    <a href="?page={{ articles.paginator.num_pages }}&order={{ order }}&search={{ search }}&tag={{ tag }}&column={{ column }}"
-                       class="btn btn-success">
-                    {{ articles.paginator.num_pages }} &raquo
-                    </a>
-                {% endif %}
-            </span>
-            </div>
-        </div>-->
-    </div>
-{% endblock content %}
-{% block script %}
-    <script src="{% static 'typed/typed.js' %}"></script>
-    <script src="{% static 'article/list.js' %}"></script>
-    <script src="{% static 'article/jquery.cookie.js' %}"></script>
+{% extends "base.html" %}
+{% load static %}
+{% block title %}
+    首页
+{% endblock title %}
+{% block style %}
+    <link rel="stylesheet" type="text/css" href="{% static 'article/list.css' %}">
+{% endblock style %}
+{% block content %}
+    <header class="masthead" id="masthead">
+        <div class="overlay"></div>
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 col-md-10 mx-auto">
+                    <div class="site-heading no-gutter" data-aos="fade-up" data-aos-delay="100">
+                        <h1>Design And Record</h1>
+                        <p>
+                            <span class="subheading text-slider-items">
+                                All things are difficult before they are easy.,
+                                No success in life merely happens.,
+                                99 little bugs in the code.,
+                                One must first understand recursion in order to understand recursion.,
+                                Everything will be okay in the end. If it's not okay， it's not the end.,
+                                Everybody wants happiness. No one wants pain. But how can you make a rainbow without a little rain?,
+                                No matter when you start， it is important that you do not stop after starting. No matter when you end， it is more important that you do not regret after ended.,
+                                If you want something you've never had， then you've got to do something you've never Done.,
+                                Dear music， thank you for being there when nobody else was.
+                            </span><strong
+                                class="text-slider"></strong>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <div class="container" id="content">
+        <!--<hr>
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="{% url 'article:article_list' %}?search={{ search }}&tag={{ tag }}&column={{ column }}">
+                        最新
+                    </a>
+                </li>
+                <li class="breadcrumb-item">
+                    <a href="{% url 'article:article_list' %}?order=total_views&search={{ search }}&tag={{ tag }}&column={{ column }}">
+                        最热
+                    </a>
+                </li>
+            </ol>
+        </nav>
+        <div class="row">
+            <div class="col-auto mr-auto">
+                <form class="form-inline">
+                    <label class="sr-only">
+                        content
+                    </label>
+                    <input type="text" class="form-control mb-2 mr-sm-2" name="search" placeholder="搜索文章..." required>
+                </form>
+            </div>
+        </div>
+        {% if search %}
+            {% if articles %}
+                <h4>
+                    <span style="color: red">"{{ search }}"</span>的搜索结果如下：
+                </h4>
+                <hr>
+            {% else %}
+                <h4>
+                    暂无
+                    <span style="color: red">"{{ search }}"</span>有关的文章。
+                </h4>
+            {% endif %}
+        {% endif %}-->
+        <div class="row mt-2" id="articles_list">
+            {% for article in articles %}
+                <div class="row col-10 m-auto">
+                    <!--标题图-->
+                    {% if article.avatar %}
+                        <div class="col-4" data-aos="fade-up" data-aos-delay="100">
+                            <img src="{{ article.avatar.url }}"
+                                 alt="avatar"
+                                 style="max-width: 100%; border-radius: 20px;"
+                            >
+                        </div>
+                    {% endif %}
+                    <div class="col">
+                        {% if article.column %}
+                            <button type="button"
+                                    onclick="window.open('{% url 'article:article_list' %}?search={{ search }}&tag={{ tag }}&column={{ article.column.id }}')"
+                                    class="btn btn-sm mb-2 column_button"
+                                    data-aos="fade-up" data-aos-delay="120">
+                                {{ article.column }}
+                            </button>
+                        {% endif %}
+                        <!--标签-->
+                        <span>
+                        {% for tag in article.tags.all %}
+                            <a href="{% url 'article:article_list' %}?tag={{ tag }}&search={{ search }}&column={{ column }}"
+                               class="badge badge-secondary" data-aos="fade-up" data-aos-delay="120">
+                            {{ tag }}
+                            </a>
+                        {% endfor %}
+                    </span>
+                        <!--标题-->
+                        <h4 data-aos="fade-up" data-aos-delay="140">
+                            <b>
+                                <a id="post-preview" href="{% url 'article:article_detail' article.id %}">
+                                    {{ article.title }}
+                                </a>
+                            </b>
+                        </h4>
+                        <!--摘要-->
+                        <div data-aos="fade-up" data-aos-delay="160">
+                            <p style="color: gray;">
+                                {{ article.summary|slice:'50' }}...
+                            </p>
+                        </div>
+                        <!--注脚-->
+                        <p style="color: #868e96;font-style: italic;font-family: 'Lora', 'Times New Roman', serif;"
+                           data-aos="fade-up" data-aos-delay="180">
+                            <!--附加消息-->
+                            <span>
+                            <i class="fas fa-eye"></i>
+                            {{ article.total_views }} viewd&nbsp;&nbsp;&nbsp;
+                        </span>
+                            <span>
+                            <i class="fas fa-comments"></i>
+                            Posted at {{ article.created|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;
+                        </span>
+                            <span>
+                            <i class="fas fa-clock"></i>
+                            Update at {{ article.updated|date:'Y-m-d' }}
+                        </span>
+                        </p>
+                        <hr data-aos="fade-up" data-aos-delay="180">
+                    </div>
+                    <hr style="width:100%;" data-aos="fade-up" data-aos-delay="180"/>
+                </div>
+            {% endfor %}
+
+        </div>
+        <!--
+        <div class="pagination row">
+            <div class="m-auto">
+            <span class="step-links">
+                {% if articles.has_previous %}
+                    <a href="?page=1&order={{ order }}&search={{ search }}&tag={{ tag }}&column={{ column }}"
+                       class="btn btn-success">
+                    &laquo;1
+                    </a>
+                    <span>...</span>
+                    <a href="?page={{ articles.previous_page_number }}&order={{ order }}&search={{ search }}&tag=
+            {{ tag }}&column={{ column }}"
+                       class="btn btn-secondary">
+                    {{ articles.previous_page_number }}
+                    </a>
+                {% endif %}
+                <span class="current btn btn-danger btn-lg">
+                    {{ articles.number }}
+                </span>
+                {% if articles.has_next %}
+                    <a href="?page={{ articles.next_page_number }}&order={{ order }}&search={{ search }}&tag={{ tag }}
+            &column={{ column }}"
+                       class="btn btn-secondary">
+                    {{ articles.next_page_number }}
+                    </a>
+                    <span>...</span>
+                    <a href="?page={{ articles.paginator.num_pages }}&order={{ order }}&search={{ search }}&tag=
+            {{ tag }}&column={{ column }}"
+                       class="btn btn-success">
+                    {{ articles.paginator.num_pages }} &raquo
+                    </a>
+                {% endif %}
+            </span>
+            </div>
+        </div>-->
+    </div>
+{% endblock content %}
+{% block script %}
+    <script src="{% static 'typed/typed.js' %}"></script>
+    <script src="{% static 'article/list.js' %}"></script>
+    <script src="{% static 'article/jquery.cookie.js' %}"></script>
 {% endblock script %}

MyBlog/templates/article/order_call.html

@@ -0,0 +1,65 @@
+{% for article in articles %}
+    <div class="row col-12">
+        <!--标题图-->
+        {% if article.avatar %}
+            <div class="col-5" data-aos="fade-up" data-aos-delay="100">
+                <img src="{{ article.avatar.url }}"
+                     alt="avatar"
+                     style="max-width: 100%; border-radius: 20px;"
+                >
+            </div>
+        {% endif %}
+        <div class="col-7">
+            {% if article.column %}
+                <button type="button"
+                        onclick="window.open('{% url 'article:article_list' %}?search={{ search }}&tag={{ tag }}&column={{ article.column.id }}')"
+                        class="btn btn-sm mb-2 column_button"
+                        data-aos="fade-up" data-aos-delay="120">
+                    {{ article.column }}
+                </button>
+            {% endif %}
+            <!--标签-->
+            <span>
+                        {% for tag in article.tags.all %}
+                            <a href="{% url 'article:article_list' %}?tag={{ tag }}&column={{ column }}"
+                               class="badge badge-secondary" data-aos="fade-up" data-aos-delay="120">
+                            {{ tag }}
+                            </a>
+                        {% endfor %}
+                    </span>
+            <!--标题-->
+            <h4 data-aos="fade-up" data-aos-delay="140">
+                <b>
+                    <a id="post-preview" href="{% url 'article:article_detail' article.id %}">
+                        {{ article.title }}
+                    </a>
+                </b>
+            </h4>
+            <!--摘要-->
+            <div data-aos="fade-up" data-aos-delay="160">
+                <p style="color: gray;">
+                    {{ article.summary|slice:'50' }}...
+                </p>
+            </div>
+            <!--注脚-->
+            <p style="color: #868e96;font-style: italic;font-family: 'Lora', 'Times New Roman', serif;"
+               data-aos="fade-up" data-aos-delay="180">
+                <!--附加消息-->
+                <span>
+                            <i class="fas fa-eye"></i>
+                            {{ article.total_views }} viewd&nbsp;&nbsp;&nbsp;
+                        </span>
+                <span>
+                            <i class="fas fa-comments"></i>
+                            Posted at {{ article.created|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;
+                        </span>
+                <span>
+                            <i class="fas fa-clock"></i>
+                            Update at {{ article.updated|date:'Y-m-d' }}
+                        </span>
+            </p>
+            <hr data-aos="fade-up" data-aos-delay="180">
+        </div>
+        <hr style="width:100%;" data-aos="fade-up" data-aos-delay="180"/>
+    </div>
+{% endfor %}

MyBlog/templates/header.html

@@ -8,7 +8,7 @@
     <div class="container">
 
         <!-- 导航栏商标 -->
-        <a class="navbar-brand" href="#">Shellmiao's Blog</a>
+        <a class="navbar-brand" href="{% url 'home' %}">Shellmiao's Blog</a>
         <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault"
                 aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
             <span></span>
@@ -18,6 +18,19 @@
         <!-- 导航入口 -->
         <div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
             <ul class="navbar-nav">
+                <li class="nav-item">
+                    <form action="{% url 'article:article_list' %}">
+                        <div class="search">
+                            <label>
+                                <input name="search" type="search" class="search-box"/>
+                            </label>
+                            <span class="search-button">
+                                <span class="search-icon">
+                                </span>
+                            </span>
+                        </div>
+                    </form>
+                </li>
                 <!-- 条目 -->
                 <li class="nav-item">
                     <a class="nav-link" href="{% url 'article:article_create' %}">Publish An Article</a>