【python项目实战】BBS论坛（2）页面初始设计

一、下载一个页面模板（当然也可以自己写）

找到如下页面，然后右键——另存为，全部保存

http://v3.bootcss.com/examples/navbar-fixed-top/#

下载下来的文件就是初步模板

二、编辑settings.py

1、加入 静态页面路径，并在项目目录里面新建statics文件夹

STATICFILES_DIRS = (
    "%s/%s" %(BASE_DIR, "statics"),
)

2、 加入DIRS，默认生成的是空 DIRS，启动服务后，会报异常

Exception Type: TemplateDoesNotExist

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

三，下载css、js模板

http://www.bootcss.com/，使用 Bootstrap v3.3.5，简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

下载jquery 2.1.4

http://www.jq22.com/jquery-info122  （jquery下载所有版本（实时更新））

把下载好的文件放入statics文件夹，

四、编辑urls.py

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', views.index, name="index" ),

]

五、编辑views.py

def index(request):

    articles = models.Article.objects.all()
    return render(request,'index.html',{'articles':articles})

六、run project，访问127.0.0.1:8000

    正常情况下页面可以访问，但是页面格式失效，在浏览器中按F12，打开调试——console

runnerw.exe C:\Python27\python.exe C:/pyfile/pyproject/s11bbs/manage.py runserver 8000
Performing system checks...

System check identified no issues (0 silenced).
April 15, 2016 - 16:50:48
Django version 1.9.5, using settings 's11bbs.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

可以看到是那些css，js文件路径问题，因为下载的模板html文件里面引用的css、js等文件都是原始路径，现在需要改为自己的路径

比如：

有的文件没有的话，需要去原始页面下载

比如：

navbar-fixed-top.css

body {
  min-height: 2000px;
  padding-top: 70px;
}

错误页面：一条一条排查

七、附代码：

## index.html

    
    
    
    
    
    
    

    

    
    

    
    

    

      
      
    
  

  

    
    
      
        
          
            Toggle navigation
            
            
            
          
          游戏论坛
        

                                

综合讨论区

            

DOTA1

            

DOTA2

            

LOL

            

星际争霸

                                                       英雄                                          角色分类：                       

中单

                      

后期

                      

辅助

                                                                            

      

                  {% block page-container %}             `articles`             {{ request.path }}         {% endblock %}     

                                             $(document).ready(function(){             var menus = $("#navbar a[href='{{ request.path }}']")[0];             $(menus).parent().addClass("active");             $(menus).parent().siblings().removeClass("active");             console.log(menus);         })