git切换为了ssh，完成了一部分登陆页面的功能和美化，完成了detail页面的一部分美化，接下来做detail的目录隐藏侧边栏

MyBlog/article/models.py

@@ -45,11 +45,11 @@ class ArticlePost(models.Model):
         # 调用原有的save的功能
         article = super(ArticlePost, self).save(*args, **kwargs)
         # 固定宽度缩放图片的大小
-        if self.avatar and not kwargs.get('update_fields'):
-            image = Image.open(self.avatar)
-            (x, y) = image.size
-            new_x = 400
-            new_y = int(new_x * (y / x))
-            resized_image = image.resize((new_x, new_y), Image.ANTIALIAS)
-            resized_image.save(self.avatar.path)
+        # if self.avatar and not kwargs.get('update_fields'):
+        #     image = Image.open(self.avatar)
+        #     (x, y) = image.size
+        #     new_x = 400
+        #     new_y = int(new_x * (y / x))
+        #     resized_image = image.resize((new_x, new_y), Image.ANTIALIAS)
+        #     resized_image.save(self.avatar.path)
         return article

MyBlog/static/L_header.css

@@ -0,0 +1,11 @@
+#mainNav .navbar-brand {
+    color: #000 !important;
+}
+
+#mainNav .navbar-nav > li.nav-item > a {
+    color: #000 !important;
+}
+
+#mainNav.is-fixed {
+    background-color: rgba(240, 240, 240, 0.9) !important;
+}

MyBlog/static/account/login.css

@@ -0,0 +1,5 @@
+.col-center-block {
+    float: none;
+    display: block;
+    margin: auto;
+}

MyBlog/static/article/detail.js

@@ -0,0 +1,38 @@
+// 加载 modal
+function load_modal(article_id, comment_id) {
+    let modal_body = '#modal_body_' + comment_id;
+    let modal_id = '#comment_' + comment_id;
+
+    // 加载编辑器
+    if ($(modal_body).children().length === 0) {
+        let content = '<iframe src="/comment/post_comment/' +
+            article_id +
+            '/' +
+            comment_id +
+            '"' +
+            ' frameborder="0" style="width: 100%; height: 100%;" id="iframe_' +
+            comment_id +
+            '"></iframe>';
+        $(modal_body).append(content);
+    }
+    ;
+    $(modal_id).modal('show');
+}
+
+$(".django-ckeditor-widget").removeAttr('style');
+$('#sidebar').stickySidebar({
+    topSpacing: 20,
+    bottomSpacing: 20,
+});
+(function ($) {
+    "use strict";
+
+    function initParallax() {
+        $('#masthead').parallax("100%", 0.3);
+        $('#content').parallax("20%", 0.7);
+    }
+
+    initParallax();
+
+
+})(jQuery);

MyBlog/static/article/list.css

@@ -3,4 +3,4 @@
 }
 .masthead{
   background-image: url(home-bg.jpg) !important;
-}
+}

MyBlog/static/base.css

@@ -13,6 +13,25 @@ h6 {
     font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
+::-moz-selection {
+    color: #fff;
+    background: #0085A1;
+    text-shadow: none;
+}
+
+::selection {
+    color: #fff;
+    background: #0085A1;
+    text-shadow: none;
+}
+#post-preview{
+    color: black;
+}
+#post-preview:focus, #post-preview:hover {
+    text-decoration: none;
+    color: #0085A1;
+}
+
 #wrapper {
     min-height: 100%;
     margin-bottom: -60px;

MyBlog/static/header.css

@@ -118,8 +118,7 @@
         position: fixed;
         top: -67px;
         transition: transform 0.2s;
-        border-bottom: 1px solid white;
-        background-color: rgba(255, 255, 255, 0.9);
+        background-color: rgba(240, 240, 240, 0.9);
     }
 
     #mainNav.is-fixed .navbar-brand {

MyBlog/templates/account/login.html

@@ -1,12 +1,16 @@
 {% extends "base.html" %}
+{% load static %}
 {% load i18n %}
 {% load account socialaccount %}
 {% block title %}登录{% endblock %}
-
+{% block style %}
+    <link rel="stylesheet" type="text/css" href="{% static 'L_header.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'account/login.css' %}">
+{% endblock style %}
 {% block content %}
-    <div class="container">
+    <div class="container mt-5">
         <div class="row">
-            <div class="col-12">
+            <div class="col-10 col-center-block">
                 <br>
                 {% get_providers as socialaccount_providers %}
                 {% if socialaccount_providers %}

MyBlog/templates/article/call.html

@@ -39,7 +39,7 @@
                 <!--标题-->
                 <h4 data-aos="fade-up" data-aos-delay="140">
                     <b>
-                        <a href="{% url 'article:article_detail' article.id %}" style="color: black;">
+                        <a id="post-preview" href="{% url 'article:article_detail' article.id %}" style="color: black;">
                             {{ article.title }}
                         </a>
                     </b>

MyBlog/templates/article/create.html

@@ -3,8 +3,11 @@
 {% block title %}
     发表文章
 {% endblock title %}
+{% block style %}
+    <link rel="stylesheet" type="text/css" href="{% static 'L_header.css' %}">
+{% endblock style %}
 {% block content %}
-    <div class="container">
+    <div class="container mt-5">
         <div class="row">
             <div class="col-12">
                 <br>

MyBlog/templates/article/detail.html

@@ -4,23 +4,35 @@
     文章详情:{{ article.title }}
 {% endblock title %}
 {% block content %}
-    <div class="container">
+    <header class="masthead" id="masthead" style="background-image: url({{ article.avatar.url }}) !important;">
+        <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>{{ article.title }}</h1>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <div class="container" id="content">
         <div class="row">
             <div class="col-3 mt-4 sidebar" id="sidebar">
                 <div class="sidebar__inner">
-                    <h4><strong>目录</strong></h4>
+                    <h4 data-aos="fade-up" data-aos-delay="100"><strong>目录</strong></h4>
                     <hr>
-                    <div>
+                    <div data-aos="fade-up" data-aos-delay="140">
                         {{ toc|safe }}
                     </div>
                 </div>
             </div>
             <div class="col-9">
-                <h1 class="mt-4 mb-4">
+                <h1 class="mt-4 mb-4" data-aos="fade-up" data-aos-delay="100">
                     {{ article.title }}
                 </h1>
 
-                <div class="col-12 alert alert-success">
+                <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()">
@@ -30,9 +42,7 @@
                         编辑文章
                     </a>
                     {% endif %}
-                    <div>
-                        浏览:{{ article.total_views }}
-                    </div>
+                    &nbsp;&nbsp;浏览:{{ article.total_views }}
                     <form style="display: none"
                           id="safa_delete"
                           action="{% url 'article:article_safe_delete' article.id %}"
@@ -44,23 +54,14 @@
                         </button>
                     </form>
                 </div>
-                {% if article.avatar %}
-                    <div class="row mt-2">
-                        <img src="{{ article.avatar.url }}"
-                             alt="avatar"
-                             style="max-width: 100%; border-radius: 20px;"
-                        >
-                    </div>
-                    <hr/>
-                {% endif %}
-                <div class="col-12">
+                <div class="col-12" data-aos="fade-up" data-aos-delay="160">
                     <p>
                         {{ article.body|safe }}
                     </p>
                 </div>
-                <hr>
+                <hr data-aos="fade-up" data-aos-delay="160">
                 {% if user.is_authenticated %}
-                    <div>
+                    <div data-aos="fade-up" data-aos-delay="140">
                         <form action="{% url 'comment:post_comment' article.id %}" method="post">
                             {% csrf_token %}
                             <div class="form-group">
@@ -81,14 +82,14 @@
                     <br>
                 {% else %}
                     <br>
-                    <h5 class="row justify-content-center">
+                    <h5 class="row justify-content-center" data-aos="fade-up" data-aos-delay="140">
                         请<a href="{% url 'userprofile:login' %}">登录</a>后回复
                     </h5>
                     <br>
                 {% endif %}
                 {% load mptt_tags %}
-                <h4>共有{{ comments.count }}条评论</h4>
-                <div class="row">
+                <h4 data-aos="fade-up" data-aos-delay="160">共有{{ comments.count }}条评论</h4>
+                <div class="row" data-aos="fade-up" data-aos-delay="180">
                     <!-- 遍历树形结构 -->
                     {% recursetree comments %}
                         <!-- 给 node 取个别名 comment -->
@@ -188,40 +189,6 @@
     <link rel="stylesheet" href="{% static 'prism/prism.css' %}">
 {% endblock content %}
 {% block script %}
-    <!--二级回复-->
-    <script>
-        // 加载 modal
-        function load_modal(article_id, comment_id) {
-            let modal_body = '#modal_body_' + comment_id;
-            let modal_id = '#comment_' + comment_id;
-
-            // 加载编辑器
-            if ($(modal_body).children().length === 0) {
-                let content = '<iframe src="/comment/post_comment/' +
-                    article_id +
-                    '/' +
-                    comment_id +
-                    '"' +
-                    ' frameborder="0" style="width: 100%; height: 100%;" id="iframe_' +
-                    comment_id +
-                    '"></iframe>';
-                $(modal_body).append(content);
-            }
-            ;
-
-            $(modal_id).modal('show');
-        }
-    </script>
-
-    <!--侧边栏-->
-    <script>
-        $(".django-ckeditor-widget").removeAttr('style');
-    </script>
     <script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
-    <script type="text/javascript">
-        $('#sidebar').stickySidebar({
-            topSpacing: 20,
-            bottomSpacing: 20,
-        });
-    </script>
+    <script src="{% static 'article/detail.js' %}"></script>
 {% endblock script %}

MyBlog/templates/article/list.html

@@ -113,7 +113,7 @@
                         <!--标题-->
                         <h4 data-aos="fade-up" data-aos-delay="140">
                             <b>
-                                <a href="{% url 'article:article_detail' article.id %}" style="color: black;">
+                                <a id="post-preview" href="{% url 'article:article_detail' article.id %}">
                                     {{ article.title }}
                                 </a>
                             </b>

MyBlog/templates/header.html

@@ -79,7 +79,7 @@
                     <!-- 如果用户未登录，则显示 “登录” -->
                 {% else %}
                     <li class="nav-item">
-                        <a class="nav-link" href="{% url 'userprofile:login' %}">Login</a>
+                        <a class="nav-link" href="{% url 'account_login' %}">Login</a>
                     </li>
                     <!-- if 语句在这里结束 -->
                 {% endif %}