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

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

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文件夹,

wKioL1cQqz6Ta5KBAACJr-zH1BE521.jpg



四、编辑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等文件都是原始路径,现在需要改为自己的路径

比如:

<!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">


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

比如:

navbar-fixed-top.css

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



错误页面:一条一条排查

wKioL1cQrKOCYvtkAABlm9Gc2sg038.jpg



七、附代码:


## index.html

<!DOCTYPE html>
<!-- saved from url=(0049)http://v3.bootcss.com/examples/navbar-fixed-top/# -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <title>天天游戏论坛</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/bootstrap/css/navbar-fixed-top.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->

      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="">游戏论坛</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="{% url 'index' %}">综合讨论区</a></li>
            <li><a href="{% url 'category' 1 %}">DOTA1</a></li>
            <li><a href="{% url 'category' 2 %}">DOTA2</a></li>
            <li><a href="{% url 'category' 3 %}">LOL</a></li>
            <li><a href="{% url 'category' 4 %}">星际争霸</a></li>

          </ul>
          <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <a href="./Fixed Top Navbar Example for Bootstrap_files/Fixed Top Navbar Example for Bootstrap.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">英雄<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                      <li class="dropdown-header">角色分类:</li>
                      <li><a href="">中单</a></li>
                      <li><a href="">后期</a></li>
                      <li><a href="">辅助</a></li>
                      <li role="separator" class="divider"></li>

                  </ul>
              </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">
        {% block page-container %}
            `articles`
            {{ request.path }}
        {% endblock %}

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/bootstrap/js/jquery-2.1.4.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/static/bootstrap/js/ie10-viewport-bug-workaround.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

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

    </script>

</body></html>