您的位置: 首页  >  文章  >  Django cms 教程三：创建模板

Django cms 教程三：创建模板

分类: 文章 • 2025-03-14 07:57:39

一、下载模板文件

我们直接用Bootstrap里面的Clean Blog模板作为我们网站的模板。进入https://startbootstrap.com/template-overviews/clean-blog/这个页面，可以看到Clean Blog模板的效果，点击图中的“Download”链接下载。

Django cms 教程三：创建模板

小提示：

进入https://startbootstrap.com/template-categories/all/页面，可以查看更多的Bootstrap模板。

二、复制模板文件

将下载的文件解压缩，然后选择其中的下面这个文件夹，复制。

Django cms 教程三：创建模板

将上面4个文件夹粘贴到你的网站项目的static文件夹下面。如果提示文件已经存在，直接覆盖即可。

Django cms 教程三：创建模板

三、修改base.html

1、复制base.html

base.html是django CMS网站的基本模板文件，它定义了网站的基本结构，其他模板文件都是从它继承而来，在我们新建的网站项目mysite的templates文件夹下面已经有一个base.html。

从我们之前下载的Clean Blog模板中，选择about.html，并复制，然后粘贴到我们网站项目的templates文件夹下面，然后删除templates文件夹下面的base.html文件，将about.html文件改名为base.html文件。

Django cms 教程三：创建模板

 

Django cms 教程三：创建模板

2、修改CSS地址

打开base.html文件，在最开头部分添加以下代码：

1 {% load staticfiles i18n cms_tags sekizai_tags menu_tags %}

将以下代码：

1 <!-- Bootstrap Core CSS -->   
2 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
3  
4 <!-- Theme CSS -->   
5 <link href="css/clean-blog.min.css" rel="stylesheet">  
6  
7 <!-- Custom Fonts -->  
8 <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

改成如下的形式：

1 <!-- Bootstrap Core CSS -->  
2 <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">  
3  
4 <!-- Theme CSS -->  
5 <link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet">
6  
7 <!-- Custom Fonts -->  
8 <link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">

3、修改顶部图片
相应的代码为：

1 <!-- Page Header -->
2 <!-- Set your background image for this header on the line below. -->
3  
4  
5  
6 <header class="intro-header" style="background-image: url('img/about-bg.jpg')">

改成如下的形式：

1 <!-- Page Header -->
2 <!-- Set your background image for this header on the line below. -->
3  
4  
5  
6 <header class="intro-header" style="background-image: url({% static 'img/about-bg.jpg' %})">

4、修改Javascript
将原来的代码：

1 </footer>
2  
3  
4  
5  
6 <!-- jQuery -->
7 <script src="vendor/jquery/jquery.min.js"></script>
8  
9 <!-- Bootstrap Core JavaScript -->
10 <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
11  
12 <!-- Contact Form JavaScript -->
13 <script src="js/jqBootstrapValidation.js"></script>
14 <script src="js/contact_me.js"></script>
15  
16 <!-- Theme JavaScript -->
17 <script src="js/clean-blog.min.js"></script>

修改成：

1 </footer>
2  
3  
4  
5  
6 <!-- jQuery -->
7 <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
8  
9 <!-- Bootstrap Core JavaScript -->
10 <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
11  
12 <!-- Contact Form JavaScript -->
13 <script src="{% static 'js/jqBootstrapValidation.js' %}"></script>
14 <script src="{% static 'js/contact_me.js' %}"></script>
15  
16 <!-- Theme JavaScript -->
17 <script src="{% static 'js/clean-blog.min.js' %}"></script>

保存之后，退出。

四、查看效果
启动web服务器，在浏览器中输入http://localhost:8000/，就可以看到效果。
Django cms 教程三：创建模板

五、添加django CMS工具栏

我们创建自己的模板时，用Clean Blog模板中about.html文件的内容替换了系统中的base.html文件的内容，从上图我们可以看到，django CMS的工具栏不见了。

要将django CMS工具栏添加到你的模板十分简单，只需要将下面几个tags添加到模板中即可。

1 {% cms_toolbar %}
2 Loads the toolbar itself
3  
4 {% render_block "css" %}
5 Loads necessary CSS files for django CMS and its addons
6  
7 {% render_block "js" %}
8 Loads necessary Javascript files for django CMS and its addons

它们的添加位置如下：

1 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
2 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
3 <!--[if lt IE 9]>
4     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
5     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
6 <![endif]-->
7  
8 <!-- django CMS -->
9 {% render_block "css" %}
1 <body>
2     <!-- django CMS Toolbar -->
3     {% cms_toolbar %}
4  
5     <!-- Navigation -->
6  
7  
8 <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
9 ...
1 <!-- Theme JavaScript -->
2 <script src="{% static 'js/clean-blog.min.js' %}"></script>
3  
4 <!-- django CMS -->
5 {% render_block "js" %}
6 </body>

添加完成之后，我们发现工具栏又出现了。

Django cms 教程三：创建模板

顺便说一下，系统原来的base.html是这样的：

查看源代码

打印帮助

1 {% load cms_tags menu_tags sekizai_tags %}
2 <!doctype html>
3 <html>
4     <head>
5         <title>{% block title %}This is my new project home page{% endblock title %}</title>
6         <meta name="viewport" content="width=device-width,initial-scale=1">
7         <style type="text/css">
8             .nav {
9                 padding-left: 0;
10             }
11             .nav li {
12                 display: inline;
13                 list-style-type: none;
14                 padding-right: 20px;
15             }
16             .container {
17                 width: 940px;
18                 margin: 0 auto
19             }
20             .content {
21                 float: left;
22                 width: 80%;
23             }
24             .sidebar {
25                 float: left;
26                 width: 20%;
27             }
28         </style>
29         {% render_block "css" %}
30     </head>
31     <body>
32         {% cms_toolbar %}
33         <div class="container">
34             <ul class="nav">
35                 {% show_menu 0 100 100 100 %}
36             </ul>
37             {% block content %}{% endblock content %}
38         </div>
39         {% render_block "js" %}
40     </body>
41 </html>

Django cms 教程

相关推荐