集成评论模板

Author: yangxueguang

blog/context_processors.py

@@ -6,8 +6,9 @@ def sidebar(request):
     category_list = Category.objects.filter(article__status='p').annotate(num_articles=Count('article')).filter(
             num_articles__gt=0)
     recent_articles = Article.objects.filter(status='p')[:5]
-
+    dates = Article.objects.datetimes('created_time', 'month', order='DESC')
     return {
         'category_list': category_list,
         'recent_articles': recent_articles,
+        'dates': dates,
     }

blog/static/blog/css/comment.css

@@ -0,0 +1,98 @@
+#comment-form {
+    margin: 50px 0 60px 0;
+    padding: 0 30px;
+}
+
+#comment-form textarea {
+    width: 100%;
+    height: 120px;
+    font-size: 15px;
+    margin-bottom: 10px;
+}
+
+#comment-form input {
+    background-color: #5bbf5a;
+    border: none;
+    padding: 5px 20px;
+    color: #fff;
+    float: right;
+}
+
+.comment-panel {
+    margin: 0 0 30px 70px;
+    padding: 0 30px;
+    font-size: 14px;
+    position: relative;
+}
+
+.comment-panel img {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin-left: -70px;
+    float: left;
+
+}
+
+.comment-panel .comment-content {
+    margin: 20px 0;
+    font-size: 1em;
+}
+
+.comment-panel a {
+    text-decoration: none;
+}
+
+.comment-panel i {
+    margin-right: 20px;
+    text-decoration: none;
+}
+
+.comment-panel time {
+    float: right;
+}
+
+.inner-panel {
+    margin: 30px 0 30px 60px;
+    display: none;
+}
+
+.inner-panel img {
+    height: 50px;
+    width: 50px;
+    margin-left: -60px;
+
+}
+
+.inner-panel a {
+    float: right;
+}
+
+.comment-panel form {
+    margin: 20px 0 60px 0;
+    display: none;
+}
+
+.comment-panel textarea {
+    height: 32px;
+    width: 100%;
+    font-size: 16px;
+    margin-bottom: 15px;
+}
+
+.comment-panel input[type='submit'] {
+    background-color: #5bbf5a;
+    border: none;
+    padding: 5px 20px;
+    color: #fff;
+    float: right;
+}
+
+.comment-panel input[type='button'] {
+    background-color: #ccc;
+    border: none;
+    padding: 5px 20px;
+    color: #fff;
+    float: right;
+    margin-left: 10px;
+}