最终效果:http://www.cnblogs.com/xuyiqing/p/8274912.html
urls.py配置:
"""BlogTest URL Configuration The `urlpatterns` list routes URLs to views. For more information please see: https://docs.djangoproject.com/en/2.0/topics/http/urls/ Examples: Function views 1. Add an import: from my_app import views 2. Add a URL to urlpatterns: path(‘‘, views.home, name=‘home‘) Class-based views 1. Add an import: from other_app.views import Home 2. Add a URL to urlpatterns: path(‘‘, Home.as_view(), name=‘home‘) Including another URLconf 1. Import the include() function: from django.urls import include, path 2. Add a URL to urlpatterns: path(‘blog/‘, include(‘blog.urls‘)) """ from django.contrib import admin from django.urls import path from django.conf.urls import url from web import views urlpatterns = [ path(‘admin/‘, admin.site.urls), path(‘‘, views.index), url(r‘^login/$‘, views.login), url(r‘^logout/$‘, views.logout), url(r‘^check_code/$‘, views.check_code), url(r‘^register/$‘, views.register), url(r‘^reply/(?P<username>\\w+)/(?P<nid>\\d+)$‘, views.reply), url(r‘^write/(?P<author_name>\\w+).html$‘, views.write), url(r‘^delete/(?P<article_id>\\d+)/$‘, views.delete), url(r‘^edit/(?P<author_name>\\w+)/(?P<article_id>\\d+).html‘, views.edit), url(r‘^all/(?P<article_type_id>\\d+).html$‘, views.index, name=‘index‘), url(r‘^(?P<article_type_id>\\w+)/(?P<author_name>\\w+)/(?P<nid>\\d+).html$‘, views.detail), url(r‘^delete_comment/$‘, views.delete_comment), url(r‘^good/(?P<article_id>\\d+)/(?P<user_id>\\d+)$‘, views.good), url(r‘^user_info/(?P<username>\\w+)$‘, views.user_info), url(r‘^upload-avatar/(?P<nid>\\d+)$‘, views.upload_avatar), url(r‘^article_manage/(?P<username>\\w+)‘, views.article_manage, name=‘article‘), url(r‘^comment-reply/(?P<article_id>\\d+)/(?P<comment_id>\\d+)/(?P<user_nid>\\w+)$‘, views.comment_reply), ]
以下是静态文件内容:
静态文件目录:
用到的jquery1.12、bootstrap、font-awesome可以在网上下载到,其他的给出源码:
account.css:
.login { width: 400px; margin-top: 50px; margin-left: auto; margin-right: auto; border: 1px solid #f0f0f0; padding: 10px 30px 50px 30px; -webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, .05); box-shadow: 5px 10px 10px rgba(0, 0, 0, .05); } .register { width: 400px; margin-top: 20px; margin-left: auto; margin-right: auto; border: 1px solid #f0f0f0; padding: 10px 30px 50px 30px; -webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, .05); box-shadow: 5px 10px 10px rgba(0, 0, 0, .05); } .alert{ padding: 6px; margin-bottom: 0; }
backend.css:
.pg-header { min-width: 1190px; height: 48px; background-color: #2F72AB; line-height: 48px; overflow: visible; font-size: 12px; } .pg-header a{ color: #ffffff; text-decoration: none; } .pg-header .logo { width: 200px; overflow: hidden; height: 48px; } .pg-header .logo img { width: 200px; height: 40px; margin-top: 4px; } .pg-header .left-menu{ font-size: 13px; } .pg-header .left-menu .menu-item{ display: inline-block; padding: 0 15px; cursor: pointer; position: relative; } .pg-header .left-menu .menu-item:hover { background-color: #337ab7; } .pg-header .left-menu .menu-item .more-info { display: none; position: absolute; top: 48px; left: 0; border: 1px solid rgba(0, 0, 0, .15); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); background-color: #fff; color: #333; } .pg-header .left-menu .menu-item:hover .more-info { display: block; } .pg-header .left-menu .menu-item .more-info .more-item { display: block; min-width: 120px; padding: 0 15px; line-height: 35px; text-decoration: none; color: #000000; } .pg-header .left-menu .menu-item .more-info .more-item:hover{ background-color: #f1f0f0; } .pg-header .right-menu .user-menu { padding: 0 8px; cursor: pointer; color: #ffffff; } .pg-header .right-menu .user-menu .bg-success{ background-color: #5cb85c !important; color: #ffffff; } .pg-header .right-menu .user-menu .bg-danger{ background-color: #d9534f !important; color: #ffffff; } .pg-header .right-menu .user-menu:hover { background-color: #337ab7; } .pg-header .right-menu .user-info { padding: 0 30px 0 10px; height: 48px; position: relative; } .pg-header .right-menu .user-info:hover .avatar { background-color: #337ab7; } .pg-header .right-menu .user-info .avatar { display: inline-block; padding: 0 10px; height: 48px; } .pg-header .right-menu .user-info .more-info { display: none; position: absolute; top: 48px; right: 20px; border: 1px solid rgba(0, 0, 0, .15); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); background-color: #fff; color: #333; z-index: 100; } .pg-header .right-menu .user-info:hover .more-info { display: block; } .pg-header .right-menu .user-info .more-info .more-item { display: block; min-width: 160px; padding: 0 15px; line-height: 35px; text-decoration: none; color: #000000; } .pg-header .right-menu .user-info .more-info .more-item:hover{ background-color: #f1f0f0; } .pg-body{ position: absolute; z-index: 90; top:50px; bottom: 0; right: 0; left: 0; min-width: 1190px; } .pg-body .menu{ position: absolute; top: 0; bottom: 0; left: 0; width: 200px; border: 1px solid #dddddd; } .pg-body .menu .menu-item{ display: block; padding: 8px 8px; border-bottom: 1px dashed #dddddd; text-decoration: none; } .pg-body .content{ position: absolute; top: 0; bottom: 0; right: 0; left: 205px; border: 1px solid #dddddd; overflow: scroll; }
commons.css:
img { border: 0; } .left { float: left; } .right { float: right; }
edmure.css:
.navbar { border-radius: 0; margin-bottom: 0; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .hot-recommend, .hot-comment { border-radius: 0; border: 0; margin-top: 20px; } .hot-recommend .panel-heading, .hot-comment .panel-heading { border-radius: 0; } .hot-recommend .panel-body, .hot-comment .panel-body { padding: 5px 10px; } .hot-recommend li, .hot-comment li { padding: 2px 0; } .navbar-right li a{ padding-left: 5px; padding-right: 5px; }
home.css:
.pg-header{ height: 80px; background-color: #89b1c6; position: relative; color: #ffffff; } .pg-header .title{ font-size: 30px; line-height: 60px; margin-left: 20px; } .pg-header .menu-list{ position: absolute; bottom: 0; right: 20px; } .pg-header .menu-list a{ color: #ffffff; display: inline-block; padding: 3px 5px; margin: 0 5px; background-color: #006699; } .pg-body{ min-width: 980px; position: relative; } .pg-body .body-menu{ position: absolute; left: 0; width: 280px; } .pg-body .body-content{ position: absolute; right: 0; left: 280px; overflow: scroll; } .pg-body .body-content .art-title{ font-size: 24px; font-weight: bold; border-bottom: 1px solid #dddddd; padding: 5px; } .pg-body .body-content .art-content{ font-size: 12px; } .pg-body .body-content .art-comment .comment-list { padding: 5px; } .pg-body .body-content .art-comment .comment-list .comment-item{ border-bottom: 1px solid #dddddd; } .pg-body .body-content .art-comment .comment-list .reply-title{ margin: 5px 0; } .pg-body .body-content .art-comment .comment-list .reply-title .user-info{ float: left; } .pg-body .body-content .art-comment .comment-list .reply-title .reply{ float: right; } .pg-body .body-content .summary-list{ } .pg-body .body-content .summary-list .summary-item{ border-bottom: 1px solid #dddddd;padding: 8px 0; } .pg-body .body-content .title-list .row-item{ border-bottom: 1px solid #dddddd;padding: 8px 0; }
row-avatar.css:
.article-item{ font-size: 13px; border-bottom: 1px dashed #dddddd; padding: 5px 0; } .article-item h3{ margin-top: 10px; font-size: 20px; } .article-item .avatar{ border: 1px solid #d5d5d5;margin-right: 5px; } .article-item .avatar img{ width: 70px;height: 70px;padding: 1px; } .article-item .footers{ padding: 5px 0 0 0; } .article-item .footers .ele{ margin: 0 10px; }
accordion.js:
(function($){ /* 上下固定菜单:初始化左侧菜单位置 */ function initFixedAccordion(){ var currentIndex = $(‘.fixed-accordion .accordion-item.active‘).index(); currentIndex = currentIndex == -1 ? 0:currentIndex; changeFixedAccordion(currentIndex); } /* 上下固定菜单:改变的左侧菜单 */ function changeFixedAccordion(currentIndex){ var $accordionItem = $(‘.fixed-accordion .accordion-item‘); var itemLength = $accordionItem.length; var accordionHeight = $(‘.fixed-accordion‘).outerHeight(); var headerHeight = $accordionItem.find(‘.accordion-header‘).outerHeight(); var contentHeight = accordionHeight - 3 - headerHeight * itemLength; $accordionItem.each(function(k,v){ $(this).removeAttr(‘style‘); if(currentIndex > k){ $(this).css(‘top‘, k* headerHeight); $(this).removeClass(‘active‘); }else if(currentIndex == k){ $(this).addClass(‘active‘); $(this).css(‘top‘, k* headerHeight); $(this).find(‘.accordion-content‘).css(‘height‘, contentHeight); }else{ var index = itemLength - k - 1; $(this).removeClass(‘active‘); $(this).css(‘bottom‘, index* headerHeight); } }); } /* 上下固定菜单:为菜单绑定点击事件 */ function bindFixedAccordionEvent(){ $(‘.fixed-accordion .accordion-header‘).on(‘click‘, function(){ var itemIndex = $(this).parent().index(); changeFixedAccordion(itemIndex); }) } /* 普通菜单:为菜单绑定点击事件 */ function bindEasyAccordionEvent(){ $(‘.easy-accordion .accordion-header‘).on(‘click‘, function(){ $(this).parent().addClass(‘active‘); $(this).parent().siblings().removeClass(‘active‘); }); } $.extend({ easyAccordion: function () { bindEasyAccordionEvent(); }, fixedAccordion: function () { initFixedAccordion(); bindFixedAccordionEvent(); } }) })(jQuery);
timg.py是网页背景图片
imgs文件夹内是用户头像以及默认用户头像