Django cms 教程三：创建模板

最新推荐文章于 2024-05-23 10:03:18 发布
最新推荐文章于 2024-05-23 10:03:18 发布
阅读量1k 收藏 3
点赞数
原文链接：http://www.snailtoday.com/archives/7679
版权

一、下载模板文件

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

Snap18327

小提示：

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

二、复制模板文件

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

Snap18328

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

Snap18329

三、修改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文件。

Snap18330

 

Snap18331

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/，就可以看到效果。
Snap18332

五、添加django CMS工具栏

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

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

1{% cms_toolbar %}
2Loads the toolbar itself
3 
4{% render_block "css" %}
5Loads necessary CSS files for django CMS and its addons
6 
7{% render_block "js" %}
8Loads 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>

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

Snap18340

顺便说一下，系统原来的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 教程

UFOUFO777
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django CMS教程一：安装
DaGeger的博客
12-20 2256
Django-cms并不是一个开箱即用的产品，在网上根本找不到模板或者主题，官方文档也是英文所写，对于新手快速上手有一定困难度，本教程是总结开发时候的经验，提供一个平滑的学习教程。
python开发cms 教程_django CMS 入门教程
weixin_32463071的博客
12-24 877
这份手册假设你的机器已经达到本文档的要求。1.1 获取帮助当你遇到问题并且不能独自解决的时候，你可以从邮件列表中获得帮助或者在irc.freenode.net网络的IRC频道#django-cms获得帮助。1.2 配置和安装1.2.1 准备环境收集需要的配置是一个好的开始，但是我们现在用一个实际的Django CMS项目并且配置它。1.2.1.1 启动你的Django项目下面假设你的项目在~/wo...
Django CMS介绍(转载)
微电子学与固体电子学-俞驰
02-05 746
CMS 的意思是 Content Management System 内容管理系统，一般拿就可以使用，不会编程也能做出网站来，还可以在原来的基础上再次开发，减少工作量，这里列举了一些出名的 CMS: Opps- A content management platform built for large portals. django-cms- The easy-to-use a...
**基于Django的高效CMS——django-cms**
gitblog_00014的博客
05-23 409
基于Django的高效CMS——django-cms 项目地址:https://gitcode.com/tuner24/django-cms 1、项目介绍 django-cms 是一个使用Django框架构建的全功能内容管理系统（CMS）。它旨在为开发者和非技术人员提供一种直观且强大的方式来创建和管理网站内容。受到BootStrap模板启发，项目的前端设计简洁而现代，提供了优良的用户体验。 2、项...
Docker部署开源项目Django-CMS企业内容管理系统
jks212454的博客
06-10 4383
Docker部署开源项目Django-CMS企业内容管理系统
django CMS 入门教程
weixin_33979745的博客
03-23 453
2019独角兽企业重金招聘Python工程师标准>>> ...
Django开发企业网站实战之模板套用
s586的专栏
03-13 1159
python,Django,企业官网开发
Django CMS 创建自定义插件
weixin_30474613的博客
03-07 271
前言 CMS插件是一个可重复使用内容发布者，它能够嵌入到django CMS页面上，或者利用django CMS placeholder嵌入到任意内容。它们不需要进一步的干预就能够自动的发布信息。这就意味着，当你发布网页内容时，不管是什么内容，总能保持最新。 它就像一个魔术，但是更快。 如果你的需求在内嵌的或者第三方的插件里都实现了，那么你很幸运，否则的话，你需要去实现自己的CM...
django html 模板语言,Django 模板语言 for循环
weixin_40002224的博客
06-01 1150
Django 模板语言 for 循环****** for 循环字典 **********USER_DICT = {'k1':'root1','k2':'root2','k3':'root3',}# 模板语言循环字典key值 后跟“.keys”不加()。{% for row in user_dict.keys %}{{ row }}{% endfor %}# 模板语言循环字典value值 后跟“...
Django的模板继承与模板导入
低调说
08-07 278
模板继承主要是为了提高代码重用，减轻开发人员的工作量。 典型应用：网站的头部、尾部信息。 1、定义一个基础模板，也称为母板，这个页面存放整个网站共用的内容 templates/base.html 2、在子模板继承这个母版 {% extends ‘base.html’ %} 3、在基础模板预留子模板差异化内容 {% block 名称 %} 预留区域 {% endblock %} 4、在子模板里同样语法引用并填充预留区域内容 模板导入：导入一个模板（一般是某个网页功能）到当前模板 将一个功能创建为模板： #
djangocms-video:django CMS Video是django CMS的一组插件，可让您在网站上发布视频内容
05-15
django CMS视频 Django的CMS视频是一组插件的 ，让你发布在网站上的视频内容（默认情况下使用HTML5播放器，但如果... 安装对于手动安装： 运行pip install djangocms-video 将djangocms_video添加到您的INSTALLED_AP
django-loose-cms:基于django框架的开源CMS
04-30
Django宽松CMS Django Loose CMS是基于django框架的简单cms。 特征 分层页面 模板页面 SEO友好的URL 建立引导网格 编辑插件的样式表（没有全部功能） 具有自定义模型字段的文件管理器 要求 宽松的CMS需要： ...
django-arctic：Django Arctic是一个框架，可简化自定义内容管理系统的创建
02-04
表单具有用于DateTime，AutoComplete和MultiSelect的增强的小部件，还支持自定义布局，而无需创建额外的模板。 为什么 市场上有很多内容管理系统非常适合创建许多网站。 大多数CMS都会对帖子，身份验证和管理界面的...
mezzanine:Django的CMS框架
04-30
除了Django提供的常规功能（例如MVC架构，ORM，模板，缓存和自动管理界面）之外，Mezzanine还提供以下功能： 分层页面导航 另存为草稿并在现场预览 预定发布 拖放页面排序 所见即所得编辑 内联页面编辑 具有CSV导出...
tarot_juicer：随机塔罗牌生成器+基本Django CMS
02-14
DJANGO应用程式以下是我创建的Django应用及其用途： 生成器：当Web用户单击“随机”按钮时，它会任意提供22个塔罗牌键之一。 每个塔罗牌页面包括： 塔罗牌钥匙图片密钥名称占星属性炼金术属性智力希伯来字母字母含义...
GoDaddy微型企业密度预测数据集
06-22
在这次比赛中，你的挑战是预测美国各县的微型企业活动，衡量标准是微型企业的密度。微型企业通常规模太小或太新，无法在传统的经济数据来源中出现，但微型企业活动可能与其他经济指标相关。 由于历史经济数据广泛可用，这是一个预测比赛。预测阶段的公共排行榜和最终的私人排行榜将使用提交期结束后收集的数据来确定。你将做出静态预测，只能包含提交期结束前可用的信息。 文件 关于各县的大量数据是公开可用的，我们没有尝试在这里收集全部数据。强烈鼓励你使用外部数据源来获取特征。 train.csv row_id - 行的ID代码。 cfips - 使用联邦信息处理系统的每个县的唯一标识符。前两位对应州FIPS代码，后面三位代表县。 county_name - 县的名称。 state_name - 州的名称。 first_day_of_month - 每月的第一天日期。 microbusiness_density - 给定县中每100个18岁以上的人中微型企业的数量。这是目标变量。用于计算密度的人口数据由于美国人口普查局提供的更新速度而有两年的
深入探索 Fortran 的等价语句：内存共享的艺术与实践
最新发布
06-22
Fortran（全称为 "Formula Translation"，意为“公式翻译”）是一种高级编程语言，于1957年由IBM的约翰·巴克斯（John Backus）领导的一个团队开发。它是最早的高级编程语言之一，至今仍被广泛使用，特别是在科学计算、数值分析、工程应用和高性能计算领域。 ### Fortran 的主要特点： 1. **历史性**：Fortran 是最早的高级编程语言之一，对后来的编程语言产生了深远的影响。 2. **科学计算**：Fortran 设计之初就是为了简化科学和工程计算的编程工作。 3. **数值计算能力**：Fortran 在数值计算方面表现出色，拥有优化的编译器和广泛的数学函数库。 4. **数组操作**：Fortran 提供了强大的数组操作能力，支持多维数组和数组内元素的批量操作。 5. **编译型语言**：Fortran 是一种编译型语言，这意味着代码在执行前需要被编译成机器语言。 6. **并行计算**：Fortran 支持多种并行编程模型，包括OpenMP和MPI，适合进行大规模并行计算。
ZFS Automatic Snapshot Service for Linux.zip
06-22
Linux是一套免费使用和自由传播的类Unix操作系统，由林纳斯·托瓦兹于1991年首次发布。 Linux不仅是一个强大的操作系统，也是一个庞大的技术生态系统，涵盖了从服务器到个人电脑的各种应用场景。同时，它的开源特性和广泛的社区支持使其成为技术发展的重要推动力。在了解Linux的过程中，人们不仅能够看到其强大的技术基础和广泛的应用领域，还能体会到它作为开源先锋在全球科技发展中的重要地位。
django mysql orm教程_Django2.0入门教程:ORM增删改操作
05-28
首先，要使用 ORM，您需要在您的 Django 项目中创建一个模型。模型是一个 Python 类，它代表了数据库中的一个表。 例如，这是一个简单的模型类，它代表了一个名为 `Book` 的表： ``` from django.db import models...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值